test(Provider): add unit tests

src/components/Provider.test.tsx

@@ -0,0 +1,94 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import Provider from '@/components/Provider'
+import { PROVIDER_ID, mockAccount, mockProvider } from '@/test/mocks'
+
+describe('Provider', () => {
+  const { metadata, accounts } = mockProvider(PROVIDER_ID.DEFLY, [
+    mockAccount(PROVIDER_ID.DEFLY, 'mock-account-1'),
+    mockAccount(PROVIDER_ID.DEFLY, 'mock-account-2')
+  ])
+
+  const id = metadata.id
+  const name = metadata.name
+  const icon = metadata.icon
+
+  const defaultProps = {
+    id,
+    name,
+    icon,
+    onConnect: jest.fn(),
+    onDisconnect: jest.fn(),
+    onSetActive: jest.fn(),
+    onChangeAccount: jest.fn()
+  }
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders provider name', () => {
+    render(<Provider {...defaultProps} />)
+    expect(screen.getByText(name)).toBeInTheDocument()
+  })
+
+  it('renders provider icon', () => {
+    render(<Provider {...defaultProps} />)
+    expect(screen.getByAltText(`Icon for ${name} provider`)).toHaveAttribute(
+      'src',
+      icon
+    )
+  })
+
+  it('invokes onConnect when not connected', () => {
+    render(<Provider {...defaultProps} />)
+    fireEvent.click(screen.getByText(name))
+    expect(defaultProps.onConnect).toHaveBeenCalled()
+  })
+
+  it('invokes onSetActive when connected but not active', () => {
+    render(<Provider {...defaultProps} isConnected={true} />)
+    fireEvent.click(screen.getByText(name))
+    expect(defaultProps.onSetActive).toHaveBeenCalled()
+  })
+
+  it('invokes onDisconnect for active provider', () => {
+    render(<Provider {...defaultProps} isActive={true} />)
+    fireEvent.click(screen.getByLabelText(`Disconnect ${name} provider`))
+    expect(defaultProps.onDisconnect).toHaveBeenCalled()
+  })
+
+  it('triggers onChangeAccount when changing the active account', () => {
+    render(<Provider {...defaultProps} isActive={true} accounts={accounts} />)
+    fireEvent.change(screen.getByTestId('active-account-menu'), {
+      target: { value: accounts[1].address }
+    })
+    expect(defaultProps.onChangeAccount).toHaveBeenCalledWith(
+      accounts[1].address
+    )
+  })
+
+  it('renders active account dropdown when provider is active and has accounts', () => {
+    render(<Provider {...defaultProps} isActive={true} accounts={accounts} />)
+    expect(screen.getByTestId('active-account-menu')).toBeInTheDocument()
+  })
+
+  // Edge case, should not happen
+  it('does not render the active account dropdown when no accounts are provided', () => {
+    render(<Provider {...defaultProps} isActive={true} />)
+    expect(screen.queryByTestId('active-account-menu')).toBeNull()
+  })
+
+  it('renders connected badge for connected providers', () => {
+    render(<Provider {...defaultProps} isConnected={true} />)
+    expect(
+      screen.getByLabelText(`${name} provider is connected`)
+    ).toBeInTheDocument()
+  })
+
+  it('renders active badge for active providers', () => {
+    render(<Provider {...defaultProps} isActive={true} />)
+    expect(
+      screen.getByLabelText(`${name} provider is active`)
+    ).toBeInTheDocument()
+  })
+})

src/components/Provider.tsx

@@ -139,6 +139,7 @@ export default function Provider({
                   className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-white font-mono shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-teal-500 sm:text-sm sm:leading-6 [&_*]:text-black"
                   value={activeAddress}
                   onChange={handleSetActiveAccount}
+                  data-testid="active-account-menu"
                 >
                   {accounts?.map((account) => (
                     <option key={account.address}>{account.address}</option>

src/test/mocks.ts

@@ -53,9 +53,9 @@ export const mockAccount = (
 // Composable Wallet Provider
 export const mockProvider = (
   id: PROVIDER_ID,
+  accounts: Account[] = [],
   isActive: boolean = false,
-  isConnected: boolean = false,
-  accounts: Account[] = []
+  isConnected: boolean = false
 ): Provider => ({
   metadata: mockMetadata(id),
   accounts,
@@ -94,7 +94,7 @@ export const mockProviders = (
       accounts.push(mockAccount(providerId))
     }
 
-    providers.push(mockProvider(providerId, isActive, isConnected, accounts))
+    providers.push(mockProvider(providerId, accounts, isActive, isConnected))
   })
 
   return providers