Detox/E2E: Team Sidebar e2e tests in Gekidou (#6188)

* Detox/E2E: Team Sidebar e2e tests in Gekidou

* Fixed spacing for component

* Fixed spacing for component
This commit is contained in:
Joseph Baylon
2022-04-26 08:22:33 -07:00
committed by GitHub
parent 6e2782ae1e
commit 776f56efb1
19 changed files with 153 additions and 19 deletions

View File

@@ -32,10 +32,13 @@ export default function AddTeamSlideUp({otherTeams, canCreateTeams, showTitle =
onPress={onPressCreate}
showButton={canCreateTeams}
showTitle={showTitle}
testID='add_team_slide_up'
testID='team_sidebar.add_team_slide_up'
title={intl.formatMessage({id: 'mobile.add_team.join_team', defaultMessage: 'Join Another Team'})}
>
<TeamList teams={otherTeams}/>
<TeamList
teams={otherTeams}
testID='team_sidebar.add_team_slide_up.team_list'
/>
</BottomSheetContent>
);
}

View File

@@ -65,6 +65,7 @@ export default function AddTeam({canCreateTeams, otherTeams}: Props) {
onPress={onPress}
type='opacity'
style={styles.touchable}
testID='team_sidebar.add_team.button'
>
<CompassIcon
size={28}

View File

@@ -17,6 +17,7 @@ const Empty = require('./no_teams.svg').default;
type Props = {
teams: TeamModel[];
testID?: string;
}
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
@@ -58,7 +59,7 @@ const renderTeam = ({item: t}: ListRenderItemInfo<TeamModel>) => {
const keyExtractor = (item: TeamModel) => item.id;
export default function TeamList({teams}: Props) {
export default function TeamList({teams, testID}: Props) {
const theme = useTheme();
const styles = getStyleSheet(theme);
@@ -70,6 +71,7 @@ export default function TeamList({teams}: Props) {
renderItem={renderTeam}
keyExtractor={keyExtractor}
contentContainerStyle={styles.contentContainer}
testID={`${testID}.flat_list`}
/>
</View>
);
@@ -82,11 +84,13 @@ export default function TeamList({teams}: Props) {
id='team_list.no_other_teams.title'
defaultMessage='No additional teams to join'
style={styles.title}
testID={`${testID}.no_other_teams.title`}
/>
<FormattedText
id='team_list.no_other_teams.description'
defaultMessage='To join another team, ask a Team Admin for an invitation, or create your own team.'
style={styles.description}
testID={`${testID}.no_other_teams.description`}
/>
</View>
);

View File

@@ -55,6 +55,8 @@ export default function TeamListItem({team, currentUserId}: Props) {
dismissBottomSheet();
}, []);
const teamListItemTestId = `team_sidebar.team_list.team_list_item.${team.id}`;
return (
<View style={styles.container}>
<TouchableWithFeedback
@@ -68,6 +70,7 @@ export default function TeamListItem({team, currentUserId}: Props) {
displayName={team.displayName}
lastIconUpdate={team.lastTeamIconUpdatedAt}
selected={false}
testID={`${teamListItemTestId}.team_icon`}
/>
</View>
<Text

View File

@@ -15,9 +15,10 @@ type Props = {
lastIconUpdate: number;
displayName: string;
selected: boolean;
testID?: string;
}
export default function TeamIcon({id, lastIconUpdate, displayName, selected}: Props) {
export default function TeamIcon({id, lastIconUpdate, displayName, selected, testID}: Props) {
const [imageError, setImageError] = useState(false);
const ref = useRef<View>(null);
const theme = useTheme();
@@ -41,8 +42,9 @@ export default function TeamIcon({id, lastIconUpdate, displayName, selected}: Pr
teamIconContent = (
<Text
style={styles.text}
testID={`${testID}.display_name_abbreviation`}
>
{displayName?.substr(0, 2).toUpperCase()}
{displayName?.substring(0, 2).toUpperCase()}
</Text>
);
} else {
@@ -59,6 +61,7 @@ export default function TeamIcon({id, lastIconUpdate, displayName, selected}: Pr
<View
style={selected ? styles.containerSelected : styles.container}
ref={ref}
testID={testID}
>
{teamIconContent}
</View>

View File

@@ -82,18 +82,23 @@ export default function TeamItem({team, hasUnreads, mentionCount, currentTeamId}
break;
}
const teamItem = `team_sidebar.team_list.team_item.${team.id}`;
const teamItemTestId = selected ? `${teamItem}.selected` : `${teamItem}.not_selected`;
return (
<>
<View style={[styles.container, selected ? styles.containerSelected : undefined]}>
<TouchableWithFeedback
onPress={() => handleTeamChange(serverUrl, team.id)}
type='opacity'
testID={teamItemTestId}
>
<TeamIcon
displayName={team.displayName}
id={team.id}
lastIconUpdate={team.lastTeamIconUpdatedAt}
selected={selected}
testID={`${teamItem}.team_icon`}
/>
</TouchableWithFeedback>
</View>

View File

@@ -10,6 +10,7 @@ import type MyTeamModel from '@typings/database/models/servers/my_team';
type Props = {
myOrderedTeams: MyTeamModel[];
testID?: string;
}
const keyExtractor = (item: MyTeamModel) => item.id;
@@ -22,7 +23,7 @@ const renderTeam = ({item: t}: ListRenderItemInfo<MyTeamModel>) => {
);
};
export default function TeamList({myOrderedTeams}: Props) {
export default function TeamList({myOrderedTeams, testID}: Props) {
return (
<View style={styles.container}>
<FlatList
@@ -33,6 +34,7 @@ export default function TeamList({myOrderedTeams}: Props) {
keyExtractor={keyExtractor}
renderItem={renderTeam}
showsVerticalScrollIndicator={false}
testID={`${testID}.flat_list`}
/>
</View>
);

View File

@@ -68,7 +68,7 @@ export default function TeamSidebar({canCreateTeams, iconPad, otherTeams, teamsC
return (
<Animated.View style={[styles.container, transform]}>
<Animated.View style={[styles.listContainer, serverStyle]}>
<TeamList/>
<TeamList testID='team_sidebar.team_list'/>
{showAddTeam && (
<AddTeam
canCreateTeams={canCreateTeams}

View File

@@ -89,14 +89,12 @@ export default function ChannelDropdown({
channelDropdownText = intl.formatMessage({id: 'browse_channels.showArchivedChannels', defaultMessage: 'Show: Archived Channels'});
}
return (
<View
testID='browse_channels.channel.dropdown'
>
<View testID='browse_channels.channel_dropdown'>
<Text
accessibilityRole={'button'}
style={style.channelDropdown}
onPress={handleDropdownClick}
testID={`browse_channels.channel.dropdown.${typeOfChannels}`}
testID={`browse_channels.channel_dropdown.text.${typeOfChannels}`}
>
{channelDropdownText}
{' '}

View File

@@ -66,12 +66,12 @@ export default function DropdownSlideup({
<BottomSheetContent
showButton={false}
showTitle={!isTablet}
testID='dropdown_slideup'
testID='browse_channels.dropdown_slideup'
title={intl.formatMessage({id: 'browse_channels.dropdownTitle', defaultMessage: 'Show'})}
>
<SlideUpPanelItem
onPress={handlePublicPress}
testID='browse_channels.dropdownTitle.public'
testID='browse_channels.dropdown_slideup_item.public_channels'
text={intl.formatMessage({id: 'browse_channels.publicChannels', defaultMessage: 'Public Channels'})}
icon={selected === PUBLIC ? 'check' : undefined}
{...commonProps}
@@ -79,7 +79,7 @@ export default function DropdownSlideup({
{canShowArchivedChannels && (
<SlideUpPanelItem
onPress={handleArchivedPress}
testID='browse_channels.dropdownTitle.public'
testID='browse_channels.dropdown_slideup_item.archived_channels'
text={intl.formatMessage({id: 'browse_channels.archivedChannels', defaultMessage: 'Archived Channels'})}
icon={selected === ARCHIVED ? 'check' : undefined}
{...commonProps}
@@ -88,7 +88,7 @@ export default function DropdownSlideup({
{sharedChannelsEnabled && (
<SlideUpPanelItem
onPress={handleSharedPress}
testID='browse_channels.dropdownTitle.public'
testID='browse_channels.dropdown_slideup_item.shared_channels'
text={intl.formatMessage({id: 'browse_channels.sharedChannels', defaultMessage: 'Shared Channels'})}
icon={selected === SHARED ? 'check' : undefined}
{...commonProps}