chore: add test for mobile

reown-com · Dec 17, 2024 · ab30b0a · ab30b0a
1 parent 9104515
commit ab30b0a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 7 deletions.
diff --git 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-wc-view.test"
   },
   "dependencies": {
     "@reown/appkit-common": "workspace:*",

diff --git a/packages/scaffold-ui/test/views/w3m-connecting-wc-view.test.ts b/packages/scaffold-ui/test/views/w3m-connecting-wc-view.test.ts
@@ -5,6 +5,7 @@ import { elementUpdated, fixture } from '@open-wc/testing'
 import { html } from 'lit'
 import type { WcWallet } from '@reown/appkit-core'
 import { HelpersUtil } from '../utils/HelpersUtil'
+import type { WuiTabs } from '@reown/appkit-ui'
 
 // --- Constants ---------------------------------------------------- //
 
@@ -14,10 +15,6 @@ const WALLET = {
 } as WcWallet
 
 describe('W3mConnectingWcView - Render', () => {
-  beforeAll(() => {
-    vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false)
-  })
-
   test.skip('should render walletConnect widget if no wallet is give', async () => {
     const element: W3mConnectingWcView = await fixture(
       html`<w3m-connecting-wc-view></w3m-connecting-wc-view>`
@@ -26,14 +23,15 @@ describe('W3mConnectingWcView - Render', () => {
     expect(HelpersUtil.querySelect(element, 'w3m-connecting-wc-qrcode')).not.toBeNull()
   })
 
-  test('should render browser widget if rdns or injected ids are present', async () => {
+  test('should render web and browser platforms if rdns and webapp_link is present', async () => {
+    vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false)
+
     vi.spyOn(RouterController, 'state', 'get').mockReturnValue({
       ...RouterController.state,
       data: {
         wallet: {
           ...WALLET,
           rdns: 'metamask.io',
-          injected: [{ injected_id: 'isMetamask' }],
           webapp_link: 'https://metamask.io'
         }
       }
@@ -44,6 +42,53 @@ describe('W3mConnectingWcView - Render', () => {
     )
 
     const w3mConnectingHeader = HelpersUtil.querySelect(element, 'w3m-connecting-header')
+
     expect(w3mConnectingHeader).not.toBeNull()
+
+    const wuiTabs = HelpersUtil.querySelect(w3mConnectingHeader, 'wui-tabs') as WuiTabs
+
+    expect(wuiTabs).not.toBeNull()
+
+    const tabsProperty = wuiTabs.tabs
+
+    expect(tabsProperty).toStrictEqual([
+      { label: 'Webapp', icon: 'browser', platform: 'web' },
+      { label: 'Browser', icon: 'extension', platform: 'unsupported' }
+    ])
+  })
+
+  test('should render web,mo browser platforms if rdns and webapp_link is present', async () => {
+    vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(true)
+
+    vi.spyOn(RouterController, 'state', 'get').mockReturnValue({
+      ...RouterController.state,
+      data: {
+        wallet: {
+          ...WALLET,
+          webapp_link: 'https://metamask.io',
+          mobile_link: 'https://metamask.io'
+        }
+      }
+    })
+
+    const element: W3mConnectingWcView = await fixture(
+      html`<w3m-connecting-wc-view></w3m-connecting-wc-view>`
+    )
+
+    const w3mConnectingHeader = HelpersUtil.querySelect(element, 'w3m-connecting-header')
+
+    expect(w3mConnectingHeader).not.toBeNull()
+
+    const wuiTabs = HelpersUtil.querySelect(w3mConnectingHeader, 'wui-tabs') as WuiTabs
+
+    expect(wuiTabs).not.toBeNull()
+
+    const tabsProperty = wuiTabs.tabs
+
+    expect(tabsProperty).toStrictEqual([
+      { label: 'Mobile', icon: 'mobile', platform: 'mobile' },
+      { label: 'Browser', icon: 'extension', platform: 'unsupported' },
+      { label: 'Webapp', icon: 'browser', platform: 'web' }
+    ])
   })
 })