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/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/connect.spec.ts b/apps/laboratory/tests/connect.spec.ts index 9d084b95dd..9d54d1791b 100644 --- a/apps/laboratory/tests/connect.spec.ts +++ b/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() +}) diff --git a/apps/laboratory/tests/shared/pages/ModalPage.ts b/apps/laboratory/tests/shared/pages/ModalPage.ts index 8453c4e559..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() { @@ -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() } } 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..cf8a9c3536 100644 --- a/apps/laboratory/tests/shared/validators/ModalValidator.ts +++ b/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() } } diff --git a/apps/laboratory/tests/shared/validators/WalletValidator.ts b/apps/laboratory/tests/shared/validators/WalletValidator.ts index 8c7fbf2925..9cedbadf47 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 expectReceivedSign({ 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-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/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-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 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" > ` }