test: Add e2e tests for teams multi-step modals (#33168)

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/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,12 @@ export class HomeFlextabMembers {
 	async unignoreUser(username: string) {
 		await this.ignoreUserAction('Unignore', username);
 	}
+
+	get confirmRemoveUserModal() {
+		return this.page.getByRole('dialog', { name: 'Confirmation', exact: true });
+	}
+
+	async confirmRemoveUser() {
+		return this.confirmRemoveUserModal.getByRole('button', { name: 'Remove', exact: true }).click();
+	}
 }

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

@@ -7,6 +7,10 @@ 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"]');
 	}
@@ -15,6 +19,42 @@ export class HomeFlextabRoom {
 		return this.page.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}"]`);
+	}
+
+	get confirmLeaveModal(): Locator {
+		return this.page.getByRole('dialog', { name: 'Confirmation', exact: true });
+	}
+
+	async confirmLeave() {
+		return this.confirmLeaveModal.getByRole('button', { name: 'Leave', exact: true }).click();
+	}
+
+	get confirmDeleteTeamModal(): Locator {
+		return this.page.getByRole('dialog', { name: 'Delete team', exact: true });
+	}
+
+	async confirmDeleteTeam() {
+		return this.confirmDeleteTeamModal.getByRole('button', { name: 'Yes, delete', exact: true }).click();
+	}
+
+	get confirmConvertModal(): Locator {
+		return this.page.getByRole('dialog', { name: 'Confirmation', exact: true });
+	}
+
+	async confirmConvert() {
+		return this.confirmConvertModal.getByRole('button', { name: 'Convert', exact: true }).click();
+	}
+
 	get optionDelete(): Locator {
 		return this.page.locator('label[data-key="delete"]');
 	}

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

 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

@@ -118,7 +118,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();
 			});
 		});
 

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

@@ -24,18 +24,18 @@ test.describe.serial('teams-management', () => {
 		await page.goto('/home');
 	});
 
-	test('expect create "targetTeam" private', async ({ page }) => {
+	test('should create targetTeam private', async ({ page }) => {
 		await poHomeTeam.sidenav.openNewByLabel('Team');
-		await poHomeTeam.inputTeamName.type(targetTeam);
+		await poHomeTeam.inputTeamName.fill(targetTeam);
 		await poHomeTeam.addMember('user1');
 		await poHomeTeam.btnTeamCreate.click();
 
 		await expect(page).toHaveURL(`/group/${targetTeam}`);
 	});
 
-	test('expect create "targetTeamNonPrivate" non private', async ({ page }) => {
+	test('should create targetTeamNonPrivate non private', async ({ page }) => {
 		await poHomeTeam.sidenav.openNewByLabel('Team');
-		await poHomeTeam.inputTeamName.type(targetTeamNonPrivate);
+		await poHomeTeam.inputTeamName.fill(targetTeamNonPrivate);
 		await poHomeTeam.textPrivate.click();
 		await poHomeTeam.addMember('user1');
 		await poHomeTeam.btnTeamCreate.click();
@@ -43,9 +43,9 @@ test.describe.serial('teams-management', () => {
 		await expect(page).toHaveURL(`/channel/${targetTeamNonPrivate}`);
 	});
 
-	test('expect create "targetTeamReadOnly" readonly', async ({ page }) => {
+	test('should create targetTeamReadOnly readonly', async ({ page }) => {
 		await poHomeTeam.sidenav.openNewByLabel('Team');
-		await poHomeTeam.inputTeamName.type(targetTeamReadOnly);
+		await poHomeTeam.inputTeamName.fill(targetTeamReadOnly);
 		await poHomeTeam.sidenav.advancedSettingsAccordion.click();
 		await poHomeTeam.textReadOnly.click();
 		await poHomeTeam.addMember('user1');
@@ -54,15 +54,15 @@ test.describe.serial('teams-management', () => {
 		await expect(page).toHaveURL(`/group/${targetTeamReadOnly}`);
 	});
 
-	test('expect throw validation error if team name already exists', async () => {
+	test('should throw validation error if team name already exists', async () => {
 		await poHomeTeam.sidenav.openNewByLabel('Team');
-		await poHomeTeam.inputTeamName.type(targetTeam);
+		await poHomeTeam.inputTeamName.fill(targetTeam);
 		await poHomeTeam.btnTeamCreate.click();
 
 		await expect(poHomeTeam.inputTeamName).toHaveAttribute('aria-invalid', 'true');
 	});
 
-	test('expect send hello in the "targetTeam" and reply in a thread', async ({ page }) => {
+	test('should send hello in the targetTeam and reply in a thread', async ({ page }) => {
 		await poHomeTeam.sidenav.openChat(targetTeam);
 		await poHomeTeam.content.sendMessage('hello');
 		await page.locator('[data-qa-type="message"]').last().hover();
@@ -73,25 +73,28 @@ test.describe.serial('teams-management', () => {
 		await expect(poHomeTeam.tabs.flexTabViewThreadMessage).toHaveText('any-reply-message');
 	});
 
-	test('expect set "targetTeam" as readonly', async () => {
+	test('should set targetTeam as readonly', async () => {
 		await poHomeTeam.sidenav.openChat(targetTeam);
 		await poHomeTeam.tabs.btnRoomInfo.click();
 		await poHomeTeam.tabs.room.btnEdit.click();
 		await poHomeTeam.tabs.room.checkboxReadOnly.click();
 		await poHomeTeam.tabs.room.btnSave.click();
+
+		await expect(poHomeTeam.content.getSystemMessageByText('set room to read only')).toBeVisible();
 	});
 
-	test('expect insert a channel inside "targetTeam"', async ({ page }) => {
+	test('should insert targetChannel inside targetTeam', async ({ page }) => {
 		await poHomeTeam.sidenav.openChat(targetTeam);
 		await poHomeTeam.tabs.btnChannels.click();
 		await poHomeTeam.tabs.channels.btnAddExisting.click();
-		await poHomeTeam.tabs.channels.inputChannels.type(targetChannel, { delay: 100 });
+		await poHomeTeam.tabs.channels.inputChannels.fill(targetChannel);
 		await page.locator(`.rcx-option__content:has-text("${targetChannel}")`).click();
 		await poHomeTeam.tabs.channels.btnAdd.click();
-		await expect(page.getByRole('dialog').getByRole('listitem')).toContainText(targetChannel);
+
+		await expect(poHomeTeam.tabs.channels.channelsList).toContainText(targetChannel);
 	});
 
-	test('should access team channel through "targetTeam" header', async ({ page }) => {
+	test('should access team channel through targetTeam header', async ({ page }) => {
 		await poHomeTeam.sidenav.openChat(targetChannel);
 		await page.getByRole('button', { name: targetChannel }).first().focus();
 		await page.keyboard.press('Tab');
@@ -100,4 +103,75 @@ test.describe.serial('teams-management', () => {
 
 		await expect(page).toHaveURL(`/group/${targetTeam}`);
 	});
+
+	test('should remove targetChannel from targetTeam', async ({ page }) => {
+		await poHomeTeam.sidenav.openChat(targetTeam);
+		await poHomeTeam.tabs.btnChannels.click();
+		await poHomeTeam.tabs.channels.openChannelOptionMoreActions(targetChannel);
+		await page.getByRole('menu', { exact: true }).getByRole('menuitem', { name: 'Remove from team' }).click();
+		await poHomeTeam.tabs.channels.confirmRemoveChannel();
+
+		await expect(poHomeTeam.tabs.channels.channelsList).not.toBeVisible();
+	});
+
+	test('should remove user1 from targetTeamNonPrivate', async () => {
+		test.fail();
+		await poHomeTeam.sidenav.openChat(targetTeamNonPrivate);
+		await poHomeTeam.tabs.kebab.click({ force: true });
+		await poHomeTeam.tabs.btnTeamMembers.click();
+		await poHomeTeam.tabs.members.showAllUsers();
+		await poHomeTeam.tabs.members.openMemberOptionMoreActions('user1');
+		await poHomeTeam.tabs.members.getMenuItemAction('Remove from team').click();
+		await expect(poHomeTeam.tabs.members.confirmRemoveUserModal).toBeVisible();
+
+		await poHomeTeam.tabs.members.confirmRemoveUser();
+		await expect(poHomeTeam.tabs.members.memberOption('user1')).not.toBeVisible();
+	});
+
+	test('should delete targetTeamNonPrivate', async () => {
+		test.fail();
+		await poHomeTeam.sidenav.openChat(targetTeamNonPrivate);
+		await poHomeTeam.tabs.btnRoomInfo.click();
+		await poHomeTeam.tabs.room.btnDelete.click();
+		await expect(poHomeTeam.tabs.room.confirmDeleteTeamModal).toBeVisible();
+
+		await poHomeTeam.tabs.room.confirmDeleteTeam();
+		await poHomeTeam.sidenav.searchRoom(targetTeamNonPrivate);
+		await expect(poHomeTeam.sidenav.getSearchRoomByName(targetTeamNonPrivate)).not.toBeVisible();
+	});
+
+	test('should user1 leave from targetTeam', async ({ browser }) => {
+		test.fail();
+		const user1Page = await browser.newPage({ storageState: Users.user1.state });
+		const user1Channel = new HomeTeam(user1Page);
+		await user1Page.goto(`/group/${targetTeam}`);
+		await user1Channel.content.waitForChannel();
+
+		await user1Channel.tabs.btnRoomInfo.click();
+		await user1Channel.tabs.room.btnLeave.click();
+		await expect(user1Channel.tabs.room.confirmLeaveModal).toBeVisible();
+
+		await user1Channel.tabs.room.confirmLeave();
+		await user1Page.close();
+
+		await poHomeTeam.sidenav.openChat(targetTeam);
+		await poHomeTeam.tabs.kebab.click({ force: true });
+		await poHomeTeam.tabs.btnTeamMembers.click();
+		await poHomeTeam.tabs.members.showAllUsers();
+		await expect(poHomeTeam.tabs.members.memberOption('user1')).not.toBeVisible();
+	});
+
+	test('should convert team into a channel', async ({ page }) => {
+		test.fail();
+		await poHomeTeam.sidenav.openChat(targetTeam);
+		await poHomeTeam.tabs.btnRoomInfo.click();
+		await poHomeTeam.tabs.room.btnMore.click();
+		await page.getByRole('listbox', { exact: true }).getByRole('option', { name: 'Convert to Channel' }).click();
+		await expect(poHomeTeam.tabs.room.confirmConvertModal).toBeVisible();
+
+		await poHomeTeam.tabs.room.confirmConvert();
+
+		// TODO: improve this locator and check the action reactivity
+		await expect(poHomeTeam.content.getSystemMessageByText(`converted #${targetTeam} to channel`)).toBeVisible();
+	});
 });