From a6ed95c366283e8acbf9ee8b778f5aacf1e7c4a0 Mon Sep 17 00:00:00 2001 From: Derek Date: Thu, 21 Dec 2023 18:24:10 -0500 Subject: [PATCH 1/5] chore(ui-tests): use data-test-id attribute --- apps/laboratory/tests/basic-tests.spec.ts | 4 ++-- apps/laboratory/tests/shared/pages/ModalPage.ts | 4 ++-- packages/scaffold/src/modal/w3m-button/index.ts | 1 + .../src/partials/w3m-connecting-wc-qrcode/index.ts | 7 ++++++- packages/scaffold/src/views/w3m-connect-view/index.ts | 2 ++ 5 files changed, 13 insertions(+), 5 deletions(-) diff --git a/apps/laboratory/tests/basic-tests.spec.ts b/apps/laboratory/tests/basic-tests.spec.ts index 0d2743b29f..1dbdc68917 100644 --- a/apps/laboratory/tests/basic-tests.spec.ts +++ b/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() }) }) diff --git a/apps/laboratory/tests/shared/pages/ModalPage.ts b/apps/laboratory/tests/shared/pages/ModalPage.ts index 8453c4e559..b82aeed7f3 100644 --- a/apps/laboratory/tests/shared/pages/ModalPage.ts +++ b/apps/laboratory/tests/shared/pages/ModalPage.ts @@ -20,8 +20,8 @@ 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() } } diff --git a/packages/scaffold/src/modal/w3m-button/index.ts b/packages/scaffold/src/modal/w3m-button/index.ts index 5c42549070..f055fcf318 100644 --- a/packages/scaffold/src/modal/w3m-button/index.ts +++ b/packages/scaffold/src/modal/w3m-button/index.ts @@ -53,6 +53,7 @@ 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/partials/w3m-connecting-wc-qrcode/index.ts b/packages/scaffold/src/partials/w3m-connecting-wc-qrcode/index.ts index 8b81e7ba1b..bca8744c6f 100644 --- a/packages/scaffold/src/partials/w3m-connecting-wc-qrcode/index.ts +++ b/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` + return html` Copy link ` diff --git a/packages/scaffold/src/views/w3m-connect-view/index.ts b/packages/scaffold/src/views/w3m-connect-view/index.ts index 93fa361800..15a4364e31 100644 --- a/packages/scaffold/src/views/w3m-connect-view/index.ts +++ b/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" > ` @@ -214,6 +215,7 @@ export class W3mConnectView extends LitElement { @click=${this.onAllWallets.bind(this)} tagLabel=${tagLabel} tagVariant="shade" + data-testid="all-wallets" > ` } From 4ed5a64f308b2505931ea88e3a4d39b0cf9d773f Mon Sep 17 00:00:00 2001 From: Derek Date: Thu, 21 Dec 2023 20:38:30 -0500 Subject: [PATCH 2/5] feat: sign --- .../components/Ethers/EthersConnectButton.tsx | 8 +++++-- .../components/Wagmi/WagmiConnectButton.tsx | 12 ++++++---- apps/laboratory/tests/connect.spec.ts | 22 +++++++++++++++---- .../tests/shared/pages/ModalPage.ts | 11 +++++++++- .../tests/shared/pages/WalletPage.ts | 5 ++++- .../tests/shared/validators/ModalValidator.ts | 16 +++++++++++++- .../shared/validators/WalletValidator.ts | 12 ++++++++++ .../src/modal/w3m-account-button/index.ts | 1 + .../scaffold/src/modal/w3m-button/index.ts | 1 - .../src/modal/w3m-connect-button/index.ts | 1 + .../src/views/w3m-account-view/index.ts | 1 + 11 files changed, 76 insertions(+), 14 deletions(-) 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 From 8d1a86ab77994124943d4d718a0efe3deb33bc37 Mon Sep 17 00:00:00 2001 From: Derek Date: Thu, 21 Dec 2023 20:42:52 -0500 Subject: [PATCH 3/5] chore: remove unused code --- apps/laboratory/tests/shared/validators/ModalValidator.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/apps/laboratory/tests/shared/validators/ModalValidator.ts b/apps/laboratory/tests/shared/validators/ModalValidator.ts index a7b0d680de..cf8a9c3536 100644 --- a/apps/laboratory/tests/shared/validators/ModalValidator.ts +++ b/apps/laboratory/tests/shared/validators/ModalValidator.ts @@ -15,10 +15,4 @@ export class ModalValidator { 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() - } } From dfacac23959be5d7f07258fbf0cf5f8735c47449 Mon Sep 17 00:00:00 2001 From: Derek Date: Thu, 21 Dec 2023 20:44:13 -0500 Subject: [PATCH 4/5] chore: remove unused code --- apps/laboratory/tests/connect.spec.ts | 13 +++++-------- .../tests/shared/validators/WalletValidator.ts | 2 +- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/apps/laboratory/tests/connect.spec.ts b/apps/laboratory/tests/connect.spec.ts index 79eae58ac6..2ede36f940 100644 --- a/apps/laboratory/tests/connect.spec.ts +++ b/apps/laboratory/tests/connect.spec.ts @@ -1,10 +1,12 @@ import { DEFAULT_SESSION_PARAMS } from './shared/constants' import { testMW } from './shared/fixtures/w3m-wallet-fixture' -testMW.beforeEach(async ({ modalPage, walletPage }) => { +testMW.beforeEach(async ({ modalPage, walletPage, modalValidator, walletValidator }) => { await modalPage.copyConnectUriToClipboard() await walletPage.connect() await walletPage.handleSessionProposal(DEFAULT_SESSION_PARAMS) + await modalValidator.expectConnected() + await walletValidator.expectConnected() }) testMW.afterEach(async ({ modalPage, modalValidator, walletValidator }) => { @@ -13,15 +15,10 @@ testMW.afterEach(async ({ modalPage, modalValidator, walletValidator }) => { await walletValidator.expectDisconnected() }) -testMW( - 'Should connect and sign', +testMW('it should sign', async ({ modalPage, walletPage, modalValidator, walletValidator }) => { - await modalValidator.expectConnected() - await walletValidator.expectConnected() - - // Sign await modalPage.sign() - await walletValidator.expectRecievedSign({}) + await walletValidator.expectReceivedSign({}) await walletPage.handleRequest({ accept: true }) await modalValidator.expectAcceptedSign() } diff --git a/apps/laboratory/tests/shared/validators/WalletValidator.ts b/apps/laboratory/tests/shared/validators/WalletValidator.ts index e1d5563115..9cedbadf47 100644 --- a/apps/laboratory/tests/shared/validators/WalletValidator.ts +++ b/apps/laboratory/tests/shared/validators/WalletValidator.ts @@ -21,7 +21,7 @@ export class WalletValidator { await expect(this.page.getByTestId('session-card')).not.toBeVisible() } - async expectRecievedSign({ chainName = 'Ethereum' }) { + async expectReceivedSign({ chainName = 'Ethereum' }) { await expect(this.page.getByTestId('session-approve-button')).toBeVisible() await expect(this.page.getByTestId('request-details-chain')).toHaveText(chainName) } From f9f332bd7f62140513d8cf3c2b0413afb9b0e6f4 Mon Sep 17 00:00:00 2001 From: Derek Date: Thu, 21 Dec 2023 20:45:33 -0500 Subject: [PATCH 5/5] chore: cleanup --- apps/laboratory/tests/connect.spec.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/apps/laboratory/tests/connect.spec.ts b/apps/laboratory/tests/connect.spec.ts index 2ede36f940..9d54d1791b 100644 --- a/apps/laboratory/tests/connect.spec.ts +++ b/apps/laboratory/tests/connect.spec.ts @@ -15,11 +15,9 @@ testMW.afterEach(async ({ modalPage, modalValidator, walletValidator }) => { 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() - } -) +testMW('it should sign', async ({ modalPage, walletPage, modalValidator, walletValidator }) => { + await modalPage.sign() + await walletValidator.expectReceivedSign({}) + await walletPage.handleRequest({ accept: true }) + await modalValidator.expectAcceptedSign() +})