@reown/appkit-scaffold-ui
Version:
The full stack toolkit to build onchain app UX.
126 lines • 7.51 kB
JavaScript
import { fixture } from '@open-wc/testing';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { html } from 'lit';
import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common';
import { AssetController, ChainController, ConnectionController, ConnectorController, CoreHelperUtil, OptionsController, RouterController, SnackController } from '@reown/appkit-controllers';
import { W3mAccountSettingsView } from '../../src/views/w3m-account-settings-view/index';
import { HelpersUtil } from '../utils/HelpersUtil';
const ACCOUNT_SWITCH_NETWORK_BUTTON_TEST_ID = 'account-switch-network-button';
const ACCOUNT_CHOOSE_NAME_BUTTON_TEST_ID = 'account-choose-name-button';
const DISCONNECT_BUTTON_TEST_ID = 'disconnect-button';
const WALLET_UPGRADE_CARD_TEST_ID = 'w3m-wallet-upgrade-card';
const ACCOUNT_SMART_ACCOUNT_SETTINGS_BUTTON_TEST_ID = 'account-smart-account-settings-button';
describe('W3mAccountSettingsView', () => {
beforeEach(() => {
vi.clearAllMocks();
vi.spyOn(ChainController, 'getAccountData').mockReturnValue({
address: 'eip155:1:0x1234567890abcdef1234567890abcdef12345678'
});
vi.spyOn(AssetController, 'state', 'get').mockReturnValue({
...AssetController.state,
networkImages: {}
});
vi.spyOn(ChainController, 'state', 'get').mockReturnValue({
...ChainController.state,
activeCaipNetwork: { id: 1, name: 'Ethereum', chainNamespace: 'eip155' }
});
vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({
...OptionsController.state,
remoteFeatures: { multiWallet: true }
});
vi.spyOn(ConnectorController, 'getConnectorId').mockReturnValue('');
vi.spyOn(ConnectorController, 'getAuthConnector').mockReturnValue(undefined);
});
it('should render', async () => {
const element = await fixture(html `<w3m-account-settings-view></w3m-account-settings-view>`);
expect(element).toBeTruthy();
});
it('should throw when no account provided', async () => {
vi.spyOn(ChainController, 'getAccountData').mockReturnValue({
address: undefined
});
await expect(fixture(html `<w3m-account-settings-view></w3m-account-settings-view>`)).rejects.toThrowError(/No account provided/);
});
it('should copy address and show success on copy icon click', async () => {
const copySpy = vi.spyOn(CoreHelperUtil, 'copyToClopboard').mockImplementation(() => { });
const successSpy = vi.spyOn(SnackController, 'showSuccess').mockImplementation(() => { });
const element = await fixture(html `<w3m-account-settings-view></w3m-account-settings-view>`);
const copyBtn = element.shadowRoot?.querySelector('wui-icon-link');
copyBtn?.click();
expect(copySpy).toHaveBeenCalled();
expect(successSpy).toHaveBeenCalledWith('Address copied');
});
it('should push Networks when switching network is allowed', async () => {
vi.spyOn(ChainController, 'getAllRequestedCaipNetworks').mockReturnValue([
{ id: 1 },
{ id: 10 }
]);
const pushSpy = vi.spyOn(RouterController, 'push').mockImplementation(() => { });
const element = await fixture(html `<w3m-account-settings-view></w3m-account-settings-view>`);
const button = HelpersUtil.getByTestId(element, ACCOUNT_SWITCH_NETWORK_BUTTON_TEST_ID);
button?.click();
expect(pushSpy).toHaveBeenCalledWith('Networks');
});
it('should render choose name button when supported and navigate on click', async () => {
vi.spyOn(ChainController, 'checkIfNamesSupported').mockReturnValue(true);
vi.spyOn(ConnectorController, 'getAuthConnector').mockReturnValue({
provider: { getEmail: vi.fn().mockReturnValue('user@example.com') }
});
vi.spyOn(ConnectorController, 'getConnectorId').mockReturnValue(CommonConstantsUtil.CONNECTOR_ID.AUTH);
const pushSpy = vi.spyOn(RouterController, 'push').mockImplementation(() => { });
const element = await fixture(html `<w3m-account-settings-view></w3m-account-settings-view>`);
const choose = HelpersUtil.getByTestId(element, ACCOUNT_CHOOSE_NAME_BUTTON_TEST_ID);
expect(choose).toBeTruthy();
choose?.click();
expect(pushSpy).toHaveBeenCalledWith('ChooseAccountName');
});
it('should show upgrade card when eligible and navigate on click', async () => {
vi.spyOn(ConnectorController, 'getAuthConnector').mockReturnValue({
provider: { getEmail: vi.fn().mockReturnValue('user@example.com') }
});
vi.spyOn(ConnectorController, 'getConnectorId').mockReturnValue(CommonConstantsUtil.CONNECTOR_ID.AUTH);
Object.defineProperty(global, 'location', {
value: { origin: 'https://example.com' }
});
const pushSpy = vi.spyOn(RouterController, 'push').mockImplementation(() => { });
const element = await fixture(html `<w3m-account-settings-view></w3m-account-settings-view>`);
const card = HelpersUtil.getByTestId(element, WALLET_UPGRADE_CARD_TEST_ID);
expect(card).toBeTruthy();
card?.click();
expect(pushSpy).toHaveBeenCalledWith('UpgradeEmailWallet');
});
it('should navigate to smart account settings view when smart account is enabled', async () => {
vi.spyOn(ChainController, 'checkIfSmartAccountEnabled').mockReturnValue(true);
const pushSpy = vi.spyOn(RouterController, 'push').mockImplementation(() => { });
vi.spyOn(ConnectorController, 'getAuthConnector').mockReturnValue({
provider: { getEmail: vi.fn().mockReturnValue('user@example.com') }
});
vi.spyOn(ConnectorController, 'getConnectorId').mockReturnValue(CommonConstantsUtil.CONNECTOR_ID.AUTH);
vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({
...ConnectorController.state,
activeConnectorIds: { eip155: 'AUTH' }
});
const element = await fixture(html `<w3m-account-settings-view></w3m-account-settings-view>`);
const smartAccountSettingsBtn = HelpersUtil.getByTestId(element, ACCOUNT_SMART_ACCOUNT_SETTINGS_BUTTON_TEST_ID);
smartAccountSettingsBtn?.click();
expect(pushSpy).toHaveBeenCalledWith('SmartAccountSettings');
});
it('should disconnect and navigate to ProfileWallets for multi-wallet', async () => {
vi.spyOn(ConnectionController, 'getConnections').mockReturnValue([{}]);
vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({
...ConnectorController.state,
activeConnectorIds: { eip155: 'wc' }
});
const pushSpy = vi.spyOn(RouterController, 'push').mockImplementation(vi.fn());
const successSpy = vi.spyOn(SnackController, 'showSuccess').mockImplementation(vi.fn());
vi.spyOn(ConnectionController, 'disconnect').mockResolvedValue(undefined);
const element = await fixture(html `<w3m-account-settings-view></w3m-account-settings-view>`);
const disconnectBtn = HelpersUtil.getByTestId(element, DISCONNECT_BUTTON_TEST_ID);
disconnectBtn?.click();
await vi.waitFor(() => {
expect(pushSpy).toHaveBeenCalledWith('ProfileWallets');
expect(successSpy).toHaveBeenCalledWith('Wallet deleted');
});
});
});
//# sourceMappingURL=w3m-account-settings-view.test.js.map