diff --git a/apps/laboratory/src/components/Ethers/EthersConnectButton.tsx b/apps/laboratory/src/components/Ethers/EthersConnectButton.tsx index 3080c56e78..04d7963f72 100644 --- a/apps/laboratory/src/components/Ethers/EthersConnectButton.tsx +++ b/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 ( <> - {isConnected ? : null} + {isConnected ? ( + + ) : null} ) } diff --git a/apps/laboratory/src/components/Wagmi/WagmiConnectButton.tsx b/apps/laboratory/src/components/Wagmi/WagmiConnectButton.tsx index b55bd18a94..5cf1123759 100644 --- a/apps/laboratory/src/components/Wagmi/WagmiConnectButton.tsx +++ b/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() { {isConnected ? ( <> - - + + ) : null} diff --git a/apps/laboratory/tests/connect.spec.ts b/apps/laboratory/tests/connect.spec.ts index 9d084b95dd..79eae58ac6 100644 --- a/apps/laboratory/tests/connect.spec.ts +++ b/apps/laboratory/tests/connect.spec.ts @@ -1,14 +1,28 @@ import { DEFAULT_SESSION_PARAMS } from './shared/constants' import { testMW } from './shared/fixtures/w3m-wallet-fixture' -// Initialize the connection testMW.beforeEach(async ({ modalPage, walletPage }) => { 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( + 'Should connect and sign', + async ({ modalPage, walletPage, modalValidator, walletValidator }) => { + await modalValidator.expectConnected() + await walletValidator.expectConnected() + + // Sign + await modalPage.sign() + await walletValidator.expectRecievedSign({}) + await walletPage.handleRequest({ accept: true }) + await modalValidator.expectAcceptedSign() + } +) diff --git a/apps/laboratory/tests/shared/pages/ModalPage.ts b/apps/laboratory/tests/shared/pages/ModalPage.ts index b82aeed7f3..075ced2017 100644 --- a/apps/laboratory/tests/shared/pages/ModalPage.ts +++ b/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() { @@ -24,4 +24,13 @@ export class ModalPage { await this.page.waitForTimeout(2000) 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() + } } diff --git a/apps/laboratory/tests/shared/pages/WalletPage.ts b/apps/laboratory/tests/shared/pages/WalletPage.ts index 5837a3c05e..07775fdd9d 100644 --- a/apps/laboratory/tests/shared/pages/WalletPage.ts +++ b/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') } } diff --git a/apps/laboratory/tests/shared/validators/ModalValidator.ts b/apps/laboratory/tests/shared/validators/ModalValidator.ts index 859698b7e7..a7b0d680de 100644 --- a/apps/laboratory/tests/shared/validators/ModalValidator.ts +++ b/apps/laboratory/tests/shared/validators/ModalValidator.ts @@ -5,6 +5,20 @@ 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() + } + + async expectRejectedSign() { + await this.page.waitForTimeout(4000) + await this.page.screenshot({ path: 'failure.png' }) + await expect(this.page.getByText('Error')).toBeVisible() } } diff --git a/apps/laboratory/tests/shared/validators/WalletValidator.ts b/apps/laboratory/tests/shared/validators/WalletValidator.ts index 8c7fbf2925..e1d5563115 100644 --- a/apps/laboratory/tests/shared/validators/WalletValidator.ts +++ b/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 expectRecievedSign({ chainName = 'Ethereum' }) { + await expect(this.page.getByTestId('session-approve-button')).toBeVisible() + await expect(this.page.getByTestId('request-details-chain')).toHaveText(chainName) + } } diff --git a/packages/scaffold/src/modal/w3m-account-button/index.ts b/packages/scaffold/src/modal/w3m-account-button/index.ts index 658297a289..d2bb3b3d2c 100644 --- a/packages/scaffold/src/modal/w3m-account-button/index.ts +++ b/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" > ` diff --git a/packages/scaffold/src/modal/w3m-button/index.ts b/packages/scaffold/src/modal/w3m-button/index.ts index f055fcf318..5c42549070 100644 --- a/packages/scaffold/src/modal/w3m-button/index.ts +++ b/packages/scaffold/src/modal/w3m-button/index.ts @@ -53,7 +53,6 @@ export class W3mButton extends LitElement { size=${ifDefined(this.size)} label=${ifDefined(this.label)} loadingLabel=${ifDefined(this.loadingLabel)} - data-testid="connect-button" > ` } diff --git a/packages/scaffold/src/modal/w3m-connect-button/index.ts b/packages/scaffold/src/modal/w3m-connect-button/index.ts index 437e9210a9..1a00d4c9d7 100644 --- a/packages/scaffold/src/modal/w3m-connect-button/index.ts +++ b/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} diff --git a/packages/scaffold/src/views/w3m-account-view/index.ts b/packages/scaffold/src/views/w3m-account-view/index.ts index 9624616e02..49ed93971e 100644 --- a/packages/scaffold/src/views/w3m-account-view/index.ts +++ b/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" > Disconnect