Detox/E2E: Create Channel and Channel Post List e2e in Gekidou

mattermost · Apr 12, 2022 · 2e2f49f · 2e2f49f
1 parent 9feb344
commit 2e2f49f
Show file tree

Hide file tree

Showing 54 changed files with 1,154 additions and 35 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,7 +6,6 @@ server.PID
 mattermost.keystore
 tmp/
 .env
-env.d.ts
 
 */**/compass-icons.ttf
 

diff --git a/app/components/post_draft/send_action/index.tsx b/app/components/post_draft/send_action/index.tsx
@@ -41,7 +41,7 @@ function SendButton({
     sendMessage,
 }: Props) {
     const theme = useTheme();
-    const sendButtonTestID = `${testID}.send.button`;
+    const sendButtonTestID = disabled ? `${testID}.send.button.disabled` : `${testID}.send.button`;
     const style = getStyleSheet(theme);
 
     const viewStyle = useMemo(() => {

diff --git a/app/components/post_list/index.tsx b/app/components/post_list/index.tsx
@@ -363,7 +363,7 @@ const PostList = ({
                     scrollEventThrottle={60}
                     style={styles.flex}
                     viewabilityConfig={VIEWABILITY_CONFIG}
-                    testID={testID}
+                    testID={`${testID}.flat_list`}
                 />
             </PostListRefreshControl>
             {showMoreMessages &&

diff --git a/app/components/section_item/index.tsx b/app/components/section_item/index.tsx
@@ -93,6 +93,7 @@ const SectionItem = ({testID = 'sectionItem', action, actionType, actionValue, l
             <Switch
                 onValueChange={action}
                 value={selected}
+                testID={`${testID}.toggled.${selected}`}
             />
         );
     } else if (actionType === ActionTypes.ARROW) {

diff --git a/app/components/team_sidebar/add_team/add_team_slide_up.tsx b/app/components/team_sidebar/add_team/add_team_slide_up.tsx
@@ -32,6 +32,7 @@ export default function AddTeamSlideUp({otherTeams, canCreateTeams, showTitle =
             onPress={onPressCreate}
             showButton={canCreateTeams}
             showTitle={showTitle}
+            testID='add_team_slide_up'
             title={intl.formatMessage({id: 'mobile.add_team.join_team', defaultMessage: 'Join Another Team'})}
         >
             <TeamList teams={otherTeams}/>

diff --git a/app/init/launch.ts b/app/init/launch.ts
@@ -1,8 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {RUNNING_E2E} from '@env';
 import Emm from '@mattermost/react-native-emm';
-import {Alert, Linking, Platform} from 'react-native';
+import {Alert, Linking, LogBox, Platform} from 'react-native';
 import {Notifications} from 'react-native-notifications';
 
 import {appEntry, pushNotificationEntry, upgradeEntry} from '@actions/remote/entry';
@@ -219,3 +220,9 @@ export const getLaunchPropsFromNotification = async (notification: NotificationW
 
     return launchProps;
 };
+
+// Ignore all notifications if running e2e
+const isRunningE2e = RUNNING_E2E === 'true';
+// eslint-disable-next-line no-console
+console.log(`RUNNING_E2E: ${RUNNING_E2E}, isRunningE2e: ${isRunningE2e}`);
+LogBox.ignoreAllLogs(isRunningE2e);
diff --git a/app/screens/bottom_sheet/index.tsx b/app/screens/bottom_sheet/index.tsx
@@ -23,9 +23,10 @@ type SlideUpPanelProps = {
     initialSnapIndex?: number;
     renderContent: () => ReactNode;
     snapPoints?: Array<string | number>;
+    testID?: string;
 }
 
-const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderContent, snapPoints = ['90%', '50%', 50]}: SlideUpPanelProps) => {
+const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderContent, snapPoints = ['90%', '50%', 50], testID}: SlideUpPanelProps) => {
     const sheetRef = useRef<RNBottomSheet>(null);
     const dimensions = useWindowDimensions();
     const isTablet = useIsTablet();
@@ -121,6 +122,7 @@ const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderCo
                 width: isTablet ? '100%' : Math.min(dimensions.width, 450),
                 alignSelf: 'center',
             }}
+            testID={`${testID}.screen`}
         >
             {renderContent()}
         </View>

diff --git a/app/screens/browse_channels/dropdown_slideup.tsx b/app/screens/browse_channels/dropdown_slideup.tsx
@@ -66,6 +66,7 @@ export default function DropdownSlideup({
         <BottomSheetContent
             showButton={false}
             showTitle={!isTablet}
+            testID='dropdown_slideup'
             title={intl.formatMessage({id: 'browse_channels.dropdownTitle', defaultMessage: 'Show'})}
         >
             <SlideUpPanelItem

diff --git a/app/screens/channel/channel.tsx b/app/screens/channel/channel.tsx
@@ -144,6 +144,7 @@ const Channel = ({channelId, componentId, displayName, isOwnDirectMessage, membe
                         keyboardTracker={postDraftRef}
                         scrollViewNativeID={channelId}
                         accessoriesContainerID={ACCESSORIES_CONTAINER_NATIVE_ID}
+                        testID='channel.post_draft'
                     />
                 </>
                 }

diff --git a/app/screens/create_or_edit_channel/channel_info_form.tsx b/app/screens/create_or_edit_channel/channel_info_form.tsx
@@ -224,9 +224,10 @@ export default function ChannelInfoForm({
         <SafeAreaView
             edges={['bottom', 'left', 'right']}
             style={styles.container}
+            testID='create_or_edit_channel.screen'
         >
             <KeyboardAwareScrollView
-                testID={'edit_channel_info.scrollview'}
+                testID={'create_or_edit_channel.scrollview'}
 
                 // @ts-expect-error legacy ref
                 ref={scrollViewRef}
@@ -244,7 +245,7 @@ export default function ChannelInfoForm({
                     <View>
                         {showSelector && (
                             <SectionItem
-                                testID='makePrivate'
+                                testID='channel_info_form.make_private'
                                 label={makePrivateLabel}
                                 description={makePrivateDescription}
                                 action={handlePress}
@@ -269,7 +270,7 @@ export default function ChannelInfoForm({
                                     returnKeyType='next'
                                     showErrorIcon={false}
                                     spellCheck={false}
-                                    testID='edit_channel_info.displayname.input'
+                                    testID='channel_info_form.display_name.input'
                                     value={displayName}
                                     ref={nameInput}
                                     containerStyle={styles.textInput}
@@ -288,7 +289,7 @@ export default function ChannelInfoForm({
                                     returnKeyType='next'
                                     showErrorIcon={false}
                                     spellCheck={false}
-                                    testID='edit_channel_info.purpose.input'
+                                    testID='channel_info_form.purpose.input'
                                     value={purpose}
                                     ref={purposeInput}
                                     containerStyle={styles.textInput}
@@ -298,6 +299,7 @@ export default function ChannelInfoForm({
                                     style={styles.helpText}
                                     id='channel_modal.descriptionHelp'
                                     defaultMessage='Describe how this channel should be used.'
+                                    testID='channel_info_form.purpose.description'
                                 />
                             </>
                         )}
@@ -315,7 +317,7 @@ export default function ChannelInfoForm({
                             returnKeyType='next'
                             showErrorIcon={false}
                             spellCheck={false}
-                            testID='edit_channel_info.header.input'
+                            testID='channel_info_form.header.input'
                             value={header}
                             onLayout={onHeaderLayout}
                             ref={headerInput}
@@ -326,6 +328,7 @@ export default function ChannelInfoForm({
                             style={styles.helpText}
                             id='channel_modal.headerHelp'
                             defaultMessage={'Specify text to appear in the channel header beside the channel name. For example, include frequently used links by typing link text [Link Title](http://example.com).'}
+                            testID='channel_info_form.header.description'
                         />
                     </View>
                 </TouchableWithoutFeedback>

diff --git a/app/screens/create_or_edit_channel/create_or_edit_channel.tsx b/app/screens/create_or_edit_channel/create_or_edit_channel.tsx
@@ -58,7 +58,7 @@ const isDirect = (channel?: ChannelModel): boolean => {
 };
 
 const makeCloseButton = (icon: ImageResource) => {
-    return buildNavigationButton(CLOSE_BUTTON_ID, 'close.more_direct_messages.button', icon);
+    return buildNavigationButton(CLOSE_BUTTON_ID, 'close.create_or_edit_channel.button', icon);
 };
 
 const CreateOrEditChannel = ({
@@ -111,7 +111,7 @@ const CreateOrEditChannel = ({
     const rightButton = useMemo(() => {
         const base = buildNavigationButton(
             editing ? EDIT_BUTTON_ID : CREATE_BUTTON_ID,
-            'edit_channel.save.button',
+            editing ? 'create_or_edit_channel.save.button' : 'create_or_edit_channel.create.button',
             undefined,
             editing ? formatMessage({id: 'mobile.edit_channel', defaultMessage: 'Save'}) : formatMessage({id: 'mobile.create_channel', defaultMessage: 'Create'}),
         );

diff --git a/app/screens/post_options/options/copy_permalink_option/copy_permalink_option.tsx b/app/screens/post_options/options/copy_permalink_option/copy_permalink_option.tsx
@@ -32,7 +32,7 @@ const CopyPermalinkOption = ({teamName, post}: Props) => {
             defaultMessage='Copy Link'
             onPress={handleCopyLink}
             iconName='link-variant'
-            testID='post.options.copy.permalink'
+            testID='post_options.copy.permalink.option'
         />
     );
 };

diff --git a/app/screens/post_options/options/copy_text_option.tsx b/app/screens/post_options/options/copy_text_option.tsx
@@ -25,7 +25,7 @@ const CopyTextOption = ({postMessage}: Props) => {
             defaultMessage='Copy Text'
             iconName='content-copy'
             onPress={handleCopyText}
-            testID='post.options.copy.text'
+            testID='post_options.copy.text.option'
         />
     );
 };

diff --git a/app/screens/post_options/options/delete_post_option.tsx b/app/screens/post_options/options/delete_post_option.tsx
@@ -50,7 +50,7 @@ const DeletePostOption = ({combinedPost, post}: Props) => {
             defaultMessage='Delete'
             iconName='trash-can-outline'
             onPress={onPress}
-            testID='post.options.delete.post'
+            testID='post_options.delete.post.option'
             isDestructive={true}
         />
     );

diff --git a/app/screens/post_options/options/edit_option.tsx b/app/screens/post_options/options/edit_option.tsx
@@ -48,7 +48,7 @@ const EditOption = ({post, canDelete}: Props) => {
             defaultMessage='Edit'
             onPress={onPress}
             iconName='pencil-outline'
-            testID='post.options.edit'
+            testID='post_options.edit.post.option'
         />
     );
 };

diff --git a/app/screens/post_options/options/follow_option.tsx b/app/screens/post_options/options/follow_option.tsx
@@ -48,7 +48,7 @@ const FollowThreadOption = ({thread}: FollowThreadOptionProps) => {
         <BaseOption
             i18nId={id}
             defaultMessage={defaultMessage}
-            testID='post.options.follow.thread'
+            testID='post_options.follow.thread.option'
             iconName={icon}
             onPress={handleToggleFollow}
         />

diff --git a/app/screens/post_options/options/mark_unread_option.tsx b/app/screens/post_options/options/mark_unread_option.tsx
@@ -29,7 +29,7 @@ const MarkAsUnreadOption = ({postId}: Props) => {
             defaultMessage='Mark as Unread'
             iconName='mark-as-unread'
             onPress={onPress}
-            testID='post.options.mark.unread'
+            testID='post_options.mark.unread.option'
         />
     );
 };

diff --git a/app/screens/post_options/options/pin_channel_option.tsx b/app/screens/post_options/options/pin_channel_option.tsx
@@ -44,7 +44,7 @@ const PinChannelOption = ({isPostPinned, postId}: PinChannelProps) => {
             defaultMessage={defaultMessage}
             iconName='pin-outline'
             onPress={onPress}
-            testID={`post.options.${key}.channel`}
+            testID={`post.options.${key}.channel.option`}
         />
     );
 };

diff --git a/app/screens/post_options/options/reply_option.tsx b/app/screens/post_options/options/reply_option.tsx
@@ -31,7 +31,7 @@ const ReplyOption = ({post}: Props) => {
             defaultMessage='Reply'
             iconName='reply-outline'
             onPress={handleReply}
-            testID='post.options.reply'
+            testID='post_options.reply.post.option'
         />
     );
 };

diff --git a/app/screens/post_options/options/save_option.tsx b/app/screens/post_options/options/save_option.tsx
@@ -34,7 +34,7 @@ const SaveOption = ({isSaved, postId}: CopyTextProps) => {
             defaultMessage={defaultMessage}
             iconName='bookmark-outline'
             onPress={onHandlePress}
-            testID={id}
+            testID={`post.options.${defaultMessage.toLocaleLowerCase()}.channel.option`}
         />
     );
 };

diff --git a/app/screens/post_options/post_options.tsx b/app/screens/post_options/post_options.tsx
@@ -140,6 +140,7 @@ const PostOptions = ({
             componentId={Screens.POST_OPTIONS}
             initialSnapIndex={0}
             snapPoints={[((snapPoints + additionalSnapPoints) * ITEM_HEIGHT), 10]}
+            testID='post_options'
         />
     );
 };

diff --git a/app/screens/post_options/reaction_bar/pick_reaction/index.tsx b/app/screens/post_options/reaction_bar/pick_reaction/index.tsx
@@ -37,6 +37,7 @@ const PickReaction = ({openEmojiPicker, width, height}: PickReactionProps) => {
             style={[styles.container, {
                 width, height,
             }]}
+            testID='post_options.reaction_bar.pick_reaction'
         >
             <CompassIcon
                 onPress={openEmojiPicker}

diff --git a/app/screens/post_options/reaction_bar/reaction/index.tsx b/app/screens/post_options/reaction_bar/reaction/index.tsx
@@ -31,8 +31,9 @@ type ReactionProps = {
     emoji: string;
     iconSize: number;
     containerSize: number;
+    testID?: string;
 }
-const Reaction = ({onPressReaction, emoji, iconSize, containerSize}: ReactionProps) => {
+const Reaction = ({onPressReaction, emoji, iconSize, containerSize, testID}: ReactionProps) => {
     const theme = useTheme();
     const styles = getStyleSheet(theme);
     const handleReactionPressed = useCallback(() => {
@@ -53,6 +54,7 @@ const Reaction = ({onPressReaction, emoji, iconSize, containerSize}: ReactionPro
             key={emoji}
             onPress={handleReactionPressed}
             style={highlightedStyle}
+            testID={`${testID}.${emoji}`}
         >
             <View
                 style={reactionStyle}

diff --git a/app/screens/post_options/reaction_bar/reaction_bar.tsx b/app/screens/post_options/reaction_bar/reaction_bar.tsx
@@ -84,6 +84,7 @@ const ReactionBar = ({recentEmojis = [], postId}: QuickReactionProps) => {
                             emoji={emoji}
                             iconSize={iconSize}
                             containerSize={containerSize}
+                            testID='post_options.reaction_bar.reaction'
                         />
                     );
                 })

diff --git a/app/screens/reactions/reactions.tsx b/app/screens/reactions/reactions.tsx
@@ -80,6 +80,7 @@ const Reactions = ({initialEmoji, reactions}: Props) => {
             componentId={Screens.REACTIONS}
             initialSnapIndex={1}
             snapPoints={['90%', '50%', 10]}
+            testID='reactions'
         />
     );
 };

diff --git a/app/screens/thread/thread.tsx b/app/screens/thread/thread.tsx
@@ -53,6 +53,7 @@ const Thread = ({rootPost}: ThreadProps) => {
                         accessoriesContainerID={THREAD_ACCESSORIES_CONTAINER_NATIVE_ID}
                         rootId={rootPost!.id}
                         keyboardTracker={postDraftRef}
+                        testID='thread.post_draft'
                     />
                 </>
                 }

diff --git a/babel.config.js b/babel.config.js
@@ -44,6 +44,14 @@ module.exports = {
                 '@websocket': './app/client/websocket',
             },
         }],
+        ['module:react-native-dotenv', {
+            moduleName: '@env',
+            path: '.env',
+            blacklist: null,
+            whitelist: null,
+            safe: false,
+            allowUndefined: true,
+        }],
         'react-native-reanimated/plugin',
     ],
     exclude: ['**/*.png', '**/*.jpg', '**/*.gif'],

diff --git a/detox/e2e/support/ui/component/alert.ts b/detox/e2e/support/ui/component/alert.ts
@@ -5,6 +5,7 @@ import {isAndroid} from '@support/utils';
 
 class Alert {
     // alert titles
+    deletePostTitle = isAndroid() ? element(by.text('Delete Post')) : element(by.label('Delete Post')).atIndex(0);
     logoutTitle = (serverDisplayName: string) => {
         const title = `Are you sure you want to log out of ${serverDisplayName}?`;
 
@@ -18,6 +19,7 @@ class Alert {
 
     // alert buttons
     cancelButton = isAndroid() ? element(by.text('CANCEL')) : element(by.label('Cancel')).atIndex(1);
+    deleteButton = isAndroid() ? element(by.text('DELETE')) : element(by.label('Delete')).atIndex(0);
     logoutButton = isAndroid() ? element(by.text('LOG OUT')) : element(by.label('Log out')).atIndex(1);
     removeButton = isAndroid() ? element(by.text('REMOVE')) : element(by.label('Remove')).atIndex(1);
 }

diff --git a/detox/e2e/support/ui/component/camera_quick_action.ts b/detox/e2e/support/ui/component/camera_quick_action.ts
@@ -0,0 +1,20 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+class CameraQuickAction {
+    testID = {
+        cameraActionSuffix: 'post_draft.quick_actions.camera_action',
+        cameraActionDisabledSuffix: 'post_draft.quick_actions.camera_action.disabled',
+    };
+
+    getCameraQuickAction = (screenPrefix: string) => {
+        return element(by.id(`${screenPrefix}${this.testID.cameraActionSuffix}`));
+    };
+
+    getCameraQuickActionDisabled = (screenPrefix: string) => {
+        return element(by.id(`${screenPrefix}${this.testID.cameraActionDisabledSuffix}`));
+    };
+}
+
+const cameraQuickAction = new CameraQuickAction();
+export default cameraQuickAction;
diff --git a/detox/e2e/support/ui/component/file_quick_action.ts b/detox/e2e/support/ui/component/file_quick_action.ts
@@ -0,0 +1,20 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+class FileQuickAction {
+    testID = {
+        fileActionSuffix: 'post_draft.quick_actions.file_action',
+        fileActionDisabledSuffix: 'post_draft.quick_actions.file_action.disabled',
+    };
+
+    getFileQuickAction = (screenPrefix: string) => {
+        return element(by.id(`${screenPrefix}${this.testID.fileActionSuffix}`));
+    };
+
+    getFileQuickActionDisabled = (screenPrefix: string) => {
+        return element(by.id(`${screenPrefix}${this.testID.fileActionDisabledSuffix}`));
+    };
+}
+
+const fileQuickAction = new FileQuickAction();
+export default fileQuickAction;
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,6 @@ server.PID @@
     mattermost.keystore
     tmp/
     .env
-    env.d.ts
     */**/compass-icons.ttf
@@ Expand Down @@