Fix test issue with icon on channel context menu

islathehut · islathehut · commit 0865fb213f06 · 2026-04-20T15:43:34.000-04:00
diff --git a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
@@ -61,9 +61,10 @@ export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handle
               flex: 5,
               gap: '1px',
             }}
+            data-testid={'contextMenu-title-wrapper'}
           >
             {titleIcon && titleIcon}
-            <Typography fontSize={16} fontWeight={'medium'}>
+            <Typography fontSize={16} fontWeight={'medium'} data-testid={'contextMenu-title'}>
               {title}
             </Typography>
           </Grid>
diff --git a/packages/desktop/src/renderer/components/ContextMenu/menus/ChannelContextMenu.container.tsx b/packages/desktop/src/renderer/components/ContextMenu/menus/ChannelContextMenu.container.tsx
@@ -76,7 +76,7 @@ export const ChannelContextMenu: FC = () => {
           isPublic={channel?.public ?? true}
           fill={'currentColor'}
           style={{ fontSize: 16, fontWeight: 'medium' }}
-          data-testid={`${channel?.name}-settings-channel-icon`}
+          data-testid={`contextMenu-channel-settings-type-icon`}
         />
       }
       {...channelContextMenu}
diff --git a/packages/e2e-tests/src/selectors.ts b/packages/e2e-tests/src/selectors.ts
@@ -1,4 +1,4 @@
-import { By, Key, type ThenableWebDriver, type WebElement, until } from 'selenium-webdriver'
+import { By, Key, type ThenableWebDriver, type WebElement, until, WebElementPromise } from 'selenium-webdriver'
 import { BuildSetup, logAndReturnError, promiseWithRetries, sleep, type BuildSetupInit } from './utils'
 import path from 'path'
 import { FileDownloadStatus, PhotoExt, SettingsModalTabName, FileAttachmentType, X_DATA_TESTID } from './enums'
@@ -628,32 +628,64 @@ export class ChannelContextMenu {
     this.driver = driver
   }
 
-  async openMenu(channelName: string) {
-    const menu = this.driver.wait(
-      until.elementLocated(By.xpath('//div[@data-testid="channelContextMenuButton"]')),
-      15_000,
-      `Channel context menu couldn't be located within timeout`,
-      500
-    )
-    await this.driver.wait(
-      until.elementIsVisible(menu),
-      15_000,
-      `Channel context menu was not visibile within timeout`,
-      500
-    )
-    await menu.click()
-    const channelTypeIcon = this.driver.wait(
-      until.elementLocated(By.xpath(`//*[@data-testid="${channelName}-settings-channel-icon"]`)),
-      15_000,
-      `Channel context menu lock/hash icon couldn't be located within timeout`,
-      500
-    )
-    await this.driver.wait(
-      until.elementIsVisible(channelTypeIcon),
-      15_000,
-      `Channel context menu lock/hash icon was not visibile within timeout`,
-      500
-    )
+  async openMenu(): Promise<{ menuButton: boolean; menuOpened: boolean; iconVisible: boolean }> {
+    let menu: WebElement
+    try {
+      menu = await this.driver.wait(
+        until.elementLocated(By.xpath('//div[@data-testid="channelContextMenuButton"]')),
+        15_000,
+        `Channel context menu couldn't be located within timeout`,
+        500
+      )
+      await this.driver.wait(
+        until.elementIsVisible(menu),
+        15_000,
+        `Channel context menu was not visibile within timeout`,
+        500
+      )
+    } catch (e) {
+      logger.error('Error while checking for channel context menu button', e)
+      return {
+        menuButton: false,
+        menuOpened: false,
+        iconVisible: false,
+      }
+    }
+    try {
+      await menu.click()
+    } catch (e) {
+      return {
+        menuButton: true,
+        menuOpened: false,
+        iconVisible: false,
+      }
+    }
+    try {
+      const channelTypeIcon = this.driver.wait(
+        until.elementLocated(By.xpath(`//*[@data-testid="contextMenu-channel-settings-type-icon"]`)),
+        15_000,
+        `Channel context menu lock/hash icon couldn't be located within timeout`,
+        500
+      )
+      await this.driver.wait(
+        until.elementIsVisible(channelTypeIcon),
+        15_000,
+        `Channel context menu lock/hash icon was not visibile within timeout`,
+        500
+      )
+      return {
+        menuButton: true,
+        menuOpened: true,
+        iconVisible: true,
+      }
+    } catch (e) {
+      logger.error('Error while checking for channel icon on context menu', e)
+      return {
+        menuButton: true,
+        menuOpened: true,
+        iconVisible: false,
+      }
+    }
   }
 
   async openDeletionChannelModal() {
diff --git a/packages/e2e-tests/src/tests/multipleClients.privateChannels.qss.test.ts b/packages/e2e-tests/src/tests/multipleClients.privateChannels.qss.test.ts
@@ -338,19 +338,25 @@ describe('Multiple Clients (QSS - Private Channels)', () => {
 
         it('Owner adds first user to private channel', async () => {
           channelContextMenuOwner = new ChannelContextMenu(users.owner.app.driver)
-          await channelContextMenuOwner.openMenu(privateChannelName)
+          const { menuButton, menuOpened, iconVisible } = await channelContextMenuOwner.openMenu()
           await channelContextMenuOwner.openAddMembersModal()
           await channelContextMenuOwner.addMembersToChannel(privateChannelName, [users.user1.username])
+          expect(menuButton).toBe(true)
+          expect(menuOpened).toBe(true)
+          expect(iconVisible).toBe(true)
         })
 
         it('Owner verifies first user is no longer in autocomplete', async () => {
-          await channelContextMenuOwner.openMenu(privateChannelName)
+          const { menuButton, menuOpened, iconVisible } = await channelContextMenuOwner.openMenu()
           await channelContextMenuOwner.openAddMembersModal()
           const membersLeftInAutocomplete = await channelContextMenuOwner.checkForMembersInAddMembersAutocomplete(
             privateChannelName,
             [users.user1.username, users.owner.username]
           )
           expect(membersLeftInAutocomplete.length).toBe(0)
+          expect(menuButton).toBe(true)
+          expect(menuOpened).toBe(true)
+          expect(iconVisible).toBe(true)
         })
       })
 
@@ -441,9 +447,12 @@ describe('Multiple Clients (QSS - Private Channels)', () => {
 
         it('Owner adds first user to second private channel', async () => {
           channelContextMenuOwner = new ChannelContextMenu(users.owner.app.driver)
-          await channelContextMenuOwner.openMenu(privateChannel2Name)
+          const { menuButton, menuOpened, iconVisible } = await channelContextMenuOwner.openMenu()
           await channelContextMenuOwner.openAddMembersModal()
           await channelContextMenuOwner.addMembersToChannel(privateChannel2Name, [users.user1.username])
+          expect(menuButton).toBe(true)
+          expect(menuOpened).toBe(true)
+          expect(iconVisible).toBe(true)
         })
 
         it(`First user sees second private channel in sidebar`, async () => {
diff --git a/packages/e2e-tests/src/tests/multipleClients.privateChannels.test.ts b/packages/e2e-tests/src/tests/multipleClients.privateChannels.test.ts
@@ -306,9 +306,12 @@ describe('Multiple Clients (Private Channels)', () => {
       describe(`Owner Adds User To Private Channel`, () => {
         it('Owner adds first user to private channel', async () => {
           channelContextMenuOwner = new ChannelContextMenu(users.owner.app.driver)
-          await channelContextMenuOwner.openMenu(privateChannelName)
+          const { menuButton, menuOpened, iconVisible } = await channelContextMenuOwner.openMenu()
           await channelContextMenuOwner.openAddMembersModal()
           await channelContextMenuOwner.addMembersToChannel(privateChannelName, [users.user1.username])
+          expect(menuButton).toBe(true)
+          expect(menuOpened).toBe(true)
+          expect(iconVisible).toBe(true)
         })
 
         it(`Private channel is in user's sidebar`, async () => {
@@ -389,9 +392,12 @@ describe('Multiple Clients (Private Channels)', () => {
 
         it('Owner adds first user to second private channel', async () => {
           channelContextMenuOwner = new ChannelContextMenu(users.owner.app.driver)
-          await channelContextMenuOwner.openMenu(privateChannel2Name)
+          const { menuButton, menuOpened, iconVisible } = await channelContextMenuOwner.openMenu()
           await channelContextMenuOwner.openAddMembersModal()
           await channelContextMenuOwner.addMembersToChannel(privateChannel2Name, [users.user1.username])
+          expect(menuButton).toBe(true)
+          expect(menuOpened).toBe(true)
+          expect(iconVisible).toBe(true)
         })
 
         it(`Second private channel is in user's sidebar`, async () => {
diff --git a/packages/e2e-tests/src/tests/multipleClients.test.ts b/packages/e2e-tests/src/tests/multipleClients.test.ts
@@ -378,7 +378,10 @@ describe('Multiple Clients', () => {
     describe('Channel Deletion', () => {
       it('Owner deletes second channel', async () => {
         channelContextMenuOwner = new ChannelContextMenu(users.owner.app.driver)
-        await channelContextMenuOwner.openMenu(generalChannelName)
+        const { iconVisible, menuOpened, menuButton } = await channelContextMenuOwner.openMenu()
+        expect(menuButton).toBe(true)
+        expect(menuOpened).toBe(true)
+        expect(iconVisible).toBe(true)
         await channelContextMenuOwner.openDeletionChannelModal()
         await channelContextMenuOwner.deleteChannel()
         const channels = await sidebarOwner.getChannelList()
@@ -454,9 +457,12 @@ describe('Multiple Clients', () => {
           expect(await generalChannelOwner.isReady()).toBeTruthy()
           expect(await generalChannelOwner.isOpen()).toBeTruthy()
           expect(await generalChannelOwner.isMessageInputReady()).toBeTruthy()
-          await channelContextMenuOwner.openMenu(generalChannelName)
+          const { menuOpened, menuButton, iconVisible } = await channelContextMenuOwner.openMenu()
           await channelContextMenuOwner.openDeletionChannelModal()
           await channelContextMenuOwner.deleteChannel()
+          expect(menuButton).toBe(true)
+          expect(menuOpened).toBe(true)
+          expect(iconVisible).toBe(true)
         })
 
         it('Owner sees recreated general channel', async () => {

Original file line number	Diff line number	Diff line change
`@@ -76,7 +76,7 @@ export const ChannelContextMenu: FC = () => {`
`76`	`76`	`isPublic={channel?.public ?? true}`
`77`	`77`	`fill={'currentColor'}`
`78`	`78`	`style={{ fontSize: 16, fontWeight: 'medium' }}`
`79`		- data-testid={`${channel?.name}-settings-channel-icon`}
	`79`	+ data-testid={`contextMenu-channel-settings-type-icon`}
`80`	`80`	`/>`
`81`	`81`	`}`
`82`	`82`	`{...channelContextMenu}`