@reown/appkit-scaffold-ui
Version:
#### 🔗 [Website](https://reown.com/appkit)
163 lines • 9.3 kB
JavaScript
import { elementUpdated, fixture, html, waitUntil } from '@open-wc/testing';
import { afterEach, describe, expect, it, vi } from 'vitest';
import { ConstantsUtil } from '@reown/appkit-common';
import { AccountController, ChainController, CoreHelperUtil, ModalController, OptionsController, RouterController } from '@reown/appkit-controllers';
import { W3mAccountButton } from '../../src/modal/w3m-account-button';
import { HelpersUtil } from '../utils/HelpersUtil';
const ACCOUNT_BUTTON_TEST_ID = 'account-button';
const mockCaipNetwork = {
chainNamespace: 'eip155',
caipNetworkId: 'eip155:1',
id: 1,
name: '',
nativeCurrency: { name: '', symbol: '', decimals: 0 },
rpcUrls: { default: { http: [], webSocket: undefined } }
};
const mockCaipAddress = 'eip155:1:0x0000000000000000000000000000000000000000';
describe('W3mAccountButton', () => {
afterEach(() => {
vi.restoreAllMocks();
});
it('should set isUnsupportedChain to false when allowUnsupportedChain is true', async () => {
vi.spyOn(ChainController.state, 'activeChain', 'get').mockReturnValue('eip155');
vi.spyOn(ChainController, 'checkIfSupportedNetwork').mockReturnValue(true);
vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({
...OptionsController.state,
allowUnsupportedChain: true
});
vi.spyOn(AccountController, 'state', 'get').mockReturnValue({
...AccountController.state,
profileName: 'test'
});
const button = (await fixture(html `<w3m-account-button></w3m-account-button>`));
const accountButton = button.shadowRoot?.querySelector('wui-account-button');
expect(accountButton).to.exist;
expect(accountButton?.isUnsupportedChain).to.equal(false);
});
it('should set isUnsupportedChain to true when allowUnsupportedChain is false and chain is unsupported', async () => {
vi.spyOn(ChainController.state, 'activeChain', 'get').mockReturnValue('eip155');
vi.spyOn(ChainController.state, 'activeCaipNetwork', 'get').mockReturnValue(mockCaipNetwork);
vi.spyOn(ChainController, 'checkIfSupportedNetwork').mockReturnValue(false);
vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({
...OptionsController.state,
allowUnsupportedChain: false
});
const button = (await fixture(html `<w3m-account-button></w3m-account-button>`));
const accountButton = button.shadowRoot?.querySelector('wui-account-button');
expect(accountButton).to.exist;
expect(accountButton?.isUnsupportedChain).to.equal(true);
});
describe('onClick behavior', () => {
it('should open modal normally when chain is supported', async () => {
vi.spyOn(ChainController.state, 'activeChain', 'get').mockReturnValue('eip155');
vi.spyOn(ChainController, 'checkIfSupportedNetwork').mockReturnValue(true);
vi.spyOn(ChainController, 'getAccountData').mockReturnValue({
...AccountController.state,
caipAddress: mockCaipAddress
});
vi.spyOn(ModalController, 'open');
const button = await fixture(html `<w3m-account-button></w3m-account-button>`);
const accountButton = button.shadowRoot?.querySelector('wui-account-button');
await accountButton?.click();
await waitUntil(() => RouterController.state.view === 'Account');
});
it('should open modal normally when chain is not supported and allowUnsupportedChain is true', async () => {
vi.spyOn(ChainController.state, 'activeChain', 'get').mockReturnValue('eip155');
vi.spyOn(ChainController, 'checkIfSupportedNetwork').mockReturnValue(false);
vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({
...OptionsController.state,
allowUnsupportedChain: true
});
vi.spyOn(ChainController, 'getAccountData').mockReturnValue({
...AccountController.state,
caipAddress: mockCaipAddress
});
vi.spyOn(ModalController, 'open');
const button = await fixture(html `<w3m-account-button></w3m-account-button>`);
const accountButton = button.shadowRoot?.querySelector('wui-account-button');
await accountButton?.click();
expect(RouterController.state.view).to.equal('Account');
});
it('should open modal in UnsupportedChain view when chain is not supported and allowUnsupportedChain is false', async () => {
vi.spyOn(ChainController.state, 'activeChain', 'get').mockReturnValue('eip155');
vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({
...OptionsController.state,
allowUnsupportedChain: false
});
vi.spyOn(ChainController, 'getAccountData').mockReturnValueOnce({
...AccountController.state,
caipAddress: mockCaipAddress
});
vi.spyOn(ChainController, 'checkIfSupportedNetwork').mockReturnValueOnce(false);
vi.spyOn(ModalController, 'open');
const button = await fixture(html `<w3m-account-button></w3m-account-button>`);
const accountButton = button.shadowRoot?.querySelector('wui-account-button');
await accountButton?.click();
await waitUntil(() => RouterController.state.view === 'UnsupportedChain');
});
it('should show loading state if balance value is not a string', async () => {
vi.spyOn(ChainController.state, 'activeChain', 'get').mockReturnValue('eip155');
vi.spyOn(AccountController, 'state', 'get').mockReturnValue({
...AccountController.state,
balance: undefined
});
const button = await fixture(html `<w3m-account-button></w3m-account-button>`);
const accountButton = HelpersUtil.getByTestId(button, ACCOUNT_BUTTON_TEST_ID);
expect(accountButton.loading).to.equal(true);
});
it('should not show loading state if balance value is a string', async () => {
vi.spyOn(ChainController.state, 'activeChain', 'get').mockReturnValue('eip155');
vi.spyOn(ChainController, 'getAccountData').mockReturnValue({
...AccountController.state,
balance: '0.00'
});
const button = await fixture(html `<w3m-account-button></w3m-account-button>`);
const accountButton = HelpersUtil.getByTestId(button, ACCOUNT_BUTTON_TEST_ID);
expect(accountButton.loading).to.equal(false);
});
it('should open modal with namespace when provided', async () => {
const namespace = 'eip155';
vi.spyOn(ChainController.state, 'activeChain', 'get').mockReturnValue(namespace);
vi.spyOn(ChainController, 'checkIfSupportedNetwork').mockReturnValue(true);
vi.spyOn(ChainController, 'getAccountData').mockReturnValue({
...AccountController.state,
caipAddress: mockCaipAddress
});
vi.spyOn(ModalController, 'open');
const button = await fixture(html `<w3m-account-button namespace=${namespace}></w3m-account-button>`);
await button.shadowRoot?.querySelector('wui-account-button')?.click();
expect(ModalController.open).toHaveBeenCalled();
expect(ModalController.open).toHaveBeenCalledWith({ namespace });
});
it('should handle initial state with namespace option', async () => {
vi.spyOn(ChainController, 'state', 'get').mockReturnValue({
...ChainController.state,
activeChain: 'eip155',
chains: new Map([
[
ConstantsUtil.CHAIN.SOLANA,
{
accountState: {
...AccountController.state,
caipAddress: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:FyTsuBMn',
balance: '2.00',
balanceSymbol: 'SOL',
profileName: 'test',
profileImage: 'https://example.com/image.png'
}
}
]
])
});
const element = (await fixture(html `<w3m-account-button namespace="solana"></w3m-account-button>`));
const wuiAccountButton = HelpersUtil.getByTestId(element, 'account-button-solana');
await elementUpdated(element);
await element.updateComplete;
expect(wuiAccountButton?.getAttribute('address')).toEqual('FyTsuBMn');
expect(wuiAccountButton?.getAttribute('balance')).toEqual(CoreHelperUtil.formatBalance('2.00', 'SOL'));
expect(wuiAccountButton?.getAttribute('profileName')).toEqual('test');
expect(wuiAccountButton?.getAttribute('avatarSrc')).toEqual('https://example.com/image.png');
});
});
});
//# sourceMappingURL=w3m-account-button.test.js.map