Skip to content

Commit 2031ba8

Browse files
dougfabrisdougfabris
authored
test: Reorg flextabs locators (#38533)
1 parent 44938fd commit 2031ba8

65 files changed

Lines changed: 1108 additions & 961 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/meteor/client/components/UserInfo/UserInfo.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from '@rocket.chat/ui-client';
1515
import type { TranslationKey } from '@rocket.chat/ui-contexts';
1616
import type { ReactElement, ReactNode } from 'react';
17-
import { memo } from 'react';
17+
import { memo, useId } from 'react';
1818
import { useTranslation } from 'react-i18next';
1919

2020
import { useTimeAgo } from '../../hooks/useTimeAgo';
@@ -84,6 +84,8 @@ const UserInfo = ({
8484
const userDisplayName = useUserDisplayName({ name, username });
8585
const userCustomFields = useUserCustomFields(customFields);
8686

87+
const usernameId = useId();
88+
8789
return (
8890
<ContextualbarScrollableContent p={24} {...props}>
8991
<InfoPanel>
@@ -128,9 +130,13 @@ const UserInfo = ({
128130
)}
129131

130132
{username && username !== name && (
131-
<InfoPanelField>
132-
<InfoPanelLabel>{t('Username')}</InfoPanelLabel>
133-
<InfoPanelText data-qa='UserInfoUserName'>{username}</InfoPanelText>
133+
<InfoPanelField is='dl'>
134+
<InfoPanelLabel is='dt' id={usernameId}>
135+
{t('Username')}
136+
</InfoPanelLabel>
137+
<InfoPanelText is='dd' aria-labelledby={usernameId}>
138+
{username}
139+
</InfoPanelText>
134140
</InfoPanelField>
135141
)}
136142

‎apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -164,21 +164,22 @@ exports[`renders Default without crashing 1`] = `
164164
</span>
165165
</div>
166166
</div>
167-
<div
167+
<dl
168168
class="rcx-box rcx-box--full rcx-css-1jagyun"
169169
>
170-
<div
170+
<dt
171171
class="rcx-box rcx-box--full rcx-css-1n8o8rn"
172+
id=":r1:"
172173
>
173174
Username
174-
</div>
175-
<div
175+
</dt>
176+
<dd
177+
aria-labelledby=":r1:"
176178
class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
177-
data-qa="UserInfoUserName"
178179
>
179180
guilherme.gazzo
180-
</div>
181-
</div>
181+
</dd>
182+
</dl>
182183
<div
183184
class="rcx-box rcx-box--full rcx-css-1jagyun"
184185
>
@@ -467,21 +468,22 @@ exports[`renders InvitedUser without crashing 1`] = `
467468
</span>
468469
</div>
469470
</div>
470-
<div
471+
<dl
471472
class="rcx-box rcx-box--full rcx-css-1jagyun"
472473
>
473-
<div
474+
<dt
474475
class="rcx-box rcx-box--full rcx-css-1n8o8rn"
476+
id=":r3:"
475477
>
476478
Username
477-
</div>
478-
<div
479+
</dt>
480+
<dd
481+
aria-labelledby=":r3:"
479482
class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
480-
data-qa="UserInfoUserName"
481483
>
482484
guilherme.gazzo
483-
</div>
484-
</div>
485+
</dd>
486+
</dl>
485487
<div
486488
class="rcx-box rcx-box--full rcx-css-1jagyun"
487489
>
@@ -784,21 +786,22 @@ exports[`renders WithABACAttributes without crashing 1`] = `
784786
</span>
785787
</div>
786788
</div>
787-
<div
789+
<dl
788790
class="rcx-box rcx-box--full rcx-css-1jagyun"
789791
>
790-
<div
792+
<dt
791793
class="rcx-box rcx-box--full rcx-css-1n8o8rn"
794+
id=":r5:"
792795
>
793796
Username
794-
</div>
795-
<div
797+
</dt>
798+
<dd
799+
aria-labelledby=":r5:"
796800
class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
797-
data-qa="UserInfoUserName"
798801
>
799802
guilherme.gazzo
800-
</div>
801-
</div>
803+
</dd>
804+
</dl>
802805
<div
803806
class="rcx-box rcx-box--full rcx-css-1jagyun"
804807
>
@@ -1147,21 +1150,22 @@ exports[`renders WithVoiceCallExtension without crashing 1`] = `
11471150
</span>
11481151
</div>
11491152
</div>
1150-
<div
1153+
<dl
11511154
class="rcx-box rcx-box--full rcx-css-1jagyun"
11521155
>
1153-
<div
1156+
<dt
11541157
class="rcx-box rcx-box--full rcx-css-1n8o8rn"
1158+
id=":r7:"
11551159
>
11561160
Username
1157-
</div>
1158-
<div
1161+
</dt>
1162+
<dd
1163+
aria-labelledby=":r7:"
11591164
class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
1160-
data-qa="UserInfoUserName"
11611165
>
11621166
guilherme.gazzo
1163-
</div>
1164-
</div>
1167+
</dd>
1168+
</dl>
11651169
<div
11661170
class="rcx-box rcx-box--full rcx-css-1jagyun"
11671171
>

‎apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/AddExistingModal.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ type AddExistingModalProps = {
2929
reload?: () => void;
3030
};
3131

32+
// TODO: Use GenericModal instead of Modal
3233
const AddExistingModal = ({ teamId, onClose, reload }: AddExistingModalProps) => {
3334
const { t } = useTranslation();
3435
const dispatchToastMessage = useToastMessageDispatch();
@@ -61,7 +62,10 @@ const AddExistingModal = ({ teamId, onClose, reload }: AddExistingModalProps) =>
6162
);
6263

6364
return (
64-
<Modal wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleAddChannels)} {...props} />}>
65+
<Modal
66+
aria-label={t('Team_Add_existing_channels')}
67+
wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleAddChannels)} {...props} />}
68+
>
6569
<ModalHeader>
6670
<ModalTitle>{t('Team_Add_existing_channels')}</ModalTitle>
6771
<ModalClose onClick={onClose} />

‎apps/meteor/tests/e2e/account-profile.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ test.describe.serial('settings-account-profile', () => {
3737
await expect(poHomeChannel.content.lastUserMessageNotSequential).toContainText(newUsername);
3838

3939
await poHomeChannel.content.lastUserMessageNotSequential.locator('figure').click();
40-
await poHomeChannel.content.linkUserCard.click();
40+
await poHomeChannel.userCard.openUserInfo();
4141

42-
await expect(poHomeChannel.tabs.userInfoUsername).toHaveText(newUsername);
42+
await expect(poHomeChannel.tabs.userInfo.username).toHaveText(newUsername);
4343
});
4444

4545
test.describe('Avatar', () => {

‎apps/meteor/tests/e2e/avatar-settings.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,12 +86,12 @@ test.describe('avatar-settings', () => {
8686
testAvatars(poHomeChannel, channelName, avatarUrl);
8787

8888
test('expect message avatar to have provider prefix', async () => {
89-
expect(poHomeChannel.content.lastUserMessage.locator('img').getAttribute('src')).toBe(avatarUrl);
89+
await expect(poHomeChannel.content.lastUserMessage.locator('img')).toHaveAttribute('src', avatarUrl);
9090
});
9191

9292
test('expect user card avatar to have provider prefix', async () => {
9393
await poHomeChannel.content.lastUserMessage.locator('.rcx-message-header__name-container').click();
94-
expect(poHomeChannel.content.userCard.locator('img').getAttribute('src')).toBe(avatarUrl);
94+
await expect(poHomeChannel.userCard.imgUserCard).toHaveAttribute('src', avatarUrl);
9595
});
9696
});
9797
});

‎apps/meteor/tests/e2e/channel-management.spec.ts‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -62,48 +62,48 @@ test.describe.serial('channel-management', () => {
6262
await poHomeChannel.navbar.openChat(targetChannel);
6363
await poHomeChannel.roomToolbar.openRoomInfo();
6464
await poHomeChannel.tabs.room.btnEdit.click();
65-
await poHomeChannel.tabs.room.inputTopic.fill('hello-topic-edited');
66-
await poHomeChannel.tabs.room.btnSave.click();
65+
await poHomeChannel.tabs.editRoom.inputTopic.fill('hello-topic-edited');
66+
await poHomeChannel.tabs.editRoom.btnSave.click();
6767

6868
await poHomeChannel.toastMessage.dismissToast();
6969
await poHomeChannel.roomToolbar.openRoomInfo();
7070

71-
await expect(poHomeChannel.tabs.room.panelChannelInfo).toContainText('hello-topic-edited');
71+
await expect(poHomeChannel.tabs.room.root).toContainText('hello-topic-edited');
7272
await expect(poHomeChannel.content.getSystemMessageByText('changed room topic to hello-topic-edited')).toBeVisible();
7373
});
7474

7575
test('should edit announcement of targetChannel', async () => {
7676
await poHomeChannel.navbar.openChat(targetChannel);
7777
await poHomeChannel.roomToolbar.openRoomInfo();
7878
await poHomeChannel.tabs.room.btnEdit.click();
79-
await poHomeChannel.tabs.room.inputAnnouncement.fill('hello-announcement-edited');
80-
await poHomeChannel.tabs.room.btnSave.click();
79+
await poHomeChannel.tabs.editRoom.inputAnnouncement.fill('hello-announcement-edited');
80+
await poHomeChannel.tabs.editRoom.btnSave.click();
8181

8282
await poHomeChannel.toastMessage.dismissToast();
8383
await poHomeChannel.roomToolbar.openRoomInfo();
84-
await expect(poHomeChannel.tabs.room.panelChannelInfo).toContainText('hello-announcement-edited');
84+
await expect(poHomeChannel.tabs.room.root).toContainText('hello-announcement-edited');
8585
await expect(poHomeChannel.content.getSystemMessageByText('changed room announcement to: hello-announcement-edited')).toBeVisible();
8686
});
8787

8888
test('should edit description of targetChannel', async () => {
8989
await poHomeChannel.navbar.openChat(targetChannel);
9090
await poHomeChannel.roomToolbar.openRoomInfo();
9191
await poHomeChannel.tabs.room.btnEdit.click();
92-
await poHomeChannel.tabs.room.inputDescription.fill('hello-description-edited');
93-
await poHomeChannel.tabs.room.btnSave.click();
92+
await poHomeChannel.tabs.editRoom.inputDescription.fill('hello-description-edited');
93+
await poHomeChannel.tabs.editRoom.btnSave.click();
9494

9595
await poHomeChannel.toastMessage.dismissToast();
9696
await poHomeChannel.roomToolbar.openRoomInfo();
97-
await expect(poHomeChannel.tabs.room.panelChannelInfo).toContainText('hello-description-edited');
97+
await expect(poHomeChannel.tabs.room.root).toContainText('hello-description-edited');
9898
await expect(poHomeChannel.content.getSystemMessageByText('changed room description to: hello-description-edited')).toBeVisible();
9999
});
100100

101101
test('should edit name of targetChannel', async ({ page }) => {
102102
await poHomeChannel.navbar.openChat(targetChannel);
103103
await poHomeChannel.roomToolbar.openRoomInfo();
104104
await poHomeChannel.tabs.room.btnEdit.click();
105-
await poHomeChannel.tabs.room.inputName.fill(`NAME-EDITED-${targetChannel}`);
106-
await poHomeChannel.tabs.room.btnSave.click();
105+
await poHomeChannel.tabs.editRoom.inputName.fill(`NAME-EDITED-${targetChannel}`);
106+
await poHomeChannel.tabs.editRoom.btnSave.click();
107107

108108
targetChannel = `NAME-EDITED-${targetChannel}`;
109109
await expect(page.getByRole('main').getByRole('heading', { name: targetChannel })).toBeVisible();
@@ -117,8 +117,8 @@ test.describe.serial('channel-management', () => {
117117
await poHomeChannel.navbar.openChat(targetChannel);
118118
await poHomeChannel.roomToolbar.openRoomInfo();
119119
await poHomeChannel.tabs.room.btnEdit.click();
120-
await poHomeChannel.tabs.room.inputName.fill(hugeName);
121-
await poHomeChannel.tabs.room.btnSave.click();
120+
await poHomeChannel.tabs.editRoom.inputName.fill(hugeName);
121+
await poHomeChannel.tabs.editRoom.btnSave.click();
122122
targetChannel = hugeName;
123123

124124
await page.setViewportSize({ width: 640, height: 460 });
@@ -166,8 +166,8 @@ test.describe.serial('channel-management', () => {
166166

167167
test('should edit notification preferences of targetChannel', async () => {
168168
await poHomeChannel.navbar.openChat(targetChannel);
169-
await poHomeChannel.tabs.kebab.click({ force: true });
170-
await poHomeChannel.tabs.btnNotificationPreferences.click({ force: true });
169+
await poHomeChannel.roomToolbar.openMoreOptions();
170+
await poHomeChannel.roomToolbar.menuItemNotificationsPreferences.click();
171171
await poHomeChannel.tabs.notificationPreferences.updateAllNotificationPreferences();
172172
await poHomeChannel.tabs.notificationPreferences.btnSave.click();
173173

@@ -256,8 +256,8 @@ test.describe.serial('channel-management', () => {
256256
await poHomeChannel.tabs.members.showAllUsers();
257257
await poHomeChannel.tabs.members.ignoreUser('user1');
258258

259-
await poHomeChannel.tabs.members.openMoreActions();
260-
await expect(poHomeChannel.tabs.members.getMenuItemAction('Unignore')).toBeVisible();
259+
await poHomeChannel.tabs.members.userInfo.openMoreActions();
260+
await expect(poHomeChannel.tabs.members.userInfo.menu.getMenuItem('Unignore')).toBeVisible();
261261
await page.keyboard.press('Escape');
262262

263263
const user1Channel = new HomeChannel(user1Page);
@@ -296,8 +296,8 @@ test.describe.serial('channel-management', () => {
296296
await poHomeChannel.tabs.members.showAllUsers();
297297
await poHomeChannel.tabs.members.unignoreUser('user1');
298298

299-
await poHomeChannel.tabs.members.openMoreActions();
300-
await expect(poHomeChannel.tabs.members.getMenuItemAction('Ignore')).toBeVisible();
299+
await poHomeChannel.tabs.members.userInfo.openMoreActions();
300+
await expect(poHomeChannel.tabs.members.userInfo.menu.getMenuItem('Ignore')).toBeVisible();
301301
await page.keyboard.press('Escape');
302302

303303
await user1Channel.content.sendMessage('message after being unignored');

‎apps/meteor/tests/e2e/e2e-encryption/e2ee-encrypted-channels.spec.ts‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,8 @@ test.describe('E2EE Encrypted Channels', () => {
5151
await expect(poHomeChannel.content.lastUserMessage.locator('.rcx-icon--name-key')).toBeVisible();
5252
await toastMessages.dismissToast();
5353

54-
await poHomeChannel.tabs.kebab.click({ force: true });
55-
56-
await expect(poHomeChannel.tabs.btnDisableE2E).toBeVisible();
57-
await poHomeChannel.tabs.btnDisableE2E.click({ force: true });
54+
await poHomeChannel.roomToolbar.openMoreOptions();
55+
await poHomeChannel.roomToolbar.menuItemDisableE2EEncryption.click();
5856
await expect(page.getByRole('dialog', { name: 'Disable encryption' })).toBeVisible();
5957
await page.getByRole('button', { name: 'Disable encryption' }).click();
6058
await poHomeChannel.toastMessage.dismissToast();
@@ -65,9 +63,9 @@ test.describe('E2EE Encrypted Channels', () => {
6563
await expect(poHomeChannel.content.lastUserMessageBody).toHaveText('hello world not encrypted');
6664
await expect(poHomeChannel.content.lastUserMessage.locator('.rcx-icon--name-key')).not.toBeVisible();
6765

68-
await poHomeChannel.tabs.kebab.click({ force: true });
69-
await expect(poHomeChannel.tabs.btnEnableE2E).toBeVisible();
70-
await poHomeChannel.tabs.btnEnableE2E.click({ force: true });
66+
await poHomeChannel.roomToolbar.openMoreOptions();
67+
await expect(poHomeChannel.roomToolbar.menuItemEnableE2EEncryption).toBeVisible();
68+
await poHomeChannel.roomToolbar.menuItemEnableE2EEncryption.click();
7169
await expect(page.getByRole('dialog', { name: 'Enable encryption' })).toBeVisible();
7270
await page.getByRole('button', { name: 'Enable encryption' }).click();
7371
await poHomeChannel.toastMessage.dismissToast();
@@ -142,12 +140,12 @@ test.describe('E2EE Encrypted Channels', () => {
142140
await poHomeChannel.toastMessage.waitForDisplay();
143141
await poHomeChannel.toastMessage.dismissToast();
144142

145-
await poHomeChannel.tabs.kebab.click();
143+
await poHomeChannel.roomToolbar.openMoreOptions();
146144
// TODO(@jessicaschelly/@dougfabris): fix this flaky behavior
147-
if (!(await poHomeChannel.tabs.btnEnableE2E.isVisible())) {
148-
await poHomeChannel.tabs.kebab.click();
145+
if (!(await poHomeChannel.roomToolbar.menuItemEnableE2EEncryption.isVisible())) {
146+
await poHomeChannel.roomToolbar.openMoreOptions();
149147
}
150-
await poHomeChannel.tabs.btnEnableE2E.click();
148+
await poHomeChannel.roomToolbar.menuItemEnableE2EEncryption.click();
151149
await expect(page.getByRole('dialog', { name: 'Enable encryption' })).toBeVisible();
152150
await page.getByRole('button', { name: 'Enable encryption' }).click();
153151
await page.waitForTimeout(1000);
@@ -243,9 +241,9 @@ test.describe('E2EE Encrypted Channels', () => {
243241
await poHomeChannel.content.sendMessage('second unencrypted message');
244242

245243
// Encrypt channel
246-
await poHomeChannel.tabs.kebab.click({ force: true });
247-
await expect(poHomeChannel.tabs.btnEnableE2E).toBeVisible();
248-
await poHomeChannel.tabs.btnEnableE2E.click({ force: true });
244+
await poHomeChannel.roomToolbar.openMoreOptions();
245+
await expect(poHomeChannel.roomToolbar.menuItemEnableE2EEncryption).toBeVisible();
246+
await poHomeChannel.roomToolbar.menuItemEnableE2EEncryption.click();
249247
await expect(page.getByRole('dialog', { name: 'Enable encryption' })).toBeVisible();
250248
await page.getByRole('button', { name: 'Enable encryption' }).click();
251249
await page.waitForTimeout(1000);
@@ -301,8 +299,8 @@ test.describe('E2EE Encrypted Channels', () => {
301299
await poHomeChannel.toastMessage.waitForDisplay();
302300
await poHomeChannel.toastMessage.dismissToast();
303301

304-
await poHomeChannel.tabs.kebab.click();
305-
await poHomeChannel.tabs.btnPinnedMessagesList.click();
302+
await poHomeChannel.roomToolbar.openMoreOptions();
303+
await poHomeChannel.roomToolbar.menuItemPinnedMessages.click();
306304

307305
await expect(page.getByRole('dialog', { name: 'Pinned Messages' })).toBeVisible();
308306

@@ -317,9 +315,8 @@ test.describe('E2EE Encrypted Channels', () => {
317315
await expect(page.locator('role=menuitem[name="Copy link"]')).toHaveClass(/disabled/);
318316

319317
await poHomeChannel.btnContextualbarClose.click();
320-
321-
await poHomeChannel.tabs.kebab.click();
322-
await poHomeChannel.tabs.btnStarredMessageList.click();
318+
await poHomeChannel.roomToolbar.openMoreOptions();
319+
await poHomeChannel.roomToolbar.menuItemStarredMessages.click();
323320

324321
const lastStarredMessage = page
325322
.getByRole('dialog', { name: 'Starred Messages' })

0 commit comments

Comments
 (0)