MM-35677 Detox/E2E: Add e2e for channel link and scrolling (#5465)

* Detox/E2E: Add e2e for channel link and scrolling

* Update detox/e2e/test/messaging/channel_link.e2e.js

* Update detox/e2e/test/messaging/channel_link.e2e.js

* Update detox/e2e/test/messaging/channel_link.e2e.js

* Update detox/e2e/test/messaging/channel_link.e2e.js

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>

app/components/post_list/post/header/commented_on/index.tsx

@@ -41,6 +41,7 @@ const HeaderCommentedOn = ({name, theme}: HeaderCommentedOnProps) => {
                 apostrophe,
             }}
             style={style.commentedOn}
+            testId='post_header.commented_on'
         />
     );
 };

detox/e2e/support/ui/component/post.js

@@ -10,6 +10,7 @@ class Post {
         emoji: 'markdown_emoji',
         image: 'markdown_image',
         message: 'markdown_text',
+        postHeaderCommentedOn: 'post_header.commented_on',
         postHeaderDateTime: 'post_header.date_time',
         postHeaderDisplayName: 'post_header.display_name',
         postHeaderGuestTag: 'post_header.guest_tag',
@@ -54,6 +55,7 @@ class Post {
     }
 
     getPostHeader = (postItemMatcher) => {
+        const postItemHeaderCommentedOnMatcher = by.id(this.testID.postHeaderCommentedOn).withAncestor(postItemMatcher);
         const postItemHeaderDateTimeMatcher = by.id(this.testID.postHeaderDateTime).withAncestor(postItemMatcher);
         const postItemHeaderDisplayNameMatcher = by.id(this.testID.postHeaderDisplayName).withAncestor(postItemMatcher);
         const postItemHeaderGuestTagMatcher = by.id(this.testID.postHeaderGuestTag).withAncestor(postItemMatcher);
@@ -61,6 +63,7 @@ class Post {
         const postItemHeaderReplyCountMatcher = by.id(this.testID.postHeaderReplyCount).withAncestor(postItemMatcher);
 
         return {
+            postItemHeaderCommentedOn: element(postItemHeaderCommentedOnMatcher),
             postItemHeaderDateTime: element(postItemHeaderDateTimeMatcher),
             postItemHeaderDisplayName: element(postItemHeaderDisplayNameMatcher),
             postItemHeaderGuestTag: element(postItemHeaderGuestTagMatcher),

detox/e2e/support/ui/component/post_list.js

@@ -25,6 +25,7 @@ class PostList {
             postItem,
             postItemBlockQuote,
             postItemEmoji,
+            postItemHeaderCommentedOn,
             postItemHeaderDateTime,
             postItemHeaderDisplayName,
             postItemHeaderGuestTag,
@@ -46,6 +47,7 @@ class PostList {
             postListPostItem: postItem,
             postListPostItemBlockQuote: postItemBlockQuote,
             postListPostItemEmoji: postItemEmoji,
+            postListPostItemHeaderCommentedOn: postItemHeaderCommentedOn,
             postListPostItemHeaderDateTime: postItemHeaderDateTime,
             postListPostItemHeaderDisplayName: postItemHeaderDisplayName,
             postListPostItemHeaderGuestTag: postItemHeaderGuestTag,

detox/e2e/test/messaging/channel_link.e2e.js

@@ -0,0 +1,74 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// *******************************************************************
+// - [#] indicates a test step (e.g. # Go to a screen)
+// - [*] indicates an assertion (e.g. * Check the title)
+// - Use element testID when selecting an element. Create one if none.
+// *******************************************************************
+
+import {ChannelScreen} from '@support/ui/screen';
+import {
+    Channel,
+    Post,
+    Setup,
+} from '@support/server_api';
+import testConfig from '@support/test_config';
+import {timeouts, wait} from '@support/utils';
+
+describe('Channel Link', () => {
+    const {
+        channelNavBarTitle,
+        goToChannel,
+        openReplyThreadFor,
+        postMessage,
+    } = ChannelScreen;
+    let testChannel;
+    let testTeam;
+    let townSquareChannel;
+
+    beforeAll(async () => {
+        const {user, team, channel} = await Setup.apiInit();
+        testChannel = channel;
+        testTeam = team;
+
+        ({channel: townSquareChannel} = await Channel.apiGetChannelByName(team.id, 'town-square'));
+
+        // # Open channel screen
+        await ChannelScreen.open(user);
+    });
+
+    afterAll(async () => {
+        await ChannelScreen.logout();
+    });
+
+    it('MM-T2970 should be able to open channel by tapping on channel link from main channel', async () => {
+        // # Post a channel link
+        await goToChannel(townSquareChannel.display_name);
+        const channelLink = `${testConfig.siteUrl}/${testTeam.name}/channels/${testChannel.name}`;
+        await postMessage(channelLink);
+
+        // # Tap on the channel link
+        await element(by.text(channelLink)).tap({x: 5, y: 10});
+        await wait(timeouts.ONE_SEC);
+
+        // * Verify redirected to test channel
+        await expect(channelNavBarTitle).toHaveText(testChannel.display_name);
+    });
+
+    xit('MM-T178 should be able to open channel by tapping on channel link from reply thread', async () => { // related issue https://mattermost.atlassian.net/browse/MM-36532
+        // # Post a channel link
+        await goToChannel(townSquareChannel.display_name);
+        const channelLink = `${testConfig.siteUrl}/${testTeam.name}/channels/${testChannel.name}`;
+        await postMessage(channelLink);
+
+        // # Tap on the channel link from reply thread
+        const {post} = await Post.apiGetLastPostInChannel(townSquareChannel.id);
+        await openReplyThreadFor(post.id, channelLink);
+        await element(by.text(channelLink)).tap({x: 5, y: 10});
+        await wait(timeouts.ONE_SEC);
+
+        // * Verify redirected to test channel
+        await expect(channelNavBarTitle).toHaveText(testChannel.display_name);
+    });
+});

detox/e2e/test/messaging/scrolling.e2e.js

@@ -0,0 +1,50 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// *******************************************************************
+// - [#] indicates a test step (e.g. # Go to a screen)
+// - [*] indicates an assertion (e.g. * Check the title)
+// - Use element testID when selecting an element. Create one if none.
+// *******************************************************************
+
+import {ChannelScreen} from '@support/ui/screen';
+import {
+    Channel,
+    Post,
+    Setup,
+} from '@support/server_api';
+
+describe('Scrolling', () => {
+    let townSquareChannel;
+
+    beforeAll(async () => {
+        const {team, user} = await Setup.apiInit();
+
+        ({channel: townSquareChannel} = await Channel.apiGetChannelByName(team.id, 'town-square'));
+
+        // # Open channel screen
+        await ChannelScreen.open(user);
+    });
+
+    afterAll(async () => {
+        await ChannelScreen.logout();
+    });
+
+    it('MM-T3147 should scroll to bottom when new messages is received while post input is focused', async () => {
+        // # Post a message as sysadmin
+        const testMessage = Date.now().toString();
+        await Post.apiCreatePost({
+            channelId: townSquareChannel.id,
+            message: testMessage,
+        });
+
+        // * Verify message is visible
+        await expect(element(by.text(testMessage))).toBeVisible();
+
+        // # Tap on post input to focus and bring up keyboard
+        await ChannelScreen.postInput.tap();
+
+        // * Verify message is still visible
+        await expect(element(by.text(testMessage))).toBeVisible();
+    });
+});