From 7d2c1dda6e3e70bc8a34b7c81acfdc5afc020abd Mon Sep 17 00:00:00 2001 From: Valazan Date: Wed, 22 Nov 2023 10:30:34 +0100 Subject: [PATCH] test: connected address badge --- .../vwk-connected-address-badge/index.ts | 2 +- ...t.ts => connect-button-with-modal.test.ts} | 31 ++++++++++- .../{elemnt-queries.ts => element-queries.ts} | 51 ++++++++++++++++++- packages/dapp-kit-ui/test/qr-code.test.ts | 2 +- 4 files changed, 81 insertions(+), 5 deletions(-) rename packages/dapp-kit-ui/test/{connect-buton-with-modal.test.ts => connect-button-with-modal.test.ts} (58%) rename packages/dapp-kit-ui/test/helpers/{elemnt-queries.ts => element-queries.ts} (56%) diff --git a/packages/dapp-kit-ui/src/components/vwk-connected-address-badge/index.ts b/packages/dapp-kit-ui/src/components/vwk-connected-address-badge/index.ts index 892e905a..b5a7e9d0 100644 --- a/packages/dapp-kit-ui/src/components/vwk-connected-address-badge/index.ts +++ b/packages/dapp-kit-ui/src/components/vwk-connected-address-badge/index.ts @@ -4,7 +4,7 @@ import { Colors, ThemeMode } from '../../constants'; import { friendlyAddress, getPicassoImage } from '../../utils/account'; @customElement('vwk-connected-address-badge') -class ConnectedAddressBadge extends LitElement { +export class ConnectedAddressBadge extends LitElement { static override styles = css` /* Style for the badge */ .wallet-badge { diff --git a/packages/dapp-kit-ui/test/connect-buton-with-modal.test.ts b/packages/dapp-kit-ui/test/connect-button-with-modal.test.ts similarity index 58% rename from packages/dapp-kit-ui/test/connect-buton-with-modal.test.ts rename to packages/dapp-kit-ui/test/connect-button-with-modal.test.ts index d00214ea..d9789530 100644 --- a/packages/dapp-kit-ui/test/connect-buton-with-modal.test.ts +++ b/packages/dapp-kit-ui/test/connect-button-with-modal.test.ts @@ -4,10 +4,13 @@ import { ConnectButton, ConnectButtonWithModal, ConnectModal, + ConnectedAddressBadge, + ConnectedAddressBadgeWithModal, + ConnectedAddressModal, DAppKit, SourceInfo, } from '../src'; -import { elementQueries } from './helpers/elemnt-queries'; +import { elementQueries } from './helpers/element-queries'; import { WalletSource } from '@vechainfoundation/dapp-kit/src'; describe('connect-button-with-modal', () => { @@ -15,7 +18,7 @@ describe('connect-button-with-modal', () => { DAppKit.configure({ nodeUrl: 'https://mainnet.vechain.org/' }); }); - it('Should callback with source when user clicks a wallet', async () => { + it('Should callback with source when user clicks a wallet and should render the connected address badge once connected', async () => { const element: ConnectButtonWithModal = window.document.createElement( 'vwk-connect-button-with-modal', ); @@ -28,6 +31,8 @@ describe('connect-button-with-modal', () => { window.document.body.appendChild(element); + // testing the connect button + const connectButton = (await elementQueries.getConnectButton()) as ConnectButton; const connectModal = @@ -53,5 +58,27 @@ describe('connect-button-with-modal', () => { await new Promise((resolve) => setTimeout(resolve, 1000)); expect(selectedSource).toBeDefined(); + + // testing the connected address badge + + element.address = '0x00000'; + + const connectedAddressBadgeWithModal = + (await elementQueries.getConnectedAddressBadgeWithModal()) as ConnectedAddressBadgeWithModal; + + expect(connectedAddressBadgeWithModal).toBeDefined(); + + const connectedAddressBadge = + (await elementQueries.getConnectedAddressBadge()) as ConnectedAddressBadge; + + expect(connectedAddressBadge).toBeDefined(); + + connectedAddressBadge.shadowRoot?.querySelector('div')?.click(); + + const ConnectedAddressModal = + (await elementQueries.getConnectedAddressModal()) as ConnectedAddressModal; + + expect(ConnectedAddressModal).toBeDefined(); + expect(ConnectedAddressModal.open).toBe(true); }); }); diff --git a/packages/dapp-kit-ui/test/helpers/elemnt-queries.ts b/packages/dapp-kit-ui/test/helpers/element-queries.ts similarity index 56% rename from packages/dapp-kit-ui/test/helpers/elemnt-queries.ts rename to packages/dapp-kit-ui/test/helpers/element-queries.ts index 97164afb..1981d28b 100644 --- a/packages/dapp-kit-ui/test/helpers/elemnt-queries.ts +++ b/packages/dapp-kit-ui/test/helpers/element-queries.ts @@ -1,4 +1,11 @@ -import { ConnectButton, ConnectModal, SourceCard } from '../../src'; +import { + ConnectButton, + ConnectModal, + ConnectedAddressBadge, + ConnectedAddressBadgeWithModal, + ConnectedAddressModal, + SourceCard, +} from '../../src'; const performQueryWithTimeout = async ( timeout: number, @@ -33,6 +40,45 @@ const getConnectModal = (): Promise => { ?.shadowRoot?.querySelector('vwk-connect-modal'), ); }; + +const getConnectedAddressBadgeWithModal = ( + timeout = 2000, +): Promise => { + return performQueryWithTimeout(timeout, () => + window.document.body + .querySelector('vwk-connect-button-with-modal') + ?.shadowRoot?.querySelector( + 'vwk-connected-address-badge-with-modal', + ), + ); +}; + +const getConnectedAddressBadge = ( + timeout = 2000, +): Promise => { + return performQueryWithTimeout(timeout, () => + window.document.body + .querySelector('vwk-connect-button-with-modal') + ?.shadowRoot?.querySelector( + 'vwk-connected-address-badge-with-modal', + ) + ?.shadowRoot?.querySelector('vwk-connected-address-badge'), + ); +}; + +const getConnectedAddressModal = ( + timeout = 2000, +): Promise => { + return performQueryWithTimeout(timeout, () => + window.document.body + .querySelector('vwk-connect-button-with-modal') + ?.shadowRoot?.querySelector( + 'vwk-connected-address-badge-with-modal', + ) + ?.shadowRoot?.querySelector('vwk-connected-address-modal'), + ); +}; + const getAllSourceCards = async (): Promise => { const res = await performQueryWithTimeout(2000, () => window.document.body @@ -66,4 +112,7 @@ export const elementQueries = { getConnectModal, getAllSourceCards, getWalletConnectQrCode, + getConnectedAddressBadgeWithModal, + getConnectedAddressBadge, + getConnectedAddressModal, }; diff --git a/packages/dapp-kit-ui/test/qr-code.test.ts b/packages/dapp-kit-ui/test/qr-code.test.ts index a6e509ad..6d806fef 100644 --- a/packages/dapp-kit-ui/test/qr-code.test.ts +++ b/packages/dapp-kit-ui/test/qr-code.test.ts @@ -6,7 +6,7 @@ import { dispatchCustomEvent, WalletConnectQrCode, } from '../src'; -import { elementQueries } from './helpers/elemnt-queries'; +import { elementQueries } from './helpers/element-queries'; const sampleUri = 'wc:59f6594baa77ca343197f60436e5a188708b045e323aa4d6ce93722772e18deb@2?relay-protocol=irn&symKey=0422890abbd3baf75cefad89e822b01071cd906705d6c9282596de866376a824';