chore: test modal components

packages/core/src/controllers/OptionsController.ts

@@ -297,6 +297,7 @@ export const OptionsController = {
   },
 
   setEnableEmbedded(enableEmbedded: OptionsControllerState['enableEmbedded']) {
+    console.log('>> Setting enableEmbedded', enableEmbedded)
     state.enableEmbedded = enableEmbedded
   },
 

packages/scaffold-ui/src/modal/w3m-account-button/index.ts

@@ -83,7 +83,7 @@ class W3mAccountButtonBase extends LitElement {
       return null
     }
 
-    const showBalance = this.balance === 'show'
+    const shouldShowBalance = this.balance === 'show'
 
     return html`
       <wui-account-button
@@ -95,7 +95,7 @@ class W3mAccountButtonBase extends LitElement {
         profileName=${ifDefined(this.profileName)}
         networkSrc=${ifDefined(this.networkImage)}
         avatarSrc=${ifDefined(this.profileImage)}
-        balance=${showBalance
+        balance=${shouldShowBalance
           ? CoreHelperUtil.formatBalance(this.balanceVal, this.balanceSymbol)
           : ''}
         @click=${this.onClick.bind(this)}

packages/scaffold-ui/test/modal/w3m-button.test.ts

@@ -0,0 +1,98 @@
+import { fixture, expect, html } from '@open-wc/testing'
+import { vi, describe, it, beforeEach, afterEach } from 'vitest'
+import { W3mButton } from '../../src/modal/w3m-button'
+import {
+  ChainController,
+  ModalController,
+  type ChainControllerState,
+  type ModalControllerState
+} from '@reown/appkit-core'
+import { HelpersUtil } from '../utils/HelpersUtil'
+import type { W3mAccountButton } from '../../exports'
+
+describe('W3mButton', () => {
+  beforeEach(() => {
+    vi.spyOn(ChainController, 'state', 'get').mockReturnValue({
+      activeCaipAddress: null
+    } as unknown as ChainControllerState)
+
+    vi.spyOn(ModalController, 'state', 'get').mockReturnValue({
+      loading: false
+    } as ModalControllerState)
+
+    vi.spyOn(ChainController, 'subscribeKey').mockImplementation(() => () => {})
+    vi.spyOn(ModalController, 'subscribeKey').mockImplementation(() => () => {})
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders connect button when not connected', async () => {
+    const element: W3mButton = await fixture(html`<appkit-button></appkit-button>`)
+    const connectButton = HelpersUtil.querySelect(element, 'appkit-connect-button')
+    const accountButton = HelpersUtil.querySelect(element, 'appkit-account-button')
+
+    expect(connectButton).to.exist
+    expect(accountButton).to.not.exist
+  })
+
+  it('renders account button when connected', async () => {
+    vi.spyOn(ChainController, 'state', 'get').mockReturnValue({
+      activeCaipAddress: 'eip155:1:0x123'
+    } as unknown as ChainControllerState)
+
+    const element: W3mButton = await fixture(html`<appkit-button></appkit-button>`)
+    const accountButton = HelpersUtil.querySelect(element, 'appkit-account-button')
+    const connectButton = HelpersUtil.querySelect(element, 'appkit-connect-button')
+
+    expect(accountButton).to.exist
+    expect(connectButton).to.not.exist
+  })
+
+  it('renders connect button when loading', async () => {
+    vi.spyOn(ModalController, 'state', 'get').mockReturnValue({
+      loading: true
+    } as ModalControllerState)
+
+    const element: W3mButton = await fixture(html`<appkit-button></appkit-button>`)
+    const connectButton = HelpersUtil.querySelect(element, 'appkit-connect-button')
+
+    expect(connectButton).to.exist
+  })
+
+  it('passes properties to account button correctly', async () => {
+    vi.spyOn(ChainController, 'state', 'get').mockReturnValue({
+      activeCaipAddress: 'eip155:1:0x123'
+    } as unknown as ChainControllerState)
+
+    const element: W3mButton = await fixture(
+      html`<appkit-button
+        .disabled=${true}
+        balance="1 ETH"
+        .charsStart=${2}
+        .charsEnd=${4}
+      ></appkit-button>`
+    )
+
+    const accountButton = HelpersUtil.querySelect(
+      element,
+      'appkit-account-button'
+    ) as W3mAccountButton | null
+    expect(accountButton?.getAttribute('balance')).to.equal('1 ETH')
+    expect(accountButton?.charsStart).to.equal(2)
+    expect(accountButton?.charsEnd).to.equal(4)
+    expect(accountButton?.disabled).to.equal(true)
+  })
+
+  it('passes properties to connect button correctly', async () => {
+    const element: W3mButton = await fixture(
+      html`<appkit-button size="md" label="Connect" loadingLabel="Connecting..."></appkit-button>`
+    )
+
+    const connectButton = HelpersUtil.querySelect(element, 'appkit-connect-button')
+    expect(connectButton?.getAttribute('size')).to.equal('md')
+    expect(connectButton?.getAttribute('label')).to.equal('Connect')
+    expect(connectButton?.getAttribute('loadingLabel')).to.equal('Connecting...')
+  })
+})

packages/scaffold-ui/test/modal/w3m-connect-button.test.ts

@@ -0,0 +1,133 @@
+import { W3mConnectButton } from '../../src/modal/w3m-connect-button'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { elementUpdated, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+import { ModalController, type ModalControllerState } from '@reown/appkit-core'
+import { HelpersUtil } from '../utils/HelpersUtil'
+import type { WuiConnectButton } from '@reown/appkit-ui'
+
+describe('W3mConnectButton', () => {
+  beforeEach(() => {
+    ModalController.close()
+    ModalController.setLoading(false)
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('renders with default props', async () => {
+      const element: W3mConnectButton = await fixture(
+        html`<w3m-connect-button></w3m-connect-button>`
+      )
+      const button = HelpersUtil.getByTestId(element, 'connect-button')
+
+      expect(button).toBeTruthy()
+      expect(button?.textContent?.trim()).toBe('Connect Wallet')
+      expect(button?.getAttribute('size')).toBe('md')
+    })
+
+    it('renders with custom props', async () => {
+      const element: W3mConnectButton = await fixture(
+        html`<w3m-connect-button
+          size="sm"
+          label="Custom Connect"
+          loadingLabel="Custom Loading..."
+        ></w3m-connect-button>`
+      )
+      const button = HelpersUtil.getByTestId(element, 'connect-button')
+
+      expect(button?.textContent?.trim()).toBe('Custom Connect')
+      expect(button?.getAttribute('size')).toBe('sm')
+    })
+  })
+
+  describe('State Changes', () => {
+    it('updates button text when loading', async () => {
+      const element: W3mConnectButton = await fixture(
+        html`<w3m-connect-button></w3m-connect-button>`
+      )
+
+      ModalController.setLoading(true)
+
+      element.requestUpdate()
+      await elementUpdated(element)
+
+      const button = HelpersUtil.getByTestId(element, 'connect-button') as WuiConnectButton
+      expect(button?.textContent?.trim()).toBe('Connecting...')
+      expect(button?.loading).toBe(true)
+    })
+
+    it('updates button text when modal is open', async () => {
+      const element: W3mConnectButton = await fixture(
+        html`<w3m-connect-button></w3m-connect-button>`
+      )
+
+      ModalController.open()
+      element.requestUpdate()
+      await elementUpdated(element)
+
+      const button = HelpersUtil.getByTestId(element, 'connect-button') as WuiConnectButton
+      expect(button?.textContent?.trim()).toBe('Connecting...')
+      expect(button?.loading).toBe(true)
+    })
+  })
+
+  describe('Interactions', () => {
+    it('opens modal on click when closed', async () => {
+      const element: W3mConnectButton = await fixture(
+        html`<w3m-connect-button></w3m-connect-button>`
+      )
+      const button = HelpersUtil.getByTestId(element, 'connect-button') as WuiConnectButton
+
+      button?.click()
+      element.requestUpdate()
+      await elementUpdated(element)
+
+      expect(ModalController.state.open).toBe(true)
+    })
+
+    it('does not toggle modal when loading', async () => {
+      const element: W3mConnectButton = await fixture(
+        html`<w3m-connect-button></w3m-connect-button>`
+      )
+
+      ModalController.setLoading(true)
+      element.requestUpdate()
+      await elementUpdated(element)
+
+      const button = HelpersUtil.getByTestId(element, 'connect-button')
+      button?.click()
+
+      expect(ModalController.state.open).toBe(false)
+      expect(ModalController.state.loading).toBe(true)
+    })
+  })
+
+  describe('Cleanup', () => {
+    it('cleans up subscriptions on disconnect', async () => {
+      const element: W3mConnectButton = await fixture(
+        html`<w3m-connect-button></w3m-connect-button>`
+      )
+      const unsubscribeSpy = vi.fn()
+      ;(element as any).unsubscribe = [unsubscribeSpy]
+
+      element.disconnectedCallback()
+
+      expect(unsubscribeSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('AppKitConnectButton', () => {
+    it('renders same functionality with different tag', async () => {
+      const element: W3mConnectButton = await fixture(
+        html`<appkit-connect-button></appkit-connect-button>`
+      )
+      const button = HelpersUtil.getByTestId(element, 'connect-button')
+
+      expect(button).toBeTruthy()
+      expect(button?.textContent?.trim()).toBe('Connect Wallet')
+    })
+  })
+})