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'
 
 // ***********************************************
 // This example commands.ts shows you how to
@@ -42,6 +43,7 @@ import { InjectedAccountWitMnemonic } from '../fixtures/injectedAccounts'
 // }
 
 const extension = new Extension()
+const Account1 = Object.values(injectedAccounts)[0].address
 
 Cypress.Commands.add('initExtension', (accounts: InjectedAccountWitMnemonic[]) => {
   cy.log('Initializing extension')
@@ -58,6 +60,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)
 })
@@ -96,6 +112,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

@@ -1,4 +1,5 @@
 export const topMenuItems = {
   connectButton: () => cy.get('[data-cy="button-menu-connect"]'),
-  multiproxySelector: () => cy.get('[data-cy="select-multiproxy"]')
+  multiproxySelector: () => cy.get('[data-cy="select-multiproxy"]'),
+  headerNavbar: () => cy.get('[data-cy="header-navbar"]')
 }

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

@@ -2,6 +2,7 @@ import { injectedAccounts } from '../fixtures/injectedAccounts'
 import { landingPageUrl } from '../fixtures/landingData'
 import { landingPage } from '../support/page-objects/landingPage'
 import { topMenuItems } from '../support/page-objects/topMenuItems'
+import { newMultisigPage } from '../support/page-objects/newMultisigPage'
 
 describe('Connect Account', () => {
   beforeEach(() => {
@@ -21,22 +22,32 @@ 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', () => {
-    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')
+  it('Connect Accounts', () => {
+    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

@@ -21,17 +21,7 @@ describe('Perform transactions', () => {
     cy.initExtension(injectedAccounts)
     topMenuItems.connectButton().click()
     landingPage.accountsOrRpcLoader().should('contain', 'Loading accounts')
-    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="/">