From a7d921b8625cb5f51f4a536a6216d9ab6a51d5aa Mon Sep 17 00:00:00 2001 From: Sven Date: Thu, 19 Dec 2024 12:06:49 +0100 Subject: [PATCH 1/8] wip --- apps/laboratory/src/pages/library/wagmi.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/laboratory/src/pages/library/wagmi.tsx b/apps/laboratory/src/pages/library/wagmi.tsx index 035dfd6df2..00c9f9a931 100644 --- a/apps/laboratory/src/pages/library/wagmi.tsx +++ b/apps/laboratory/src/pages/library/wagmi.tsx @@ -7,17 +7,13 @@ import { WagmiAdapter } from '@reown/appkit-adapter-wagmi' import { createAppKit } from '@reown/appkit/react' import { ConstantsUtil } from '../../utils/ConstantsUtil' import { ThemeStore } from '../../utils/StoreUtil' -import { mainnet } from 'viem/chains' const queryClient = new QueryClient() const wagmiAdapter = new WagmiAdapter({ ssr: true, networks: ConstantsUtil.EvmNetworks, - projectId: ConstantsUtil.ProjectId, - transports: { - [mainnet.id]: http('https://foo-bar-baz.quiknode.pro') - } + projectId: ConstantsUtil.ProjectId }) const modal = createAppKit({ From 912ed0d21d0416e0df4c6a939a840086ad66d9be Mon Sep 17 00:00:00 2001 From: Sven Date: Tue, 7 Jan 2025 11:00:39 +0100 Subject: [PATCH 2/8] wip --- apps/laboratory/src/pages/library/wagmi.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/laboratory/src/pages/library/wagmi.tsx b/apps/laboratory/src/pages/library/wagmi.tsx index 00c9f9a931..1972e7f61d 100644 --- a/apps/laboratory/src/pages/library/wagmi.tsx +++ b/apps/laboratory/src/pages/library/wagmi.tsx @@ -1,5 +1,5 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { fallback, http, WagmiProvider } from 'wagmi' +import { WagmiProvider } from 'wagmi' import { AppKitButtons } from '../../components/AppKitButtons' import { WagmiTests } from '../../components/Wagmi/WagmiTests' import { WagmiModalInfo } from '../../components/Wagmi/WagmiModalInfo' From 1a5549497e098fb448f460d7c97701fa37ece613 Mon Sep 17 00:00:00 2001 From: Sven Date: Mon, 13 Jan 2025 16:14:18 +0100 Subject: [PATCH 3/8] wip --- .../w3m-swap-preview-view.test.ts | 40 ++++++++++++++++++- .../w3m-swap-select-token-view.test.ts | 0 .../{modal => views}/w3m-swap-view.test.ts | 0 .../w3m-wallet-send-preview-view.test.ts | 0 .../w3m-wallet-send-select-token-view.test.ts | 0 5 files changed, 39 insertions(+), 1 deletion(-) rename packages/scaffold-ui/test/{modal => views}/w3m-swap-preview-view.test.ts (81%) rename packages/scaffold-ui/test/{modal => views}/w3m-swap-select-token-view.test.ts (100%) rename packages/scaffold-ui/test/{modal => views}/w3m-swap-view.test.ts (100%) rename packages/scaffold-ui/test/{modal => views}/w3m-wallet-send-preview-view.test.ts (100%) rename packages/scaffold-ui/test/{modal => views}/w3m-wallet-send-select-token-view.test.ts (100%) diff --git a/packages/scaffold-ui/test/modal/w3m-swap-preview-view.test.ts b/packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts similarity index 81% rename from packages/scaffold-ui/test/modal/w3m-swap-preview-view.test.ts rename to packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts index a17b5fd9b8..089659d944 100644 --- a/packages/scaffold-ui/test/modal/w3m-swap-preview-view.test.ts +++ b/packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts @@ -1,6 +1,6 @@ import { expect as expectChai, html, fixture } from '@open-wc/testing' import { describe, it, afterEach, beforeEach, vi, expect } from 'vitest' -import { W3mSwapPreviewView } from '../../src/views/w3m-swap-preview-view' +import { W3mSwapPreviewView } from '../../src/Add test for views/w3m-swap-preview-view' import { SwapController, RouterController, @@ -283,3 +283,41 @@ describe('W3mSwapPreviewView', () => { expect(clearIntervalSpy).toHaveBeenCalled() }) }) +Add test for views/w3m-account-settings-view +Add test for views/w3m-account-view +Add test for views/w3m-all-wallets-view +Add test for views/w3m-approve-transaction-view +Add test for views/w3m-buy-in-progress-view +Add test for views/w3m-choose-account-name-view +Add test for views/w3m-connect-socials-view +Add test for views/w3m-connect-wallets-view +Add test for views/w3m-connecting-external-view +Add test for views/w3m-connecting-farcaster-view +Add test for views/w3m-connecting-multi-chain-view +Add test for views/w3m-connecting-wc-basic-view +Add test for views/w3m-downloads-view +Add test for views/w3m-email-verify-device-view +Add test for views/w3m-email-verify-otp-view +Add test for views/w3m-get-wallet-view +Add test for views/w3m-network-switch-view +Add test for views/w3m-networks-view +Add test for views/w3m-onramp-activity-view +Add test for views/w3m-onramp-fiat-select-view +Add test for views/w3m-onramp-providers-view +Add test for views/w3m-onramp-tokens-select-view +Add test for views/w3m-register-account-name-success-view +Add test for views/w3m-register-account-name-view +Add test for views/w3m-siwx-sign-message-view +Add test for views/w3m-switch-active-chain-view +Add test for views/w3m-switch-address-view +Add test for views/w3m-transactions-view +Add test for views/w3m-unsupported-chain-view +Add test for views/w3m-update-email-primary-otp-view +Add test for views/w3m-update-email-secondary-otp-view +Add test for views/w3m-update-email-wallet-view +Add test for views/w3m-upgrade-wallet-view +Add test for views/w3m-wallet-compatible-networks-view +Add test for views/w3m-wallet-receive-view +Add test for views/w3m-what-is-a-buy-view +Add test for views/w3m-what-is-a-network-view +Add test for views/w3m-what-is-a-wallet-view diff --git a/packages/scaffold-ui/test/modal/w3m-swap-select-token-view.test.ts b/packages/scaffold-ui/test/views/w3m-swap-select-token-view.test.ts similarity index 100% rename from packages/scaffold-ui/test/modal/w3m-swap-select-token-view.test.ts rename to packages/scaffold-ui/test/views/w3m-swap-select-token-view.test.ts diff --git a/packages/scaffold-ui/test/modal/w3m-swap-view.test.ts b/packages/scaffold-ui/test/views/w3m-swap-view.test.ts similarity index 100% rename from packages/scaffold-ui/test/modal/w3m-swap-view.test.ts rename to packages/scaffold-ui/test/views/w3m-swap-view.test.ts diff --git a/packages/scaffold-ui/test/modal/w3m-wallet-send-preview-view.test.ts b/packages/scaffold-ui/test/views/w3m-wallet-send-preview-view.test.ts similarity index 100% rename from packages/scaffold-ui/test/modal/w3m-wallet-send-preview-view.test.ts rename to packages/scaffold-ui/test/views/w3m-wallet-send-preview-view.test.ts diff --git a/packages/scaffold-ui/test/modal/w3m-wallet-send-select-token-view.test.ts b/packages/scaffold-ui/test/views/w3m-wallet-send-select-token-view.test.ts similarity index 100% rename from packages/scaffold-ui/test/modal/w3m-wallet-send-select-token-view.test.ts rename to packages/scaffold-ui/test/views/w3m-wallet-send-select-token-view.test.ts From 20c041793881fb2c93540336dd3ac6d7b04dfa6e Mon Sep 17 00:00:00 2001 From: Sven Date: Tue, 14 Jan 2025 11:45:28 +0100 Subject: [PATCH 4/8] wip --- .../test/views/w3m-swap-preview-view.test.ts | 40 +------------------ 1 file changed, 1 insertion(+), 39 deletions(-) diff --git a/packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts b/packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts index 089659d944..40b9c4f738 100644 --- a/packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts +++ b/packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts @@ -1,6 +1,6 @@ import { expect as expectChai, html, fixture } from '@open-wc/testing' import { describe, it, afterEach, beforeEach, vi, expect } from 'vitest' -import { W3mSwapPreviewView } from '../../src/Add test for views/w3m-swap-preview-view' +import { W3mSwapPreviewView } from '../../exports' import { SwapController, RouterController, @@ -283,41 +283,3 @@ describe('W3mSwapPreviewView', () => { expect(clearIntervalSpy).toHaveBeenCalled() }) }) -Add test for views/w3m-account-settings-view -Add test for views/w3m-account-view -Add test for views/w3m-all-wallets-view -Add test for views/w3m-approve-transaction-view -Add test for views/w3m-buy-in-progress-view -Add test for views/w3m-choose-account-name-view -Add test for views/w3m-connect-socials-view -Add test for views/w3m-connect-wallets-view -Add test for views/w3m-connecting-external-view -Add test for views/w3m-connecting-farcaster-view -Add test for views/w3m-connecting-multi-chain-view -Add test for views/w3m-connecting-wc-basic-view -Add test for views/w3m-downloads-view -Add test for views/w3m-email-verify-device-view -Add test for views/w3m-email-verify-otp-view -Add test for views/w3m-get-wallet-view -Add test for views/w3m-network-switch-view -Add test for views/w3m-networks-view -Add test for views/w3m-onramp-activity-view -Add test for views/w3m-onramp-fiat-select-view -Add test for views/w3m-onramp-providers-view -Add test for views/w3m-onramp-tokens-select-view -Add test for views/w3m-register-account-name-success-view -Add test for views/w3m-register-account-name-view -Add test for views/w3m-siwx-sign-message-view -Add test for views/w3m-switch-active-chain-view -Add test for views/w3m-switch-address-view -Add test for views/w3m-transactions-view -Add test for views/w3m-unsupported-chain-view -Add test for views/w3m-update-email-primary-otp-view -Add test for views/w3m-update-email-secondary-otp-view -Add test for views/w3m-update-email-wallet-view -Add test for views/w3m-upgrade-wallet-view -Add test for views/w3m-wallet-compatible-networks-view -Add test for views/w3m-wallet-receive-view -Add test for views/w3m-what-is-a-buy-view -Add test for views/w3m-what-is-a-network-view -Add test for views/w3m-what-is-a-wallet-view From 02d2e7b7db264a05c4c5444653c97e6e4b4680b6 Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 15 Jan 2025 14:22:51 +0100 Subject: [PATCH 5/8] add test for w3m-connect-injected-widget --- .../w3m-connect-injected-widget.test.ts | 218 ++++++++++++++++++ 1 file changed, 218 insertions(+) create mode 100644 packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts diff --git a/packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts b/packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts new file mode 100644 index 0000000000..b53884e6e4 --- /dev/null +++ b/packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts @@ -0,0 +1,218 @@ +import { W3mConnectInjectedWidget } from '../../src/partials/w3m-connect-injected-widget' +import { describe, it, expect, vi, beforeAll, afterEach, beforeEach } from 'vitest' +import { fixture, elementUpdated } from '@open-wc/testing' +import type { ConnectorWithProviders, ConnectorType } from '@reown/appkit-core' +import { + ApiController, + ConnectorController, + CoreHelperUtil, + RouterController, + ConnectionController +} from '@reown/appkit-core' +import { ConstantsUtil } from '@reown/appkit-common' +import { html } from 'lit' +import { HelpersUtil } from '../utils/HelpersUtil' + +// --- Constants ---------------------------------------------------- // +const MOCK_INJECTED_CONNECTOR: ConnectorWithProviders = { + id: 'mockInjected', + name: 'Mock Injected Wallet', + type: 'INJECTED' as ConnectorType, + info: { + rdns: 'mock.injected.wallet' + }, + provider: undefined, + chain: ConstantsUtil.CHAIN.EVM +} + +const BROWSER_WALLET_CONNECTOR: ConnectorWithProviders = { + id: 'browserWallet', + name: 'Browser Wallet', + type: 'INJECTED' as ConnectorType, + provider: undefined, + chain: ConstantsUtil.CHAIN.EVM +} + +describe('W3mConnectInjectedWidget', () => { + beforeAll(() => { + vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false) + }) + + beforeEach(() => { + vi.spyOn(ApiController, 'state', 'get').mockReturnValue({ + ...ApiController.state, + excludedRDNS: [] + }) + vi.spyOn(ConnectionController, 'checkInstalled').mockReturnValue(true) + }) + + afterEach(() => { + vi.resetAllMocks() + }) + + it('should not render anything if there are no injected connectors', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [] + }) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + expect(element.style.display).toBe('none') + }) + + it('should render injected connectors', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [MOCK_INJECTED_CONNECTOR] + }) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + element.requestUpdate() + await elementUpdated(element) + + const walletSelector = HelpersUtil.getByTestId( + element, + `wallet-selector-${MOCK_INJECTED_CONNECTOR.id}` + ) + expect(walletSelector).not.toBeNull() + expect(walletSelector.getAttribute('name')).toBe(MOCK_INJECTED_CONNECTOR.name) + expect(walletSelector.getAttribute('tagLabel')).toBe('installed') + expect(walletSelector.getAttribute('tagVariant')).toBe('success') + }) + + it('should not render excluded RDNS wallets', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [MOCK_INJECTED_CONNECTOR] + }) + + vi.spyOn(ApiController, 'state', 'get').mockReturnValue({ + ...ApiController.state, + excludedRDNS: ['mock.injected.wallet'] + }) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + element.requestUpdate() + await elementUpdated(element) + + const walletSelector = HelpersUtil.getByTestId( + element, + `wallet-selector-${MOCK_INJECTED_CONNECTOR.id}` + ) + expect(walletSelector).toBeNull() + }) + + it('should not render Browser Wallet on desktop', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [BROWSER_WALLET_CONNECTOR] + }) + vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + element.requestUpdate() + await elementUpdated(element) + + const walletSelector = HelpersUtil.getByTestId( + element, + `wallet-selector-${BROWSER_WALLET_CONNECTOR.id}` + ) + expect(walletSelector).toBeNull() + }) + + it('should render Browser Wallet on mobile', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [BROWSER_WALLET_CONNECTOR] + }) + vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(true) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + element.requestUpdate() + await elementUpdated(element) + + const walletSelector = HelpersUtil.getByTestId( + element, + `wallet-selector-${BROWSER_WALLET_CONNECTOR.id}` + ) + expect(walletSelector).not.toBeNull() + }) + + it('should route to ConnectingExternal on connector click', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [MOCK_INJECTED_CONNECTOR] + }) + const setActiveConnectorSpy = vi.spyOn(ConnectorController, 'setActiveConnector') + const pushSpy = vi.spyOn(RouterController, 'push') + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + const walletSelector = HelpersUtil.getByTestId( + element, + `wallet-selector-${MOCK_INJECTED_CONNECTOR.id}` + ) + walletSelector.click() + + expect(setActiveConnectorSpy).toHaveBeenCalledWith(MOCK_INJECTED_CONNECTOR) + expect(pushSpy).toHaveBeenCalledWith('ConnectingExternal', { + connector: MOCK_INJECTED_CONNECTOR + }) + }) + + it('should handle unknown wallet names', async () => { + const unknownConnector: ConnectorWithProviders = { + ...MOCK_INJECTED_CONNECTOR, + name: undefined + } as unknown as ConnectorWithProviders + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [unknownConnector] + }) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + const walletSelector = HelpersUtil.getByTestId( + element, + `wallet-selector-${unknownConnector.id}` + ) + expect(walletSelector.getAttribute('name')).toBe('Unknown') + }) + + it('should not render when no RDNS and not installed', async () => { + const noRdnsConnector: ConnectorWithProviders = { + ...MOCK_INJECTED_CONNECTOR, + info: undefined + } + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [noRdnsConnector] + }) + vi.spyOn(ConnectionController, 'checkInstalled').mockReturnValue(false) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + expect(element.style.display).toBe('none') + }) +}) From 64b6b19c4b79d794c1da9fb682afd0579cf384cf Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 15 Jan 2025 14:27:29 +0100 Subject: [PATCH 6/8] wip --- .../w3m-connect-injected-widget.test.ts | 218 ------------------ 1 file changed, 218 deletions(-) delete mode 100644 packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts diff --git a/packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts b/packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts deleted file mode 100644 index b53884e6e4..0000000000 --- a/packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts +++ /dev/null @@ -1,218 +0,0 @@ -import { W3mConnectInjectedWidget } from '../../src/partials/w3m-connect-injected-widget' -import { describe, it, expect, vi, beforeAll, afterEach, beforeEach } from 'vitest' -import { fixture, elementUpdated } from '@open-wc/testing' -import type { ConnectorWithProviders, ConnectorType } from '@reown/appkit-core' -import { - ApiController, - ConnectorController, - CoreHelperUtil, - RouterController, - ConnectionController -} from '@reown/appkit-core' -import { ConstantsUtil } from '@reown/appkit-common' -import { html } from 'lit' -import { HelpersUtil } from '../utils/HelpersUtil' - -// --- Constants ---------------------------------------------------- // -const MOCK_INJECTED_CONNECTOR: ConnectorWithProviders = { - id: 'mockInjected', - name: 'Mock Injected Wallet', - type: 'INJECTED' as ConnectorType, - info: { - rdns: 'mock.injected.wallet' - }, - provider: undefined, - chain: ConstantsUtil.CHAIN.EVM -} - -const BROWSER_WALLET_CONNECTOR: ConnectorWithProviders = { - id: 'browserWallet', - name: 'Browser Wallet', - type: 'INJECTED' as ConnectorType, - provider: undefined, - chain: ConstantsUtil.CHAIN.EVM -} - -describe('W3mConnectInjectedWidget', () => { - beforeAll(() => { - vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false) - }) - - beforeEach(() => { - vi.spyOn(ApiController, 'state', 'get').mockReturnValue({ - ...ApiController.state, - excludedRDNS: [] - }) - vi.spyOn(ConnectionController, 'checkInstalled').mockReturnValue(true) - }) - - afterEach(() => { - vi.resetAllMocks() - }) - - it('should not render anything if there are no injected connectors', async () => { - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [] - }) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - expect(element.style.display).toBe('none') - }) - - it('should render injected connectors', async () => { - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [MOCK_INJECTED_CONNECTOR] - }) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - element.requestUpdate() - await elementUpdated(element) - - const walletSelector = HelpersUtil.getByTestId( - element, - `wallet-selector-${MOCK_INJECTED_CONNECTOR.id}` - ) - expect(walletSelector).not.toBeNull() - expect(walletSelector.getAttribute('name')).toBe(MOCK_INJECTED_CONNECTOR.name) - expect(walletSelector.getAttribute('tagLabel')).toBe('installed') - expect(walletSelector.getAttribute('tagVariant')).toBe('success') - }) - - it('should not render excluded RDNS wallets', async () => { - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [MOCK_INJECTED_CONNECTOR] - }) - - vi.spyOn(ApiController, 'state', 'get').mockReturnValue({ - ...ApiController.state, - excludedRDNS: ['mock.injected.wallet'] - }) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - element.requestUpdate() - await elementUpdated(element) - - const walletSelector = HelpersUtil.getByTestId( - element, - `wallet-selector-${MOCK_INJECTED_CONNECTOR.id}` - ) - expect(walletSelector).toBeNull() - }) - - it('should not render Browser Wallet on desktop', async () => { - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [BROWSER_WALLET_CONNECTOR] - }) - vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - element.requestUpdate() - await elementUpdated(element) - - const walletSelector = HelpersUtil.getByTestId( - element, - `wallet-selector-${BROWSER_WALLET_CONNECTOR.id}` - ) - expect(walletSelector).toBeNull() - }) - - it('should render Browser Wallet on mobile', async () => { - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [BROWSER_WALLET_CONNECTOR] - }) - vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(true) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - element.requestUpdate() - await elementUpdated(element) - - const walletSelector = HelpersUtil.getByTestId( - element, - `wallet-selector-${BROWSER_WALLET_CONNECTOR.id}` - ) - expect(walletSelector).not.toBeNull() - }) - - it('should route to ConnectingExternal on connector click', async () => { - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [MOCK_INJECTED_CONNECTOR] - }) - const setActiveConnectorSpy = vi.spyOn(ConnectorController, 'setActiveConnector') - const pushSpy = vi.spyOn(RouterController, 'push') - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - const walletSelector = HelpersUtil.getByTestId( - element, - `wallet-selector-${MOCK_INJECTED_CONNECTOR.id}` - ) - walletSelector.click() - - expect(setActiveConnectorSpy).toHaveBeenCalledWith(MOCK_INJECTED_CONNECTOR) - expect(pushSpy).toHaveBeenCalledWith('ConnectingExternal', { - connector: MOCK_INJECTED_CONNECTOR - }) - }) - - it('should handle unknown wallet names', async () => { - const unknownConnector: ConnectorWithProviders = { - ...MOCK_INJECTED_CONNECTOR, - name: undefined - } as unknown as ConnectorWithProviders - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [unknownConnector] - }) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - const walletSelector = HelpersUtil.getByTestId( - element, - `wallet-selector-${unknownConnector.id}` - ) - expect(walletSelector.getAttribute('name')).toBe('Unknown') - }) - - it('should not render when no RDNS and not installed', async () => { - const noRdnsConnector: ConnectorWithProviders = { - ...MOCK_INJECTED_CONNECTOR, - info: undefined - } - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [noRdnsConnector] - }) - vi.spyOn(ConnectionController, 'checkInstalled').mockReturnValue(false) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - expect(element.style.display).toBe('none') - }) -}) From eeb16488f5d291bdd20c7d9bf2893d30cd6b1cfd Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 15 Jan 2025 17:06:33 +0100 Subject: [PATCH 7/8] add test for w3m-connect-walletconnect-widget --- .../w3m-connect-walletconnect-widget.test.ts | 187 ++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 packages/scaffold-ui/test/partials/w3m-connect-walletconnect-widget.test.ts diff --git a/packages/scaffold-ui/test/partials/w3m-connect-walletconnect-widget.test.ts b/packages/scaffold-ui/test/partials/w3m-connect-walletconnect-widget.test.ts new file mode 100644 index 0000000000..464a8a13b9 --- /dev/null +++ b/packages/scaffold-ui/test/partials/w3m-connect-walletconnect-widget.test.ts @@ -0,0 +1,187 @@ +import { elementUpdated, fixture } from '@open-wc/testing' +import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest' +import { html } from 'lit' + +import type { ConnectorType, ConnectorWithProviders } from '@reown/appkit-core' +import { + AssetController, + ConnectorController, + CoreHelperUtil, + RouterController +} from '@reown/appkit-core' +import { ConstantsUtil } from '@reown/appkit-utils' +import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common' +import { W3mConnectWalletConnectWidget } from '../../src/partials/w3m-connect-walletconnect-widget' +import { HelpersUtil } from '../utils/HelpersUtil' + +// --- Constants ---------------------------------------------------- // +const WALLET_CONNECT_CONNECTOR: ConnectorWithProviders = { + id: 'walletConnect', + name: 'WalletConnect', + type: ConstantsUtil.CONNECTOR_TYPE_WALLET_CONNECT as ConnectorType, + provider: undefined, + chain: CommonConstantsUtil.CHAIN.EVM +} + +const OTHER_CONNECTOR: ConnectorWithProviders = { + id: 'otherConnector', + name: 'Other Wallet', + type: ConstantsUtil.CONNECTOR_TYPE_INJECTED as ConnectorType, + provider: undefined, + chain: CommonConstantsUtil.CHAIN.EVM +} + +describe('W3mConnectWalletConnectWidget', () => { + beforeAll(() => { + vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false) + }) + + beforeEach(() => { + vi.spyOn(AssetController, 'state', 'get').mockReturnValue({ + ...AssetController.state, + connectorImages: {} + }) + }) + + afterEach(() => { + vi.resetAllMocks() + }) + + it('should not render anything on mobile', async () => { + vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(true) + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [WALLET_CONNECT_CONNECTOR] + }) + + const element: W3mConnectWalletConnectWidget = await fixture( + html`` + ) + + expect(element.style.display).toBe('none') + }) + + it('should not render if WalletConnect connector is not available', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [OTHER_CONNECTOR] + }) + + const element: W3mConnectWalletConnectWidget = await fixture( + html`` + ) + + expect(element.style.display).toBe('none') + }) + + it('should render WalletConnect connector with default image', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [WALLET_CONNECT_CONNECTOR] + }) + + const element: W3mConnectWalletConnectWidget = await fixture( + html`` + ) + + element.requestUpdate() + await elementUpdated(element) + + const walletSelector = HelpersUtil.getByTestId(element, 'wallet-selector-walletconnect') + expect(walletSelector).not.toBeNull() + expect(walletSelector.getAttribute('name')).toBe(WALLET_CONNECT_CONNECTOR.name) + expect(walletSelector.getAttribute('tagLabel')).toBe('qr code') + expect(walletSelector.getAttribute('tagVariant')).toBe('main') + }) + + it('should render WalletConnect connector with custom image URL', async () => { + const connectorWithImage = { + ...WALLET_CONNECT_CONNECTOR, + imageUrl: 'https://example.com/image.png' + } + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [connectorWithImage] + }) + + const element: W3mConnectWalletConnectWidget = await fixture( + html`` + ) + + element.requestUpdate() + await elementUpdated(element) + + const walletSelector = HelpersUtil.getByTestId(element, 'wallet-selector-walletconnect') + expect(walletSelector.getAttribute('imageSrc')).toBe(connectorWithImage.imageUrl) + }) + + it('should handle connector image from AssetController', async () => { + const imageId = 'walletconnect-image' + const imageUrl = 'https://example.com/asset-image.png' + const connectorWithImageId = { + ...WALLET_CONNECT_CONNECTOR, + imageId + } + + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [connectorWithImageId] + }) + + vi.spyOn(AssetController, 'state', 'get').mockReturnValue({ + ...AssetController.state, + connectorImages: { [imageId]: imageUrl } + }) + + const element: W3mConnectWalletConnectWidget = await fixture( + html`` + ) + + element.requestUpdate() + await elementUpdated(element) + + const walletSelector = HelpersUtil.getByTestId(element, 'wallet-selector-walletconnect') + expect(walletSelector.getAttribute('imageSrc')).toBe(imageUrl) + }) + + it('should route to ConnectingWalletConnect on click', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [WALLET_CONNECT_CONNECTOR] + }) + const setActiveConnectorSpy = vi.spyOn(ConnectorController, 'setActiveConnector') + const pushSpy = vi.spyOn(RouterController, 'push') + + const element: W3mConnectWalletConnectWidget = await fixture( + html`` + ) + + const walletSelector = HelpersUtil.getByTestId(element, 'wallet-selector-walletconnect') + walletSelector.click() + + expect(setActiveConnectorSpy).toHaveBeenCalledWith(WALLET_CONNECT_CONNECTOR) + expect(pushSpy).toHaveBeenCalledWith('ConnectingWalletConnect') + }) + + it('should handle unknown wallet name', async () => { + const unknownConnector: ConnectorWithProviders = { + ...WALLET_CONNECT_CONNECTOR, + name: undefined + } as unknown as ConnectorWithProviders + + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [unknownConnector] + }) + + const element: W3mConnectWalletConnectWidget = await fixture( + html`` + ) + + element.requestUpdate() + await elementUpdated(element) + + const walletSelector = HelpersUtil.getByTestId(element, 'wallet-selector-walletconnect') + expect(walletSelector.getAttribute('name')).toBe('Unknown') + }) +}) From 50ce545978faeb41c769cae90651f1f74f9b9f93 Mon Sep 17 00:00:00 2001 From: Sven Date: Thu, 16 Jan 2025 09:34:44 +0100 Subject: [PATCH 8/8] format --- .../test/partials/w3m-connect-walletconnect-widget.test.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/scaffold-ui/test/partials/w3m-connect-walletconnect-widget.test.ts b/packages/scaffold-ui/test/partials/w3m-connect-walletconnect-widget.test.ts index 464a8a13b9..4f0f30547f 100644 --- a/packages/scaffold-ui/test/partials/w3m-connect-walletconnect-widget.test.ts +++ b/packages/scaffold-ui/test/partials/w3m-connect-walletconnect-widget.test.ts @@ -1,7 +1,9 @@ import { elementUpdated, fixture } from '@open-wc/testing' import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest' + import { html } from 'lit' +import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common' import type { ConnectorType, ConnectorWithProviders } from '@reown/appkit-core' import { AssetController, @@ -10,7 +12,7 @@ import { RouterController } from '@reown/appkit-core' import { ConstantsUtil } from '@reown/appkit-utils' -import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common' + import { W3mConnectWalletConnectWidget } from '../../src/partials/w3m-connect-walletconnect-widget' import { HelpersUtil } from '../utils/HelpersUtil'