add network switch test

packages/ui/cypress/support/commands.ts

@@ -4,6 +4,7 @@ import { AuthRequests, Extension, TxRequests } from './Extension'
 import { MultisigInfo, rejectCurrentMultisigTxs } from '../utils/rejectCurrentMultisigTxs'
 import { testAccounts, InjectedAccountWitMnemonic } from '../fixtures/testAccounts'
 import 'cypress-wait-until'
+import { settingsPage } from './page-objects/settingsPage'
 
 const LOCALSTORAGE_ACCOUNT_NAMES_KEY = 'multix.accountNames'
 const LOCALSTORAGE_WATCHED_ACCOUNTS_KEY = 'multix.watchedAccount'
@@ -109,6 +110,16 @@ Cypress.Commands.add('connectAccounts', (accountAddresses = [Account1] as string
   })
 })
 
+Cypress.Commands.add('addWatchAccount', (address: string, name?: string) => {
+  settingsPage.accountAddressInput().type(`${address}{enter}`, { delay: 20 })
+
+  if (name) {
+    settingsPage.accountNameInput().type(name)
+  }
+
+  settingsPage.addButton().click()
+})
+
 interface IVisitWithLocalStorage {
   url: string
   watchedAccounts?: string[]
@@ -222,6 +233,8 @@ declare global {
        * @example cy.visitWithLocalStorage({url: http://localhost:3333, watchedAccounts: ['0x0c691601793de060491dab143dfae19f5f6413d4ce4c363637e5ceacb2836a4e'], watchedAccounts: {"0x0c691601793de060491dab143dfae19f5f6413d4ce4c363637e5ceacb2836a4e":"my custom name"}})
        */
       visitWithLocalStorage: (params: IVisitWithLocalStorage) => void
+
+      addWatchAccount: (address: string, name?: string) => void
     }
   }
 }

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

@@ -9,6 +9,7 @@ export const topMenuItems = {
   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]'),
+  multiproxyLoader: () => cy.get('[data-cy=proxy-selection-loader]', { timeout: 10000 }),
   networkSelector: () => cy.get('[data-cy=select-networks]'),
   networkSelectorOption: (networkName: string) =>
     cy.get(`[data-cy=select-network-option-${networkName}]`)

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

@@ -0,0 +1,40 @@
+import { accountDisplay } from '../support/page-objects/components/accountDisplay'
+import { landingPageUrl } from '../fixtures/landingData'
+import { landingPage } from '../support/page-objects/landingPage'
+import { settingsPage } from '../support/page-objects/settingsPage'
+import { testAccounts } from '../fixtures/testAccounts'
+import { topMenuItems } from '../support/page-objects/topMenuItems'
+
+const { name: testAccountName, address: testAccountAddress } =
+  testAccounts['Multisig Member Account 1']
+
+describe('Network can be switched', () => {
+  it('should switch account using menu', () => {
+    cy.visit(landingPageUrl)
+
+    landingPage.watchAccountButton().click()
+
+    cy.url().should('contain', 'settings?network=rococo')
+    cy.addWatchAccount(testAccountAddress, testAccountName)
+
+    settingsPage.accountContainer().within(() => {
+      accountDisplay.identicon().should('be.visible')
+      accountDisplay.nameLabel().should('contain', testAccountName)
+      accountDisplay.addressLabel().contains(testAccountAddress.slice(0, 5))
+    })
+
+    topMenuItems.desktopMenu().within(() => topMenuItems.networkSelector().click())
+    topMenuItems.networkSelectorOption('kusama').click()
+    topMenuItems
+      .desktopMenu()
+      .within(() => cy.waitUntil(() => topMenuItems.multiproxyLoader().should('not.be.visible')))
+
+    cy.url().should('contain', 'settings?network=kusama')
+
+    settingsPage.accountContainer().within(() => {
+      accountDisplay.identicon().should('be.visible')
+      accountDisplay.nameLabel().should('contain', testAccountName)
+      accountDisplay.addressLabel().contains('Hbiow')
+    })
+  })
+})

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

@@ -1,5 +1,5 @@
 import { InjectedAccountWitMnemonic } from '../fixtures/testAccounts'
-import { landingPageAddressUrl, landingPageNetwork, landingPageUrl } from '../fixtures/landingData'
+import { landingPageNetwork, landingPageUrl } from '../fixtures/landingData'
 import { setIdentityMultisigs } from '../fixtures/setIdentity/setIdentityMultisigs'
 import { setIdentitySignatories } from '../fixtures/setIdentity/setIdentitySignatories'
 import { multisigPage } from '../support/page-objects/multisigPage'

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

@@ -12,24 +12,14 @@ import { multisigPage } from '../support/page-objects/multisigPage'
 import { editNamesModal } from '../support/page-objects/modals/editNamesModal'
 import { testAccounts } from '../fixtures/testAccounts'
 
-const addWatchAccount = (address: string, name?: string) => {
-  settingsPage.accountAddressInput().type(`${address}{enter}`, { delay: 20 })
-
-  if (name) {
-    settingsPage.accountNameInput().type(name)
-  }
-
-  settingsPage.addButton().click()
-}
-
 const { name: testAccountName, address: testAccountAddress } =
   testAccounts['Multisig Member Account 1']
 
 describe('Watched Accounts', () => {
   it('can add an account to the watch list', () => {
     cy.visit(landingPageUrl)
     landingPage.watchAccountButton().click()
-    addWatchAccount(testAccountAddress, testAccountName)
+    cy.addWatchAccount(testAccountAddress, testAccountName)
     settingsPage.accountContainer().within(() => {
       accountDisplay.identicon().should('be.visible')
       accountDisplay.addressLabel().should('be.visible')
@@ -41,7 +31,7 @@ describe('Watched Accounts', () => {
   it('can remove an account from the watch list', () => {
     // add an account first
     cy.visit(settingsPageWatchAccountUrl)
-    addWatchAccount(testAccountAddress)
+    cy.addWatchAccount(testAccountAddress)
     // now remove it
     settingsPage.accountContainer().within(() => {
       settingsPage.accountDeleteButton().click()
@@ -54,18 +44,18 @@ describe('Watched Accounts', () => {
   it('can see error when attempting to add same address more than once', () => {
     // add an account first
     cy.visit(settingsPageWatchAccountUrl)
-    addWatchAccount(testAccountAddress)
+    cy.addWatchAccount(testAccountAddress)
     settingsPage.accountContainer().should('have.length', 1)
     // attempt to add the same account again
-    addWatchAccount(testAccountAddress)
+    cy.addWatchAccount(testAccountAddress)
     settingsPage.errorLabel().should('be.visible').should('have.text', 'Account already added')
     settingsPage.accountContainer().should('have.length', 1)
     settingsPage.addButton().should('be.disabled')
   })
 
   it('can see error when attempting to add an invalid address', () => {
     cy.visit(settingsPageWatchAccountUrl)
-    addWatchAccount('123')
+    cy.addWatchAccount('123')
     settingsPage.errorLabel().should('be.visible').should('have.text', 'Invalid address')
     settingsPage.accountContainer().should('have.length', 0)
     settingsPage.addButton().should('be.disabled')

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

@@ -129,7 +129,10 @@ const MultiProxySelection = ({ className }: Props) => {
   if (isLoading) {
     return (
       <BoxStyled>
-        <CircularProgress size={24} />
+        <CircularProgress
+          data-cy="proxy-selection-loader"
+          size={24}
+        />
       </BoxStyled>
     )
   }