feat(ui-test): cover reject signing (#1677)

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

@@ -3,6 +3,7 @@ import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/rea
 import { BrowserProvider, JsonRpcSigner } from 'ethers'
 import { EthersTransactionButton } from './EthersTransactionButton'
 import type { TypedDataField } from 'ethers'
+import { SigningFailedToastTitle, SigningSucceededToastTitle } from '../../constants'
 
 // Example data
 const types: Record<string, TypedDataField[]> = {
@@ -44,10 +45,15 @@ export function EthersConnectButton() {
       const signer = new JsonRpcSigner(provider, address)
       const signature = await signer?.signMessage('Hello Web3Modal Ethers')
 
-      toast({ title: 'Success', description: signature, status: 'success', isClosable: true })
+      toast({
+        title: SigningSucceededToastTitle,
+        description: signature,
+        status: 'success',
+        isClosable: true
+      })
     } catch {
       toast({
-        title: 'Error',
+        title: SigningFailedToastTitle,
         description: 'Failed to sign message',
         status: 'error',
         isClosable: true

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

@@ -2,6 +2,7 @@ import { Button, useToast } from '@chakra-ui/react'
 import { useAccount, useNetwork, useSignMessage, useSignTypedData } from 'wagmi'
 import { WagmiTransactionButton } from './WagmiTransactionButton'
 import { useEffect, useState } from 'react'
+import { SigningFailedToastTitle, SigningSucceededToastTitle } from '../../constants'
 
 // Example data
 
@@ -59,10 +60,15 @@ export function WagmiConnectButton() {
   async function onSignMessage() {
     try {
       const signature = await signMessageAsync()
-      toast({ title: 'Success', description: signature, status: 'success', isClosable: true })
+      toast({
+        title: SigningSucceededToastTitle,
+        description: signature,
+        status: 'success',
+        isClosable: true
+      })
     } catch {
       toast({
-        title: 'Error',
+        title: SigningFailedToastTitle,
         description: 'Failed to sign message',
         status: 'error',
         isClosable: true

apps/laboratory/src/constants.ts

@@ -0,0 +1,2 @@
+export const SigningSucceededToastTitle = 'Signing Succeeded'
+export const SigningFailedToastTitle = 'Signing Failed'

apps/laboratory/tests/connect.spec.ts

@@ -21,3 +21,13 @@ testMW('it should sign', async ({ modalPage, walletPage, modalValidator, walletV
   await walletPage.handleRequest({ accept: true })
   await modalValidator.expectAcceptedSign()
 })
+
+testMW(
+  'it should reject sign',
+  async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
+    await modalPage.sign()
+    await walletValidator.expectReceivedSign({})
+    await walletPage.handleRequest({ accept: false })
+    await modalValidator.expectRejectedSign()
+  }
+)

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

@@ -36,13 +36,15 @@ export class WalletPage {
    */
   async handleSessionProposal(opts: SessionParams) {
     const variant = opts.accept ? `approve` : `reject`
+    // `.click` doesn't work here, so we use `.focus` and `Space`
     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`
+    // `.click` doesn't work here, so we use `.focus` and `Space`
     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

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test'
 import type { Page } from '@playwright/test'
+import { SigningFailedToastTitle, SigningSucceededToastTitle } from '../../../src/constants'
 
 export class ModalValidator {
   constructor(public readonly page: Page) {}
@@ -13,6 +14,12 @@ export class ModalValidator {
   }
 
   async expectAcceptedSign() {
-    await expect(this.page.getByText('Success')).toBeVisible()
+    // We use Chakra Toast and it's not quite straightforward to set the `data-testid` attribute on the toast element.
+    await expect(this.page.getByText(SigningSucceededToastTitle)).toBeVisible()
+  }
+
+  async expectRejectedSign() {
+    // We use Chakra Toast and it's not quite straightforward to set the `data-testid` attribute on the toast element.
+    await expect(this.page.getByText(SigningFailedToastTitle)).toBeVisible()
   }
 }