fix: review

RocketChat · Sep 2, 2024 · e5c54db · e5c54db
1 parent ab63c92
commit e5c54db
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 40 deletions.
diff --git a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx
@@ -167,7 +167,7 @@ function SideBarItemTemplateWithData({
 	const badges = (
 		<Margins inlineStart={8}>
 			{showBadge && isUnread && (
-				<Badge {...({ style: { display: 'inline-flex', flexShrink: 0 } } as any)} variant={variant} title={badgeTitle}>
+				<Badge role='status' {...({ style: { display: 'inline-flex', flexShrink: 0 } } as any)} variant={variant} title={badgeTitle}>
 					{unread + tunread?.length}
 				</Badge>
 			)}

diff --git a/apps/meteor/tests/e2e/mark-unread.spec.ts b/apps/meteor/tests/e2e/mark-unread.spec.ts
@@ -6,67 +6,65 @@ import { test, expect } from './utils/test';
 
 test.use({ storageState: Users.admin.state });
 
-test.describe('Mark Unread - Sidebar Action', () => {
+test.describe.serial('mark-unread', () => {
 	let poHomeChannel: HomeChannel;
 	let targetChannel: string;
 
 	test.beforeEach(async ({ page, api }) => {
 		poHomeChannel = new HomeChannel(page);
-		await page.emulateMedia({ reducedMotion: 'reduce' });
-
 		targetChannel = await createTargetChannel(api, { members: ['user2'] });
 
+		await page.emulateMedia({ reducedMotion: 'reduce' });
 		await page.goto('/home');
 	});
 
 	test.afterEach(async ({ api }) => {
 		await api.post('/channels.delete', { roomName: targetChannel });
 	});
 
-	test('should not mark empty room as unread', async () => {
-		const sidebarItem = poHomeChannel.sidenav.getSidebarItemByName(targetChannel);
-		await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel);
-		await expect(poHomeChannel.sidenav.getChannelBadge(sidebarItem)).not.toBeVisible();
-	});
+	test.describe('Mark Unread - Sidebar Action', () => {
+		test('should not mark empty room as unread', async () => {
+			await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel);
 
-	test('should mark a populated room as unread', async () => {
-		await poHomeChannel.sidenav.openChat(targetChannel);
-		await poHomeChannel.content.sendMessage('this is a message for reply');
-		const sidebarItem = poHomeChannel.sidenav.getSidebarItemByName(targetChannel);
-		await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel);
-		await expect(poHomeChannel.sidenav.getChannelBadge(sidebarItem)).toBeVisible();
-	});
+			await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).not.toBeVisible();
+		});
+
+		test('should mark a populated room as unread', async () => {
+			await poHomeChannel.sidenav.openChat(targetChannel);
+			await poHomeChannel.content.sendMessage('this is a message for reply');
+			await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel);
 
-	test('should mark a populated room as unread - search', async () => {
-		await poHomeChannel.sidenav.openChat(targetChannel);
-		await poHomeChannel.content.sendMessage('this is a message for reply');
-		await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel);
-		await poHomeChannel.sidenav.searchChat(targetChannel);
-		await expect(poHomeChannel.sidenav.getSearchChannelBadge(targetChannel)).toBeVisible();
+			await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).toBeVisible();
+		});
+
+		test('should mark a populated room as unread - search', async () => {
+			await poHomeChannel.sidenav.openChat(targetChannel);
+			await poHomeChannel.content.sendMessage('this is a message for reply');
+			await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel);
+			await poHomeChannel.sidenav.searchRoom(targetChannel);
+
+			await expect(poHomeChannel.sidenav.getSearchChannelBadge(targetChannel)).toBeVisible();
+		});
 	});
 
 	test.describe('Mark Unread - Message Action', () => {
 		let poHomeChannelUser2: HomeChannel;
 
-		test.beforeEach(async ({ browser }) => {
+		test('should mark a populated room as unread', async ({ page, browser }) => {
 			const { page: user2Page } = await createAuxContext(browser, Users.user2);
 			poHomeChannelUser2 = new HomeChannel(user2Page);
 
 			await poHomeChannelUser2.sidenav.openChat(targetChannel);
 			await poHomeChannelUser2.content.sendMessage('this is a message for reply');
-		});
+			await user2Page.close();
 
-		test('should mark a populated room as unread', async () => {
 			await poHomeChannel.sidenav.openChat(targetChannel);
-
 			await poHomeChannel.content.openLastMessageMenu();
 			await poHomeChannel.markUnread.click();
-			const sidebarItem = poHomeChannel.sidenav.getSidebarItemByName(targetChannel);
-			await expect(poHomeChannel.sidenav.getChannelBadge(sidebarItem)).toBeVisible();
-		});
+			await page.waitForURL('/home');
 
-		test.afterEach(async () => {
-			await poHomeChannelUser2.page.close();
+			await expect(page.locator('role=main >> role=heading[level=1]')).toBeVisible();
+			await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).toBeVisible();
 		});
 	});
 });
diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts
@@ -68,6 +68,7 @@ export class HomeSidenav {
 		return this.page.locator('role=menuitemcheckbox[name="Profile"]');
 	}
 
+	// TODO: refactor getSidebarItemByName to not use data-qa
 	getSidebarItemByName(name: string): Locator {
 		return this.page.locator(`[data-qa="sidebar-item"][aria-label="${name}"]`);
 	}
@@ -130,12 +131,6 @@ export class HomeSidenav {
 		await this.waitForChannel();
 	}
 
-	async searchChat(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 expect(this.page.locator(`[data-qa="sidebar-item"][aria-label="${name}"]`).first()).toBeVisible();
-	}
-
 	async waitForChannel(): Promise<void> {
 		await this.page.locator('role=main').waitFor();
 		await this.page.locator('role=main >> role=heading[level=1]').waitFor();
@@ -184,11 +179,11 @@ export class HomeSidenav {
 		await this.btnCreate.click();
 	}
 
-	getChannelBadge(sidebarItem: Locator): Locator {
-		return sidebarItem.locator('.rcx-badge');
+	getRoomBadge(roomName: string): Locator {
+		return this.getSidebarItemByName(roomName).getByRole('status', { exact: true });
 	}
 
 	getSearchChannelBadge(name: string): Locator {
-		return this.page.locator(`[data-qa="sidebar-item"][aria-label="${name}"]`).first().locator('.rcx-badge');
+		return this.page.locator(`[data-qa="sidebar-item"][aria-label="${name}"]`).first().getByRole('status', { exact: true });
 	}
 }