dAppBooster/src/components/sharedComponents/SignButton.test.tsx at 8543bacf593a17fcecda0cd70e8b8f1f3fb0f78f · BootNodeDev/dAppBooster · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
import { render, screen } from '@testing-library/react'
import type { ReactNode } from 'react'
import { createElement } from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'

const mockSwitchChain = vi.fn()
const mockSignMessageAsync = vi.fn()
const mockWatchSignature = vi.fn()

vi.mock('@/src/hooks/useWalletStatus', () => ({
  useWalletStatus: vi.fn(() => ({
    isReady: false,
    needsConnect: true,
    needsChainSwitch: false,
    targetChain: { id: 1, name: 'Ethereum' },
    targetChainId: 1,
    switchChain: mockSwitchChain,
  })),
}))

vi.mock('@/src/providers/Web3Provider', () => ({
  ConnectWalletButton: () =>
    createElement(
      'button',
      { type: 'button', 'data-testid': 'connect-wallet-button' },
      'Connect Wallet',
    ),
}))

vi.mock('@/src/providers/TransactionNotificationProvider', () => ({
  useTransactionNotification: vi.fn(() => ({
    watchSignature: mockWatchSignature,
  })),
}))

vi.mock('wagmi', () => ({
  useSignMessage: vi.fn(() => ({
    isPending: false,
    mutateAsync: mockSignMessageAsync,
  })),
}))

const { useWalletStatus } = await import('@/src/hooks/useWalletStatus')
const mockedUseWalletStatus = vi.mocked(useWalletStatus)

const system = createSystem(defaultConfig)

const renderWithChakra = (ui: ReactNode) =>
  render(<ChakraProvider value={system}>{ui}</ChakraProvider>)

describe('SignButton', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })

  it('renders connect button when wallet needs connect', async () => {
    mockedUseWalletStatus.mockReturnValue({
      isReady: false,
      needsConnect: true,
      needsChainSwitch: false,
      targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
      targetChainId: 1,
      switchChain: mockSwitchChain,
    })

    const { default: SignButton } = await import('./SignButton')

    renderWithChakra(<SignButton message="Hello" />)

    expect(screen.getByTestId('connect-wallet-button')).toBeInTheDocument()
    expect(screen.queryByText('Sign Message')).toBeNull()
  })

  it('renders custom fallback when provided and wallet needs connect', async () => {
    mockedUseWalletStatus.mockReturnValue({
      isReady: false,
      needsConnect: true,
      needsChainSwitch: false,
      targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
      targetChainId: 1,
      switchChain: mockSwitchChain,
    })

    const { default: SignButton } = await import('./SignButton')

    renderWithChakra(
      <SignButton
        message="Hello"
        fallback={createElement('div', { 'data-testid': 'custom-fallback' }, 'Custom')}
      />,
    )

    expect(screen.getByTestId('custom-fallback')).toBeInTheDocument()
    expect(screen.queryByText('Sign Message')).toBeNull()
  })

  it('renders switch chain button when wallet needs chain switch', async () => {
    mockedUseWalletStatus.mockReturnValue({
      isReady: false,
      needsConnect: false,
      needsChainSwitch: true,
      targetChain: { id: 10, name: 'OP Mainnet' } as ReturnType<
        typeof useWalletStatus
      >['targetChain'],
      targetChainId: 10,
      switchChain: mockSwitchChain,
    })

    const { default: SignButton } = await import('./SignButton')

    renderWithChakra(<SignButton message="Hello" />)

    expect(screen.getByText(/Switch to/)).toBeInTheDocument()
    expect(screen.getByText(/OP Mainnet/)).toBeInTheDocument()
    expect(screen.queryByText('Sign Message')).toBeNull()
  })

  it('renders sign button when wallet is ready', async () => {
    mockedUseWalletStatus.mockReturnValue({
      isReady: true,
      needsConnect: false,
      needsChainSwitch: false,
      targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
      targetChainId: 1,
      switchChain: mockSwitchChain,
    })

    const { default: SignButton } = await import('./SignButton')

    renderWithChakra(<SignButton message="Hello" />)

    expect(screen.getByText('Sign Message')).toBeInTheDocument()
  })
})