test: connected address badge

vechain · Nov 22, 2023 · 7d2c1dd · 7d2c1dd
1 parent ec9ca28
commit 7d2c1dd
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 5 deletions.
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
@@ -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/...-ui/test/connect-buton-with-modal.test.ts → ...ui/test/connect-button-with-modal.test.ts b/...-ui/test/connect-buton-with-modal.test.ts → ...ui/test/connect-button-with-modal.test.ts
@@ -4,18 +4,21 @@ 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', () => {
     beforeEach(() => {
         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/...app-kit-ui/test/helpers/elemnt-queries.ts → ...pp-kit-ui/test/helpers/element-queries.ts b/...app-kit-ui/test/helpers/elemnt-queries.ts → ...pp-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 <T>(
     timeout: number,
@@ -33,6 +40,45 @@ const getConnectModal = (): Promise<ConnectModal | undefined | null> => {
             ?.shadowRoot?.querySelector('vwk-connect-modal'),
     );
 };
+
+const getConnectedAddressBadgeWithModal = (
+    timeout = 2000,
+): Promise<ConnectedAddressBadgeWithModal | undefined | null> => {
+    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<ConnectedAddressBadge | undefined | null> => {
+    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<ConnectedAddressModal | undefined | null> => {
+    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<SourceCard[]> => {
     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
@@ -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';