Differenciate desktop and mobile to clean up tests (#465)

packages/ui/cypress/support/page-objects/topMenuItems.ts

@@ -6,9 +6,11 @@ export const topMenuItems = {
   overviewButton: () => cy.get('[data-cy=button-navigate-overview]'),
   aboutButton: () => cy.get('[data-cy=button-navigate-about]'),
   connectButton: () => cy.get('[data-cy=button-menu-connect]'),
-  multiproxySelector: () => cy.get('[data-cy=select-multiproxy]', { timeout: 20000 }),
-  multiproxySelectorInput: () => cy.get('[data-cy=input-select-multiproxy]', { timeout: 10000 }),
-  multiproxySelectorOption: () => cy.get('[data-cy=select-multiproxy-option]'),
+  multiproxySelectorDesktop: () =>
+    cy.get('[data-cy=select-multiproxy-desktop]', { timeout: 20000 }),
+  multiproxySelectorInputDesktop: () =>
+    cy.get('[data-cy=input-select-multiproxy-desktop]', { timeout: 10000 }),
+  multiproxySelectorOptionDesktop: () => cy.get('[data-cy=select-multiproxy-option-desktop]'),
   networkSelector: () => cy.get('[data-cy=select-networks]'),
   networkSelectorOption: (networkName: string) =>
     cy.get(`[data-cy=select-network-option-${networkName}]`)

packages/ui/cypress/tests/address-bar.cy.ts

@@ -20,7 +20,7 @@ describe('Account address in the address bar', () => {
     })
 
     cy.url({ timeout: 10000 }).should('include', address)
-    topMenuItems.multiproxySelectorInput().should('have.value', address)
+    topMenuItems.multiproxySelectorInputDesktop().should('have.value', address)
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', address.slice(0, 6))
     })
@@ -36,7 +36,7 @@ describe('Account address in the address bar', () => {
     })
 
     cy.url({ timeout: 10000 }).should('include', address)
-    topMenuItems.multiproxySelectorInput().should('have.value', address)
+    topMenuItems.multiproxySelectorInputDesktop().should('have.value', address)
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', address.slice(0, 6))
     })
@@ -45,7 +45,7 @@ describe('Account address in the address bar', () => {
   it('shows an error with 0 watched, 0 connected account, unknown linked address', () => {
     cy.visit(landingPageAddressUrl(testAccounts['Non Multisig Member 1'].address))
     landingPage.linkedAddressNotFound().should('contain.text', "The linked address can't be found")
-    topMenuItems.multiproxySelector().should('not.exist')
+    topMenuItems.multiproxySelectorDesktop().should('not.exist')
   })
 
   it('shows an error and can reset with 1 watched (multi), 0 connected account, unknown linked address', () => {
@@ -60,14 +60,14 @@ describe('Account address in the address bar', () => {
 
     landingPage.linkedAddressNotFound().should('contain.text', "The linked address can't be found")
     cy.url().should('include', testAccounts['Non Multisig Member 1'].address)
-    topMenuItems.multiproxySelector().should('be.visible')
-    topMenuItems.multiproxySelectorInput().should('have.value', '')
+    topMenuItems.multiproxySelectorDesktop().should('be.visible')
+    topMenuItems.multiproxySelectorInputDesktop().should('have.value', '')
 
     // click reset leads to the multisig
     landingPage.resetLinkedAddressButton().click()
     cy.url().should('not.include', testAccounts['Non Multisig Member 1'].address)
     cy.url().should('include', multisigAddress)
-    topMenuItems.multiproxySelectorInput().should('have.value', multisigAddress)
+    topMenuItems.multiproxySelectorInputDesktop().should('have.value', multisigAddress)
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', multisigAddress.slice(0, 6))
     })
@@ -84,14 +84,14 @@ describe('Account address in the address bar', () => {
     })
     landingPage.linkedAddressNotFound().should('contain.text', "The linked address can't be found")
     cy.url().should('include', testAccounts['Non Multisig Member 1'].address)
-    topMenuItems.multiproxySelector().should('be.visible')
-    topMenuItems.multiproxySelectorInput().should('have.value', '')
+    topMenuItems.multiproxySelectorDesktop().should('be.visible')
+    topMenuItems.multiproxySelectorInputDesktop().should('have.value', '')
 
     // click reset leads to the pure
     landingPage.resetLinkedAddressButton().click()
     cy.url().should('not.include', testAccounts['Non Multisig Member 1'].address)
     cy.url().should('include', pureAddress)
-    topMenuItems.multiproxySelectorInput().should('have.value', pureAddress)
+    topMenuItems.multiproxySelectorInputDesktop().should('have.value', pureAddress)
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', pureAddress.slice(0, 6))
     })
@@ -109,14 +109,14 @@ describe('Account address in the address bar', () => {
 
     landingPage.linkedAddressNotFound().should('contain.text', "The linked address can't be found")
     cy.url().should('include', nonMulitisigAccountAddress)
-    topMenuItems.multiproxySelector().should('be.visible')
-    topMenuItems.multiproxySelectorInput().should('have.value', '')
+    topMenuItems.multiproxySelectorDesktop().should('be.visible')
+    topMenuItems.multiproxySelectorInputDesktop().should('have.value', '')
 
     // click reset leads to the multi
     landingPage.resetLinkedAddressButton().click()
     cy.url().should('not.include', nonMulitisigAccountAddress)
     cy.url().should('include', address)
-    topMenuItems.multiproxySelectorInput().should('have.value', address)
+    topMenuItems.multiproxySelectorInputDesktop().should('have.value', address)
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', address.slice(0, 6))
     })
@@ -132,7 +132,7 @@ describe('Account address in the address bar', () => {
     })
 
     cy.url().should('include', pureAddress)
-    topMenuItems.multiproxySelectorInput().should('have.value', pureAddress)
+    topMenuItems.multiproxySelectorInputDesktop().should('have.value', pureAddress)
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', pureAddress.slice(0, 6))
     })
@@ -149,7 +149,7 @@ describe('Account address in the address bar', () => {
     })
 
     cy.url().should('include', pureAddress)
-    topMenuItems.multiproxySelectorInput().should('have.value', pureAddress)
+    topMenuItems.multiproxySelectorInputDesktop().should('have.value', pureAddress)
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', pureAddress.slice(0, 6))
     })
@@ -167,7 +167,7 @@ describe('Account address in the address bar', () => {
     })
 
     cy.url().should('include', pureAddress)
-    topMenuItems.multiproxySelectorInput().should('have.value', pureAddress)
+    topMenuItems.multiproxySelectorInputDesktop().should('have.value', pureAddress)
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', pureAddress.slice(0, 6))
     })
@@ -182,7 +182,7 @@ describe('Account address in the address bar', () => {
     })
 
     cy.url().should('include', expectedPureAddress)
-    topMenuItems.multiproxySelectorInput().should('have.value', expectedPureAddress)
+    topMenuItems.multiproxySelectorInputDesktop().should('have.value', expectedPureAddress)
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', expectedPureAddress.slice(0, 6))
     })
@@ -201,7 +201,7 @@ describe('Account address in the address bar', () => {
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', expectedMultiAddress.slice(0, 6))
     })
-    topMenuItems.multiproxySelectorInput().should('have.value', expectedMultiAddress)
+    topMenuItems.multiproxySelectorInputDesktop().should('have.value', expectedMultiAddress)
   })
 
   it('switching accounts changes the address in the address bar', () => {
@@ -219,7 +219,7 @@ describe('Account address in the address bar', () => {
     topMenuItems
       .desktopMenu()
       .within(() =>
-        topMenuItems.multiproxySelector().click().type(`${first6Letters}{downArrow}{enter}`)
+        topMenuItems.multiproxySelectorDesktop().click().type(`${first6Letters}{downArrow}{enter}`)
       )
     cy.url().should('include', multiAddress)
     multisigPage.accountHeader().within(() => {

packages/ui/cypress/tests/network-switch.cy.ts

@@ -32,14 +32,18 @@ describe('Network can be switched', () => {
       accountDisplay.addressLabel().contains(multisigAddress.slice(0, 5))
     })
 
-    topMenuItems.desktopMenu().within(() => topMenuItems.multiproxySelector().should('exist'))
+    topMenuItems
+      .desktopMenu()
+      .within(() => topMenuItems.multiproxySelectorDesktop().should('exist'))
     topMenuItems.desktopMenu().within(() => topMenuItems.networkSelector().click())
     topMenuItems.networkSelectorOption('kusama').click()
 
     cy.url().should('contain', 'network=kusama')
     cy.url().should('not.contain', 'address=')
 
-    topMenuItems.desktopMenu().within(() => topMenuItems.multiproxySelector().should('not.exist'))
+    topMenuItems
+      .desktopMenu()
+      .within(() => topMenuItems.multiproxySelectorDesktop().should('not.exist'))
 
     settingsPage.accountContainer().within(() => {
       accountDisplay.identicon().should('be.visible')

packages/ui/cypress/tests/setIdentity.cy.ts

@@ -93,7 +93,10 @@ describe('Set an identity', () => {
     topMenuItems
       .desktopMenu()
       .within(() =>
-        topMenuItems.multiproxySelector().click().type(`${first5DigitsAddress}{downArrow}{enter}`)
+        topMenuItems
+          .multiproxySelectorDesktop()
+          .click()
+          .type(`${first5DigitsAddress}{downArrow}{enter}`)
       )
     multisigPage.accountHeader().should('contain', first5DigitsAddress)
 

packages/ui/cypress/tests/watched-accounts.cy.ts

@@ -89,8 +89,8 @@ describe('Watched Accounts', () => {
       accountDisplay.nameLabel().should('be.visible').should('have.text', multisigName)
     })
     // ensure the name is included in the selectable drop-down option
-    topMenuItems.multiproxySelector().should('be.visible').first().click()
-    topMenuItems.multiproxySelectorOption().within(() => {
+    topMenuItems.multiproxySelectorDesktop().should('be.visible').click()
+    topMenuItems.multiproxySelectorOptionDesktop().within(() => {
       accountDisplay.identicon().should('be.visible')
       accountDisplay.multisigBadge().should('be.visible')
       accountDisplay.pureBadge().should('not.exist')
@@ -122,8 +122,8 @@ describe('Watched Accounts', () => {
       accountDisplay.nameLabel().should('be.visible').should('have.text', pureName)
     })
     // ensure the name is included in the selectable drop-down option
-    topMenuItems.multiproxySelector().should('be.visible').first().click()
-    topMenuItems.multiproxySelectorOption().within(() => {
+    topMenuItems.multiproxySelectorDesktop().should('be.visible').click()
+    topMenuItems.multiproxySelectorOptionDesktop().within(() => {
       accountDisplay.identicon().should('be.visible')
       accountDisplay.pureBadge().should('be.visible')
       accountDisplay.multisigBadge().should('not.exist')
@@ -250,7 +250,7 @@ describe('Watched Accounts', () => {
 
     const pureCheck = () => {
       multisigPage
-        .accountHeader()
+        .accountHeader(6000)
         .should('be.visible')
         .within(() => {
           accountDisplay
@@ -266,9 +266,9 @@ describe('Watched Accounts', () => {
             .and('contain.text', multisigAddress.slice(0, 6))
         })
       })
-      topMenuItems.multiproxySelector().should('be.visible').first().click()
+      topMenuItems.multiproxySelectorDesktop().should('be.visible').click()
       topMenuItems
-        .multiproxySelectorOption()
+        .multiproxySelectorOptionDesktop()
         .should('have.length', 1)
         .within(() => {
           accountDisplay.pureBadge().should('be.visible')
@@ -310,10 +310,10 @@ describe('Watched Accounts', () => {
       url: landingPageUrl,
       watchedAccounts: [signatoryPublicKey]
     })
-    topMenuItems.multiproxySelector().should('be.visible').first().click()
+    topMenuItems.multiproxySelectorDesktop().should('be.visible').click()
     // ensure all multisigs are displayed in the multiproxy selector
     topMenuItems
-      .multiproxySelectorOption()
+      .multiproxySelectorOptionDesktop()
       .should('have.length', 5)
       .each(($el, index) => {
         cy.wrap($el).within(() => {
@@ -327,8 +327,8 @@ describe('Watched Accounts', () => {
       })
     // ensure each multisig that the signatory is a member of can be viewed
     expectedAddresses.forEach((address, index) => {
-      topMenuItems.multiproxySelector().first().click()
-      topMenuItems.multiproxySelectorOption().eq(index).click()
+      topMenuItems.multiproxySelectorDesktop().click()
+      topMenuItems.multiproxySelectorOptionDesktop().eq(index).click()
       multisigPage
         .accountHeader()
         .should('be.visible')

packages/ui/src/components/Drawer/DrawerMenu.tsx

@@ -42,7 +42,7 @@ function DrawerMenu({ handleDrawerClose }: DrawerMenuProps) {
           </ListItemStyled>
         )}
         <ListItemStyled>
-          <MultiProxySelection />
+          <MultiProxySelection testId="mobile" />
         </ListItemStyled>
         <ListItemStyled>
           <NetworkSelection />

packages/ui/src/components/Header/Header.tsx

@@ -65,7 +65,7 @@ const Header = ({ handleDrawerOpen }: Props) => {
                 Connect
               </ConnectButtonStyled>
             )}
-            <MultiProxySelection />
+            <MultiProxySelection testId="desktop" />
             <NetworkSelectionStyled />
           </RightButtonsWrapperStyled>
         </DesktopMenuStyled>

packages/ui/src/components/select/MultiProxySelection.tsx

@@ -13,6 +13,7 @@ import TextFieldLargeStyled from '../library/TextFieldLargeStyled'
 
 interface Props {
   className?: string
+  testId?: string
 }
 
 const getDisplayAddress = (option?: MultiProxy) =>
@@ -27,7 +28,7 @@ const isOptionEqualToValue = (option?: MultiProxy, value?: MultiProxy) => {
   return option.multisigs[0].address === value.multisigs[0].address
 }
 
-const MultiProxySelection = ({ className }: Props) => {
+const MultiProxySelection = ({ className, testId = '' }: Props) => {
   const ref = useRef<HTMLInputElement>(null)
   const {
     multiProxyList,
@@ -94,12 +95,12 @@ const MultiProxySelection = ({ className }: Props) => {
         key={displayAddress}
         component="li"
         {...props}
-        data-cy="select-multiproxy-option"
+        data-cy={`select-multiproxy-option-${testId}`}
       >
         <AccountDisplay
           address={displayAddress || ''}
           badge={option?.proxy ? AccountBadge.PURE : AccountBadge.MULTI}
-          data-cy="select-multiproxy-option-details"
+          data-cy={`select-multiproxy-option-details-${testId}`}
         />
       </Box>
     )
@@ -121,7 +122,7 @@ const MultiProxySelection = ({ className }: Props) => {
           </InputAdornment>
         )
       }}
-      inputProps={{ ...params.inputProps, 'data-cy': 'input-select-multiproxy' }}
+      inputProps={{ ...params.inputProps, 'data-cy': `input-select-multiproxy-${testId}` }}
       onKeyDown={handleSpecialKeys}
     />
   )
@@ -142,7 +143,7 @@ const MultiProxySelection = ({ className }: Props) => {
       getOptionLabel={getOptionLabel}
       onChange={onChange}
       value={canFindMultiProxyFromUrl ? selectedMultiProxy || multiProxyList[0] : ''}
-      data-cy="select-multiproxy"
+      data-cy={`select-multiproxy-${testId}`}
     />
   )
 }