@reown/appkit-scaffold-ui
Version:
The full stack toolkit to build onchain app UX.
123 lines • 5.69 kB
JavaScript
import { elementUpdated, fixture } from '@open-wc/testing';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { html } from 'lit';
import { ConstantsUtil } from '@reown/appkit-common';
import { AssetUtil, ChainController } from '@reown/appkit-controllers';
import { W3mOnRampProviderItem } from '../../src/partials/w3m-onramp-provider-item';
describe('W3mOnRampProviderItem', () => {
beforeEach(() => {
const mockNetworks = [
{
id: '1',
name: 'Ethereum',
chainNamespace: ConstantsUtil.CHAIN.EVM,
caipNetworkId: 'eip155:1',
nativeCurrency: {
name: 'Ether',
symbol: 'ETH',
decimals: 18
},
rpcUrls: {
default: { http: ['https://eth.llamarpc.com'] }
},
assets: { imageId: 'ethereum', imageUrl: 'ethereum.png' }
},
{
id: '137',
name: 'Polygon',
chainNamespace: ConstantsUtil.CHAIN.EVM,
caipNetworkId: 'eip155:137',
nativeCurrency: {
name: 'MATIC',
symbol: 'MATIC',
decimals: 18
},
rpcUrls: {
default: { http: ['https://polygon.llamarpc.com'] }
},
assets: { imageId: 'polygon', imageUrl: 'polygon.png' }
}
];
vi.spyOn(ChainController, 'getAllRequestedCaipNetworks').mockReturnValue(mockNetworks);
vi.spyOn(AssetUtil, 'getNetworkImage').mockReturnValue('network-image.png');
});
afterEach(() => {
vi.resetAllMocks();
});
it('should render with default properties', async () => {
const element = await fixture(html `<w3m-onramp-provider-item></w3m-onramp-provider-item>`);
expect(element.disabled).toBe(false);
expect(element.color).toBe('inherit');
expect(element.name).toBeUndefined();
expect(element.label).toBe('');
expect(element.feeRange).toBe('');
expect(element.loading).toBe(false);
expect(element.onClick).toBeNull();
});
it('should render with custom properties', async () => {
const element = await fixture(html `<w3m-onramp-provider-item
name="meld"
label="Meld.io"
feeRange="1-2%"
></w3m-onramp-provider-item>`);
element.requestUpdate();
await elementUpdated(element);
const visual = element.shadowRoot?.querySelector('wui-visual');
expect(visual?.getAttribute('name')).toBe('meld');
const labelText = element.shadowRoot?.querySelector('wui-text[variant="md-regular"]');
expect(labelText?.textContent?.trim()).toBe('Meld.io');
const feeText = element.shadowRoot?.querySelector('wui-text[variant="sm-medium"]');
expect(feeText?.textContent?.trim()).toContain('1-2%');
});
it('should render loading spinner when loading is true', async () => {
const element = await fixture(html `<w3m-onramp-provider-item .loading=${true}></w3m-onramp-provider-item>`);
element.requestUpdate();
await elementUpdated(element);
const spinner = element.shadowRoot?.querySelector('wui-loading-spinner');
expect(spinner).not.toBeNull();
});
it('should render chevron icon when not loading', async () => {
const element = await fixture(html `<w3m-onramp-provider-item .loading=${false}></w3m-onramp-provider-item>`);
element.requestUpdate();
await elementUpdated(element);
const chevron = element.shadowRoot?.querySelector('wui-icon[name="chevronRight"]');
expect(chevron).not.toBeNull();
});
it('should render payment method icons', async () => {
const element = await fixture(html `<w3m-onramp-provider-item></w3m-onramp-provider-item>`);
element.requestUpdate();
await elementUpdated(element);
const bankIcon = element.shadowRoot?.querySelector('wui-icon[name="bank"]');
const cardIcon = element.shadowRoot?.querySelector('wui-icon[name="card"]');
expect(bankIcon).not.toBeNull();
expect(cardIcon).not.toBeNull();
});
it('should render network icons', async () => {
const element = await fixture(html `<w3m-onramp-provider-item></w3m-onramp-provider-item>`);
element.requestUpdate();
await elementUpdated(element);
const networkImages = element.shadowRoot?.querySelectorAll('.network-icon wui-image');
expect(networkImages?.length).toBe(2);
networkImages?.forEach(image => {
expect(image.getAttribute('src')).toBe('network-image.png');
});
});
it('should handle disabled state', async () => {
const element = await fixture(html `<w3m-onramp-provider-item .disabled=${true}></w3m-onramp-provider-item>`);
element.requestUpdate();
await elementUpdated(element);
const button = element.shadowRoot?.querySelector('button');
expect(button?.disabled).toBe(true);
});
it('should handle click events', async () => {
const onClick = vi.fn();
const element = await fixture(html `<w3m-onramp-provider-item></w3m-onramp-provider-item>`);
element.onClick = onClick;
element.requestUpdate();
await elementUpdated(element);
const button = element.shadowRoot?.querySelector('button');
button?.click();
expect(onClick).toHaveBeenCalled();
});
});
//# sourceMappingURL=w3m-onramp-provider-item.test.js.map