SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

7
app/components/team_sidebar/add_team/add_team_slide_up.tsx
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>
);
}

1
app/components/team_sidebar/add_team/index.tsx
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}

6
app/components/team_sidebar/add_team/team_list.tsx
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>
);

3
app/components/team_sidebar/add_team/team_list_item/team_list_item.tsx
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

7
app/components/team_sidebar/team_list/team_item/team_icon.tsx
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>

5
app/components/team_sidebar/team_list/team_item/team_item.tsx
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>

4
app/components/team_sidebar/team_list/team_list.tsx
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>
);

2
app/components/team_sidebar/team_sidebar.tsx
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}

6
app/screens/browse_channels/channel_dropdown.tsx
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}
{' '}

8
app/screens/browse_channels/dropdown_slideup.tsx
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}

2
detox/e2e/support/ui/component/index.ts
View File

@@ -13,6 +13,7 @@ import PostDraft from './post_draft';
import PostList from './post_list';
import ProfilePicture from './profile_picture';
import SendButton from './send_button';
import TeamSidebar from './team_sidebar';
export {
Alert,
@@ -27,4 +28,5 @@ export {
PostList,
ProfilePicture,
SendButton,
TeamSidebar,
};

15
detox/e2e/support/ui/component/team_sidebar.ts Normal file
View File

@@ -0,0 +1,15 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
class TeamSidebar {
testID = {
teamFlatList: 'team_sidebar.team_list.flat_list',
addTeamButton: 'team_sidebar.add_team.button',
};
teamFlatList = element(by.id(this.testID.teamFlatList));
addTeamButton = element(by.id(this.testID.addTeamButton));
}
const teamSidebar = new TeamSidebar();
export default teamSidebar;

8
detox/e2e/support/ui/screen/browse_channels.ts
View File

@@ -12,6 +12,10 @@ class BrowseChannelsScreen {
searchInput: 'browse_channels.search_bar.search.input',
searchClearButton: 'browse_channels.search_bar.search.clear.button',
searchCancelButton: 'browse_channels.search_bar.search.cancel.button',
channelDropdown: 'browse_channels.channel_dropdown',
channelDropdownTextPublic: 'browse_channels.channel_dropdown.text.public',
channelDropdownTextArchived: 'browse_channels.channel_dropdown.text.archived',
channelDropdownTextShared: 'browse_channels.channel_dropdown.text.shared',
flatChannelList: 'browse_channels.channel_list.flat_list',
};
@@ -20,6 +24,10 @@ class BrowseChannelsScreen {
searchInput = element(by.id(this.testID.searchInput));
searchClearButton = element(by.id(this.testID.searchClearButton));
searchCancelButton = element(by.id(this.testID.searchCancelButton));
channelDropdown = element(by.id(this.testID.channelDropdown));
channelDropdownTextPublic = element(by.id(this.testID.channelDropdownTextPublic));
channelDropdownTextArchived = element(by.id(this.testID.channelDropdownTextArchived));
channelDropdownTextShared = element(by.id(this.testID.channelDropdownTextShared));
flatChannelList = element(by.id(this.testID.flatChannelList));
getChannelItem = (channelName: string) => {

41
detox/e2e/support/ui/screen/channel_dropdown_menu.ts Normal file
View File

@@ -0,0 +1,41 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {BrowseChannelsScreen} from '@support/ui/screen';
import {timeouts} from '@support/utils';
import {expect} from 'detox';
class ChannelDropdownMenuScreen {
testID = {
channelDropdownMenuScreen: 'browse_channels.dropdown_slideup.screen',
publicChannelsItem: 'browse_channels.dropdown_slideup_item.public_channels',
archivedChannelsItem: 'browse_channels.dropdown_slideup_item.public_channels',
sharedChannelsItem: 'browse_channels.dropdown_slideup_item.public_channels',
};
channelDropdownMenuScreen = element(by.id(this.testID.channelDropdownMenuScreen));
publicChannelsItem = element(by.id(this.testID.publicChannelsItem));
archivedChannelsItem = element(by.id(this.testID.archivedChannelsItem));
sharedChannelsItem = element(by.id(this.testID.sharedChannelsItem));
toBeVisible = async () => {
await waitFor(this.channelDropdownMenuScreen).toExist().withTimeout(timeouts.TEN_SEC);
return this.channelDropdownMenuScreen;
};
open = async () => {
// # Open channel dropdown menu screen
await BrowseChannelsScreen.channelDropdown.tap();
return this.toBeVisible();
};
close = async () => {
await this.channelDropdownMenuScreen.tap({x: 5, y: 10});
await expect(this.channelDropdownMenuScreen).not.toBeVisible();
};
}
const channelDropdownMenuScreen = new ChannelDropdownMenuScreen();
export default channelDropdownMenuScreen;

18
detox/e2e/support/ui/screen/channel_list.ts
View File

@@ -1,7 +1,10 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {PlusMenu} from '@support/ui/component';
import {
PlusMenu,
TeamSidebar,
} from '@support/ui/component';
import {HomeScreen} from '@support/ui/screen';
import {timeouts} from '@support/utils';
@@ -27,6 +30,7 @@ class ChannelListScreen {
threadsButton = element(by.id(this.testID.threadsButton));
// convenience props
teamFlatList = TeamSidebar.teamFlatList;
browseChannelsItem = PlusMenu.browseChannelsItem;
createNewChannelItem = PlusMenu.createNewChannelItem;
openDirectMessageItem = PlusMenu.openDirectMessageItem;
@@ -55,6 +59,18 @@ class ChannelListScreen {
return element(by.id(`category.${categoryKey}.channel_list_item.${channelName}.display_name`));
};
getTeamItemSelected = (teamId: string) => {
return element(by.id(`team_sidebar.team_list.team_item.${teamId}.selected`));
};
getTeamItemNotSelected = (teamId: string) => {
return element(by.id(`team_sidebar.team_list.team_item.${teamId}.not_selected`));
};
getTeamItemDisplayNameAbbreviation = (teamId: string) => {
return element(by.id(`team_sidebar.team_list.team_item.${teamId}.team_icon.display_name_abbreviation`));
};
toBeVisible = async () => {
await waitFor(this.channelListScreen).toExist().withTimeout(timeouts.TEN_SEC);

2
detox/e2e/support/ui/screen/index.ts
View File

@@ -4,6 +4,7 @@
import AccountScreen from './account';
import BrowseChannelsScreen from './browse_channels';
import ChannelScreen from './channel';
import ChannelDropdownMenuScreen from './channel_dropdown_menu';
import ChannelListScreen from './channel_list';
import CreateDirectMessageScreen from './create_direct_message';
import CreateOrEditChannelScreen from './create_or_edit_channel';
@@ -19,6 +20,7 @@ export {
AccountScreen,
BrowseChannelsScreen,
ChannelScreen,
ChannelDropdownMenuScreen,
ChannelListScreen,
CreateDirectMessageScreen,
CreateOrEditChannelScreen,

1
detox/e2e/support/ui/screen/post_options.ts
View File

@@ -53,6 +53,7 @@ class PostOptionsScreen {
};
deletePost = async ({confirm = true} = {}) => {
await waitFor(this.deletePostOption).toExist().withTimeout(timeouts.TWO_SEC);
await this.deletePostOption.tap({x: 1, y: 1});
const {
deletePostTitle,

34
detox/e2e/test/channels/channel_list.e2e.ts
View File

@@ -7,7 +7,10 @@
// - Use element testID when selecting an element. Create one if none.
// *******************************************************************
import {Setup} from '@support/server_api';
import {
Setup,
Team,
} from '@support/server_api';
import {
serverOneUrl,
siteOneUrl,
@@ -32,15 +35,17 @@ describe('Channels - Channel List', () => {
const townSquareChannelName = 'town-square';
let testChannel: any;
let testTeam: any;
let testUser: any;
beforeAll(async () => {
const {channel, team, user} = await Setup.apiInit(siteOneUrl);
testChannel = channel;
testTeam = team;
testUser = user;
// # Log in to server
await ServerScreen.connectToServer(serverOneUrl, serverOneDisplayName);
await LoginScreen.login(user);
await LoginScreen.login(testUser);
});
beforeEach(async () => {
@@ -162,4 +167,29 @@ describe('Channels - Channel List', () => {
xit('MM-T4728_8 - should be able to find channels', async () => {
// NOT YET IMPLEMENTED
});
it('MM-T4728_9 - should be able to switch between teams', async () => {
// # As admin, create a second team and add user to the second team
const {team: testTeamTwo} = await Team.apiCreateTeam(siteOneUrl, {prefix: 'a'});
await Team.apiAddUserToTeam(siteOneUrl, testUser.id, testTeamTwo.id);
// * Verify on first team and team sidebar item is selected and has correct display name abbreviation
await expect(ChannelListScreen.headerTeamDisplayName).toHaveText(testTeam.display_name);
await expect(ChannelListScreen.getTeamItemSelected(testTeam.id)).toBeVisible();
await expect(ChannelListScreen.getTeamItemDisplayNameAbbreviation(testTeam.id)).toHaveText(testTeam.display_name.substring(0, 2).toUpperCase());
// # Tap on second team item from team sidebar
await ChannelListScreen.getTeamItemNotSelected(testTeamTwo.id).tap();
// * Verify on second team and team sidebar item is selected and has correct display name abbreviation
await expect(ChannelListScreen.headerTeamDisplayName).toHaveText(testTeamTwo.display_name);
await expect(ChannelListScreen.getTeamItemSelected(testTeamTwo.id)).toBeVisible();
await expect(ChannelListScreen.getTeamItemDisplayNameAbbreviation(testTeamTwo.id)).toHaveText(testTeamTwo.display_name.substring(0, 2).toUpperCase());
// # Tap back on first team item from team sidebar
await ChannelListScreen.getTeamItemNotSelected(testTeam.id).tap();
// * Verify on first team
await expect(ChannelListScreen.headerTeamDisplayName).toHaveText(testTeam.display_name);
});
});

2
detox/e2e/test/channels/create_direct_message.e2e.ts
View File

@@ -116,7 +116,7 @@ describe('Channels - Create Direct Message', () => {
// * Verify no group message channel for the new users appears on channel list screen
const firstNewUserDisplayName = firstNewUser.username;
const secondNewUserDisplayName = secondNewUser.username;
const groupDisplayName = `${firstNewUserDisplayName}, ${secondNewUserDisplayName}, ${testUser.username}`;
const groupDisplayName = `${firstNewUserDisplayName}, ${secondNewUserDisplayName}`;
await expect(element(by.text(groupDisplayName))).not.toBeVisible();
// # Open create direct message screen, search for the first new user and tap on the first new user item