From 524e35bfede135e0cf4e6b01464772dcbd9c9d9d Mon Sep 17 00:00:00 2001 From: MK Date: Wed, 15 Jan 2025 10:26:55 +0000 Subject: [PATCH 1/6] chore: add test for connecting-header --- packages/scaffold-ui/package.json | 2 +- .../partials/w3m-connecting-header.test.ts | 50 +++++++++++++++++++ 2 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts diff --git a/packages/scaffold-ui/package.json b/packages/scaffold-ui/package.json index d1835064b1..b9a9ffa56d 100644 --- a/packages/scaffold-ui/package.json +++ b/packages/scaffold-ui/package.json @@ -31,7 +31,7 @@ "watch": "tsc --watch", "typecheck": "tsc --noEmit", "lint": "eslint . --ext .js,.jsx,.ts,.tsx", - "test": "vitest run --coverage.enabled=true -- coverage.reporter=json --coverage.reporter=json-summary --coverage.reportOnFailure=true" + "test": "vitest run w3m-connecting-header.test" }, "dependencies": { "@reown/appkit-common": "workspace:*", diff --git a/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts b/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts new file mode 100644 index 0000000000..47f9fca610 --- /dev/null +++ b/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts @@ -0,0 +1,50 @@ +import { W3mConnectingHeader } from '../../src/partials/w3m-connecting-header' +import { describe, it, expect, vi, afterEach } from 'vitest' +import { fixture } from '@open-wc/testing' +import { html } from 'lit' +import { HelpersUtil } from '../utils/HelpersUtil' +import type { WuiTabs } from '@reown/appkit-ui' +import type { Platform } from '@reown/appkit-core' + +// -- Constants ------------------------------------------- // +const TABS = 'wui-tabs' + +// -- Helpers --------------------------------------------- // +async function getTabs(platformTabs: Platform[]) { + const connectingHeader: W3mConnectingHeader = await fixture( + html`` + ) + const { tabs } = HelpersUtil.querySelect(connectingHeader, TABS) as WuiTabs + console.log(tabs) + return tabs +} + +describe('W3mConnectingHeader', () => { + afterEach(() => { + vi.clearAllMocks() + }) + + it('it should display different platforms', async () => { + expect(await getTabs(['browser'])).toStrictEqual([ + { + icon: 'mobile', + label: 'Mobile', + platform: 'mobile' + } + ]) + expect(await getTabs(['browser'])).toStrictEqual([ + { + icon: 'mobile', + label: 'Mobile', + platform: 'mobile' + } + ]) + expect(await getTabs(['browser'])).toStrictEqual([ + { + icon: 'mobile', + label: 'Mobile', + platform: 'mobile' + } + ]) + }) +}) From d0c55b1bd061c95c744511e165d05049ce8ed2e5 Mon Sep 17 00:00:00 2001 From: MK Date: Wed, 15 Jan 2025 10:51:32 +0000 Subject: [PATCH 2/6] chore: add changes --- .../partials/w3m-connecting-header.test.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts b/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts index 47f9fca610..8b0247bb7c 100644 --- a/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts +++ b/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts @@ -15,7 +15,7 @@ async function getTabs(platformTabs: Platform[]) { html`` ) const { tabs } = HelpersUtil.querySelect(connectingHeader, TABS) as WuiTabs - console.log(tabs) + return tabs } @@ -25,7 +25,7 @@ describe('W3mConnectingHeader', () => { }) it('it should display different platforms', async () => { - expect(await getTabs(['browser'])).toStrictEqual([ + expect(await getTabs(['mobile'])).toStrictEqual([ { icon: 'mobile', label: 'Mobile', @@ -34,16 +34,16 @@ describe('W3mConnectingHeader', () => { ]) expect(await getTabs(['browser'])).toStrictEqual([ { - icon: 'mobile', - label: 'Mobile', - platform: 'mobile' + icon: 'browser', + label: 'Browser', + platform: 'browser' } ]) - expect(await getTabs(['browser'])).toStrictEqual([ + expect(await getTabs(['desktop'])).toStrictEqual([ { - icon: 'mobile', - label: 'Mobile', - platform: 'mobile' + icon: 'desktop', + label: 'Desktop', + platform: 'desktop' } ]) }) From c28a1e63613f9232dc4ed98c71214d3636dbbc8d Mon Sep 17 00:00:00 2001 From: MK Date: Wed, 15 Jan 2025 13:09:04 +0000 Subject: [PATCH 3/6] chore: finish test --- .../partials/w3m-connecting-header.test.ts | 72 ++++++++++++------- 1 file changed, 46 insertions(+), 26 deletions(-) diff --git a/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts b/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts index 8b0247bb7c..e5dd0db8ef 100644 --- a/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts +++ b/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts @@ -1,6 +1,6 @@ import { W3mConnectingHeader } from '../../src/partials/w3m-connecting-header' import { describe, it, expect, vi, afterEach } from 'vitest' -import { fixture } from '@open-wc/testing' +import { elementUpdated, fixture } from '@open-wc/testing' import { html } from 'lit' import { HelpersUtil } from '../utils/HelpersUtil' import type { WuiTabs } from '@reown/appkit-ui' @@ -9,14 +9,32 @@ import type { Platform } from '@reown/appkit-core' // -- Constants ------------------------------------------- // const TABS = 'wui-tabs' +const TAB_VALUES = { + mobile: { + icon: 'mobile', + label: 'Mobile', + platform: 'mobile' + }, + browser: { + icon: 'extension', + label: 'Browser', + platform: 'browser' + }, + desktop: { + icon: 'desktop', + label: 'Desktop', + platform: 'desktop' + } +} + // -- Helpers --------------------------------------------- // -async function getTabs(platformTabs: Platform[]) { - const connectingHeader: W3mConnectingHeader = await fixture( +async function createComponent(platformTabs: Platform[]) { + const element: W3mConnectingHeader = await fixture( html`` ) - const { tabs } = HelpersUtil.querySelect(connectingHeader, TABS) as WuiTabs + const { tabs } = HelpersUtil.querySelect(element, TABS) as WuiTabs - return tabs + return { element, tabs } } describe('W3mConnectingHeader', () => { @@ -25,26 +43,28 @@ describe('W3mConnectingHeader', () => { }) it('it should display different platforms', async () => { - expect(await getTabs(['mobile'])).toStrictEqual([ - { - icon: 'mobile', - label: 'Mobile', - platform: 'mobile' - } - ]) - expect(await getTabs(['browser'])).toStrictEqual([ - { - icon: 'browser', - label: 'Browser', - platform: 'browser' - } - ]) - expect(await getTabs(['desktop'])).toStrictEqual([ - { - icon: 'desktop', - label: 'Desktop', - platform: 'desktop' - } - ]) + expect((await createComponent(['mobile'])).tabs).toStrictEqual([TAB_VALUES.mobile]) + expect((await createComponent(['browser'])).tabs).toStrictEqual([TAB_VALUES.browser]) + expect((await createComponent(['desktop'])).tabs).toStrictEqual([TAB_VALUES.desktop]) + }) + + it.only('it should activate the correct platform tab when clicked', async () => { + const TABS: Platform[] = ['mobile', 'browser', 'desktop'] + + const { element } = await createComponent(TABS) + + const tabs = HelpersUtil.querySelect(element, 'wui-tabs') + + for (const platform of TABS) { + HelpersUtil.getByTestId(tabs, `tab-${platform.toLowerCase()}`).click() + + element.requestUpdate() + await elementUpdated(element) + + const tabElement = HelpersUtil.getByTestId(tabs, `tab-${platform.toLowerCase()}`) + const isActive = tabElement.getAttribute('data-active') === 'true' + + expect(isActive).toBe(true) + } }) }) From 9c9f2bb7701d5050e62cbc3b84c5f9af11d31f38 Mon Sep 17 00:00:00 2001 From: MK Date: Wed, 15 Jan 2025 13:10:26 +0000 Subject: [PATCH 4/6] revert: edit package.json --- packages/scaffold-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/scaffold-ui/package.json b/packages/scaffold-ui/package.json index b9a9ffa56d..d1835064b1 100644 --- a/packages/scaffold-ui/package.json +++ b/packages/scaffold-ui/package.json @@ -31,7 +31,7 @@ "watch": "tsc --watch", "typecheck": "tsc --noEmit", "lint": "eslint . --ext .js,.jsx,.ts,.tsx", - "test": "vitest run w3m-connecting-header.test" + "test": "vitest run --coverage.enabled=true -- coverage.reporter=json --coverage.reporter=json-summary --coverage.reportOnFailure=true" }, "dependencies": { "@reown/appkit-common": "workspace:*", From b3641d1c31385d285ed83ce623d28bd70ab9b43d Mon Sep 17 00:00:00 2001 From: MK Date: Thu, 16 Jan 2025 09:07:47 +0000 Subject: [PATCH 5/6] chore: prettier --- .../test/partials/w3m-connecting-header.test.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts b/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts index e5dd0db8ef..0653d6b159 100644 --- a/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts +++ b/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts @@ -1,10 +1,13 @@ -import { W3mConnectingHeader } from '../../src/partials/w3m-connecting-header' -import { describe, it, expect, vi, afterEach } from 'vitest' import { elementUpdated, fixture } from '@open-wc/testing' +import { afterEach, describe, expect, it, vi } from 'vitest' + import { html } from 'lit' -import { HelpersUtil } from '../utils/HelpersUtil' -import type { WuiTabs } from '@reown/appkit-ui' + import type { Platform } from '@reown/appkit-core' +import type { WuiTabs } from '@reown/appkit-ui' + +import { W3mConnectingHeader } from '../../src/partials/w3m-connecting-header' +import { HelpersUtil } from '../utils/HelpersUtil' // -- Constants ------------------------------------------- // const TABS = 'wui-tabs' From 6e28fa7eba6411997d185452adc83d5bd51b74f8 Mon Sep 17 00:00:00 2001 From: MK Date: Thu, 16 Jan 2025 13:55:23 +0000 Subject: [PATCH 6/6] chore: remove .only --- .../scaffold-ui/test/partials/w3m-connecting-header.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts b/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts index 0653d6b159..7344a544ba 100644 --- a/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts +++ b/packages/scaffold-ui/test/partials/w3m-connecting-header.test.ts @@ -51,7 +51,7 @@ describe('W3mConnectingHeader', () => { expect((await createComponent(['desktop'])).tabs).toStrictEqual([TAB_VALUES.desktop]) }) - it.only('it should activate the correct platform tab when clicked', async () => { + it('it should activate the correct platform tab when clicked', async () => { const TABS: Platform[] = ['mobile', 'browser', 'desktop'] const { element } = await createComponent(TABS)