javascript/packages/ui/src/components/UserProfile/__tests__/Web3Section.test.tsx at f3beb494a8f484fbc3489c6815e786ca1ffa9d61 · clerk/javascript · 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
import { describe, expect, it } from 'vitest';

import { bindCreateFixtures } from '@/test/create-fixtures';
import { render } from '@/test/utils';

import { Web3Section } from '../Web3Section';

const { createFixtures } = bindCreateFixtures('UserProfile');

const withMetamaskWallet = createFixtures.config(f => {
  f.withWeb3Wallet();
  f.withUser({
    web3_wallets: [
      {
        object: 'web3_wallet',
        id: 'w3w_123',
        web3_wallet: '0x1234567890abcdef1234567890abcdef12345678',
        verification: {
          status: 'verified',
          strategy: 'web3_metamask_signature',
          attempts: null,
          expire_at: null,
        },
      },
    ] as any,
  });
});

const withAdminWallet = createFixtures.config(f => {
  f.withWeb3Wallet();
  f.withUser({
    web3_wallets: [
      {
        object: 'web3_wallet',
        id: 'w3w_456',
        web3_wallet: '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd',
        verification: {
          status: 'verified',
          strategy: 'admin',
          attempts: null,
          expire_at: null,
        },
      },
    ] as any,
  });
});

const withUnknownStrategyWallet = createFixtures.config(f => {
  f.withWeb3Wallet();
  f.withUser({
    web3_wallets: [
      {
        object: 'web3_wallet',
        id: 'w3w_789',
        web3_wallet: '0x9999999999999999999999999999999999999999',
        verification: {
          status: 'verified',
          strategy: 'some_unknown_strategy',
          attempts: null,
          expire_at: null,
        },
      },
    ] as any,
  });
});

const withAdminAndMetamaskWallets = createFixtures.config(f => {
  f.withWeb3Wallet();
  f.withUser({
    web3_wallets: [
      {
        object: 'web3_wallet',
        id: 'w3w_123',
        web3_wallet: '0x1234567890abcdef1234567890abcdef12345678',
        verification: {
          status: 'verified',
          strategy: 'web3_metamask_signature',
          attempts: null,
          expire_at: null,
        },
      },
      {
        object: 'web3_wallet',
        id: 'w3w_456',
        web3_wallet: '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd',
        verification: {
          status: 'verified',
          strategy: 'admin',
          attempts: null,
          expire_at: null,
        },
      },
    ] as any,
  });
});

describe('Web3Section', () => {
  it('renders a wallet with a known strategy (metamask)', async () => {
    const { wrapper } = await createFixtures(withMetamaskWallet);
    const { getByText } = render(<Web3Section />, { wrapper });

    getByText(/MetaMask/i);
    getByText(/0x1234...5678/);
  });

  it('renders a wallet with an admin strategy showing only the address', async () => {
    const { wrapper } = await createFixtures(withAdminWallet);
    const { getByText, queryByText } = render(<Web3Section />, { wrapper });

    // Should show the shortened address
    getByText('0xabcd...abcd');
    // Should not show a provider name
    expect(queryByText(/MetaMask/i)).toBeNull();
  });

  it('does not render a wallet with an unknown non-admin strategy', async () => {
    const { wrapper } = await createFixtures(withUnknownStrategyWallet);
    const { queryByText } = render(<Web3Section />, { wrapper });

    expect(queryByText(/0x9999...9999/)).toBeNull();
  });

  it('renders both known-strategy and admin-strategy wallets', async () => {
    const { wrapper } = await createFixtures(withAdminAndMetamaskWallets);
    const { getByText } = render(<Web3Section />, { wrapper });

    // Metamask wallet with provider name
    getByText(/MetaMask/i);
    getByText(/0x1234...5678/);
    // Admin wallet with just the address
    getByText('0xabcd...abcd');
  });
});