Skip to content

test: Reorg composer page objects #38104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kodiakhq merged 12 commits into from
Jan 12, 2026
Merged

test: Reorg composer page objects #38104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7a41074
chore: (a11y) add `aria-label` to message composer
juliajforesti Jan 8, 2026
8d9c93d
test: create `Composer` class
juliajforesti Jan 8, 2026
8ff4bcb
test: update message composer references in tests and page objects
juliajforesti Jan 8, 2026
0c1fc45
test: update message composer references in E2E tests
juliajforesti Jan 8, 2026
6a2a2fb
test: improve composer root specificity
juliajforesti Jan 8, 2026
c9304f5
test: update composer references in `channel-management` `image-galle…
juliajforesti Jan 8, 2026
9081cf6
test: move more locators to composer class
juliajforesti Jan 8, 2026
6f97814
test: update emoji picker interactions and refine composer button loc…
juliajforesti Jan 8, 2026
571cb84
test: update button locator for joining channel in `preview-public-ch…
juliajforesti Jan 9, 2026
86ab056
test: remove page from composer class
juliajforesti Jan 9, 2026
3b65ef7
chore: remove unnecessary `aria-label` from MessageBox
juliajforesti Jan 9, 2026
d22a81e
test: add more composer actions to PO
juliajforesti Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/meteor/client/views/room/body/RoomBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ const RoomBody = (): ReactElement => {
</MessageListErrorBoundary>
</div>
</div>
<RoomComposer>
<RoomComposer aria-label={t('Room_composer')}>
<ComposerContainer
subscription={subscription}
onResize={handleComposerResize}
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ const ThreadChat = ({ mainMessage }: ThreadChatProps) => {
<ThreadMessageList mainMessage={mainMessage} />
</MessageListErrorBoundary>

<RoomComposer>
<RoomComposer aria-label={t('Thread_composer')}>
<ComposerContainer
tmid={mainMessage._id}
subscription={subscription}
Expand Down
6 changes: 3 additions & 3 deletions apps/meteor/tests/e2e/channel-management.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ test.describe.serial('channel-management', () => {
test('should create a discussion using the message composer', async ({ page }) => {
discussionName = faker.string.uuid();
await poHomeChannel.navbar.openChat(targetChannel);
await poHomeChannel.content.btnMenuMoreActions.click();
await poHomeChannel.composer.btnMenuMoreActions.click();
await page.getByRole('menuitem', { name: 'Discussion' }).click();
await poHomeChannel.content.inputDiscussionName.fill(discussionName);
await poHomeChannel.content.btnCreateDiscussionModal.click();
Expand Down Expand Up @@ -196,7 +196,7 @@ test.describe.serial('channel-management', () => {
const user1Channel = new HomeChannel(user1Page);
await user1Page.goto(`/channel/${targetChannel}`);
await user1Channel.content.waitForChannel();
await expect(user1Channel.readOnlyFooter).toBeVisible();
await expect(user1Channel.composer.readOnlyFooter).toBeVisible();
});

test('should unmuteUser user1', async () => {
Expand All @@ -210,7 +210,7 @@ test.describe.serial('channel-management', () => {
const user1Channel = new HomeChannel(user1Page);
await user1Page.goto(`/channel/${targetChannel}`);
await user1Channel.content.waitForChannel();
await expect(user1Channel.composer).toBeVisible();
await expect(user1Channel.composer.inputMessage).toBeVisible();
});

test('should set user1 as moderator', async () => {
Expand Down
4 changes: 2 additions & 2 deletions apps/meteor/tests/e2e/e2e-encryption/e2ee-encrypted-channels.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,7 +345,7 @@ test.describe('E2EE Encrypted Channels', () => {

await poHomeChannel.content.openLastMessageMenu();
await poHomeChannel.content.btnOptionEditMessage.click();
await poHomeChannel.content.inputMessage.fill(editedMessage);
await poHomeChannel.composer.inputMessage.fill(editedMessage);

await page.keyboard.press('Enter');

Expand All @@ -369,7 +369,7 @@ test.describe('E2EE Encrypted Channels', () => {

await poHomeChannel.content.openLastMessageMenu();
await poHomeChannel.content.btnOptionEditMessage.click();
await poHomeChannel.content.inputMessage.fill(editedMessage);
await poHomeChannel.composer.inputMessage.fill(editedMessage);

await page.keyboard.press('Enter');

Expand Down
4 changes: 2 additions & 2 deletions apps/meteor/tests/e2e/e2e-encryption/e2ee-file-encryption.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,9 @@ test.describe('E2EE File Encryption', () => {
await poHomeChannel.content.openLastMessageMenu();
await poHomeChannel.content.btnOptionEditMessage.click();

expect(await poHomeChannel.composer.inputValue()).toBe('any_description');
expect(await poHomeChannel.composer.inputMessage.inputValue()).toBe('any_description');

await poHomeChannel.content.inputMessage.fill('edited any_description');
await poHomeChannel.composer.inputMessage.fill('edited any_description');
await page.keyboard.press('Enter');

await expect(poHomeChannel.content.getFileDescription).toHaveText('edited any_description');
Expand Down
10 changes: 5 additions & 5 deletions apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ test.describe.serial('E2EE Passphrase Management - Room Setup States', () => {
await expect(poHomeChannel.roomToolbar.btnMembers).toBeVisible();
await expect(poHomeChannel.roomToolbar.btnRoomInfo).toBeVisible();

await expect(poHomeChannel.content.inputMessage).not.toBeVisible();
await expect(poHomeChannel.composer.inputMessage).not.toBeVisible();

await poHomeChannel.btnRoomSaveE2EEPassword.click();

Expand All @@ -239,7 +239,7 @@ test.describe.serial('E2EE Passphrase Management - Room Setup States', () => {

await poHomeChannel.btnSavedMyPassword.click();

await poHomeChannel.content.inputMessage.waitFor();
await poHomeChannel.composer.inputMessage.waitFor();

await poHomeChannel.content.sendMessage('hello world');

Expand Down Expand Up @@ -273,7 +273,7 @@ test.describe.serial('E2EE Passphrase Management - Room Setup States', () => {
await expect(poHomeChannel.roomToolbar.btnMembers).toBeVisible();
await expect(poHomeChannel.roomToolbar.btnRoomInfo).toBeVisible();

await expect(poHomeChannel.content.inputMessage).not.toBeVisible();
await expect(poHomeChannel.composer.inputMessage).not.toBeVisible();

await poHomeChannel.btnRoomEnterE2EEPassword.click();

Expand All @@ -283,7 +283,7 @@ test.describe.serial('E2EE Passphrase Management - Room Setup States', () => {

await expect(poHomeChannel.bannerEnterE2EEPassword).not.toBeVisible();

await poHomeChannel.content.inputMessage.waitFor();
await poHomeChannel.composer.inputMessage.waitFor();
// For E2EE to complete init setup
await page.waitForTimeout(300);

Expand Down Expand Up @@ -334,7 +334,7 @@ test.describe.serial('E2EE Passphrase Management - Room Setup States', () => {
await poHomeChannel.btnRoomSaveE2EEPassword.click();
await poHomeChannel.btnSavedMyPassword.click();

await expect(poHomeChannel.content.inputMessage).not.toBeVisible();
await expect(poHomeChannel.composer.inputMessage).not.toBeVisible();
await expect(page.locator('.rcx-states__title')).toContainText('Check back later');

await poHomeChannel.roomToolbar.btnDisableE2EEncryption.waitFor();
Expand Down
36 changes: 18 additions & 18 deletions apps/meteor/tests/e2e/embedded-layout.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,9 @@ test.describe('embedded-layout', () => {
await poHomeChannel.navbar.openChat(targetChannelId);
await page.goto(embeddedLayoutURL(page.url()));

await expect(poHomeChannel.composer).toBeVisible();
await expect(poHomeChannel.composer).toBeEnabled();
await expect(poHomeChannel.btnJoinRoom).not.toBeVisible();
await expect(poHomeChannel.composer.inputMessage).toBeVisible();
await expect(poHomeChannel.composer.inputMessage).toBeEnabled();
await expect(poHomeChannel.composer.btnJoinRoom).not.toBeVisible();
});

test('should allow sending and receiving messages', async ({ page }) => {
Expand All @@ -85,14 +85,14 @@ test.describe('embedded-layout', () => {
await poHomeChannel.navbar.openChat(targetChannelId);
await page.goto(embeddedLayoutURL(page.url()));

await expect(poHomeChannel.composer).toBeVisible();
await expect(poHomeChannel.composerToolbar).toBeVisible();
await expect(poHomeChannel.composer.inputMessage).toBeVisible();
await expect(poHomeChannel.composer.toolbarPrimaryActions).toBeVisible();

await poHomeChannel.composer.fill('Test message');
await expect(poHomeChannel.composer).toHaveValue('Test message');
await poHomeChannel.composer.inputMessage.fill('Test message');
await expect(poHomeChannel.composer.inputMessage).toHaveValue('Test message');

await poHomeChannel.composer.fill('');
await expect(poHomeChannel.composer).toHaveValue('');
await poHomeChannel.composer.inputMessage.fill('');
await expect(poHomeChannel.composer.inputMessage).toHaveValue('');
});
});

Expand All @@ -102,20 +102,20 @@ test.describe('embedded-layout', () => {
await poHomeChannel.navbar.openChat(notMemberChannelId);
await page.goto(embeddedLayoutURL(page.url()));

await expect(poHomeChannel.composer).toBeDisabled();
await expect(poHomeChannel.btnJoinRoom).toBeVisible();
await expect(poHomeChannel.composer.inputMessage).toBeDisabled();
await expect(poHomeChannel.composer.btnJoinRoom).toBeVisible();
});

test('should allow joining channel and enable messaging', async ({ page }) => {
await page.goto('/home');
await poHomeChannel.navbar.openChat(joinChannelId);
await page.goto(embeddedLayoutURL(page.url()));

await poHomeChannel.btnJoinRoom.click();
await poHomeChannel.composer.btnJoinRoom.click();

await expect(poHomeChannel.btnJoinRoom).not.toBeVisible();
await expect(poHomeChannel.composer).toBeVisible();
await expect(poHomeChannel.composer).toBeEnabled();
await expect(poHomeChannel.composer.btnJoinRoom).not.toBeVisible();
await expect(poHomeChannel.composer.inputMessage).toBeVisible();
await expect(poHomeChannel.composer.inputMessage).toBeEnabled();

const joinMessage = `Joined and sent message ${Date.now()}`;
await poHomeChannel.content.sendMessage(joinMessage);
Expand All @@ -130,9 +130,9 @@ test.describe('embedded-layout', () => {
await poHomeChannel.navbar.openChat(Users.user2.data.username);
await page.goto(embeddedLayoutURL(page.url()));

await expect(poHomeChannel.composer).toBeVisible();
await expect(poHomeChannel.composer).toBeEnabled();
await expect(poHomeChannel.btnJoinRoom).not.toBeVisible();
await expect(poHomeChannel.composer.inputMessage).toBeVisible();
await expect(poHomeChannel.composer.inputMessage).toBeEnabled();
await expect(poHomeChannel.composer.btnJoinRoom).not.toBeVisible();

const dmMessage = `Embedded DM test ${Date.now()}`;
await poHomeChannel.content.sendMessage(dmMessage);
Expand Down
9 changes: 5 additions & 4 deletions apps/meteor/tests/e2e/emojis.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,22 +22,23 @@ test.describe.serial('emoji', () => {

test('should display emoji picker properly', async ({ page }) => {
await poHomeChannel.navbar.openChat(targetChannel);
await poHomeChannel.content.btnComposerEmoji.click();
await poHomeChannel.composer.btnEmoji.click();

await test.step('should display scroller', async () => {
await expect(poHomeChannel.content.scrollerEmojiPicker).toBeVisible();
await expect(poHomeChannel.scrollerEmojiPicker).toBeVisible();
});

await test.step('should focus the active emoji tab category', async () => {
const activityEmojiTab = poHomeChannel.content.getEmojiPickerTabByName('Activity');
const activityEmojiTab = poHomeChannel.getEmojiPickerTabByName('Activity');
await activityEmojiTab.click();

await expect(activityEmojiTab).toBeFocused();
await poHomeChannel.composer.inputMessage.click(); // To close the emoji picker
});

await test.step('should pick and send grinning emoji', async () => {
await poHomeChannel.navbar.openChat(targetChannel);
await poHomeChannel.content.pickEmoji('grinning');
await poHomeChannel.pickEmoji('grinning');
await page.keyboard.press('Enter');

await expect(poHomeChannel.content.lastUserMessage).toContainText('😀');
Expand Down
4 changes: 2 additions & 2 deletions apps/meteor/tests/e2e/feature-preview.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ test.describe.serial('feature preview', () => {

const discussionName = faker.string.uuid();

await poHomeChannel.content.btnMenuMoreActions.click();
await poHomeChannel.composer.btnMenuMoreActions.click();
await page.getByRole('menuitem', { name: 'Discussion' }).click();
await poHomeChannel.content.inputDiscussionName.fill(discussionName);
await poHomeChannel.content.btnCreateDiscussionModal.click();
Expand Down Expand Up @@ -585,7 +585,7 @@ test.describe.serial('feature preview', () => {
});

await test.step('create discussion in DM', async () => {
await poHomeChannel.content.btnMenuMoreActions.click();
await poHomeChannel.composer.btnMenuMoreActions.click();
await page.getByRole('menuitem', { name: 'Discussion' }).click();
await poHomeChannel.content.inputDiscussionName.fill(discussionName);
await poHomeChannel.content.btnCreateDiscussionModal.click();
Expand Down
4 changes: 2 additions & 2 deletions apps/meteor/tests/e2e/image-gallery.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ test.describe.serial('Image Gallery', async () => {
poHomeChannel = new HomeChannel(page);

await poHomeChannel.navbar.openChat(targetChannelLargeImage);
await poHomeChannel.content.btnJoinRoom.click();
await poHomeChannel.composer.btnJoinRoom.click();

await poHomeChannel.navbar.openChat(targetChannel);
await poHomeChannel.content.btnJoinRoom.click();
await poHomeChannel.composer.btnJoinRoom.click();
});

test.afterAll(async ({ api }) => {
Expand Down
34 changes: 17 additions & 17 deletions apps/meteor/tests/e2e/message-composer.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@ test.describe.serial('message-composer', () => {
await poHomeChannel.navbar.openChat(targetChannel);
await poHomeChannel.content.sendMessage('hello composer');

await expect(poHomeChannel.composerToolbarActions).toHaveCount(12);
await expect(poHomeChannel.composer.allPrimaryActions).toHaveCount(12);
});

test('should have only the main formatter and the main action', async ({ page }) => {
await page.setViewportSize({ width: 768, height: 600 });
await poHomeChannel.navbar.openChat(targetChannel);

await expect(poHomeChannel.composerToolbarActions).toHaveCount(6);
await expect(poHomeChannel.composer.allPrimaryActions).toHaveCount(6);
});

test('should navigate on toolbar using arrow keys', async ({ page }) => {
Expand All @@ -41,10 +41,10 @@ test.describe.serial('message-composer', () => {
await page.keyboard.press('Tab');
await page.keyboard.press('ArrowRight');
await page.keyboard.press('ArrowRight');
await expect(poHomeChannel.composerToolbar.getByRole('button', { name: 'Italic' })).toBeFocused();
await expect(poHomeChannel.composer.btnItalicFormatter).toBeFocused();

await page.keyboard.press('ArrowLeft');
await expect(poHomeChannel.composerToolbar.getByRole('button', { name: 'Bold' })).toBeFocused();
await expect(poHomeChannel.composer.btnBoldFormatter).toBeFocused();
});

test('should move the focus away from toolbar using tab key', async ({ page }) => {
Expand All @@ -53,7 +53,7 @@ test.describe.serial('message-composer', () => {
await page.keyboard.press('Tab');
await page.keyboard.press('Tab');

await expect(poHomeChannel.composerToolbar.getByRole('button', { name: 'Emoji' })).not.toBeFocused();
await expect(poHomeChannel.composer.btnEmoji).not.toBeFocused();
});

test('should add a link to the selected text', async ({ page }) => {
Expand All @@ -63,11 +63,11 @@ test.describe.serial('message-composer', () => {
await page.keyboard.type('hello composer');
await page.keyboard.press('Control+A'); // on Windows and Linux
await page.keyboard.press('Meta+A'); // on macOS
await poHomeChannel.composerToolbar.getByRole('button', { name: 'Link' }).click();
await poHomeChannel.composer.btnLinkFormatter.click();
await page.keyboard.type(url);
await page.keyboard.press('Enter');

await expect(poHomeChannel.composer).toHaveValue(`[hello composer](${url})`);
await expect(poHomeChannel.composer.inputMessage).toHaveValue(`[hello composer](${url})`);
});

test('should select popup item and not send the message when pressing enter', async ({ page }) => {
Expand All @@ -79,29 +79,29 @@ test.describe.serial('message-composer', () => {

await page.keyboard.press('Enter');

await expect(poHomeChannel.composer).toHaveValue('hello composer @all ');
await expect(poHomeChannel.composer.inputMessage).toHaveValue('hello composer @all ');

await poHomeChannel.composer.fill('');
await poHomeChannel.composer.inputMessage.fill('');
});

await test.step('emoji popup', async () => {
await page.keyboard.type('hello composer :flag_br');

await page.keyboard.press('Enter');

await expect(poHomeChannel.composer).toHaveValue('hello composer :flag_br: ');
await expect(poHomeChannel.composer.inputMessage).toHaveValue('hello composer :flag_br: ');

await poHomeChannel.composer.fill('');
await poHomeChannel.composer.inputMessage.fill('');
});

await test.step('slash command', async () => {
await page.keyboard.type('/gim');

await page.keyboard.press('Enter');

await expect(poHomeChannel.composer).toHaveValue('/gimme ');
await expect(poHomeChannel.composer.inputMessage).toHaveValue('/gimme ');

await poHomeChannel.composer.fill('');
await poHomeChannel.composer.inputMessage.fill('');
});
});

Expand All @@ -112,21 +112,21 @@ test.describe.serial('message-composer', () => {
await test.step('mention popup', async () => {
await page.keyboard.type('hello composer @rocket.cat');

await expect(poHomeChannel.composerBoxPopup.getByText('rocket.cat')).toBeVisible();
await expect(poHomeChannel.composer.boxPopup.getByText('rocket.cat')).toBeVisible();
});
});

test.describe('audio recorder', () => {
test('should open audio recorder', async () => {
await poHomeChannel.navbar.openChat(targetChannel);
await poHomeChannel.composerToolbar.getByRole('button', { name: 'Audio message', exact: true }).click();
await poHomeChannel.composer.btnAudioMessage.click();

await expect(poHomeChannel.audioRecorder).toBeVisible();
});

test('should stop recording when clicking on cancel', async () => {
await poHomeChannel.navbar.openChat(targetChannel);
await poHomeChannel.composerToolbar.getByRole('button', { name: 'Audio message', exact: true }).click();
await poHomeChannel.composer.btnAudioMessage.click();
await expect(poHomeChannel.audioRecorder).toBeVisible();

await poHomeChannel.audioRecorder.getByRole('button', { name: 'Cancel recording', exact: true }).click();
Expand All @@ -135,7 +135,7 @@ test.describe.serial('message-composer', () => {

test('should open file modal when clicking on "Finish recording"', async ({ page }) => {
await poHomeChannel.navbar.openChat(targetChannel);
await poHomeChannel.composerToolbar.getByRole('button', { name: 'Audio message', exact: true }).click();
await poHomeChannel.composer.btnAudioMessage.click();
await expect(poHomeChannel.audioRecorder).toBeVisible();

await page.waitForTimeout(1000);
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/tests/e2e/message-mentions.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ test.describe.serial('message-mentions', () => {

test('expect show "all" and "here" options', async () => {
await poHomeChannel.navbar.openChat('general');
await poHomeChannel.content.inputMessage.type('@');
await poHomeChannel.composer.inputMessage.type('@');

await expect(poHomeChannel.content.messagePopupUsers.locator('role=listitem >> text="all"')).toBeVisible();
await expect(poHomeChannel.content.messagePopupUsers.locator('role=listitem >> text="here"')).toBeVisible();
Expand Down
Loading
Loading