diff --git a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx index 8c8e4c6c814da..93a823ea63e04 100644 --- a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx +++ b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx @@ -164,8 +164,14 @@ function SideBarItemTemplateWithData({ const badges = ( {showBadge && isUnread && ( - - {unread + tunread?.length} + + {unread + tunread?.length} )} {isOmnichannelRoom(room) && } @@ -184,7 +190,7 @@ function SideBarItemTemplateWithData({ onClick={(): void => { !selected && sidebar.toggle(); }} - aria-label={title} + aria-label={showBadge && isUnread ? t('__unreadTitle__from__roomTitle__', { unreadTitle: badgeTitle, roomTitle: title }) : title} title={title} time={lastMessage?.ts} subtitle={subtitle} diff --git a/apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx b/apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx index 17c75984177b4..6cfcafde311d8 100644 --- a/apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx +++ b/apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx @@ -124,8 +124,13 @@ const SidebarItemTemplateWithData = ({ const badges = ( <> {showUnread && ( - - {unreadCount.total} + + {unreadCount.total} )} {isOmnichannelRoom(room) && } @@ -144,7 +149,7 @@ const SidebarItemTemplateWithData = ({ onClick={(): void => { !selected && sidebar.toggle(); }} - aria-label={title} + aria-label={showUnread ? t('__unreadTitle__from__roomTitle__', { unreadTitle, roomTitle: title }) : title} title={title} time={lastMessage?.ts} subtitle={subtitle} diff --git a/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx b/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx index 1f90e2994f383..6fb7c101af6c0 100644 --- a/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx +++ b/apps/meteor/client/views/room/Sidepanel/hooks/useItemData.tsx @@ -30,7 +30,7 @@ export const useItemData = ( <> {showUnread && ( - {unreadCount.total} + {unreadCount.total} )} diff --git a/apps/meteor/tests/e2e/mark-unread.spec.ts b/apps/meteor/tests/e2e/mark-unread.spec.ts index 81ae939658568..46e5d206e5b6f 100644 --- a/apps/meteor/tests/e2e/mark-unread.spec.ts +++ b/apps/meteor/tests/e2e/mark-unread.spec.ts @@ -26,7 +26,7 @@ test.describe.serial('mark-unread', () => { test('should not mark empty room as unread', async () => { await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel); - await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).not.toBeVisible(); + await expect(poHomeChannel.sidenav.getSidebarItemBadge(targetChannel)).not.toBeVisible(); }); test('should mark a populated room as unread', async () => { @@ -34,7 +34,7 @@ test.describe.serial('mark-unread', () => { await poHomeChannel.content.sendMessage('this is a message for reply'); await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel); - await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).toBeVisible(); + await expect(poHomeChannel.sidenav.getSidebarItemBadge(targetChannel)).toBeVisible(); }); test('should mark a populated room as unread - search', async () => { @@ -43,7 +43,7 @@ test.describe.serial('mark-unread', () => { await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel); await poHomeChannel.sidenav.searchRoom(targetChannel); - await expect(poHomeChannel.sidenav.getSearchChannelBadge(targetChannel)).toBeVisible(); + await expect(poHomeChannel.sidenav.getSearchItemBadge(targetChannel)).toBeVisible(); }); }); @@ -58,14 +58,12 @@ test.describe.serial('mark-unread', () => { await poHomeChannelUser2.content.sendMessage('this is a message for reply'); await user2Page.close(); - await poHomeChannel.sidenav.openChat(targetChannel); - - // wait for the sidebar item to be read - await poHomeChannel.sidenav.getSidebarItemByName(targetChannel, true).waitFor(); - await poHomeChannel.content.openLastMessageMenu(); - await poHomeChannel.markUnread.click(); - - await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).toBeVisible(); + await expect(async () => { + await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.content.openLastMessageMenu(); + await poHomeChannel.markUnread.click(); + await expect(poHomeChannel.sidenav.getSidebarItemBadge(targetChannel)).toBeVisible(); + }).toPass(); }); }); }); diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts index 7b6a67ced7cdf..67d0869f721e9 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts @@ -72,11 +72,24 @@ export class HomeSidenav { return this.page.locator('role=menuitemcheckbox[name="Preferences"]'); } - // TODO: refactor getSidebarItemByName to not use data-qa - getSidebarItemByName(name: string, isRead?: boolean): Locator { - return this.page.locator( - ['[data-qa="sidebar-item"]', `[aria-label="${name}"]`, isRead && '[data-unread="false"]'].filter(Boolean).join(''), - ); + get searchList(): Locator { + return this.page.getByRole('search').getByRole('listbox'); + } + + getSidebarItemByName(name: string): Locator { + return this.page.getByRole('link').filter({ has: this.page.getByText(name, { exact: true }) }); + } + + getSearchItemByName(name: string): Locator { + return this.searchList.getByRole('link').filter({ has: this.page.getByText(name, { exact: true }) }); + } + + getSidebarItemBadge(name: string): Locator { + return this.getSidebarItemByName(name).getByRole('status', { name: 'unread' }); + } + + getSearchItemBadge(name: string): Locator { + return this.getSearchItemByName(name).getByRole('status', { name: 'unread' }); } async selectMarkAsUnread(name: string) { @@ -112,10 +125,6 @@ export class HomeSidenav { 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 { await this.openSearch(); await this.page.locator('role=search >> role=searchbox').fill(name); @@ -133,7 +142,7 @@ export class HomeSidenav { async openChat(name: string): Promise { await this.searchRoom(name); - await this.getSearchRoomByName(name).click(); + await this.getSearchItemByName(name).click(); await this.waitForChannel(); } @@ -184,12 +193,4 @@ export class HomeSidenav { await this.checkboxEncryption.click(); await this.btnCreate.click(); } - - 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().getByRole('status', { exact: true }); - } } diff --git a/apps/meteor/tests/e2e/team-management.spec.ts b/apps/meteor/tests/e2e/team-management.spec.ts index 8883defab7efa..3301b0fd52e11 100644 --- a/apps/meteor/tests/e2e/team-management.spec.ts +++ b/apps/meteor/tests/e2e/team-management.spec.ts @@ -384,7 +384,7 @@ test.describe.serial('teams-management', () => { await poHomeTeam.tabs.room.confirmDeleteTeam(); await poHomeTeam.sidenav.searchRoom(targetTeamNonPrivate); - await expect(poHomeTeam.sidenav.getSearchRoomByName(targetTeamNonPrivate)).not.toBeVisible(); + await expect(poHomeTeam.sidenav.getSearchItemByName(targetTeamNonPrivate)).not.toBeVisible(); }); test('should user1 leave from targetTeam', async ({ browser }) => { diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index 110f31c0848a9..13cd3b3f0dbf9 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/packages/i18n/src/locales/en.i18n.json @@ -6785,5 +6785,6 @@ "different_values_found": "{{number}} different values found", "Recent": "Recent", "On_All_Contacts": "On All Contacts", - "Once": "Once" + "Once": "Once", + "__unreadTitle__from__roomTitle__": "{{unreadTitle}} from {{roomTitle}}" }