MM-30698 Detox/E2E: Add e2e for MM-T3191 (#5137)

* MM-30698 Detox/E2E: Add e2e for MM-T3191

* Fixed comment

app/screens/channel_info/channel_info_row.js

@@ -52,8 +52,10 @@ function channelInfoRow(props) {
 
     let actionElement = null;
     if (togglable) {
+        const switchTestID = `${testID}.switch.${detail}`;
         actionElement = (
             <Switch
+                testID={switchTestID}
                 onValueChange={action}
                 value={detail}
             />

detox/e2e/support/ui/screen/channel_info.js

@@ -10,8 +10,14 @@ class ChannelInfoScreen {
         closeChannelInfoButton: 'close.channel_info.button',
         channelIconGMMemberCount: 'channel_icon.gm_member_count',
         favoritePreferenceAction: 'channel_info.favorite.action',
+        favoriteSwitchFalse: 'channel_info.favorite.action.switch.false',
+        favoriteSwitchTrue: 'channel_info.favorite.action.switch.true',
         mutePreferenceAction: 'channel_info.mute.action',
+        muteSwitchFalse: 'channel_info.mute.action.switch.false',
+        muteSwitchTrue: 'channel_info.mute.action.switch.true',
         ignoreMentionsPreferenceAction: 'channel_info.ignore_mentions.action',
+        ignoreMentionsSwitchFalse: 'channel_info.ignore_mentions.switch.false',
+        ignoreMentionsSwitchTrue: 'channel_info.ignore_mentions.switch.true',
         notificationPreferenceAction: 'channel_info.notification_preference.action',
         pinnedMessagesAction: 'channel_info.pinned_messages.action',
         manageMembersAction: 'channel_info.manage_members.action',
@@ -24,8 +30,14 @@ class ChannelInfoScreen {
     closeChannelInfoButton = element(by.id(this.testID.closeChannelInfoButton));
     channelIconGMMemberCount = element(by.id(this.testID.channelIconGMMemberCount));
     favoritePreferenceAction = element(by.id(this.testID.favoritePreferenceAction));
+    favoriteSwitchFalse = element(by.id(this.testID.favoriteSwitchFalse));
+    favoriteSwitchTrue = element(by.id(this.testID.favoriteSwitchTrue));
     mutePreferenceAction = element(by.id(this.testID.mutePreferenceAction));
+    muteSwitchFalse = element(by.id(this.testID.muteSwitchFalse));
+    muteSwitchTrue = element(by.id(this.testID.muteSwitchTrue));
     ignoreMentionsPreferenceAction = element(by.id(this.testID.ignoreMentionsPreferenceAction));
+    ignoreMentionsSwitchTrue = element(by.id(this.testID.ignoreMentionsSwitchTrue));
+    muteSwitchTrue = element(by.id(this.testID.muteSwitchTrue));
     notificationPreferenceAction = element(by.id(this.testID.notificationPreferenceAction));
     pinnedMessagesAction = element(by.id(this.testID.pinnedMessagesAction));
     manageMembersAction = element(by.id(this.testID.manageMembersAction));

detox/e2e/test/smoke_test/favorite_channels.e2e.js

@@ -0,0 +1,71 @@
+// 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 {MainSidebar} from '@support/ui/component';
+import {
+    ChannelInfoScreen,
+    ChannelScreen,
+} from '@support/ui/screen';
+import {Setup} from '@support/server_api';
+
+describe('Favorite Channels', () => {
+    let testChannel;
+
+    beforeAll(async () => {
+        const {channel, user} = await Setup.apiInit();
+        testChannel = channel;
+
+        // # Open channel screen
+        await ChannelScreen.open(user);
+    });
+
+    afterAll(async () => {
+        await ChannelScreen.logout();
+    });
+
+    it('MM-T3191 should be able to favorite a channel', async () => {
+        const {
+            closeMainSidebar,
+            openMainSidebar,
+        } = ChannelScreen;
+        const {
+            favoriteSwitchFalse,
+            favoriteSwitchTrue,
+        } = ChannelInfoScreen;
+        const {
+            getChannelByDisplayName,
+            hasChannelDisplayNameAtIndex,
+        } = MainSidebar;
+
+        // # Open channel info screen
+        await openMainSidebar();
+        await getChannelByDisplayName(testChannel.display_name).tap();
+        await ChannelInfoScreen.open();
+
+        // * Verify favorite switch is toggled off
+        await expect(favoriteSwitchFalse).toBeVisible();
+        await expect(favoriteSwitchTrue).not.toBeVisible();
+
+        // # Toggle on favorite switch
+        await favoriteSwitchFalse.tap();
+
+        // * Verify favorite switch is toggled on
+        await expect(favoriteSwitchTrue).toBeVisible();
+        await expect(favoriteSwitchFalse).not.toBeVisible();
+
+        // * Verify channel appears in favorite channels list
+        await ChannelInfoScreen.close();
+        await openMainSidebar();
+        await expect(element(by.text('FAVORITE CHANNELS'))).toBeVisible();
+        await hasChannelDisplayNameAtIndex(0, testChannel.display_name);
+
+        // # Close main sidebar
+        await closeMainSidebar();
+    });
+});