mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
9a977d191b
* fail the app start if multichain config or essential dapps config were not generated properly * add timeouts for essential dapps and multichain config generators * fix "add to wallet" button in address tokens table * [skip ci] update docs * fix tx tables when there are no fee and value columns * add support for promoted multichain provider * fixes * change action button logic * fix tests * fix * hide "add network" button for multichain * shorten the amount of txs on multichain homepage * change name formatting for multichain button * add bright color variants and lg size for badges * fix y-axis margin calculation for chart with custom tick formatter * superchain bug fixes * bump versions of react and nextjs * update screenshot * bump dappscout-iframe --------- Co-authored-by: Max Alekseenko <[email protected]>
106 lines
3.9 KiB
TypeScript
106 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
|
|
import type { AddressMetadataInfo, AddressMetadataTagApi } from 'types/api/addressMetadata';
|
|
|
|
import config from 'configs/app';
|
|
import * as addressMock from 'mocks/address/address';
|
|
import { protocolTagWithMeta } from 'mocks/metadata/address';
|
|
import { tokenInfoERC721a } from 'mocks/tokens/tokenInfo';
|
|
import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
|
|
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
|
|
import { test, expect, devices } from 'playwright/lib';
|
|
import * as pwConfig from 'playwright/utils/config';
|
|
import { MetadataUpdateProvider } from 'ui/tokenInstance/contexts/metadataUpdate';
|
|
|
|
import TokenInstanceDetails from './TokenInstanceDetails';
|
|
|
|
const hash = tokenInfoERC721a.address_hash;
|
|
|
|
const addressMetadataQueryParams = {
|
|
addresses: [ hash ],
|
|
chainId: config.chain.id,
|
|
tagsLimit: '20',
|
|
};
|
|
|
|
function generateAddressMetadataResponse(tag: AddressMetadataTagApi) {
|
|
return {
|
|
addresses: {
|
|
[ hash.toLowerCase() as string ]: {
|
|
tags: [ {
|
|
...tag,
|
|
meta: JSON.stringify(tag.meta),
|
|
} ],
|
|
},
|
|
},
|
|
} as AddressMetadataInfo;
|
|
}
|
|
|
|
test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
|
|
await mockApiResponse('general:address', addressMock.contract, { pathParams: { hash } });
|
|
await mockApiResponse('general:token_instance_transfers_count', { transfers_count: 42 }, { pathParams: { id: tokenInstanceMock.unique.id, hash } });
|
|
await mockAssetResponse('http://localhost:3000/nft-marketplace-logo.png', './playwright/mocks/image_s.jpg');
|
|
await mockAssetResponse(tokenInstanceMock.unique.image_url as string, './playwright/mocks/image_md.jpg');
|
|
});
|
|
|
|
test('base view +@dark-mode', async({ render, page }) => {
|
|
const component = await render(
|
|
<MetadataUpdateProvider>
|
|
<TokenInstanceDetails data={{ ...tokenInstanceMock.unique, image_url: null }} token={ tokenInfoERC721a }/>
|
|
</MetadataUpdateProvider>,
|
|
);
|
|
await expect(component).toHaveScreenshot({
|
|
mask: [ page.locator(pwConfig.adsBannerSelector) ],
|
|
maskColor: pwConfig.maskColor,
|
|
});
|
|
});
|
|
|
|
test.describe('action button', () => {
|
|
test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
|
|
const meta = { ...protocolTagWithMeta.meta, appMarketplaceURL: undefined };
|
|
const metadataResponse = generateAddressMetadataResponse({ ...protocolTagWithMeta, meta });
|
|
await mockApiResponse('metadata:info', metadataResponse, { queryParams: addressMetadataQueryParams });
|
|
await mockAssetResponse(protocolTagWithMeta?.meta?.appLogoURL as string, './playwright/mocks/image_s.jpg');
|
|
});
|
|
|
|
test('base view +@dark-mode', async({ render, page }) => {
|
|
const component = await render(
|
|
<MetadataUpdateProvider>
|
|
<TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
|
|
</MetadataUpdateProvider>,
|
|
);
|
|
await expect(component).toHaveScreenshot({
|
|
mask: [ page.locator(pwConfig.adsBannerSelector) ],
|
|
maskColor: pwConfig.maskColor,
|
|
});
|
|
});
|
|
|
|
test('without marketplaces +@dark-mode', async({ render, page, mockEnvs }) => {
|
|
mockEnvs(ENVS_MAP.noNftMarketplaces);
|
|
const component = await render(
|
|
<MetadataUpdateProvider>
|
|
<TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
|
|
</MetadataUpdateProvider>,
|
|
);
|
|
await expect(component).toHaveScreenshot({
|
|
mask: [ page.locator(pwConfig.adsBannerSelector) ],
|
|
maskColor: pwConfig.maskColor,
|
|
});
|
|
});
|
|
});
|
|
|
|
test.describe('mobile', () => {
|
|
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
|
|
|
|
test('base view', async({ render, page }) => {
|
|
const component = await render(
|
|
<MetadataUpdateProvider>
|
|
<TokenInstanceDetails data={{ ...tokenInstanceMock.unique, image_url: null }} token={ tokenInfoERC721a }/>
|
|
</MetadataUpdateProvider>,
|
|
);
|
|
await expect(component).toHaveScreenshot({
|
|
mask: [ page.locator(pwConfig.adsBannerSelector) ],
|
|
maskColor: pwConfig.maskColor,
|
|
});
|
|
});
|
|
});
|