diff --git a/extension/e2e/errorHandling.spec.ts b/extension/e2e/errorHandling.spec.ts new file mode 100644 index 00000000..3853b39f --- /dev/null +++ b/extension/e2e/errorHandling.spec.ts @@ -0,0 +1,23 @@ +import { mock } from '@depay/web3-mock' +import { expect, test } from './fixture' +import { loadExtension } from './loadExtension' +import { mockWeb3 } from './mockWeb3' + +test('handles wallet disconnect gracefully', async ({ page, extensionId }) => { + mockWeb3(page, () => + mock({ + blockchain: 'ethereum', + accounts: { return: ['0x0000000000000000000000000000000000000000'] }, + }) + ) + + const extension = await loadExtension(page, extensionId) + + await extension.getByRole('link', { name: 'Configure routes' }).click() + await extension.getByRole('button', { name: 'Add Route' }).click() + await extension.getByRole('button', { name: 'Connect with MetaMask' }).click() + + await expect( + extension.getByRole('alert', { name: 'Account disconnected' }) + ).toBeInViewport() +}) diff --git a/extension/e2e/mockWeb3.ts b/extension/e2e/mockWeb3.ts new file mode 100644 index 00000000..5f59c508 --- /dev/null +++ b/extension/e2e/mockWeb3.ts @@ -0,0 +1,25 @@ +import { Page } from '@playwright/test' +import { readFileSync } from 'fs' +import { MutableRefObject } from 'react' +import { fileURLToPath } from 'url' + +const web3Content: MutableRefObject = { current: null } + +export const mockWeb3 = (page: Page, fn: () => unknown) => { + page.addInitScript({ + content: `${getLibraryCode()}\n(${fn.toString().replaceAll('mock', 'Web3Mock.mock')})()`, + }) +} + +const getLibraryCode = () => { + if (web3Content.current == null) { + web3Content.current = readFileSync( + fileURLToPath( + import.meta.resolve('@depay/web3-mock/dist/umd/index.bundle.js') + ), + 'utf-8' + ) + } + + return web3Content.current +} diff --git a/extension/src/components/RouteBubble/index.tsx b/extension/src/components/RouteBubble/index.tsx index 4cc8f929..6caa96c3 100644 --- a/extension/src/components/RouteBubble/index.tsx +++ b/extension/src/components/RouteBubble/index.tsx @@ -51,6 +51,7 @@ const RouteBubble: React.FC = () => { + Configure routes