Add connect command

packages/ui/cypress/support/commands.ts

@@ -2,7 +2,8 @@
 
 import { AuthRequests, Extension, TxRequests } from './Extension'
 import { MultisigInfo, rejectCurrentMultisigTxs } from '../utils/rejectCurrentMultisigTxs'
-import { InjectedAccountWitMnemonic } from '../fixtures/injectedAccounts'
+import { injectedAccounts, InjectedAccountWitMnemonic } from '../fixtures/injectedAccounts'
+import { topMenuItems } from './page-objects/topMenuItems'
 import 'cypress-wait-until'
 
 // ***********************************************
@@ -43,6 +44,7 @@ import 'cypress-wait-until'
 // }
 
 const extension = new Extension()
+const Account1 = Object.values(injectedAccounts)[0].address
 
 Cypress.Commands.add('initExtension', (accounts: InjectedAccountWitMnemonic[]) => {
   cy.log('Initializing extension')
@@ -59,6 +61,20 @@ Cypress.Commands.add('getAuthRequests', () => {
   return cy.wrap(extension.getAuthRequests())
 })
 
+Cypress.Commands.add('connectAccounts', (accountAddresses = [Account1] as string[]) => {
+  cy.getAuthRequests().then((authRequests) => {
+    const requests = Object.values(authRequests)
+    // we should have 1 connection request to the extension
+    cy.wrap(requests.length).should('eq', 1)
+    // this request should be from the application Multix
+    cy.wrap(requests[0].origin).should('eq', 'Multix')
+    // let's allow Accounts to connect
+    cy.enableAuth(requests[0].id, accountAddresses)
+    // the ui should then move on to connecting to the rpcs
+    topMenuItems.multiproxySelector().should('be.visible')
+  })
+})
+
 Cypress.Commands.add('enableAuth', (id: number, accountAddresses: string[]) => {
   return extension.enableAuth(id, accountAddresses)
 })
@@ -97,6 +113,12 @@ declare global {
        */
       getAuthRequests: () => Chainable<AuthRequests>
 
+      /**
+       * Connect an accounts to the extension
+       * @param accountAddress
+       */
+      connectAccounts: (accountAddresses: string[]) => void
+
       /**
        * Authorize a specific request
        * @param {number} id - the id of the request to authorize. This id is part of the getAuthRequests object response.

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

@@ -0,0 +1,3 @@
+export const newMultisigPage = {
+  addressSelector: () => cy.get('[data-cy="input-account-address"]')
+}

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

@@ -6,5 +6,6 @@ export const topMenuItems = {
   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 }),
-  multiproxySelectorOption: () => cy.get('[data-cy=select-multiproxy-option]')
+  multiproxySelectorOption: () => cy.get('[data-cy=select-multiproxy-option]'),
+  headerNavbar: () => cy.get('[data-cy="header-navbar"]')
 }

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

@@ -3,6 +3,7 @@ import { landingPageUrl } from '../fixtures/landingData'
 import { landingPage } from '../support/page-objects/landingPage'
 import { topMenuItems } from '../support/page-objects/topMenuItems'
 import { waitForAuthRequest } from '../utils/waitForAuthRequests'
+import { newMultisigPage } from '../support/page-objects/newMultisigPage'
 
 describe('Connect Account', () => {
   beforeEach(() => {
@@ -23,23 +24,33 @@ describe('Connect Account', () => {
       // let's allow it for Alice
       cy.rejectAuth(requests[0].id, 'Cancelled')
       // the ui should then move on to connecting to the rpcs
-      landingPage.noAccountFoundError().should('be.visible')
+      landingPage
+        .noAccountFoundError()
+        .should(
+          'have.text',
+          'No account found. Please connect at least one in a wallet extension. More info at wiki.polkadot.network'
+        )
     })
   })
 
-  it('Connects with Alice', () => {
+  it('Connect Accounts', () => {
     waitForAuthRequest()
-    const AliceAddress = Object.values(injectedAccounts)[0].address
-    cy.getAuthRequests().then((authRequests) => {
-      const requests = Object.values(authRequests)
-      // we should have 1 connection request to the extension
-      cy.wrap(requests.length).should('eq', 1)
-      // this request should be from the application Multix
-      cy.wrap(requests[0].origin).should('eq', 'Multix')
-      // let's allow it for Alice
-      cy.enableAuth(requests[0].id, [AliceAddress])
-      // the ui should then move on to connecting to the rpcs
-      topMenuItems.multiproxySelector().should('be.visible')
+    const { address: account1 } = Object.values(injectedAccounts)[0]
+    const { address: account2 } = Object.values(injectedAccounts)[1]
+
+    cy.connectAccounts([account1, account2])
+
+    topMenuItems.headerNavbar().within(() => {
+      cy.get('[href="/create"]').click()
+    })
+
+    // Click on the account address selector
+    newMultisigPage.addressSelector().click()
+
+    const accountLabels = cy.get('[data-cy="label-account-name"]')
+    accountLabels.each((el, index) => {
+      const expectedName = Object.values(injectedAccounts)[index].name
+      cy.wrap(el).should('have.text', expectedName)
     })
   })
 })

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

@@ -24,17 +24,7 @@ describe('Perform transactions', () => {
     topMenuItems.connectButton().click()
     landingPage.accountsLoader().should('contain', 'Loading accounts')
     waitForAuthRequest()
-    cy.getAuthRequests().then((authRequests) => {
-      const requests = Object.values(authRequests)
-      // we should have 1 connection request to the extension
-      cy.wrap(requests.length).should('eq', 1)
-      // this request should be from the application Multix
-      cy.wrap(requests[0].origin).should('eq', 'Multix')
-      // let's allow it for Alice
-      cy.enableAuth(requests[0].id, [AliceAddress])
-      // the ui should then move on to connecting to the rpcs
-      topMenuItems.multiproxySelector().should('be.visible')
-    })
+    cy.connectAccounts([AliceAddress])
   })
 
   it('Abort a tx with Alice', () => {

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

@@ -25,7 +25,10 @@ const Header = ({ handleDrawerOpen }: Props) => {
   useWalletConnectEventsManager()
 
   return (
-    <MuiAppBarStyled position="sticky">
+    <MuiAppBarStyled
+      position="sticky"
+      data-cy="header-navbar"
+    >
       <Toolbar>
         <LogoWrapperStyled>
           <HomeLinkStyled to="/">