diff --git a/app/components/channel_item/channel_item.tsx b/app/components/channel_item/channel_item.tsx index c1519a98de..edf9133291 100644 --- a/app/components/channel_item/channel_item.tsx +++ b/app/components/channel_item/channel_item.tsx @@ -181,12 +181,14 @@ const ChannelListItem = ({ displayName = formatMessage({id: 'channel_header.directchannel.you', defaultMessage: '{displayName} (you)'}, {displayName}); } + const channelItemTestId = `${testID}.${channel.name}`; + return ( <> {displayName} @@ -216,7 +218,7 @@ const ChannelListItem = ({ ellipsizeMode='tail' numberOfLines={1} style={[styles.teamName, isMuted && styles.teamNameMuted]} - testID={`${testID}.${channel.name}.team_display_name`} + testID={`${channelItemTestId}.team_display_name`} > {teamDisplayName} @@ -225,6 +227,7 @@ const ChannelListItem = ({ {Boolean(teammateId) && } @@ -233,7 +236,7 @@ const ChannelListItem = ({ ellipsizeMode='tail' numberOfLines={1} style={[styles.teamName, styles.teamNameTablet, isMuted && styles.teamNameMuted]} - testID={`${testID}.${channel.name}.team_display_name`} + testID={`${channelItemTestId}.team_display_name`} > {teamDisplayName} diff --git a/app/components/channel_item/custom_status/custom_status.tsx b/app/components/channel_item/custom_status/custom_status.tsx index e006c9dc57..b0503b7e95 100644 --- a/app/components/channel_item/custom_status/custom_status.tsx +++ b/app/components/channel_item/custom_status/custom_status.tsx @@ -11,6 +11,7 @@ type Props = { customStatusExpired: boolean; isCustomStatusEnabled: boolean; isInfo?: boolean; + testID?: string; } const style = StyleSheet.create({ @@ -24,7 +25,7 @@ const style = StyleSheet.create({ }, }); -const CustomStatus = ({customStatus, customStatusExpired, isCustomStatusEnabled, isInfo}: Props) => { +const CustomStatus = ({customStatus, customStatusExpired, isCustomStatusEnabled, isInfo, testID}: Props) => { const showCustomStatusEmoji = Boolean(isCustomStatusEnabled && customStatus?.emoji && !customStatusExpired); if (!showCustomStatusEmoji) { @@ -35,7 +36,7 @@ const CustomStatus = ({customStatus, customStatusExpired, isCustomStatusEnabled, ); }; diff --git a/app/components/custom_status/__snapshots__/custom_status_emoji.test.tsx.snap b/app/components/custom_status/__snapshots__/custom_status_emoji.test.tsx.snap index f544ea8bf2..d4928594eb 100644 --- a/app/components/custom_status/__snapshots__/custom_status_emoji.test.tsx.snap +++ b/app/components/custom_status/__snapshots__/custom_status_emoji.test.tsx.snap @@ -2,7 +2,7 @@ exports[`components/custom_status/custom_status_emoji should match snapshot 1`] = ` { }; it('should match snapshot', () => { const wrapper = renderWithEverything( - , + , {database}, ); expect(wrapper.toJSON()).toMatchSnapshot(); @@ -34,6 +37,7 @@ describe('components/custom_status/custom_status_emoji', () => { , {database}, ); diff --git a/app/components/custom_status/custom_status_emoji.tsx b/app/components/custom_status/custom_status_emoji.tsx index 8476b219ca..fea1f6985d 100644 --- a/app/components/custom_status/custom_status_emoji.tsx +++ b/app/components/custom_status/custom_status_emoji.tsx @@ -14,16 +14,15 @@ interface ComponentProps { } const CustomStatusEmoji = ({customStatus, emojiSize = 16, style, testID}: ComponentProps) => { - const testIdPrefix = testID ? `${testID}.` : ''; if (customStatus.emoji) { return ( ); diff --git a/app/components/custom_status/custom_status_text.tsx b/app/components/custom_status/custom_status_text.tsx index 5cd482efb2..043b8fb2a3 100644 --- a/app/components/custom_status/custom_status_text.tsx +++ b/app/components/custom_status/custom_status_text.tsx @@ -12,6 +12,7 @@ interface ComponentProps { textStyle?: TextStyle; ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip'; numberOfLines?: number; + testID?: string; } const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { @@ -25,11 +26,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { }; }); -const CustomStatusText = ({text, theme, textStyle, ellipsizeMode, numberOfLines}: ComponentProps) => ( +const CustomStatusText = ({text, theme, textStyle, ellipsizeMode, numberOfLines, testID}: ComponentProps) => ( {text} diff --git a/app/components/option_item/index.tsx b/app/components/option_item/index.tsx index 75ba0477ab..3357dd1caa 100644 --- a/app/components/option_item/index.tsx +++ b/app/components/option_item/index.tsx @@ -266,7 +266,12 @@ const OptionItem = ({ { Boolean(info) && - {info} + + {info} + } {actionComponent} diff --git a/app/components/user_item/user_item.tsx b/app/components/user_item/user_item.tsx index 20a60c6768..f73447fcff 100644 --- a/app/components/user_item/user_item.tsx +++ b/app/components/user_item/user_item.tsx @@ -160,7 +160,7 @@ const UserItem = ({ )} {shared && ( diff --git a/app/screens/channel/header/header.tsx b/app/screens/channel/header/header.tsx index 2f0dc648ef..3c410491fd 100644 --- a/app/screens/channel/header/header.tsx +++ b/app/screens/channel/header/header.tsx @@ -199,6 +199,7 @@ const ChannelHeader = ({ customStatus={customStatus} emojiSize={13} style={styles.customStatusEmoji} + testID='channel_header' /> } @@ -206,6 +207,7 @@ const ChannelHeader = ({ numberOfLines={1} ellipsizeMode='tail' style={styles.subtitle} + testID='channel_header.custom_status.custom_status_text' > {customStatus.text} diff --git a/app/screens/channel_info/extra/extra.tsx b/app/screens/channel_info/extra/extra.tsx index c740c496dd..ce77af454f 100644 --- a/app/screens/channel_info/extra/extra.tsx +++ b/app/screens/channel_info/extra/extra.tsx @@ -91,7 +91,10 @@ const Extra = ({channelId, createdAt, createdBy, customStatus, header}: Props) = /> {Boolean(customStatus?.emoji) && - + } {Boolean(customStatus?.text) && - + {customStatus?.text} } @@ -112,6 +118,7 @@ const Extra = ({channelId, createdAt, createdBy, customStatus, header}: Props) = showPrefix={true} showToday={true} showTimeCompulsory={false} + testID={`channel_info.custom_status.custom_status_duration.${customStatus?.duration}.custom_status_expiry`} /> } diff --git a/app/screens/custom_status/components/clear_after.tsx b/app/screens/custom_status/components/clear_after.tsx index ce1a6f0fa1..841c4b785e 100644 --- a/app/screens/custom_status/components/clear_after.tsx +++ b/app/screens/custom_status/components/clear_after.tsx @@ -61,6 +61,7 @@ const ClearAfter = ({duration, expiresAt, onOpenClearAfterModal, theme}: Props) textStyles={style.customStatusExpiry} theme={theme} time={expiresAt.toDate()} + testID={`custom_status.clear_after.custom_status_duration.${duration}.custom_status_expiry`} /> ); @@ -71,19 +72,17 @@ const ClearAfter = ({duration, expiresAt, onOpenClearAfterModal, theme}: Props) id={CST[duration].id} defaultMessage={CST[duration].defaultMessage} style={style.expiryTime} + testID={`custom_status.clear_after.custom_status_duration.${duration}.custom_status_expiry`} /> ); }; return ( - + {intl.formatMessage({id: 'mobile.custom_status.clear_after', defaultMessage: 'Clear After'})} {renderClearAfterTime()} { const style = getStyleSheet(theme); return ( diff --git a/app/screens/custom_status/components/custom_status_input.tsx b/app/screens/custom_status/components/custom_status_input.tsx index 084bcad075..c5b21ae257 100644 --- a/app/screens/custom_status/components/custom_status_input.tsx +++ b/app/screens/custom_status/components/custom_status_input.tsx @@ -68,7 +68,7 @@ const CustomStatusInput = ({emoji, isStatusSet, onChangeText, onClearHandle, onO theme={theme} /> ) : null; return ( {emoji && ( - + )} @@ -121,6 +126,7 @@ const CustomStatusSuggestion = ({duration, emoji, expires_at, handleClear, handl text={intl.formatMessage(CST[duration!])} theme={theme} textStyle={style.customStatusDuration} + testID={`${customStatusSuggestionTestId}.custom_status_duration.${duration}`} /> )} diff --git a/app/screens/custom_status_clear_after/components/clear_after_menu_item.tsx b/app/screens/custom_status_clear_after/components/clear_after_menu_item.tsx index 0b127f89f5..887f716a59 100644 --- a/app/screens/custom_status_clear_after/components/clear_after_menu_item.tsx +++ b/app/screens/custom_status_clear_after/components/clear_after_menu_item.tsx @@ -91,11 +91,13 @@ const ClearAfterMenuItem = ({currentUser, duration, expiryTime = '', handleItemC handleItemClick(duration, expiresAt.toISOString()); }, [handleItemClick, duration]); + const clearAfterMenuItemTestId = `custom_status_clear_after.menu_item.${duration}`; + return ( @@ -103,6 +105,7 @@ const ClearAfterMenuItem = ({currentUser, duration, expiryTime = '', handleItemC text={expiryMenuItems[duration]} theme={theme} textStyle={{color: theme.centerChannelColor}} + testID={`${clearAfterMenuItemTestId}.custom_status_text`} /> {isSelected && ( @@ -121,6 +124,7 @@ const ClearAfterMenuItem = ({currentUser, duration, expiryTime = '', handleItemC textStyles={style.customStatusExpiry} showTimeCompulsory={true} showToday={true} + testID={`${clearAfterMenuItemTestId}.custom_status_expiry`} /> )} diff --git a/app/screens/custom_status_clear_after/components/date_time_selector.tsx b/app/screens/custom_status_clear_after/components/date_time_selector.tsx index 04fe033791..e747f5951e 100644 --- a/app/screens/custom_status_clear_after/components/date_time_selector.tsx +++ b/app/screens/custom_status_clear_after/components/date_time_selector.tsx @@ -82,13 +82,13 @@ const DateTimeSelector = ({timezone, handleChange, isMilitaryTime, theme}: Props