fix tests

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

@@ -20,6 +20,7 @@ export const landingPage = {
   multisigCreationInfoBanner: (timeout = 4000) =>
     cy.get('[data-cy=banner-multisig-creation-info]', { timeout }),
   creationInfoBannerCloseButton: () => cy.get('[data-cy=button-close-multisig-creation-info]'),
+  transactionListLoader: () => cy.get('[data-cy=loader-transaction-list]'),
 
   // page specific assertion
   shouldHaveNoAccountErrorAndWikiLink() {

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

@@ -267,7 +267,7 @@ describe('Account address in the address bar', () => {
     cy.url().should('not.include', 'address=')
   })
 
-  it('navigating to home, settings, about, overview does not change the address bar', () => {
+  it.only('navigating to home, settings, about, overview does not change the address bar', () => {
     const { address, publicKey } = knownMultisigs['test-simple-multisig-1']
 
     // we have a watched account that is a multisig
@@ -277,11 +277,15 @@ describe('Account address in the address bar', () => {
       watchedAccounts: [publicKey]
     })
 
+    multisigPage.accountHeader().within(() => {
+      accountDisplay.addressLabel().should('contain.text', address.slice(0, 6))
+    })
+
     // check that there is an address in the address bar
     cy.url({ timeout: 3000 }).should('include', address)
 
-    // react-router takes some time to get the search params inside the links
-    cy.wait(1000)
+    // wait for the loader to be done otherwise the test fails
+    landingPage.transactionListLoader().should('not.exist')
 
     topMenuItems.homeButton().click()
     cy.url().should('include', address)

packages/ui/cypress/tests/default-multisigs.cy.ts

@@ -4,7 +4,7 @@ import { topMenuItems } from '../support/page-objects/topMenuItems'
 import { multisigPage } from '../support/page-objects/multisigPage'
 
 const lolmcshizPubKey = '0x8aee4e164d5d70ac67308f303c7e063e9156903e42c1087bbc530447487fa47f'
-const polkadotSelectedMultiproxy = '13EyMuuDHwtq5RD6w3psCJ9WvJFZzDDion6Fd2FVAqxz1g7K' // CD OpenGov
+export const polkadotSelectedMultiproxy = '13EyMuuDHwtq5RD6w3psCJ9WvJFZzDDion6Fd2FVAqxz1g7K' // CD OpenGov
 
 const kusamaSelectedMultiproxy = 'J7UBNJqKHkRi3NkxMV6Y43cMk1ZjEJWzq4z4XmqmNCcFTfM'
 
@@ -29,9 +29,8 @@ describe('default Multisigs', () => {
     topMenuItems.desktopMenu().within(() =>
       topMenuItems
         .multiproxySelectorDesktop()
-        .wait(1000)
         .click()
-        .type(`${polkadotSelectedMultiproxy.slice(0, 6)}{downArrow}{enter}`)
+        .type(`${polkadotSelectedMultiproxy.slice(0, 6)}{downArrow}{enter}`, { timeout: 6000 })
     )
 
     // verify that it's displayed
@@ -57,9 +56,8 @@ describe('default Multisigs', () => {
     topMenuItems.desktopMenu().within(() =>
       topMenuItems
         .multiproxySelectorDesktop()
-        .wait(1000)
         .click()
-        .type(`${kusamaSelectedMultiproxy.slice(0, 6)}{downArrow}{enter}`)
+        .type(`${kusamaSelectedMultiproxy.slice(0, 6)}{downArrow}{enter}`, { timeout: 6000 })
     )
 
     // verify that it's displayed

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

@@ -11,9 +11,10 @@ import { multisigPage } from '../support/page-objects/multisigPage'
 import { editNamesModal } from '../support/page-objects/modals/editNamesModal'
 import { testAccounts } from '../fixtures/testAccounts'
 import { knownMultisigs } from '../fixtures/knownMultisigs'
+import { getShortAddress } from '../utils/getShortAddress'
 
 const addWatchAccount = (address: string, name?: string) => {
-  settingsPage.accountAddressInput().type(`${address}{enter}`, { delay: 20 })
+  settingsPage.accountAddressInput().type(`${address}{enter}`, { delay: 20, timeout: 6000 })
 
   if (name) {
     settingsPage.accountNameInput().type(name)
@@ -304,7 +305,7 @@ describe('Watched Accounts', () => {
 
   it('can see all multisigs that a watched signatory is a member of', () => {
     const { publicKey: signatoryPublicKey } = testAccounts['Multisig Member Account 1']
-    const expectedAddresses = [
+    const expectedMultiproxies = [
       {
         address: knownMultisigs['test-simple-multisig-1'].address,
         expectedBadge: 'multi'
@@ -323,24 +324,33 @@ describe('Watched Accounts', () => {
     // ensure all multisigs are displayed in the multiproxy selector
     topMenuItems
       .multiproxySelectorOptionDesktop()
-      .should('have.length', expectedAddresses.length)
-      .each(($el, index) => {
+      .should('have.length', expectedMultiproxies.length)
+      .each(($el) => {
         cy.wrap($el).within(() => {
           accountDisplay
             .addressLabel()
-            .should('contain.text', expectedAddresses[index].address.slice(0, 6))
-          accountDisplay.watchedIcon().should('be.visible')
-          if (expectedAddresses[index].expectedBadge === 'pure') {
-            accountDisplay.pureBadge().should('be.visible')
-          } else {
-            accountDisplay.multisigBadge().should('be.visible')
-          }
+            .invoke('text')
+            .then((address) => {
+              const account = expectedMultiproxies.find((a) => {
+                return getShortAddress(a.address) === (address as unknown as string)
+              })
+              cy.wrap(account).should('not.be.undefined')
+              accountDisplay.watchedIcon().should('be.visible')
+              if (account?.expectedBadge === 'pure') {
+                accountDisplay.pureBadge().should('be.visible')
+              } else {
+                accountDisplay.multisigBadge().should('be.visible')
+              }
+            })
         })
       })
     // ensure each multisig that the signatory is a member of can be viewed
-    expectedAddresses.forEach(({ address }, index) => {
-      topMenuItems.multiproxySelectorDesktop().click()
-      topMenuItems.multiproxySelectorOptionDesktop().eq(index).click()
+    expectedMultiproxies.forEach(({ address }) => {
+      topMenuItems
+        .multiproxySelectorDesktop()
+        .click()
+        .type(`${address.slice(0, 6)}{downArrow}{enter}`)
+
       multisigPage
         .accountHeader()
         .should('be.visible')

packages/ui/cypress/utils/getShortAddress.ts

@@ -0,0 +1 @@
+export const getShortAddress = (address: string) => `${address.slice(0, 6)}..${address.slice(-6)}`

packages/ui/src/components/Transactions/TransactionList.tsx

@@ -29,7 +29,7 @@ const TransactionList = ({ className }: Props) => {
     <Box className={className}>
       <h3>Transactions</h3>
       {isLoadingPendingTxs && (
-        <LoaderStyled>
+        <LoaderStyled data-cy="loader-transaction-list">
           <CircularProgress />
         </LoaderStyled>
       )}