chore: e2e tests

apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx

@@ -110,7 +110,7 @@ const TeamsChannels = ({
 								{t('Total')}: {total}
 							</Box>
 						</Box>
-						<Box w='full' h='full' overflow='hidden' flexShrink={1}>
+						<Box w='full' h='full' role='list' overflow='hidden' flexShrink={1}>
 							<Virtuoso
 								totalCount={total}
 								data={channels}

apps/meteor/client/views/teams/contextualBar/channels/hooks/useRemoveRoomFromTeam.tsx

@@ -21,7 +21,7 @@ export const useRemoveRoomFromTeam = (room: IRoom, { reload }: { reload?: () =>
 
 			try {
 				await removeRoomEndpoint({ teamId: room.teamId, roomId: room._id });
-				dispatchToastMessage({ type: 'error', message: t('Room_has_been_removed') });
+				dispatchToastMessage({ type: 'success', message: t('Room_has_been_removed') });
 				reload?.();
 			} catch (error) {
 				dispatchToastMessage({ type: 'error', message: error });

apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.tsx

@@ -109,12 +109,13 @@ const TeamsInfo = ({
 				flexGrow={0}
 				key='menu'
 				maxHeight='initial'
+				title={t('More')}
 				secondary
 				renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option {...props} label={label} icon={icon} />}
 				options={menuOptions}
 			/>
 		);
-	}, [menuOptions]);
+	}, [t, menuOptions]);
 
 	const actions = useMemo(() => {
 		const mapAction = ([key, { label, icon, action }]: [string, Action]): ReactElement => (

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

@@ -64,7 +64,7 @@ test.describe.serial('channel-management', () => {
 		await poHomeChannel.tabs.members.addUser('user1');
 
 		await expect(poHomeChannel.tabs.members.memberOption('user1')).toBeVisible();
-		await expect(poHomeChannel.getSystemMessageByText('added user1')).toBeVisible();
+		await expect(poHomeChannel.content.getSystemMessageByText('added user1')).toBeVisible();
 	});
 
 	test('should edit topic of targetChannel', async ({ page }) => {
@@ -78,7 +78,7 @@ test.describe.serial('channel-management', () => {
 		await poHomeChannel.tabs.btnRoomInfo.click();
 		await expect(page.getByRole('heading', { name: 'hello-topic-edited' })).toBeVisible();
 		await expect(page.getByRole('dialog', { name: 'Channel info' })).toContainText('hello-topic-edited');
-		await expect(poHomeChannel.getSystemMessageByText('changed room topic to hello-topic-edited')).toBeVisible();
+		await expect(poHomeChannel.content.getSystemMessageByText('changed room topic to hello-topic-edited')).toBeVisible();
 	});
 
 	test('should edit announcement of targetChannel', async ({ page }) => {
@@ -91,7 +91,7 @@ test.describe.serial('channel-management', () => {
 		await poHomeChannel.dismissToast();
 		await poHomeChannel.tabs.btnRoomInfo.click();
 		await expect(page.getByRole('dialog', { name: 'Channel info' })).toContainText('hello-announcement-edited');
-		await expect(poHomeChannel.getSystemMessageByText('changed room announcement to: hello-announcement-edited')).toBeVisible();
+		await expect(poHomeChannel.content.getSystemMessageByText('changed room announcement to: hello-announcement-edited')).toBeVisible();
 	});
 
 	test('should edit description of targetChannel', async ({ page }) => {
@@ -104,7 +104,7 @@ test.describe.serial('channel-management', () => {
 		await poHomeChannel.dismissToast();
 		await poHomeChannel.tabs.btnRoomInfo.click();
 		await expect(page.getByRole('dialog', { name: 'Channel info' })).toContainText('hello-description-edited');
-		await expect(poHomeChannel.getSystemMessageByText('changed room description to: hello-description-edited')).toBeVisible();
+		await expect(poHomeChannel.content.getSystemMessageByText('changed room description to: hello-description-edited')).toBeVisible();
 	});
 
 	test('should edit name of targetChannel', async ({ page }) => {
@@ -202,11 +202,11 @@ test.describe.serial('channel-management', () => {
 			await poHomeChannel.tabs.members.showAllUsers();
 			await poHomeChannel.tabs.members.muteUser('user1');
 
-			await expect(poHomeChannel.getSystemMessageByText('muted user1')).toBeVisible();
+			await expect(poHomeChannel.content.getSystemMessageByText('muted user1')).toBeVisible();
 
 			const user1Channel = new HomeChannel(user1Page);
 			await user1Page.goto(`/channel/${targetChannel}`);
-			await user1Channel.waitForChannel();
+			await user1Channel.content.waitForChannel();
 			await expect(user1Channel.readOnlyFooter).toBeVisible();
 		});
 
@@ -216,11 +216,11 @@ test.describe.serial('channel-management', () => {
 			await poHomeChannel.tabs.members.showAllUsers();
 			await poHomeChannel.tabs.members.unmuteUser('user1');
 
-			await expect(poHomeChannel.getSystemMessageByText('unmuted user1')).toBeVisible();
+			await expect(poHomeChannel.content.getSystemMessageByText('unmuted user1')).toBeVisible();
 
 			const user1Channel = new HomeChannel(user1Page);
 			await user1Page.goto(`/channel/${targetChannel}`);
-			await user1Channel.waitForChannel();
+			await user1Channel.content.waitForChannel();
 			await expect(user1Channel.composer).toBeVisible();
 		});
 
@@ -230,11 +230,11 @@ test.describe.serial('channel-management', () => {
 			await poHomeChannel.tabs.members.showAllUsers();
 			await poHomeChannel.tabs.members.setUserAsModerator('user1');
 
-			await expect(poHomeChannel.getSystemMessageByText('set user1 as moderator')).toBeVisible();
+			await expect(poHomeChannel.content.getSystemMessageByText('set user1 as moderator')).toBeVisible();
 
 			const user1Channel = new HomeChannel(user1Page);
 			await user1Page.goto(`/channel/${targetChannel}`);
-			await user1Channel.waitForChannel();
+			await user1Channel.content.waitForChannel();
 			await user1Channel.tabs.btnRoomInfo.click();
 			await expect(user1Channel.tabs.room.btnEdit).toBeVisible();
 		});
@@ -245,12 +245,12 @@ test.describe.serial('channel-management', () => {
 			await poHomeChannel.tabs.members.showAllUsers();
 			await poHomeChannel.tabs.members.setUserAsOwner('user1');
 
-			await expect(poHomeChannel.getSystemMessageByText('set user1 as owner')).toBeVisible();
+			await expect(poHomeChannel.content.getSystemMessageByText('set user1 as owner')).toBeVisible();
 
 			const user1Page = await browser.newPage({ storageState: Users.user1.state });
 			const user1Channel = new HomeChannel(user1Page);
 			await user1Page.goto(`/channel/${targetChannel}`);
-			await user1Channel.waitForChannel();
+			await user1Channel.content.waitForChannel();
 			await user1Channel.tabs.btnRoomInfo.click();
 
 			await user1Channel.tabs.room.btnMore.click();
@@ -271,7 +271,7 @@ test.describe.serial('channel-management', () => {
 
 			const user1Channel = new HomeChannel(user1Page);
 			await user1Page.goto(`/channel/${targetChannel}`);
-			await user1Channel.waitForChannel();
+			await user1Channel.content.waitForChannel();
 			await user1Channel.content.sendMessage('message to check ignore');
 
 			await expect(poHomeChannel.content.lastUserMessageBody).toContainText('This message was ignored');
@@ -282,7 +282,7 @@ test.describe.serial('channel-management', () => {
 
 			const user1Channel = new HomeChannel(user1Page);
 			await user1Page.goto(`/channel/${targetChannel}`);
-			await user1Channel.waitForChannel();
+			await user1Channel.content.waitForChannel();
 			await user1Channel.content.sendMessage('only message to be unignored');
 
 			await poHomeChannel.sidenav.openChat(targetChannel);
@@ -295,7 +295,7 @@ test.describe.serial('channel-management', () => {
 		test('should unignore user1 messages', async () => {
 			const user1Channel = new HomeChannel(user1Page);
 			await user1Page.goto(`/channel/${targetChannel}`);
-			await user1Channel.waitForChannel();
+			await user1Channel.content.waitForChannel();
 			await user1Channel.content.sendMessage('message before being unignored');
 
 			await poHomeChannel.sidenav.openChat(targetChannel);
@@ -327,7 +327,7 @@ test.describe.serial('channel-management', () => {
 			const channel = new HomeChannel(user1Page);
 
 			await user1Page.goto(`/channel/${channelName}`);
-			await channel.waitForChannel();
+			await channel.content.waitForChannel();
 			await expect(user1Page.locator('button >> text="Join"')).toBeVisible();
 		});
 	});

apps/meteor/tests/e2e/page-objects/fragments/home-content.ts

@@ -2,6 +2,8 @@ import fs from 'fs/promises';
 
 import type { Locator, Page } from '@playwright/test';
 
+import { expect } from '../../utils/test';
+
 export class HomeContent {
 	protected readonly page: Page;
 
@@ -376,7 +378,19 @@ export class HomeContent {
 		return this.page.locator('div[class="swiper-slide swiper-slide-active"] img');
 	}
 
+	// TODO: use getSystemMessageByText instead
 	findSystemMessage(text: string): Locator {
 		return this.page.locator(`[data-qa-type="system-message-body"] >> text="${text}"`);
 	}
+
+	getSystemMessageByText(text: string): Locator {
+		return this.page.locator('[aria-roledescription="system message"]', { hasText: text });
+	}
+
+	async waitForChannel(): Promise<void> {
+		await this.page.locator('role=main').waitFor();
+		await this.page.locator('role=main >> role=heading[level=1]').waitFor();
+
+		await expect(this.page.locator('role=main >> role=list')).not.toHaveAttribute('aria-busy', 'true');
+	}
 }

apps/meteor/tests/e2e/page-objects/fragments/home-flextab-channels.ts

@@ -7,6 +7,10 @@ export class HomeFlextabChannels {
 		this.page = page;
 	}
 
+	get channelsTab(): Locator {
+		return this.page.getByRole('dialog', { exact: true });
+	}
+
 	get btnAddExisting(): Locator {
 		return this.page.locator('button >> text="Add Existing"');
 	}
@@ -18,4 +22,24 @@ export class HomeFlextabChannels {
 	get btnAdd(): Locator {
 		return this.page.locator('role=dialog >> role=group >> role=button[name=Add]');
 	}
+
+	get channelsList(): Locator {
+		return this.channelsTab.getByRole('list');
+	}
+
+	channelOption(name: string) {
+		return this.channelsTab.locator('li', { hasText: name });
+	}
+
+	async openChannelOptionMoreActions(name: string) {
+		await this.channelOption(name).hover();
+		await this.channelOption(name).locator('role=button[name="More"]').click();
+	}
+
+	async confirmRemoveChannel() {
+		return this.page
+			.getByRole('dialog', { name: 'Are you sure?', exact: true })
+			.getByRole('button', { name: 'Remove', exact: true })
+			.click();
+	}
 }

apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts

@@ -79,4 +79,11 @@ export class HomeFlextabMembers {
 	async unignoreUser(username: string) {
 		await this.ignoreUserAction('Unignore', username);
 	}
+
+	async confirmRemoveUser() {
+		return this.page
+			.getByRole('dialog', { name: 'Confirmation', exact: true })
+			.getByRole('button', { name: 'Remove', exact: true })
+			.click();
+	}
 }

apps/meteor/tests/e2e/page-objects/fragments/home-flextab-room.ts

@@ -7,32 +7,60 @@ export class HomeFlextabRoom {
 		this.page = page;
 	}
 
+	get roomInfoTab(): Locator {
+		return this.page.getByRole('dialog', { exact: true });
+	}
+
 	get btnEdit(): Locator {
-		return this.page.locator('role=button[name="Edit"]');
+		return this.roomInfoTab.locator('role=button[name="Edit"]');
 	}
 
 	get btnMore(): Locator {
-		return this.page.locator('role=button[name="More"]');
+		return this.roomInfoTab.locator('role=button[name="More"]');
+	}
+
+	get btnLeave(): Locator {
+		return this.roomInfoTab.locator('role=button[name="Leave"]');
+	}
+
+	get btnDelete(): Locator {
+		return this.roomInfoTab.locator('role=button[name="Delete"]');
+	}
+
+	getMoreOption(option: string) {
+		return this.roomInfoTab.locator(`role=menuitem[name="${option}"]`);
+	}
+
+	async confirmLeave() {
+		return this.page.getByRole('dialog', { name: 'Confirmation', exact: true }).getByRole('button', { name: 'Leave', exact: true }).click();
+	}
+
+	async confirmDelete() {
+		return this.page.getByRole('dialog', { exact: true }).getByRole('button', { name: 'Yes, delete', exact: true }).click();
+	}
+
+	async confirmConvert() {
+		return this.page.getByRole('dialog', { exact: true }).getByRole('button', { name: 'Convert', exact: true }).click();
 	}
 
 	get optionDelete(): Locator {
 		return this.page.locator('label[data-key="delete"]');
 	}
 
 	get inputName(): Locator {
-		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Name' });
+		return this.roomInfoTab.getByRole('textbox', { name: 'Name' });
 	}
 
 	get inputTopic(): Locator {
-		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Topic' });
+		return this.roomInfoTab.getByRole('textbox', { name: 'Topic' });
 	}
 
 	get inputAnnouncement(): Locator {
-		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Announcement' });
+		return this.roomInfoTab.getByRole('textbox', { name: 'Announcement' });
 	}
 
 	get inputDescription(): Locator {
-		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Description' });
+		return this.roomInfoTab.getByRole('textbox', { name: 'Description' });
 	}
 
 	get checkboxReadOnly(): Locator {

apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts

@@ -36,6 +36,10 @@ export class HomeFlextab {
 		return this.page.locator('[data-qa-id="ToolBoxAction-hash"]');
 	}
 
+	get btnTeamMembers(): Locator {
+		return this.page.locator('role=menuitem[name="Teams Members"]');
+	}
+
 	get kebab(): Locator {
 		return this.page.locator('role=button[name="Options"]');
 	}

apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts

@@ -95,7 +95,16 @@ export class HomeSidenav {
 	}
 
 	async openSearch(): Promise<void> {
-		await this.page.locator('role=button[name="Search"]').click();
+		await this.page.locator('role=navigation >> role=button[name=Search]').click();
+	}
+
+	getSearchRoomByName(name: string): Locator {
+		return this.page.locator(`role=search >> role=listbox >> role=link >> text="${name}"`);
+	}
+
+	async searchRoom(name: string): Promise<void> {
+		await this.openSearch();
+		await this.page.locator('role=search >> role=searchbox').fill(name);
 	}
 
 	async logout(): Promise<void> {
@@ -109,9 +118,8 @@ export class HomeSidenav {
 	}
 
 	async openChat(name: string): Promise<void> {
-		await this.page.locator('role=navigation >> role=button[name=Search]').click();
-		await this.page.locator('role=search >> role=searchbox').fill(name);
-		await this.page.locator(`role=search >> role=listbox >> role=link >> text="${name}"`).click();
+		await this.searchRoom(name);
+		await this.getSearchRoomByName(name).click();
 		await this.waitForChannel();
 	}
 

apps/meteor/tests/e2e/page-objects/home-channel.ts

@@ -1,6 +1,5 @@
 import type { Locator, Page } from '@playwright/test';
 
-import { expect } from '../utils/test';
 import { HomeContent, HomeSidenav, HomeFlextab } from './fragments';
 
 export class HomeChannel {
@@ -27,14 +26,6 @@ export class HomeChannel {
 		return this.page.locator('[data-qa="ContextualbarActionClose"]');
 	}
 
-	async waitForChannel(): Promise<void> {
-		await this.page.locator('role=main').waitFor();
-		await this.page.locator('role=main >> role=heading[level=1]').waitFor();
-
-		await expect(this.page.locator('role=main >> .rcx-skeleton')).toHaveCount(0);
-		await expect(this.page.locator('role=main >> role=list')).not.toHaveAttribute('aria-busy', 'true');
-	}
-
 	async dismissToast() {
 		// this is a workaround for when the toast is blocking the click of the button
 		await this.toastSuccess.locator('button >> i.rcx-icon--name-cross.rcx-icon').click();
@@ -68,8 +59,4 @@ export class HomeChannel {
 	get roomHeaderToolbar(): Locator {
 		return this.page.locator('[role=toolbar][aria-label="Primary Room actions"]');
 	}
-
-	getSystemMessageByText(text: string): Locator {
-		return this.page.locator('[aria-roledescription="system message"]', { hasText: text });
-	}
 }

apps/meteor/tests/e2e/retention-policy.spec.ts

@@ -119,7 +119,7 @@ test.describe.serial('retention-policy', () => {
 				await auxContext.poHomeChannel.tabs.room.checkboxReadOnly.check();
 				await auxContext.poHomeChannel.tabs.room.btnSave.click();
 
-				await expect(auxContext.poHomeChannel.getSystemMessageByText('set room to read only')).toBeVisible();
+				await expect(auxContext.poHomeChannel.content.getSystemMessageByText('set room to read only')).toBeVisible();
 			});
 		});