chore(ui-tests): cover sign (#1647)

apps/laboratory/src/components/Ethers/EthersConnectButton.tsx

@@ -15,7 +15,7 @@ export function EthersConnectButton() {
       const signer = new JsonRpcSigner(provider, address)
       const signature = await signer?.signMessage('Hello Web3Modal Ethers')
 
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+      toast({ title: 'Success', description: signature, status: 'success', isClosable: true })
     } catch {
       toast({
         title: 'Error',
@@ -29,7 +29,11 @@ export function EthersConnectButton() {
   return (
     <>
       <w3m-button />
-      {isConnected ? <Button onClick={() => onSignMessage()}>Sign Message</Button> : null}
+      {isConnected ? (
+        <Button onClick={() => onSignMessage()} data-testid="sign-message-button">
+          Sign Message
+        </Button>
+      ) : null}
     </>
   )
 }

apps/laboratory/src/components/Wagmi/WagmiConnectButton.tsx

@@ -48,7 +48,7 @@ export function WagmiConnectButton() {
   async function onSignMessage() {
     try {
       const signature = await signMessageAsync()
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+      toast({ title: 'Success', description: signature, status: 'success', isClosable: true })
     } catch {
       toast({
         title: 'Error',
@@ -67,7 +67,7 @@ export function WagmiConnectButton() {
         primaryType: 'Mail',
         types
       })
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+      toast({ title: 'Success', description: signature, status: 'success', isClosable: true })
     } catch {
       toast({
         title: 'Error',
@@ -83,8 +83,12 @@ export function WagmiConnectButton() {
       <w3m-button />
       {isConnected ? (
         <>
-          <Button onClick={() => onSignMessage()}>Sign Message</Button>
-          <Button onClick={() => onSignTypedData()}>Sign Typed Data</Button>
+          <Button onClick={() => onSignMessage()} data-testid="sign-message-button">
+            Sign Message
+          </Button>
+          <Button onClick={() => onSignTypedData()} data-testid="sign-typed-data-button">
+            Sign Typed Data
+          </Button>
         </>
       ) : null}
     </>

apps/laboratory/tests/basic-tests.spec.ts

@@ -2,7 +2,7 @@ import { testM, expect } from './shared/fixtures/w3m-fixture'
 
 testM.describe('Modal only tests', () => {
   testM('Should be able to open modal', async ({ modalPage }) => {
-    await modalPage.page.getByText('Connect Wallet').click()
-    await expect(modalPage.page.getByText('All Wallets')).toBeVisible()
+    await modalPage.page.getByTestId('connect-button').click()
+    await expect(modalPage.page.getByTestId('all-wallets')).toBeVisible()
   })
 })

apps/laboratory/tests/connect.spec.ts

@@ -1,14 +1,23 @@
 import { DEFAULT_SESSION_PARAMS } from './shared/constants'
 import { testMW } from './shared/fixtures/w3m-wallet-fixture'
 
-// Initialize the connection
-testMW.beforeEach(async ({ modalPage, walletPage }) => {
+testMW.beforeEach(async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
   await modalPage.copyConnectUriToClipboard()
   await walletPage.connect()
   await walletPage.handleSessionProposal(DEFAULT_SESSION_PARAMS)
-})
-
-testMW('Should connect', async ({ modalValidator, walletValidator }) => {
   await modalValidator.expectConnected()
   await walletValidator.expectConnected()
 })
+
+testMW.afterEach(async ({ modalPage, modalValidator, walletValidator }) => {
+  await modalPage.disconnect()
+  await modalValidator.expectDisconnected()
+  await walletValidator.expectDisconnected()
+})
+
+testMW('it should sign', async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
+  await modalPage.sign()
+  await walletValidator.expectReceivedSign({})
+  await walletPage.handleRequest({ accept: true })
+  await modalValidator.expectAcceptedSign()
+})

apps/laboratory/tests/shared/pages/ModalPage.ts

@@ -10,7 +10,7 @@ export class ModalPage {
     public readonly page: Page,
     public readonly library: string
   ) {
-    this.connectButton = this.page.getByText('Connect Wallet')
+    this.connectButton = this.page.getByTestId('connect-button')
   }
 
   async load() {
@@ -20,8 +20,17 @@ export class ModalPage {
   async copyConnectUriToClipboard() {
     await this.page.goto(`${this.baseURL}library/${this.library}/`)
     await this.connectButton.click()
-    await this.page.getByText('WalletConnect').click()
+    await this.page.getByTestId('wallet-selector-walletconnect').click()
     await this.page.waitForTimeout(2000)
-    await this.page.getByText('Copy link').click()
+    await this.page.getByTestId('copy-wc2-uri').click()
+  }
+
+  async disconnect() {
+    await this.page.getByTestId('account-button').click()
+    await this.page.getByTestId('disconnect-button').click()
+  }
+
+  async sign() {
+    await this.page.getByTestId('sign-message-button').click()
   }
 }

apps/laboratory/tests/shared/pages/WalletPage.ts

@@ -36,12 +36,15 @@ export class WalletPage {
    */
   async handleSessionProposal(opts: SessionParams) {
     const variant = opts.accept ? `approve` : `reject`
+    await this.page.getByTestId(`session-${variant}-button`).isEnabled()
     await this.page.getByTestId(`session-${variant}-button`).focus()
     await this.page.keyboard.press('Space')
   }
 
   async handleRequest({ accept }: { accept: boolean }) {
     const variant = accept ? `approve` : `reject`
-    await this.page.getByTestId(`request-button-${variant}`).click()
+    await this.page.getByTestId(`session-${variant}-button`).isEnabled()
+    await this.page.getByTestId(`session-${variant}-button`).focus()
+    await this.page.keyboard.press('Space')
   }
 }

apps/laboratory/tests/shared/validators/ModalValidator.ts

@@ -5,6 +5,14 @@ export class ModalValidator {
   constructor(public readonly page: Page) {}
 
   async expectConnected() {
-    await expect(this.page.getByText('Sign Message')).toBeVisible()
+    await expect(this.page.getByTestId('account-button')).toBeVisible()
+  }
+
+  async expectDisconnected() {
+    await expect(this.page.getByTestId('account-button')).not.toBeVisible()
+  }
+
+  async expectAcceptedSign() {
+    await expect(this.page.getByText('Success')).toBeVisible()
   }
 }

apps/laboratory/tests/shared/validators/WalletValidator.ts

@@ -13,4 +13,16 @@ export class WalletValidator {
     await this.gotoSessions.click()
     await expect(this.page.getByTestId('session-card')).toBeVisible()
   }
+
+  async expectDisconnected() {
+    await this.page.waitForTimeout(1000)
+    await this.page.reload()
+    await this.gotoSessions.click()
+    await expect(this.page.getByTestId('session-card')).not.toBeVisible()
+  }
+
+  async expectReceivedSign({ chainName = 'Ethereum' }) {
+    await expect(this.page.getByTestId('session-approve-button')).toBeVisible()
+    await expect(this.page.getByTestId('request-details-chain')).toHaveText(chainName)
+  }
 }

packages/scaffold/src/modal/w3m-account-button/index.ts

@@ -78,6 +78,7 @@ export class W3mAccountButton extends LitElement {
           ? CoreHelperUtil.formatBalance(this.balanceVal, this.balanceSymbol)
           : ''}
         @click=${this.onClick.bind(this)}
+        data-testid="account-button"
       >
       </wui-account-button>
     `

packages/scaffold/src/modal/w3m-connect-button/index.ts

@@ -45,6 +45,7 @@ export class W3mConnectButton extends LitElement {
         size=${ifDefined(this.size)}
         .loading=${isLoading}
         @click=${this.onClick.bind(this)}
+        data-testid="connect-button"
       >
         ${isLoading ? this.loadingLabel : this.label}
       </wui-connect-button>

packages/scaffold/src/partials/w3m-connecting-wc-qrcode/index.ts

@@ -73,7 +73,12 @@ export class W3mConnectingWcQrcode extends W3mConnectingWidget {
   private copyTemplate() {
     const inactive = !this.uri || !this.ready
 
-    return html`<wui-link .disabled=${inactive} @click=${this.onCopyUri} color="fg-200">
+    return html`<wui-link
+      .disabled=${inactive}
+      @click=${this.onCopyUri}
+      color="fg-200"
+      data-testid="copy-wc2-uri"
+    >
       <wui-icon size="xs" color="fg-200" slot="iconLeft" name="copy"></wui-icon>
       Copy link
     </wui-link>`

packages/scaffold/src/views/w3m-account-view/index.ts

@@ -154,6 +154,7 @@ export class W3mAccountView extends LitElement {
           ?chevron=${false}
           .loading=${this.disconecting}
           @click=${this.onDisconnect.bind(this)}
+          data-testid="disconnect-button"
         >
           <wui-text variant="paragraph-500" color="fg-200">Disconnect</wui-text>
         </wui-list-item>

packages/scaffold/src/views/w3m-connect-view/index.ts

@@ -70,6 +70,7 @@ export class W3mConnectView extends LitElement {
         @click=${() => this.onConnector(connector)}
         tagLabel="qr code"
         tagVariant="main"
+        data-testid="wallet-selector-walletconnect"
       >
       </wui-list-wallet>
     `
@@ -214,6 +215,7 @@ export class W3mConnectView extends LitElement {
         @click=${this.onAllWallets.bind(this)}
         tagLabel=${tagLabel}
         tagVariant="shade"
+        data-testid="all-wallets"
       ></wui-list-wallet>
     `
   }