Skip to content

F
frontend
Commit 1b977de2 authored by tom goriunov's avatar tom goriunov Committed by GitHub
Browse files
Options

Playwright tests refactoring, pt.5 (#1952) 

* next part of test refactoring

* more refactoring

* more refactoring

* fixes and clean-up

* fixes

* build fixes

* more fixes
parent ee968da1
Show whitespace changes
Inline Side-by-side
Showing with 1519 additions and 2917 deletions
.eslintrc.js
View file @ 1b977de2
......@@ -4,6 +4,7 @@ const RESTRICTED_MODULES = {
{ name: '@chakra-ui/icons', message: 'Using @chakra-ui/icons is prohibited. Please use regular svg-icon instead (see examples in "icons/" folder)' },
{ name: '@metamask/providers', message: 'Please lazy-load @metamask/providers or use useProvider hook instead' },
{ name: '@metamask/post-message-stream', message: 'Please lazy-load @metamask/post-message-stream or use useProvider hook instead' },
{ name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' },
],
patterns: [
'icons/*',
......
mocks/address/tokens.ts
View file @ 1b977de2
import type { AddressCollectionsResponse, AddressNFTsResponse, AddressTokenBalance } from 'types/api/address';
import type { AddressCollectionsResponse, AddressNFTsResponse, AddressTokenBalance, AddressTokensResponse } from 'types/api/address';
import * as tokens from 'mocks/tokens/tokenInfo';
import * as tokenInstance from 'mocks/tokens/tokenInstance';
......@@ -119,35 +119,39 @@ export const erc404b: AddressTokenBalance = {
token_id: null,
};
export const erc20List = {
export const erc20List: AddressTokensResponse = {
items: [
erc20a,
erc20b,
erc20c,
],
next_page_params: null,
};
export const erc721List = {
export const erc721List: AddressTokensResponse = {
items: [
erc721a,
erc721b,
erc721c,
],
next_page_params: null,
};
export const erc1155List = {
export const erc1155List: AddressTokensResponse = {
items: [
erc1155withoutName,
erc1155a,
erc1155b,
],
next_page_params: null,
};
export const erc404List = {
export const erc404List: AddressTokensResponse = {
items: [
erc404a,
erc404b,
],
next_page_params: null,
};
export const nfts: AddressNFTsResponse = {
......
mocks/contract/solidityscanReport.ts
View file @ 1b977de2
export const solidityscanReportAverage = {
import type { SolidityscanReport } from 'types/api/contract';
export const solidityscanReportAverage: SolidityscanReport = {
scan_report: {
contractname: 'foo',
scan_status: 'scan_done',
scan_summary: {
issue_severity_distribution: {
......@@ -20,8 +23,9 @@ export const solidityscanReportAverage = {
},
};
export const solidityscanReportGreat = {
export const solidityscanReportGreat: SolidityscanReport = {
scan_report: {
contractname: 'foo',
scan_status: 'scan_done',
scan_summary: {
issue_severity_distribution: {
......@@ -42,8 +46,9 @@ export const solidityscanReportGreat = {
},
};
export const solidityscanReportLow = {
export const solidityscanReportLow: SolidityscanReport = {
scan_report: {
contractname: 'foo',
scan_status: 'scan_done',
scan_summary: {
issue_severity_distribution: {
......
mocks/stats/index.ts
View file @ 1b977de2
import _mapValues from 'lodash/mapValues';
export const base = {
import type { HomeStats } from 'types/api/stats';
export const base: HomeStats = {
average_block_time: 6212.0,
coin_price: '0.00199678',
coin_price_change_percentage: -7.42,
......@@ -42,35 +44,42 @@ export const base = {
tvl: '1767425.102766552',
};
export const withBtcLocked = {
export const withBtcLocked: HomeStats = {
...base,
rootstock_locked_btc: '3337493406696977561374',
};
export const withoutFiatPrices = {
export const withoutFiatPrices: HomeStats = {
...base,
gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, fiat_price: null }) : null),
};
export const withoutGweiPrices = {
export const withoutGweiPrices: HomeStats = {
...base,
gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, price: null }) : null),
};
export const withoutBothPrices = {
export const withoutBothPrices: HomeStats = {
...base,
gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, price: null, fiat_price: null }) : null),
};
export const withSecondaryCoin = {
export const withSecondaryCoin: HomeStats = {
...base,
secondary_coin_price: '3.398',
};
export const noChartData = {
export const noChartData: HomeStats = {
...base,
transactions_today: null,
coin_price: null,
market_cap: null,
tvl: null,
};
export const indexingStatus = {
finished_indexing_blocks: false,
indexed_blocks_ratio: '0.1',
finished_indexing: true,
indexed_internal_transactions_ratio: '1',
};
mocks/tokens/tokenInfo.ts
View file @ 1b977de2
......@@ -8,7 +8,7 @@ export const tokenInfo: TokenInfo = {
holders: '46554',
name: 'ARIANEE',
symbol: 'ARIA',
type: 'ERC-20',
type: 'ERC-20' as const,
total_supply: '1235',
icon_url: 'http://localhost:3000/token-icon.png',
};
......@@ -27,7 +27,7 @@ export const tokenInfoERC20a: TokenInfo<'ERC-20'> = {
name: 'hyfi.token',
symbol: 'HyFi',
total_supply: '369000000000000000000000000',
type: 'ERC-20',
type: 'ERC-20' as const,
icon_url: 'http://localhost:3000/token-icon.png',
};
......@@ -40,7 +40,7 @@ export const tokenInfoERC20b: TokenInfo<'ERC-20'> = {
name: 'USD Coin',
symbol: 'USDC',
total_supply: '900000000000000000000000000',
type: 'ERC-20',
type: 'ERC-20' as const,
icon_url: null,
};
......@@ -53,7 +53,7 @@ export const tokenInfoERC20c: TokenInfo<'ERC-20'> = {
name: 'Ethereum',
symbol: 'ETH',
total_supply: '1000000000000000000000000',
type: 'ERC-20',
type: 'ERC-20' as const,
icon_url: null,
};
......@@ -66,7 +66,7 @@ export const tokenInfoERC20d: TokenInfo<'ERC-20'> = {
name: 'Zeta',
symbol: 'ZETA',
total_supply: '2100000000000000000000000000',
type: 'ERC-20',
type: 'ERC-20' as const,
icon_url: null,
};
......@@ -79,7 +79,7 @@ export const tokenInfoERC20LongSymbol: TokenInfo<'ERC-20'> = {
name: 'Zeta',
symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
total_supply: '2100000000000000000000000000',
type: 'ERC-20',
type: 'ERC-20' as const,
icon_url: null,
};
......@@ -92,7 +92,7 @@ export const tokenInfoERC721a: TokenInfo<'ERC-721'> = {
name: 'HyFi Athena',
symbol: 'HYFI_ATHENA',
total_supply: '105',
type: 'ERC-721',
type: 'ERC-721' as const,
icon_url: null,
};
......@@ -105,7 +105,7 @@ export const tokenInfoERC721b: TokenInfo<'ERC-721'> = {
name: 'World Of Women Galaxy',
symbol: 'WOWG',
total_supply: null,
type: 'ERC-721',
type: 'ERC-721' as const,
icon_url: null,
};
......@@ -118,7 +118,7 @@ export const tokenInfoERC721c: TokenInfo<'ERC-721'> = {
name: 'Puma',
symbol: 'PUMA',
total_supply: null,
type: 'ERC-721',
type: 'ERC-721' as const,
icon_url: null,
};
......@@ -131,7 +131,7 @@ export const tokenInfoERC721LongSymbol: TokenInfo<'ERC-721'> = {
name: 'Puma',
symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
total_supply: null,
type: 'ERC-721',
type: 'ERC-721' as const,
icon_url: null,
};
......@@ -144,7 +144,7 @@ export const tokenInfoERC1155a: TokenInfo<'ERC-1155'> = {
name: 'HyFi Membership',
symbol: 'HYFI_MEMBERSHIP',
total_supply: '482',
type: 'ERC-1155',
type: 'ERC-1155' as const,
icon_url: null,
};
......@@ -157,7 +157,7 @@ export const tokenInfoERC1155b: TokenInfo<'ERC-1155'> = {
name: 'WinkyVerse Collections',
symbol: 'WVC',
total_supply: '4943',
type: 'ERC-1155',
type: 'ERC-1155' as const,
icon_url: null,
};
......@@ -170,7 +170,7 @@ export const tokenInfoERC1155WithoutName: TokenInfo<'ERC-1155'> = {
name: null,
symbol: null,
total_supply: '482',
type: 'ERC-1155',
type: 'ERC-1155' as const,
icon_url: null,
};
......@@ -184,7 +184,7 @@ export const tokenInfoERC404: TokenInfo<'ERC-404'> = {
name: 'OMNI404',
symbol: 'O404',
total_supply: '6482275000000000000',
type: 'ERC-404',
type: 'ERC-404' as const,
};
export const bridgedTokenA: TokenInfo<'ERC-20'> = {
......
mocks/txs/state.ts
View file @ 1b977de2
import type { TxStateChange } from 'types/api/txStateChanges';
import type { TxStateChange, TxStateChanges } from 'types/api/txStateChanges';
export const mintToken: TxStateChange = {
address: {
......@@ -35,7 +35,7 @@ export const mintToken: TxStateChange = {
type: 'ERC-721',
icon_url: null,
},
type: 'token',
type: 'token' as const,
};
export const receiveMintedToken: TxStateChange = {
......@@ -73,7 +73,7 @@ export const receiveMintedToken: TxStateChange = {
type: 'ERC-721',
icon_url: null,
},
type: 'token',
type: 'token' as const,
};
export const transfer1155Token: TxStateChange = {
......@@ -105,7 +105,7 @@ export const transfer1155Token: TxStateChange = {
type: 'ERC-1155',
},
token_id: '1',
type: 'token',
type: 'token' as const,
};
export const receiveCoin: TxStateChange = {
......@@ -125,7 +125,7 @@ export const receiveCoin: TxStateChange = {
change: '29726406604060',
is_miner: true,
token: null,
type: 'coin',
type: 'coin' as const,
};
export const sendCoin: TxStateChange = {
......@@ -145,12 +145,13 @@ export const sendCoin: TxStateChange = {
change: '-3844844822720562',
is_miner: false,
token: null,
type: 'coin',
type: 'coin' as const,
};
export const sendERC20Token = {
address: {
hash: '0x7f6479df95Aa3036a3BE02DB6300ea201ABd9981',
ens_domain_name: null,
implementation_name: null,
is_contract: false,
is_verified: false,
......@@ -173,13 +174,13 @@ export const sendERC20Token = {
name: 'Tether USD',
symbol: 'USDT',
total_supply: '39030615894320966',
type: 'ERC-20',
type: 'ERC-20' as const,
token_id: null,
},
type: 'token',
type: 'token' as const,
};
export const baseResponse = {
export const baseResponse: TxStateChanges = {
items: [
mintToken,
receiveMintedToken,
......
playwright/TestApp.tsx
View file @ 1b977de2
......@@ -12,9 +12,10 @@ import type { Props as PageProps } from 'nextjs/getServerSideProps';
import config from 'configs/app';
import { AppContextProvider } from 'lib/contexts/app';
import { SocketProvider } from 'lib/socket/context';
import * as app from 'playwright/utils/app';
import theme from 'theme';
import { port as socketPort } from './utils/socket';
export type Props = {
children: React.ReactNode;
withSocket?: boolean;
......@@ -74,7 +75,7 @@ const TestApp = ({ children, withSocket, withWalletClient = true, appContext = d
return (
<ChakraProvider theme={ theme }>
<QueryClientProvider client={ queryClient }>
<SocketProvider url={ withSocket ? `ws://${ config.app.host }:${ app.socketPort }` : undefined }>
<SocketProvider url={ withSocket ? `ws://${ config.app.host }:${ socketPort }` : undefined }>
<AppContextProvider { ...appContext }>
<GrowthBookProvider>
<WalletClientProvider withWalletClient={ withWalletClient }>
......
playwright/fixtures/contextWithEnvs.ts deleted 100644 → 0
View file @ ee968da1
import type { test } from '@playwright/experimental-ct-react';
import createContextWithStorage from './createContextWithStorage';
interface Env {
name: string;
value: string;
}
/**
* @deprecated please use mockEnvs fixture
*
* @export
* @param {Array<Env>} envs
* @return {*} {Parameters<typeof test.extend>[0]['context']}
*/
export default function contextWithEnvsFixture(envs: Array<Env>): Parameters<typeof test.extend>[0]['context'] {
return async({ browser }, use) => {
const context = await createContextWithStorage(browser, envs);
await use(context);
await context.close();
};
}
playwright/fixtures/contextWithFeatures.ts deleted 100644 → 0
View file @ ee968da1
import type { test } from '@playwright/experimental-ct-react';
import createContextWithStorage from './createContextWithStorage';
interface Feature {
id: string;
value: unknown;
}
/**
* @deprecated please use mockFeatures fixture
*
* @export
* @param {Array<Feature>} envs
* @return {*} {Parameters<typeof test.extend>[0]['context']}
*/
export default function contextWithFeaturesFixture(envs: Array<Feature>): Parameters<typeof test.extend>[0]['context'] {
return async({ browser }, use) => {
const storageItems = envs.map(({ id, value }) => ({ name: `pw_feature:${ id }`, value: JSON.stringify(value) }));
const context = await createContextWithStorage(browser, storageItems);
await use(context);
await context.close();
};
}
playwright/fixtures/createContextWithStorage.ts deleted 100644 → 0
View file @ ee968da1
import type { Browser } from '@playwright/test';
import config from 'configs/app';
/**
* @deprecated please use mockEnvs or mockFeatures fixture
*
* @export
* @param {Browser} browser
* @param {Array<{ name: string; value: string }>} localStorage
* @return {*}
*/
export default async function createContextWithEnvs(browser: Browser, localStorage: Array<{ name: string; value: string }>) {
return browser.newContext({
storageState: {
origins: [
{ origin: config.app.baseUrl, localStorage },
],
cookies: [],
},
});
}
playwright/fixtures/mockApiResponse.ts
View file @ 1b977de2
......@@ -6,6 +6,7 @@ import type { ResourceName, ResourcePayload } from 'lib/api/resources';
interface Options<R extends ResourceName> {
pathParams?: Parameters<typeof buildUrl<R>>[1];
queryParams?: Parameters<typeof buildUrl<R>>[2];
times?: number;
}
export type MockApiResponseFixture = <R extends ResourceName>(resourceName: R, responseMock: ResourcePayload<R>, options?: Options<R>) => Promise<string>;
......@@ -17,7 +18,7 @@ const fixture: TestFixture<MockApiResponseFixture, { page: Page }> = async({ pag
await page.route(apiUrl, (route) => route.fulfill({
status: 200,
body: JSON.stringify(responseMock),
}));
}), { times: options?.times });
return apiUrl;
});
......
playwright/fixtures/render.tsx
View file @ 1b977de2
/* eslint-disable no-restricted-imports */
import type { MountOptions } from '@playwright/experimental-ct-react';
import type { Locator, TestFixture } from '@playwright/test';
import type router from 'next/router';
......
playwright/fixtures/socketServer.ts
View file @ 1b977de2
......@@ -8,7 +8,7 @@ import type { SmartContractVerificationResponse } from 'types/api/contract';
import type { TokenTransfer } from 'types/api/tokenTransfer';
import type { Transaction } from 'types/api/transaction';
import * as app from 'playwright/utils/app';
import { port as socketPort } from '../utils/socket';
export type CreateSocketFixture = () => Promise<WebSocket>;
......@@ -20,7 +20,7 @@ export interface SocketServerFixture {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const createSocket: TestFixture<CreateSocketFixture, { page: Page}> = async({ page }, use) => {
const socketServer = new WebSocketServer({ port: app.socketPort });
const socketServer = new WebSocketServer({ port: socketPort });
const connectionPromise = new Promise<WebSocket>((resolve) => {
socketServer.on('connection', (socket: WebSocket) => {
......
playwright/utils/app.ts deleted 100644 → 0
View file @ ee968da1
export const socketPort = 3200;
playwright/utils/buildApiUrl.ts deleted 100644 → 0
View file @ ee968da1
import { compile } from 'path-to-regexp';
import config from 'configs/app';
import type { ResourceName, ResourcePathParams } from 'lib/api/resources';
import { RESOURCES } from 'lib/api/resources';
/**
* @deprecated please use fixture mockApiResponse from playwright/lib.tsx for rendering test suite
*
* @export
* @template R
* @param {R} resourceName
* @param {ResourcePathParams<R>} [pathParams]
* @return {*} string
*/
export default function buildApiUrl<R extends ResourceName>(resourceName: R, pathParams?: ResourcePathParams<R>) {
const resource = RESOURCES[resourceName];
const origin = 'endpoint' in resource && resource.endpoint ? resource.endpoint + (resource.basePath ?? '') : config.api.endpoint;
return origin + compile(resource.path)(pathParams);
}
playwright/utils/configs.ts → playwright/utils/config.ts
View file @ 1b977de2
/* eslint-disable max-len */
import { devices } from '@playwright/test';
export const viewport = {
......
playwright/utils/socket.ts 0 → 100644
View file @ 1b977de2
export const port = 3200;
theme/components/Alert/Alert.pw.tsx
View file @ 1b977de2
import type { AlertProps } from '@chakra-ui/react';
import { Alert, AlertIcon, AlertTitle } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
test.use({ viewport: { width: 400, height: 720 } });
......@@ -29,16 +28,14 @@ const TEST_CASES: Array<AlertProps> = [
TEST_CASES.forEach((props) => {
const testName = Object.entries(props).map(([ key, value ]) => `${ key }=${ value }`).join(', ');
test(`${ testName } +@dark-mode`, async({ mount }) => {
const component = await mount(
<TestApp>
test(`${ testName } +@dark-mode`, async({ render }) => {
const component = await render(
<Alert { ...props }>
<AlertIcon/>
<AlertTitle>
This is alert text
</AlertTitle>
</Alert>
</TestApp>,
</Alert>,
);
await expect(component).toHaveScreenshot();
......
theme/components/Button/Button.pw.tsx
View file @ 1b977de2
import { Button } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
[
{ variant: 'solid' },
......@@ -16,40 +15,24 @@ import TestApp from 'playwright/TestApp';
{ variant: 'subtle', colorScheme: 'gray', withDarkMode: true },
].forEach(({ variant, colorScheme, withDarkMode }) => {
test.describe(`variant ${ variant }${ colorScheme ? ` with ${ colorScheme } color scheme` : '' }${ withDarkMode ? ' +@dark-mode' : '' }`, () => {
test('base', async({ mount }) => {
const component = await mount(
<TestApp>
<Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>
</TestApp>,
);
test('base', async({ render }) => {
const component = await render(<Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>);
await expect(component.locator('button')).toHaveScreenshot();
});
test('disabled', async({ mount }) => {
const component = await mount(
<TestApp>
<Button variant={ variant } colorScheme={ colorScheme } isDisabled>Click me</Button>
</TestApp>,
);
test('disabled', async({ render }) => {
const component = await render(<Button variant={ variant } colorScheme={ colorScheme } isDisabled>Click me</Button>);
await expect(component.locator('button')).toHaveScreenshot();
});
test('hovered', async({ mount }) => {
const component = await mount(
<TestApp>
<Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>
</TestApp>,
);
test('hovered', async({ render }) => {
const component = await render(<Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>);
await component.getByText(/click/i).hover();
await expect(component.locator('button')).toHaveScreenshot();
});
test('active', async({ mount }) => {
const component = await mount(
<TestApp>
<Button variant={ variant } colorScheme={ colorScheme } isActive>Click me</Button>
</TestApp>,
);
test('active', async({ render }) => {
const component = await render(<Button variant={ variant } colorScheme={ colorScheme } isActive>Click me</Button>);
await expect(component.locator('button')).toHaveScreenshot();
});
});
......
theme/components/Form/FormControl.pw.tsx
View file @ 1b977de2
import { FormControl, Input, FormLabel } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
test.use({ viewport: { width: 500, height: 300 } });
test.describe('floating label size md +@dark-mode', () => {
test('empty', async({ mount }) => {
const component = await mount(
<TestApp>
test('empty', async({ render }) => {
const component = await render(
<FormControl variant="floating" id="name" isRequired size="md">
<Input required value=""/>
<FormLabel>Smart contract / Address (0x...)</FormLabel>
</FormControl>
</TestApp>,
</FormControl>,
);
await expect(component).toHaveScreenshot();
......@@ -23,14 +20,12 @@ test.describe('floating label size md +@dark-mode', () => {
await expect(component).toHaveScreenshot();
});
test('empty error', async({ mount }) => {
const component = await mount(
<TestApp>
test('empty error', async({ render }) => {
const component = await render(
<FormControl variant="floating" id="name" isRequired size="md">
<Input required value="" isInvalid/>
<FormLabel>Smart contract / Address (0x...)</FormLabel>
</FormControl>
</TestApp>,
</FormControl>,
);
await expect(component).toHaveScreenshot();
......@@ -39,53 +34,45 @@ test.describe('floating label size md +@dark-mode', () => {
await expect(component).toHaveScreenshot();
});
test('filled', async({ mount }) => {
const component = await mount(
<TestApp>
test('filled', async({ render }) => {
const component = await render(
<FormControl variant="floating" id="name" isRequired size="md">
<Input required value="foo"/>
<FormLabel>Smart contract / Address (0x...)</FormLabel>
</FormControl>
</TestApp>,
</FormControl>,
);
await expect(component).toHaveScreenshot();
});
test('filled disabled', async({ mount }) => {
const component = await mount(
<TestApp>
test('filled disabled', async({ render }) => {
const component = await render(
<FormControl variant="floating" id="name" isRequired size="md">
<Input required value="foo" isDisabled/>
<FormLabel>Smart contract / Address (0x...)</FormLabel>
</FormControl>
</TestApp>,
</FormControl>,
);
await expect(component).toHaveScreenshot();
});
test('filled read-only', async({ mount }) => {
const component = await mount(
<TestApp>
test('filled read-only', async({ render }) => {
const component = await render(
<FormControl variant="floating" id="name" isRequired size="md">
<Input required value="foo" isReadOnly/>
<FormLabel>Smart contract / Address (0x...)</FormLabel>
</FormControl>
</TestApp>,
</FormControl>,
);
await expect(component).toHaveScreenshot();
});
test('filled error', async({ mount }) => {
const component = await mount(
<TestApp>
test('filled error', async({ render }) => {
const component = await render(
<FormControl variant="floating" id="name" isRequired size="md">
<Input required value="foo" isInvalid/>
<FormLabel>Smart contract / Address (0x...)</FormLabel>
</FormControl>
</TestApp>,
</FormControl>,
);
await expect(component).toHaveScreenshot();
......@@ -93,14 +80,12 @@ test.describe('floating label size md +@dark-mode', () => {
});
test.describe('floating label size lg +@dark-mode', () => {
test('empty', async({ mount }) => {
const component = await mount(
<TestApp>
test('empty', async({ render }) => {
const component = await render(
<FormControl variant="floating" id="name" isRequired size="lg">
<Input required value=""/>
<FormLabel>Smart contract / Address (0x...)</FormLabel>
</FormControl>
</TestApp>,
</FormControl>,
);
await expect(component).toHaveScreenshot();
......@@ -109,14 +94,12 @@ test.describe('floating label size lg +@dark-mode', () => {
await expect(component).toHaveScreenshot();
});
test('filled', async({ mount }) => {
const component = await mount(
<TestApp>
test('filled', async({ render }) => {
const component = await render(
<FormControl variant="floating" id="name" isRequired size="lg">
<Input required value="foo"/>
<FormLabel>Smart contract / Address (0x...)</FormLabel>
</FormControl>
</TestApp>,
</FormControl>,
);
await expect(component).toHaveScreenshot();
......
theme/components/Tag/Tag.pw.tsx
View file @ 1b977de2
import { Box, Tag } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
[ 'blue', 'gray', 'gray-blue', 'orange', 'green', 'purple', 'cyan', 'teal' ].forEach((colorScheme) => {
test(`${ colorScheme } color scheme +@dark-mode`, async({ mount }) => {
const component = await mount(
<TestApp>
<Tag colorScheme={ colorScheme }>content</Tag>
</TestApp>,
);
test(`${ colorScheme } color scheme +@dark-mode`, async({ render }) => {
const component = await render(<Tag colorScheme={ colorScheme }>content</Tag>);
await expect(component.getByText(/content/i)).toHaveScreenshot();
});
});
test('with long text', async({ mount }) => {
const component = await mount(
<TestApp>
test('with long text', async({ render }) => {
const component = await render(
<Box w="100px">
<Tag>this is very looooooooooong text</Tag>
</Box>
</TestApp>,
</Box>,
);
await expect(component.getByText(/this/i)).toHaveScreenshot();
});
theme/components/Tooltip/Tooltip.pw.tsx
View file @ 1b977de2
import { Box, Tooltip, Icon } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
test('base view +@dark-mode', async({ mount, page }) => {
const component = await mount(
<TestApp>
test('base view +@dark-mode', async({ render, page }) => {
const component = await render(
<Box m={ 10 }>
<Tooltip label="Tooltip content">
trigger
</Tooltip>
</Box>
</TestApp>,
</Box>,
);
await component.getByText(/trigger/i).hover();
......@@ -22,17 +19,15 @@ test('base view +@dark-mode', async({ mount, page }) => {
// was not able to reproduce in tests issue when Icon is used as trigger for tooltip
// https://github.com/chakra-ui/chakra-ui/issues/7107
test.skip('with icon', async({ mount, page }) => {
const component = await mount(
<TestApp>
test.fixme('with icon', async({ render, page }) => {
const component = await render(
<Box m={ 10 }>
<Tooltip label="Tooltip content">
<Icon viewBox="0 0 20 20" boxSize={ 5 } aria-label="Trigger">
<circle cx="10" cy="10" r="10"/>
</Icon>
</Tooltip>
</Box>
</TestApp>,
</Box>,
);
const tooltip = page.getByText(/tooltip content/i);
......
types/api/stats.ts
View file @ 1b977de2
......@@ -7,13 +7,13 @@ export type HomeStats = {
coin_price: string | null;
coin_price_change_percentage: number | null; // e.g -6.22
total_gas_used: string;
transactions_today: string;
transactions_today: string | null;
gas_used_today: string;
gas_prices: GasPrices | null;
gas_price_updated_at: string | null;
gas_prices_update_in: number;
static_gas_price: string | null;
market_cap: string;
market_cap: string | null;
network_utilization_percentage: number;
tvl: string | null;
rootstock_locked_btc?: string | null;
......
ui/address/AddressCoinBalance.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as balanceHistoryMock from 'mocks/address/coinBalanceHistory';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import AddressCoinBalance from './AddressCoinBalance';
const addressHash = 'hash';
const BALANCE_HISTORY_API_URL = buildApiUrl('address_coin_balance', { hash: addressHash });
const BALANCE_HISTORY_CHART_API_URL = buildApiUrl('address_coin_balance_chart', { hash: addressHash });
const addressHash = '0x1234';
const hooksConfig = {
router: {
query: { hash: addressHash },
},
};
test('base view +@dark-mode +@mobile', async({ mount, page }) => {
await page.route(BALANCE_HISTORY_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(balanceHistoryMock.baseResponse),
}));
await page.route(BALANCE_HISTORY_CHART_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(balanceHistoryMock.chartResponse),
}));
const component = await mount(
<TestApp>
<AddressCoinBalance/>
</TestApp>,
{ hooksConfig },
);
test('base view +@dark-mode +@mobile', async({ render, page, mockApiResponse }) => {
await mockApiResponse('address_coin_balance', balanceHistoryMock.baseResponse, { pathParams: { hash: addressHash } });
await mockApiResponse('address_coin_balance_chart', balanceHistoryMock.chartResponse, { pathParams: { hash: addressHash } });
const component = await render(<AddressCoinBalance/>, { hooksConfig });
await page.waitForFunction(() => {
return document.querySelector('path[data-name="chart-Balances-small"]')?.getAttribute('opacity') === '1';
});
await page.mouse.move(240, 100);
await expect(component).toHaveScreenshot();
});
ui/address/AddressDetails.pw.tsx
View file @ 1b977de2
import { test, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import type { WalletProvider } from 'types/web3';
import * as addressMock from 'mocks/address/address';
import * as countersMock from 'mocks/address/counters';
import * as tokensMock from 'mocks/address/tokens';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { test, expect, devices } from 'playwright/lib';
import * as pwConfig from 'playwright/utils/config';
import AddressDetails from './AddressDetails';
import MockAddressPage from './testUtils/MockAddressPage';
import type { AddressQuery } from './utils/useAddressQuery';
const ADDRESS_HASH = addressMock.hash;
const API_URL_ADDRESS = buildApiUrl('address', { hash: ADDRESS_HASH });
const API_URL_COUNTERS = buildApiUrl('address_counters', { hash: ADDRESS_HASH });
const API_URL_TOKENS_ERC20 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-20';
const API_URL_TOKENS_ERC721 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-721';
const API_URL_TOKENS_ER1155 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-1155';
const API_URL_TOKENS_ERC404 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-404';
const hooksConfig = {
router: {
query: { hash: ADDRESS_HASH },
......@@ -30,144 +20,75 @@ const hooksConfig = {
test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('contract', async({ mount, page }) => {
await page.route(API_URL_ADDRESS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(addressMock.contract),
}));
await page.route(API_URL_COUNTERS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(countersMock.forContract),
}));
const component = await mount(
<TestApp>
<AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>
</TestApp>,
{ hooksConfig },
);
test('contract', async({ render, mockApiResponse, page }) => {
await mockApiResponse('address', addressMock.contract, { pathParams: { hash: ADDRESS_HASH } });
await mockApiResponse('address_counters', countersMock.forContract, { pathParams: { hash: ADDRESS_HASH } });
const component = await render(<AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>, { hooksConfig });
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
test('validator', async({ mount, page }) => {
await page.route(API_URL_ADDRESS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(addressMock.validator),
}));
await page.route(API_URL_COUNTERS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(countersMock.forValidator),
}));
const component = await mount(
<TestApp>
<AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>
</TestApp>,
{ hooksConfig },
);
test('validator', async({ render, page, mockApiResponse }) => {
await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH } });
await mockApiResponse('address_counters', countersMock.forValidator, { pathParams: { hash: ADDRESS_HASH } });
const component = await render(<AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>, { hooksConfig });
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
});
test('contract', async({ mount, page }) => {
await page.route(API_URL_ADDRESS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(addressMock.contract),
}));
await page.route(API_URL_COUNTERS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(countersMock.forContract),
}));
const component = await mount(
<TestApp>
<AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>
</TestApp>,
{ hooksConfig },
);
test('contract', async({ render, page, mockApiResponse }) => {
await mockApiResponse('address', addressMock.contract, { pathParams: { hash: ADDRESS_HASH } });
await mockApiResponse('address_counters', countersMock.forContract, { pathParams: { hash: ADDRESS_HASH } });
const component = await render(<AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>, { hooksConfig });
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
// there's an unexpected timeout occurred in this test
test.skip('token', async({ mount, page }) => {
await page.route(API_URL_ADDRESS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(addressMock.token),
}));
await page.route(API_URL_COUNTERS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(countersMock.forToken),
}));
await page.route(API_URL_TOKENS_ERC20, async(route) => route.fulfill({
status: 200,
body: JSON.stringify(tokensMock.erc20List),
}), { times: 1 });
await page.route(API_URL_TOKENS_ERC721, async(route) => route.fulfill({
status: 200,
body: JSON.stringify(tokensMock.erc721List),
}), { times: 1 });
await page.route(API_URL_TOKENS_ER1155, async(route) => route.fulfill({
status: 200,
body: JSON.stringify(tokensMock.erc1155List),
}), { times: 1 });
await page.route(API_URL_TOKENS_ERC404, async(route) => route.fulfill({
status: 200,
body: JSON.stringify(tokensMock.erc404List),
}), { times: 1 });
await page.evaluate(() => {
window.ethereum = {
providers: [ { isMetaMask: true, _events: {} } ],
} as WalletProvider;
});
const component = await mount(
<TestApp>
test.fixme('token', async({ render, mockApiResponse, injectMetaMaskProvider, page }) => {
await mockApiResponse('address', addressMock.token, { pathParams: { hash: ADDRESS_HASH } });
await mockApiResponse('address_counters', countersMock.forToken, { pathParams: { hash: ADDRESS_HASH } });
await mockApiResponse('address_tokens', tokensMock.erc20List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' }, times: 1 });
await mockApiResponse('address_tokens', tokensMock.erc721List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' }, times: 1 });
await mockApiResponse('address_tokens', tokensMock.erc1155List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' }, times: 1 });
await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' }, times: 1 });
await injectMetaMaskProvider();
const component = await render(
<MockAddressPage>
<AddressDetails addressQuery={{ data: addressMock.token } as AddressQuery}/>
</MockAddressPage>
</TestApp>,
</MockAddressPage>,
{ hooksConfig },
);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
test('validator', async({ mount, page }) => {
await page.route(API_URL_ADDRESS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(addressMock.validator),
}));
await page.route(API_URL_COUNTERS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(countersMock.forValidator),
}));
const component = await mount(
<TestApp>
<AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>
</TestApp>,
{ hooksConfig },
);
test('validator', async({ render, mockApiResponse, page }) => {
await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH } });
await mockApiResponse('address_counters', countersMock.forValidator, { pathParams: { hash: ADDRESS_HASH } });
const component = await render(<AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>, { hooksConfig });
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
ui/address/AddressInternalTxs.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as internalTxsMock from 'mocks/txs/internalTxs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import AddressInternalTxs from './AddressInternalTxs';
const ADDRESS_HASH = internalTxsMock.base.from.hash;
const API_URL_TX_INTERNALS = buildApiUrl('address_internal_txs', { hash: ADDRESS_HASH });
const hooksConfig = {
router: {
query: { hash: ADDRESS_HASH },
},
};
test('base view +@mobile', async({ mount, page }) => {
await page.route(API_URL_TX_INTERNALS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(internalTxsMock.baseResponse),
}));
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
test('base view +@mobile', async({ render, mockApiResponse }) => {
await mockApiResponse('address_internal_txs', internalTxsMock.baseResponse, { pathParams: { hash: ADDRESS_HASH } });
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressInternalTxs/>
</TestApp>,
</Box>,
{ hooksConfig },
);
await expect(component).toHaveScreenshot();
});
ui/address/AddressTokenTransfers.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test as base, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
import * as socketServer from 'playwright/fixtures/socketServer';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect, devices } from 'playwright/lib';
import AddressTokenTransfers from './AddressTokenTransfers';
const CURRENT_ADDRESS = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
const API_URL = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) +
'?token=0x1189a607CEac2f0E14867de4EB15b15C9FFB5859';
const TOKEN_HASH = '0x1189a607CEac2f0E14867de4EB15b15C9FFB5859';
const hooksConfig = {
router: {
query: { hash: CURRENT_ADDRESS, token: '0x1189a607CEac2f0E14867de4EB15b15C9FFB5859' },
query: { hash: CURRENT_ADDRESS, token: TOKEN_HASH },
},
};
const test = base.extend<socketServer.SocketServerFixture>({
createSocket: socketServer.createSocket,
});
// FIXME
// test cases which use socket cannot run in parallel since the socket server always run on the same port
test.describe.configure({ mode: 'serial' });
test('with token filter and pagination', async({ mount, page }) => {
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
}));
const tokenTransfersWithPagination = {
items: [ tokenTransferMock.erc1155A ],
next_page_params: { block_number: 1, index: 1, items_count: 1 },
};
const tokenTransfersWoPagination = {
items: [ tokenTransferMock.erc1155A ],
next_page_params: null,
};
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
test('with token filter and pagination', async({ render, mockApiResponse }) => {
await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
pathParams: { hash: CURRENT_ADDRESS },
queryParams: { token: TOKEN_HASH },
});
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokenTransfers/>
</TestApp>,
</Box>,
{ hooksConfig },
);
await expect(component).toHaveScreenshot();
});
test('with token filter and no pagination', async({ mount, page }) => {
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ] }),
}));
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
test('with token filter and no pagination', async({ render, mockApiResponse }) => {
await mockApiResponse('address_token_transfers', tokenTransfersWoPagination, {
pathParams: { hash: CURRENT_ADDRESS },
queryParams: { token: TOKEN_HASH },
});
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokenTransfers/>
</TestApp>,
</Box>,
{ hooksConfig },
);
await expect(component).toHaveScreenshot();
});
test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('with token filter and pagination', async({ mount, page }) => {
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
}));
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
test('with token filter and pagination', async({ render, mockApiResponse }) => {
await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
pathParams: { hash: CURRENT_ADDRESS },
queryParams: { token: TOKEN_HASH },
});
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokenTransfers/>
</TestApp>,
</Box>,
{ hooksConfig },
);
await expect(component).toHaveScreenshot();
});
test('with token filter and no pagination', async({ mount, page }) => {
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ] }),
}));
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
test('with token filter and no pagination', async({ render, mockApiResponse }) => {
await mockApiResponse('address_token_transfers', tokenTransfersWoPagination, {
pathParams: { hash: CURRENT_ADDRESS },
queryParams: { token: TOKEN_HASH },
});
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokenTransfers/>
</TestApp>,
</Box>,
{ hooksConfig },
);
await expect(component).toHaveScreenshot();
});
});
test.describe('socket', () => {
test('without overload', async({ mount, page, createSocket }) => {
test('without overload', async({ render, mockApiResponse, createSocket, page }) => {
const hooksConfigNoToken = {
router: {
query: { hash: CURRENT_ADDRESS },
},
};
const API_URL_NO_TOKEN = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=';
await page.route(API_URL_NO_TOKEN, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
}));
await mount(
<TestApp withSocket>
<Box h={{ base: '134px', lg: 6 }}/>
await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
pathParams: { hash: CURRENT_ADDRESS },
queryParams: { type: [] },
});
await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokenTransfers/>
</TestApp>,
</Box>,
{ hooksConfig: hooksConfigNoToken },
{ withSocket: true },
);
const socket = await createSocket();
......@@ -137,26 +121,22 @@ test.describe('socket', () => {
expect(itemsCountNew).toBe(4);
});
test('with overload', async({ mount, page, createSocket }) => {
test('with overload', async({ render, mockApiResponse, page, createSocket }) => {
const hooksConfigNoToken = {
router: {
query: { hash: CURRENT_ADDRESS },
},
};
const API_URL_NO_TOKEN = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=';
await page.route(API_URL_NO_TOKEN, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
}));
await mount(
<TestApp withSocket>
<Box h={{ base: '134px', lg: 6 }}/>
await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
pathParams: { hash: CURRENT_ADDRESS },
queryParams: { type: [] },
});
await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokenTransfers overloadCount={ 2 }/>
</TestApp>,
</Box>,
{ hooksConfig: hooksConfigNoToken },
{ withSocket: true },
);
const socket = await createSocket();
......@@ -176,26 +156,23 @@ test.describe('socket', () => {
expect(counter?.startsWith('1 ')).toBe(true);
});
test('without overload, with filters', async({ mount, page, createSocket }) => {
test('without overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
const hooksConfigWithFilter = {
router: {
query: { hash: CURRENT_ADDRESS, type: 'ERC-1155' },
},
};
await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
pathParams: { hash: CURRENT_ADDRESS },
queryParams: { type: 'ERC-1155' },
});
const API_URL_WITH_FILTER = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=ERC-1155';
await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
}));
await mount(
<TestApp withSocket>
<Box h={{ base: '134px', lg: 6 }}/>
await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokenTransfers/>
</TestApp>,
</Box>,
{ hooksConfig: hooksConfigWithFilter },
{ withSocket: true },
);
const socket = await createSocket();
......@@ -212,26 +189,23 @@ test.describe('socket', () => {
expect(itemsCountNew).toBe(3);
});
test('with overload, with filters', async({ mount, page, createSocket }) => {
test('with overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
const hooksConfigWithFilter = {
router: {
query: { hash: CURRENT_ADDRESS, type: 'ERC-1155' },
},
};
await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
pathParams: { hash: CURRENT_ADDRESS },
queryParams: { type: 'ERC-1155' },
});
const API_URL_WITH_FILTER = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=ERC-1155';
await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
}));
await mount(
<TestApp withSocket>
<Box h={{ base: '134px', lg: 6 }}/>
await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokenTransfers overloadCount={ 2 }/>
</TestApp>,
</Box>,
{ hooksConfig: hooksConfigWithFilter },
{ withSocket: true },
);
const socket = await createSocket();
......
ui/address/AddressTokens.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test as base, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import type { AddressTokensResponse } from 'types/api/address';
import * as addressMock from 'mocks/address/address';
import * as tokensMock from 'mocks/address/tokens';
import * as socketServer from 'playwright/fixtures/socketServer';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect, devices } from 'playwright/lib';
import AddressTokens from './AddressTokens';
const ADDRESS_HASH = addressMock.withName.hash;
const API_URL_ADDRESS = buildApiUrl('address', { hash: ADDRESS_HASH });
const API_URL_TOKENS = buildApiUrl('address_tokens', { hash: ADDRESS_HASH });
const API_URL_NFT = buildApiUrl('address_nfts', { hash: ADDRESS_HASH }) + '?type=';
const API_URL_COLLECTIONS = buildApiUrl('address_collections', { hash: ADDRESS_HASH }) + '?type=';
const ADDRESS_HASH = addressMock.validator.hash;
const nextPageParams = {
items_count: 50,
token_name: 'aaa',
token_type: '123',
token_type: 'ERC-20' as const,
value: 1,
fiat_value: '1',
};
const test = base.extend({
page: async({ page }, use) => {
const response20 = {
test.beforeEach(async({ mockApiResponse }) => {
const response20: AddressTokensResponse = {
items: [ tokensMock.erc20a, tokensMock.erc20b, tokensMock.erc20c, tokensMock.erc20d ],
next_page_params: nextPageParams,
};
const response721 = {
const response721: AddressTokensResponse = {
items: [ tokensMock.erc721a, tokensMock.erc721b, tokensMock.erc721c ],
next_page_params: nextPageParams,
};
const response1155 = {
const response1155: AddressTokensResponse = {
items: [ tokensMock.erc1155a, tokensMock.erc1155b ],
next_page_params: nextPageParams,
};
const response404 = {
const response404: AddressTokensResponse = {
items: [ tokensMock.erc404a, tokensMock.erc404b ],
next_page_params: nextPageParams,
};
await page.route(API_URL_ADDRESS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(addressMock.withName),
}));
await page.route(API_URL_TOKENS + '?type=ERC-20', (route) => route.fulfill({
status: 200,
body: JSON.stringify(response20),
}));
await page.route(API_URL_TOKENS + '?type=ERC-721', (route) => route.fulfill({
status: 200,
body: JSON.stringify(response721),
}));
await page.route(API_URL_TOKENS + '?type=ERC-1155', (route) => route.fulfill({
status: 200,
body: JSON.stringify(response1155),
}));
await page.route(API_URL_TOKENS + '?type=ERC-404', (route) => route.fulfill({
status: 200,
body: JSON.stringify(response404),
}));
await page.route(API_URL_NFT, (route) => route.fulfill({
status: 200,
body: JSON.stringify(tokensMock.nfts),
}));
await page.route(API_URL_COLLECTIONS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(tokensMock.collections),
}));
use(page);
},
await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH } });
await mockApiResponse('address_tokens', response20, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' } });
await mockApiResponse('address_tokens', response721, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' } });
await mockApiResponse('address_tokens', response1155, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' } });
await mockApiResponse('address_tokens', response404, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' } });
await mockApiResponse('address_nfts', tokensMock.nfts, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: [] } });
await mockApiResponse('address_collections', tokensMock.collections, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: [] } });
});
test('erc20 +@dark-mode', async({ mount }) => {
test('erc20 +@dark-mode', async({ render }) => {
const hooksConfig = {
router: {
query: { hash: ADDRESS_HASH, tab: 'tokens_erc20' },
......@@ -83,18 +55,17 @@ test('erc20 +@dark-mode', async({ mount }) => {
},
};
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokens/>
</TestApp>,
</Box>,
{ hooksConfig },
);
await expect(component).toHaveScreenshot();
});
test('collections +@dark-mode', async({ mount }) => {
test('collections +@dark-mode', async({ render }) => {
const hooksConfig = {
router: {
query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
......@@ -102,18 +73,17 @@ test('collections +@dark-mode', async({ mount }) => {
},
};
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokens/>
</TestApp>,
</Box>,
{ hooksConfig },
);
await expect(component).toHaveScreenshot();
});
test('nfts +@dark-mode', async({ mount }) => {
test('nfts +@dark-mode', async({ render }) => {
const hooksConfig = {
router: {
query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
......@@ -121,11 +91,10 @@ test('nfts +@dark-mode', async({ mount }) => {
},
};
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokens/>
</TestApp>,
</Box>,
{ hooksConfig },
);
......@@ -137,7 +106,7 @@ test('nfts +@dark-mode', async({ mount }) => {
test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('erc20', async({ mount }) => {
test('erc20', async({ render }) => {
const hooksConfig = {
router: {
query: { hash: ADDRESS_HASH, tab: 'tokens_erc20' },
......@@ -145,18 +114,17 @@ test.describe('mobile', () => {
},
};
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokens/>
</TestApp>,
</Box>,
{ hooksConfig },
);
await expect(component).toHaveScreenshot();
});
test('nfts', async({ mount }) => {
test('nfts', async({ render }) => {
const hooksConfig = {
router: {
query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
......@@ -164,11 +132,10 @@ test.describe('mobile', () => {
},
};
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokens/>
</TestApp>,
</Box>,
{ hooksConfig },
);
......@@ -177,7 +144,7 @@ test.describe('mobile', () => {
await expect(component).toHaveScreenshot();
});
test('collections', async({ mount }) => {
test('collections', async({ render }) => {
const hooksConfig = {
router: {
query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
......@@ -185,11 +152,10 @@ test.describe('mobile', () => {
},
};
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokens/>
</TestApp>,
</Box>,
{ hooksConfig },
);
......@@ -197,13 +163,10 @@ test.describe('mobile', () => {
});
});
base.describe('update balances via socket', () => {
const test = base.extend<socketServer.SocketServerFixture>({
createSocket: socketServer.createSocket,
});
test.describe('update balances via socket', () => {
test.describe.configure({ mode: 'serial' });
test('', async({ mount, page, createSocket }) => {
test('', async({ render, page, createSocket, mockApiResponse }) => {
test.slow();
const hooksConfig = {
......@@ -230,41 +193,23 @@ base.describe('update balances via socket', () => {
next_page_params: null,
};
await page.route(API_URL_ADDRESS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(addressMock.validator),
}));
await page.route(API_URL_TOKENS + '?type=ERC-20', (route) => route.fulfill({
status: 200,
body: JSON.stringify(response20),
}));
await page.route(API_URL_TOKENS + '?type=ERC-721', (route) => route.fulfill({
status: 200,
body: JSON.stringify(response721),
}));
await page.route(API_URL_TOKENS + '?type=ERC-1155', (route) => route.fulfill({
status: 200,
body: JSON.stringify(response1155),
}));
await page.route(API_URL_TOKENS + '?type=ERC-404', (route) => route.fulfill({
status: 200,
body: JSON.stringify(response404),
}));
const component = await mount(
<TestApp withSocket>
<Box>
<Box h={{ base: '134px', lg: 6 }}/>
const erc20ApiUrl = await mockApiResponse('address_tokens', response20, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' } });
const erc721ApiUrl = await mockApiResponse('address_tokens', response721, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' } });
const erc1155ApiUrl = await mockApiResponse('address_tokens', response1155, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' } });
const erc404ApiUrl = await mockApiResponse('address_tokens', response404, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' } });
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTokens/>
</Box>
</TestApp>,
</Box>,
{ hooksConfig },
{ withSocket: true },
);
await page.waitForResponse(API_URL_TOKENS + '?type=ERC-20');
await page.waitForResponse(API_URL_TOKENS + '?type=ERC-721');
await page.waitForResponse(API_URL_TOKENS + '?type=ERC-1155');
await page.waitForResponse(API_URL_TOKENS + '?type=ERC-404');
await page.waitForResponse(erc20ApiUrl);
await page.waitForResponse(erc721ApiUrl);
await page.waitForResponse(erc1155ApiUrl);
await page.waitForResponse(erc404ApiUrl);
await expect(component).toHaveScreenshot();
......
ui/address/AddressTxs.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test as base, expect } from '@playwright/experimental-ct-react';
import type { Locator } from '@playwright/test';
import React from 'react';
import * as txMock from 'mocks/txs/tx';
import * as socketServer from 'playwright/fixtures/socketServer';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { test, expect } from 'playwright/lib';
import * as pwConfig from 'playwright/utils/config';
import AddressTxs from './AddressTxs';
const CURRENT_ADDRESS = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
const API_URL = buildApiUrl('address_txs', { hash: CURRENT_ADDRESS });
const hooksConfig = {
router: {
query: { hash: CURRENT_ADDRESS },
},
};
const DEFAULT_PAGINATION = { block_number: 1, index: 1, items_count: 1 };
base.describe('base view', () => {
test.describe('base view', () => {
let component: Locator;
base.beforeEach(async({ page, mount }) => {
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [
txMock.base,
test.beforeEach(async({ render, mockApiResponse }) => {
await mockApiResponse(
'address_txs',
{
...txMock.base,
hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3194',
items: [
txMock.base,
{ ...txMock.base, hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3194' },
],
next_page_params: DEFAULT_PAGINATION,
},
], next_page_params: { block: 1 } }),
}));
component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
{ pathParams: { hash: CURRENT_ADDRESS } },
);
component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTxs/>
</TestApp>,
</Box>,
{ hooksConfig },
);
});
base('+@mobile', async() => {
test('+@mobile', async() => {
await expect(component).toHaveScreenshot();
});
base.describe('screen xl', () => {
base.use({ viewport: configs.viewport.xl });
test.describe('screen xl', () => {
test.use({ viewport: pwConfig.viewport.xl });
base('', async() => {
base.slow();
test('', async() => {
test.slow();
await expect(component).toHaveScreenshot();
});
});
});
base.describe('socket', () => {
const test = base.extend<socketServer.SocketServerFixture>({
createSocket: socketServer.createSocket,
});
test.describe('socket', () => {
// FIXME
// test cases which use socket cannot run in parallel since the socket server always run on the same port
test.describe.configure({ mode: 'serial' });
test('without overload', async({ mount, page, createSocket }) => {
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
}));
test('without overload', async({ render, mockApiResponse, page, createSocket }) => {
await mockApiResponse(
'address_txs',
{ items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
{ pathParams: { hash: CURRENT_ADDRESS } },
);
await mount(
<TestApp withSocket>
<Box h={{ base: '134px', lg: 6 }}/>
await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTxs/>
</TestApp>,
</Box>,
{ hooksConfig },
{ withSocket: true },
);
const socket = await createSocket();
......@@ -95,18 +89,19 @@ base.describe('socket', () => {
expect(itemsCountNew).toBe(4);
});
test('with update', async({ mount, page, createSocket }) => {
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ txMock.pending ], next_page_params: { block: 1 } }),
}));
test('with update', async({ render, mockApiResponse, page, createSocket }) => {
await mockApiResponse(
'address_txs',
{ items: [ txMock.pending ], next_page_params: DEFAULT_PAGINATION },
{ pathParams: { hash: CURRENT_ADDRESS } },
);
await mount(
<TestApp withSocket>
<Box h={{ base: '134px', lg: 6 }}/>
await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTxs/>
</TestApp>,
</Box>,
{ hooksConfig },
{ withSocket: true },
);
const socket = await createSocket();
......@@ -123,18 +118,19 @@ base.describe('socket', () => {
expect(itemsCountNew).toBe(3);
});
test('with overload', async({ mount, page, createSocket }) => {
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
}));
test('with overload', async({ render, mockApiResponse, page, createSocket }) => {
await mockApiResponse(
'address_txs',
{ items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
{ pathParams: { hash: CURRENT_ADDRESS } },
);
await mount(
<TestApp withSocket>
<Box h={{ base: '134px', lg: 6 }}/>
await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTxs overloadCount={ 2 }/>
</TestApp>,
</Box>,
{ hooksConfig },
{ withSocket: true },
);
const socket = await createSocket();
......@@ -154,26 +150,25 @@ base.describe('socket', () => {
expect(counter?.startsWith('2 ')).toBe(true);
});
test('without overload, with filters', async({ mount, page, createSocket }) => {
test('without overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
const hooksConfigWithFilter = {
router: {
query: { hash: CURRENT_ADDRESS, filter: 'from' },
},
};
const API_URL_WITH_FILTER = buildApiUrl('address_txs', { hash: CURRENT_ADDRESS }) + '?filter=from';
await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
}));
await mockApiResponse(
'address_txs',
{ items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
{ pathParams: { hash: CURRENT_ADDRESS }, queryParams: { filter: 'from' } },
);
await mount(
<TestApp withSocket>
<Box h={{ base: '134px', lg: 6 }}/>
await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTxs/>
</TestApp>,
</Box>,
{ hooksConfig: hooksConfigWithFilter },
{ withSocket: true },
);
const socket = await createSocket();
......@@ -190,26 +185,25 @@ base.describe('socket', () => {
expect(itemsCountNew).toBe(3);
});
test('with overload, with filters', async({ mount, page, createSocket }) => {
test('with overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
const hooksConfigWithFilter = {
router: {
query: { hash: CURRENT_ADDRESS, filter: 'from' },
},
};
const API_URL_WITH_FILTER = buildApiUrl('address_txs', { hash: CURRENT_ADDRESS }) + '?filter=from';
await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
}));
await mockApiResponse(
'address_txs',
{ items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
{ pathParams: { hash: CURRENT_ADDRESS }, queryParams: { filter: 'from' } },
);
await mount(
<TestApp withSocket>
<Box h={{ base: '134px', lg: 6 }}/>
await render(
<Box pt={{ base: '134px', lg: 6 }}>
<AddressTxs overloadCount={ 2 }/>
</TestApp>,
</Box>,
{ hooksConfig: hooksConfigWithFilter },
{ withSocket: true },
);
const socket = await createSocket();
......
ui/address/SolidityscanReport.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as solidityscanReportMock from 'mocks/contract/solidityscanReport';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import SolidityscanReport from './SolidityscanReport';
const addressHash = 'hash';
const REPORT_API_URL = buildApiUrl('contract_solidityscan_report', { hash: addressHash });
test('average report +@dark-mode +@mobile', async({ mount, page }) => {
await page.route(REPORT_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(solidityscanReportMock.solidityscanReportAverage),
}));
const component = await mount(
<TestApp>
<SolidityscanReport hash={ addressHash }/>
</TestApp>,
);
test('average report +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
await mockApiResponse(
'contract_solidityscan_report',
solidityscanReportMock.solidityscanReportAverage,
{ pathParams: { hash: addressHash } },
);
const component = await render(<SolidityscanReport hash={ addressHash }/>);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
await component.getByLabel('SolidityScan score').click();
......@@ -29,16 +21,15 @@ test('average report +@dark-mode +@mobile', async({ mount, page }) => {
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 500 } });
});
test('great report', async({ mount, page }) => {
await page.route(REPORT_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(solidityscanReportMock.solidityscanReportGreat),
}));
test('great report', async({ render, mockApiResponse, page }) => {
await mockApiResponse(
'contract_solidityscan_report',
solidityscanReportMock.solidityscanReportGreat,
{ pathParams: { hash: addressHash } },
);
const component = await mount(
<TestApp>
<SolidityscanReport hash={ addressHash }/>
</TestApp>,
const component = await render(
<SolidityscanReport hash={ addressHash }/>,
);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
......@@ -48,16 +39,15 @@ test('great report', async({ mount, page }) => {
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 500 } });
});
test('low report', async({ mount, page }) => {
await page.route(REPORT_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(solidityscanReportMock.solidityscanReportLow),
}));
test('low report', async({ render, mockApiResponse, page }) => {
await mockApiResponse(
'contract_solidityscan_report',
solidityscanReportMock.solidityscanReportLow,
{ pathParams: { hash: addressHash } },
);
const component = await mount(
<TestApp>
<SolidityscanReport hash={ addressHash }/>
</TestApp>,
const component = await render(
<SolidityscanReport hash={ addressHash }/>,
);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
......
ui/address/contract/ABI/form/ContractMethodForm.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import type { ContractAbiItem } from '../types';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import ContractMethodForm from './ContractMethodForm';
......@@ -97,16 +96,14 @@ const data: ContractAbiItem = {
constant: false,
};
test('base view +@mobile +@dark-mode', async({ mount }) => {
test('base view +@mobile +@dark-mode', async({ render }) => {
const component = await mount(
<TestApp>
const component = await render(
<ContractMethodForm
data={ data }
onSubmit={ onSubmit }
methodType="write"
/>
</TestApp>,
/>,
);
// fill top level fields
......
ui/address/contract/ContractRead.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import buildUrl from 'lib/api/buildUrl';
import * as contractMethodsMock from 'mocks/contract/methods';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import ContractRead from './ContractRead';
const addressHash = 'hash';
const CONTRACT_READ_METHODS_API_URL = buildApiUrl('contract_methods_read', { hash: addressHash }) + '?is_custom_abi=false';
const CONTRACT_QUERY_METHOD_API_URL = buildApiUrl('contract_method_query', { hash: addressHash }) + '?is_custom_abi=false';
const hooksConfig = {
router: {
query: { hash: addressHash },
},
};
test('base view +@mobile +@dark-mode', async({ mount, page }) => {
await page.route(CONTRACT_READ_METHODS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(contractMethodsMock.read),
}));
test('base view +@mobile +@dark-mode', async({ render, mockApiResponse, page }) => {
await mockApiResponse(
'contract_methods_read',
contractMethodsMock.read,
{ pathParams: { hash: addressHash }, queryParams: { is_custom_abi: false } },
);
const CONTRACT_QUERY_METHOD_API_URL = buildUrl('contract_method_query', { hash: addressHash }, { is_custom_abi: false });
await page.route(CONTRACT_QUERY_METHOD_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(contractMethodsMock.readResultSuccess),
}));
const component = await mount(
<TestApp>
<ContractRead/>
</TestApp>,
{ hooksConfig },
);
const component = await render(<ContractRead/>, { hooksConfig });
await component.getByText(/expand all/i).click();
......
ui/address/contract/ContractWrite.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as contractMethodsMock from 'mocks/contract/methods';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import ContractWrite from './ContractWrite';
const addressHash = 'hash';
const CONTRACT_WRITE_METHODS_API_URL = buildApiUrl('contract_methods_write', { hash: addressHash }) + '?is_custom_abi=false';
const hooksConfig = {
router: {
query: { hash: addressHash },
},
};
test('base view +@mobile', async({ mount, page }) => {
await page.route(CONTRACT_WRITE_METHODS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(contractMethodsMock.write),
}));
const component = await mount(
<TestApp>
<ContractWrite/>
</TestApp>,
{ hooksConfig },
test('base view +@mobile', async({ render, mockApiResponse }) => {
await mockApiResponse(
'contract_methods_write',
contractMethodsMock.write,
{ pathParams: { hash: addressHash }, queryParams: { is_custom_abi: false } },
);
const component = await render(<ContractWrite/>, { hooksConfig });
await component.getByText(/expand all/i).click();
await expect(component).toHaveScreenshot();
});
ui/address/contract/contractSubmitAuditForm/ContractSubmitAuditForm.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import noop from 'lodash/noop';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import ContractSubmitAuditForm from './ContractSubmitAuditForm';
test('base view', async({ mount }) => {
const component = await mount(
<TestApp>
{ /* eslint-disable-next-line react/jsx-no-bind */ }
<ContractSubmitAuditForm address="hash" onSuccess={ () => {} }/>
</TestApp>,
);
test('base view', async({ render }) => {
const component = await render(<ContractSubmitAuditForm address="hash" onSuccess={ noop }/>);
await expect(component).toHaveScreenshot();
});
ui/address/details/AddressQrCode.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as addressMock from 'mocks/address/address';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import AddressQrCode from './AddressQrCode';
test('default view +@mobile +@dark-mode', async({ mount, page }) => {
await mount(
<TestApp>
<AddressQrCode address={ addressMock.withoutName }/>
</TestApp>,
);
test('default view +@mobile +@dark-mode', async({ render, page }) => {
await render(<AddressQrCode address={ addressMock.withoutName }/>);
await page.getByRole('button', { name: /qr code/i }).click();
await expect(page).toHaveScreenshot();
});
ui/address/ensDomains/AddressEnsDomains.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import config from 'configs/app';
import * as ensDomainMock from 'mocks/ens/domain';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import AddressEnsDomains from './AddressEnsDomains';
const ADDRESS_HASH = ensDomainMock.ensDomainA.owner?.hash ?? '';
const ADDRESSES_LOOKUP_API_URL = buildApiUrl('addresses_lookup', { chainId: config.chain.id }) +
`?address=${ ADDRESS_HASH }&resolved_to=true&owned_by=true&only_active=true&order=ASC`;
const ADDRESS_HASH = ensDomainMock.ensDomainA.owner?.hash as string;
test('base view', async({ mount, page }) => {
await page.route(ADDRESSES_LOOKUP_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({
test('base view', async({ render, mockApiResponse, page }) => {
await mockApiResponse(
'addresses_lookup',
{
items: [
ensDomainMock.ensDomainA,
ensDomainMock.ensDomainB,
ensDomainMock.ensDomainC,
ensDomainMock.ensDomainD,
],
}),
}));
const component = await mount(
<TestApp>
<AddressEnsDomains addressHash={ ADDRESS_HASH } mainDomainName={ ensDomainMock.ensDomainA.name }/>
</TestApp>,
next_page_params: null,
},
{
pathParams: { chainId: config.chain.id },
queryParams: {
address: ADDRESS_HASH,
resolved_to: true,
owned_by: true,
only_active: true,
order: 'ASC',
},
},
);
const component = await render(<AddressEnsDomains addressHash={ ADDRESS_HASH } mainDomainName={ ensDomainMock.ensDomainA.name }/>);
await component.getByText('4').click();
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 550, height: 350 } });
});
ui/address/tokenSelect/TokenSelect.pw.tsx
View file @ 1b977de2
import { Flex } from '@chakra-ui/react';
import { test as base, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import * as addressMock from 'mocks/address/address';
import * as tokensMock from 'mocks/address/tokens';
import { tokenInfoERC20a } from 'mocks/tokens/tokenInfo';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect, devices } from 'playwright/lib';
import MockAddressPage from 'ui/address/testUtils/MockAddressPage';
import TokenSelect from './TokenSelect';
const ASSET_URL = tokenInfoERC20a.icon_url as string;
const TOKENS_ERC20_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-20';
const TOKENS_ERC721_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-721';
const TOKENS_ER1155_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-1155';
const TOKENS_ER404_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-404';
const ADDRESS_API_URL = buildApiUrl('address', { hash: '1' });
const ADDRESS_HASH = addressMock.hash;
const hooksConfig = {
router: {
query: { hash: '1' },
query: { hash: ADDRESS_HASH },
},
};
const CLIPPING_AREA = { x: 0, y: 0, width: 360, height: 500 };
const test = base.extend({
page: async({ page }, use) => {
await page.route(ASSET_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
await page.route(ADDRESS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ hash: '1' }),
}), { times: 1 });
await page.route(TOKENS_ERC20_API_URL, async(route) => route.fulfill({
status: 200,
body: JSON.stringify(tokensMock.erc20List),
}), { times: 1 });
await page.route(TOKENS_ERC721_API_URL, async(route) => route.fulfill({
status: 200,
body: JSON.stringify(tokensMock.erc721List),
}), { times: 1 });
await page.route(TOKENS_ER1155_API_URL, async(route) => route.fulfill({
status: 200,
body: JSON.stringify(tokensMock.erc1155List),
}), { times: 1 });
await page.route(TOKENS_ER404_API_URL, async(route) => route.fulfill({
status: 200,
body: JSON.stringify(tokensMock.erc404List),
}), { times: 1 });
use(page);
},
test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
await mockAssetResponse(ASSET_URL, './playwright/mocks/image_s.jpg');
await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH }, times: 1 });
await mockApiResponse('address_tokens', tokensMock.erc20List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' }, times: 1 });
await mockApiResponse('address_tokens', tokensMock.erc721List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' }, times: 1 });
await mockApiResponse('address_tokens', tokensMock.erc1155List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' }, times: 1 });
await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' }, times: 1 });
});
test('base view +@dark-mode', async({ mount, page }) => {
await mount(
<TestApp>
test('base view +@dark-mode', async({ render, page }) => {
await render(
<MockAddressPage>
<Flex>
<TokenSelect/>
</Flex>
</MockAddressPage>
</TestApp>,
</MockAddressPage>,
{ hooksConfig },
);
......@@ -81,15 +50,13 @@ test('base view +@dark-mode', async({ mount, page }) => {
test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view', async({ mount, page }) => {
await mount(
<TestApp>
test('base view', async({ render, page }) => {
await render(
<MockAddressPage>
<Flex>
<TokenSelect/>
</Flex>
</MockAddressPage>
</TestApp>,
</MockAddressPage>,
{ hooksConfig },
);
......@@ -100,15 +67,13 @@ test.describe('mobile', () => {
});
});
test('sort', async({ mount, page }) => {
await mount(
<TestApp>
test('sort', async({ render, page }) => {
await render(
<MockAddressPage>
<Flex>
<TokenSelect/>
</Flex>
</MockAddressPage>
</TestApp>,
</MockAddressPage>,
{ hooksConfig },
);
await page.getByRole('button', { name: /select/i }).click();
......@@ -123,15 +88,13 @@ test('sort', async({ mount, page }) => {
await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
});
test('filter', async({ mount, page }) => {
await mount(
<TestApp>
test('filter', async({ render, page }) => {
await render(
<MockAddressPage>
<Flex>
<TokenSelect/>
</Flex>
</MockAddressPage>
</TestApp>,
</MockAddressPage>,
{ hooksConfig },
);
await page.getByRole('button', { name: /select/i }).click();
......@@ -140,42 +103,24 @@ test('filter', async({ mount, page }) => {
await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
});
base('long values', async({ mount, page }) => {
await page.route(ASSET_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
await page.route(ADDRESS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ hash: '1' }),
}), { times: 1 });
await page.route(TOKENS_ERC20_API_URL, async(route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ tokensMock.erc20LongSymbol, tokensMock.erc20BigAmount ] }),
}), { times: 1 });
await page.route(TOKENS_ERC721_API_URL, async(route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ tokensMock.erc721LongSymbol ] }),
}), { times: 1 });
await page.route(TOKENS_ER1155_API_URL, async(route) => route.fulfill({
status: 200,
body: JSON.stringify({ items: [ tokensMock.erc1155LongId ] }),
}), { times: 1 });
await page.route(TOKENS_ER404_API_URL, async(route) => route.fulfill({
status: 200,
body: JSON.stringify(tokensMock.erc404List),
}), { times: 1 });
await mount(
<TestApp>
test('long values', async({ render, page, mockApiResponse }) => {
await mockApiResponse('address_tokens', {
items: [ tokensMock.erc20LongSymbol, tokensMock.erc20BigAmount ], next_page_params: null,
}, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' }, times: 1 });
await mockApiResponse('address_tokens', {
items: [ tokensMock.erc721LongSymbol ], next_page_params: null,
}, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' }, times: 1 });
await mockApiResponse('address_tokens', {
items: [ tokensMock.erc1155LongId ], next_page_params: null,
}, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' }, times: 1 });
await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' }, times: 1 });
await render(
<MockAddressPage>
<Flex>
<TokenSelect/>
</Flex>
</MockAddressPage>
</TestApp>,
</MockAddressPage>,
{ hooksConfig },
);
await page.getByRole('button', { name: /select/i }).click();
......
ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import buildUrl from 'lib/api/buildUrl';
import * as mocks from 'mocks/account/verifiedAddresses';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import AddressVerificationStepAddress from './AddressVerificationStepAddress';
const CHECK_ADDRESS_URL = buildApiUrl('address_verification', { chainId: '1', type: ':prepare' });
const CHECK_ADDRESS_URL = buildUrl('address_verification', { chainId: '1', type: ':prepare' });
test('base view', async({ mount, page }) => {
test('base view', async({ render, page }) => {
await page.route(CHECK_ADDRESS_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(mocks.ADDRESS_CHECK_RESPONSE.SUCCESS),
}));
const props = {
onContinue: () => {},
defaultAddress: mocks.VERIFIED_ADDRESS.NEW_ITEM.contractAddress,
};
await mount(
<TestApp>
<AddressVerificationStepAddress { ...props }/>
</TestApp>,
);
await render(<AddressVerificationStepAddress { ...props }/>);
await expect(page).toHaveScreenshot();
});
test('SOURCE_CODE_NOT_VERIFIED_ERROR view +@mobile', async({ mount, page }) => {
test('SOURCE_CODE_NOT_VERIFIED_ERROR view +@mobile', async({ render, page }) => {
await page.route(CHECK_ADDRESS_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(mocks.ADDRESS_CHECK_RESPONSE.SOURCE_CODE_NOT_VERIFIED_ERROR),
......@@ -39,11 +32,7 @@ test('SOURCE_CODE_NOT_VERIFIED_ERROR view +@mobile', async({ mount, page }) => {
onContinue: () => {},
};
await mount(
<TestApp>
<AddressVerificationStepAddress { ...props }/>
</TestApp>,
);
await render(<AddressVerificationStepAddress { ...props }/>);
const addressInput = page.getByLabel(/smart contract address/i);
await addressInput.focus();
......
ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import buildUrl from 'lib/api/buildUrl';
import * as mocks from 'mocks/account/verifiedAddresses';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import AddressVerificationStepSignature from './AddressVerificationStepSignature';
const VERIFY_ADDRESS_URL = buildApiUrl('address_verification', { chainId: '1', type: ':verify' });
const VERIFY_ADDRESS_URL = buildUrl('address_verification', { chainId: '1', type: ':verify' });
test('base view', async({ mount, page }) => {
test('base view', async({ render, page }) => {
await page.route(VERIFY_ADDRESS_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(mocks.ADDRESS_VERIFY_RESPONSE.SUCCESS),
......@@ -22,16 +21,11 @@ test('base view', async({ mount, page }) => {
signingMessage: mocks.ADDRESS_CHECK_RESPONSE.SUCCESS.result.signingMessage,
};
await mount(
<TestApp>
<AddressVerificationStepSignature { ...props }/>
</TestApp>,
);
await render(<AddressVerificationStepSignature { ...props }/>);
await expect(page).toHaveScreenshot();
});
test('INVALID_SIGNER_ERROR view +@mobile', async({ mount, page }) => {
test('INVALID_SIGNER_ERROR view +@mobile', async({ render, page }) => {
await page.route(VERIFY_ADDRESS_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(mocks.ADDRESS_VERIFY_RESPONSE.INVALID_SIGNER_ERROR),
......@@ -44,11 +38,7 @@ test('INVALID_SIGNER_ERROR view +@mobile', async({ mount, page }) => {
...mocks.ADDRESS_CHECK_RESPONSE.SUCCESS.result,
};
await mount(
<TestApp>
<AddressVerificationStepSignature { ...props }/>
</TestApp>,
);
await render(<AddressVerificationStepSignature { ...props }/>);
const signatureInput = page.getByLabel(/signature hash/i);
await signatureInput.fill(mocks.SIGNATURE);
......
ui/blob/BlobData.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import BlobData from './BlobData';
import imageBlobWithZeroesBytes from './image_with_zeroes.blob';
test.use({ viewport: { width: 500, height: 300 } });
test('text', async({ mount }) => {
test('text', async({ render }) => {
// eslint-disable-next-line max-len
const data = '0xE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A280E2A3A4E2A1B6E2A0BFE2A0BFE2A0B7E2A3B6E2A384E2A080E2A080E2A080E2A080E2A0800AE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3B0E2A1BFE2A081E2A080E2A080E2A280E2A380E2A180E2A099E2A3B7E2A180E2A080E2A080E2A0800AE2A080E2A080E2A080E2A180E2A080E2A080E2A080E2A080E2A080E2A2A0E2A3BFE2A081E2A080E2A080E2A080E2A098E2A0BFE2A083E2A080E2A2B8E2A3BFE2A3BFE2A3BFE2A3BF0AE2A080E2A3A0E2A1BFE2A09BE2A2B7E2A3A6E2A180E2A080E2A080E2A088E2A3BFE2A184E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3B8E2A3BFE2A3BFE2A3BFE2A09F0AE2A2B0E2A1BFE2A081E2A080E2A080E2A099E2A2BFE2A3A6E2A3A4E2A3A4E2A3BCE2A3BFE2A384E2A080E2A080E2A080E2A080E2A080E2A2B4E2A19FE2A09BE2A08BE2A081E2A0800AE2A3BFE2A087E2A080E2A080E2A080E2A080E2A080E2A089E2A089E2A089E2A089E2A089E2A081E2A080E2A080E2A080E2A080E2A080E2A088E2A3BFE2A180E2A080E2A080E2A0800AE2A3BFE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A2B9E2A187E2A080E2A080E2A0800AE2A3BFE2A186E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3BCE2A187E2A080E2A080E2A0800AE2A0B8E2A3B7E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A2A0E2A1BFE2A080E2A080E2A080E2A0800AE2A080E2A0B9E2A3B7E2A3A4E2A380E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A380E2A3B0E2A1BFE2A081E2A080E2A080E2A080E2A0800AE2A080E2A080E2A080E2A089E2A099E2A09BE2A0BFE2A0B6E2A3B6E2A3B6E2A3B6E2A3B6E2A3B6E2A0B6E2A0BFE2A09FE2A09BE2A089E2A080E2A080E2A080E2A080E2A080E2A080';
const component = await mount(
<TestApp>
<BlobData hash="0x01" data={ data }/>
</TestApp>,
);
const component = await render(<BlobData hash="0x01" data={ data }/>);
await expect(component).toHaveScreenshot();
await component.locator('select').selectOption('UTF-8');
await expect(component).toHaveScreenshot();
});
test('image', async({ mount }) => {
test('image', async({ render }) => {
// eslint-disable-next-line max-len
const data = '0x89504E470D0A1A0A0000000D494844520000003C0000003C0403000000C8D2C4410000000467414D410000B18F0BFC6105000000017352474200AECE1CE900000027504C54454C69712B6CB02A6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB0F4205A540000000C74524E5300ED2F788CD91B99475C09B969CFA99D0000004F7A5458745261772070726F66696C65207479706520697074630000789CE3CA2C2849E6520003230B2E630B1323134B9314031320448034C3640323B35420CBD8D4C8C4CCC41CC407CB8048A04A2E0028950EE32A226D1F0000000970485973000084DF000084DF0195C81C33000000F24944415438CB636000018E983367CE482780D90CDA40F6991D0C4820152472A60ACCE6DA03629F4E40929E03961602B39964C09C0624691B24690E88F48461215D03160903B3D962C01C07842C2758C341A80643B0B40484C3646C6C5C78E6E016171723A8E215262EEE31670E161B1B7731304C05AB155EC08002C0D172E6F80206884DBB50651938CF4003FE0CBA4390E3C56064482F53525252C329CD562A2828283A0197340B22AAB0494332C311FCD2C747A547A58996C69998D8F12745B68DA0846C85331B2CEAE8E8681A81D91F8B348C4605D0527B02A4283FA88026CD05163EAAC0900ED21EC9800EC0C2110C002BBA9FE999B920330000000049454E44AE426082';
const component = await mount(
<TestApp>
<BlobData hash="0x01" data={ data }/>
</TestApp>,
);
const component = await render(<BlobData hash="0x01" data={ data }/>);
await expect(component).toHaveScreenshot();
await component.locator('select').selectOption('Base64');
await expect(component).toHaveScreenshot();
});
test('image blob with zeroes bytes', async({ mount }) => {
const component = await mount(
<TestApp>
<BlobData hash="0x01" data={ imageBlobWithZeroesBytes }/>
</TestApp>,
);
test('image blob with zeroes bytes', async({ render }) => {
const component = await render(<BlobData hash="0x01" data={ imageBlobWithZeroesBytes }/>);
await expect(component).toHaveScreenshot();
});
ui/contractVerification/ContractVerificationForm.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import type { SmartContractVerificationConfig } from 'types/api/contract';
import * as socketServer from 'playwright/fixtures/socketServer';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import ContractVerificationForm from './ContractVerificationForm';
......@@ -72,13 +71,8 @@ const formConfig: SmartContractVerificationConfig = {
},
};
test('flatten source code method +@dark-mode +@mobile', async({ mount, page }) => {
const component = await mount(
<TestApp>
<ContractVerificationForm config={ formConfig } hash={ hash }/>
</TestApp>,
{ hooksConfig },
);
test('flatten source code method +@dark-mode +@mobile', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select license
await component.getByLabel(/contract license/i).focus();
......@@ -96,13 +90,8 @@ test('flatten source code method +@dark-mode +@mobile', async({ mount, page }) =
await expect(component).toHaveScreenshot();
});
test('standard input json method', async({ mount, page }) => {
const component = await mount(
<TestApp>
<ContractVerificationForm config={ formConfig } hash={ hash }/>
</TestApp>,
{ hooksConfig },
);
test('standard input json method', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select method
await component.getByLabel(/verification method/i).focus();
......@@ -113,17 +102,13 @@ test('standard input json method', async({ mount, page }) => {
});
test.describe('sourcify', () => {
const testWithSocket = test.extend<socketServer.SocketServerFixture>({
createSocket: socketServer.createSocket,
});
testWithSocket.describe.configure({ mode: 'serial', timeout: 20_000 });
test.describe.configure({ mode: 'serial', timeout: 20_000 });
testWithSocket('with multiple contracts', async({ mount, page, createSocket }) => {
const component = await mount(
<TestApp withSocket>
<ContractVerificationForm config={ formConfig } hash={ hash }/>
</TestApp>,
test('with multiple contracts', async({ render, page, createSocket }) => {
const component = await render(
<ContractVerificationForm config={ formConfig } hash={ hash }/>,
{ hooksConfig },
{ withSocket: true },
);
// select method
......@@ -163,13 +148,8 @@ test.describe('sourcify', () => {
});
});
test('multi-part files method', async({ mount, page }) => {
const component = await mount(
<TestApp>
<ContractVerificationForm config={ formConfig } hash={ hash }/>
</TestApp>,
{ hooksConfig },
);
test('multi-part files method', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select method
await component.getByLabel(/verification method/i).focus();
......@@ -179,13 +159,8 @@ test('multi-part files method', async({ mount, page }) => {
await expect(component).toHaveScreenshot();
});
test('vyper contract method', async({ mount, page }) => {
const component = await mount(
<TestApp>
<ContractVerificationForm config={ formConfig } hash={ hash }/>
</TestApp>,
{ hooksConfig },
);
test('vyper contract method', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select method
await component.getByLabel(/verification method/i).focus();
......@@ -195,13 +170,8 @@ test('vyper contract method', async({ mount, page }) => {
await expect(component).toHaveScreenshot();
});
test('vyper multi-part method', async({ mount, page }) => {
const component = await mount(
<TestApp>
<ContractVerificationForm config={ formConfig } hash={ hash }/>
</TestApp>,
{ hooksConfig },
);
test('vyper multi-part method', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select method
await component.getByLabel(/verification method/i).focus();
......@@ -211,13 +181,8 @@ test('vyper multi-part method', async({ mount, page }) => {
await expect(component).toHaveScreenshot();
});
test('vyper vyper-standard-input method', async({ mount, page }) => {
const component = await mount(
<TestApp>
<ContractVerificationForm config={ formConfig } hash={ hash }/>
</TestApp>,
{ hooksConfig },
);
test('vyper vyper-standard-input method', async({ render, page }) => {
const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
// select method
await component.getByLabel(/verification method/i).focus();
......
ui/gasTracker/GasTrackerPriceSnippet.pw.tsx
View file @ 1b977de2
import React from 'react';
import type { GasPriceInfo } from 'types/api/stats';
import * as statsMock from 'mocks/stats/index';
import { test, expect } from 'playwright/lib';
import * as configs from 'playwright/utils/configs';
import * as pwConfig from 'playwright/utils/config';
import GasTrackerPriceSnippet from './GasTrackerPriceSnippet';
test.use({ viewport: configs.viewport.md });
test.use({ viewport: pwConfig.viewport.md });
const data = statsMock.base.gas_prices.fast;
const data = statsMock.base.gas_prices?.fast as GasPriceInfo;
const clip = { x: 0, y: 0, width: 334, height: 204 };
test('with usd as primary unit +@dark-mode', async({ render, page }) => {
......
ui/home/LatestTxs.pw.tsx
View file @ 1b977de2
import { test as base, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import * as txMock from 'mocks/txs/tx';
import * as socketServer from 'playwright/fixtures/socketServer';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test as base, expect, devices } from 'playwright/lib';
import LatestTxs from './LatestTxs';
......@@ -14,44 +12,28 @@ export const test = base.extend<socketServer.SocketServerFixture>({
test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('default view', async({ mount, page }) => {
await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
status: 200,
body: JSON.stringify([
test('default view', async({ render, mockApiResponse }) => {
await mockApiResponse('homepage_txs', [
txMock.base,
txMock.withContractCreation,
txMock.withTokenTransfer,
txMock.withWatchListNames,
]),
}));
const component = await mount(
<TestApp>
<LatestTxs/>
</TestApp>,
);
]);
const component = await render(<LatestTxs/>);
await expect(component).toHaveScreenshot();
});
});
test('default view +@dark-mode', async({ mount, page }) => {
await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
status: 200,
body: JSON.stringify([
test('default view +@dark-mode', async({ render, mockApiResponse }) => {
await mockApiResponse('homepage_txs', [
txMock.base,
txMock.withContractCreation,
txMock.withTokenTransfer,
txMock.withWatchListNames,
]),
}));
const component = await mount(
<TestApp>
<LatestTxs/>
</TestApp>,
);
]);
const component = await render(<LatestTxs/>);
await expect(component).toHaveScreenshot();
});
......@@ -65,27 +47,17 @@ test.describe('socket', () => {
},
};
test('new item', async({ mount, page, createSocket }) => {
await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
status: 200,
body: JSON.stringify([
test('new item', async({ render, mockApiResponse, createSocket }) => {
await mockApiResponse('homepage_txs', [
txMock.base,
txMock.withContractCreation,
txMock.withTokenTransfer,
]),
}));
const component = await mount(
<TestApp withSocket>
<LatestTxs/>
</TestApp>,
{ hooksConfig },
);
]);
const component = await render(<LatestTxs/>, { hooksConfig }, { withSocket: true });
const socket = await createSocket();
const channel = await socketServer.joinChannel(socket, 'transactions:new_transaction');
socketServer.sendMessage(socket, channel, 'transaction', { transaction: 1 });
await expect(component).toHaveScreenshot();
});
});
ui/home/Stats.pw.tsx
View file @ 1b977de2
......@@ -3,7 +3,7 @@ import React from 'react';
import * as statsMock from 'mocks/stats/index';
import { test, expect } from 'playwright/lib';
import * as configs from 'playwright/utils/configs';
import * as pwConfig from 'playwright/utils/config';
import Stats from './Stats';
......@@ -20,7 +20,7 @@ test.describe('all items', () => {
});
test.describe('screen xl', () => {
test.use({ viewport: configs.viewport.xl });
test.use({ viewport: pwConfig.viewport.xl });
test('', async() => {
await expect(component).toHaveScreenshot();
......
ui/home/indicators/ChainIndicators.pw.tsx
View file @ 1b977de2
import { test as base, expect } from '@playwright/experimental-ct-react';
import type { Locator } from '@playwright/test';
import React from 'react';
import * as dailyTxsMock from 'mocks/stats/daily_txs';
import * as statsMock from 'mocks/stats/index';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import ChainIndicators from './ChainIndicators';
const STATS_API_URL = buildApiUrl('stats');
const TX_CHART_API_URL = buildApiUrl('stats_charts_txs');
const test = base.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_HOMEPAGE_CHARTS', value: '["daily_txs","coin_price","secondary_coin_price","market_cap","tvl"]' },
{ name: 'NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL', value: 'DUCK' },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
test.beforeEach(async({ mockEnvs }) => {
await mockEnvs([
[ 'NEXT_PUBLIC_HOMEPAGE_CHARTS', '["daily_txs","coin_price","secondary_coin_price","market_cap","tvl"]' ],
[ 'NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL', 'DUCK' ],
]);
});
test.describe('daily txs chart', () => {
let component: Locator;
test.beforeEach(async({ page, mount }) => {
await page.route(STATS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(statsMock.withSecondaryCoin),
}));
await page.route(TX_CHART_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(dailyTxsMock.base),
}));
component = await mount(
<TestApp>
<ChainIndicators/>
</TestApp>,
);
test.beforeEach(async({ page, mockApiResponse, render }) => {
await mockApiResponse('stats', statsMock.withSecondaryCoin);
await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
component = await render(<ChainIndicators/>);
await page.hover('.ChartOverlay', { position: { x: 100, y: 100 } });
});
......@@ -55,43 +37,19 @@ test.describe('daily txs chart', () => {
});
});
test('partial data', async({ page, mount }) => {
await page.route(STATS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(statsMock.base),
}));
await page.route(TX_CHART_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(dailyTxsMock.partialData),
}));
const component = await mount(
<TestApp>
<ChainIndicators/>
</TestApp>,
);
test('partial data', async({ page, mockApiResponse, render }) => {
await mockApiResponse('stats', statsMock.base);
await mockApiResponse('stats_charts_txs', dailyTxsMock.partialData);
const component = await render(<ChainIndicators/>);
await page.waitForFunction(() => {
return document.querySelector('path[data-name="gradient-chart-area"]')?.getAttribute('opacity') === '1';
});
await expect(component).toHaveScreenshot();
});
test('no data', async({ page, mount }) => {
await page.route(STATS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(statsMock.noChartData),
}));
await page.route(TX_CHART_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(dailyTxsMock.noData),
}));
const component = await mount(
<TestApp>
<ChainIndicators/>
</TestApp>,
);
test('no data', async({ mockApiResponse, render }) => {
await mockApiResponse('stats', statsMock.noChartData);
await mockApiResponse('stats_charts_txs', dailyTxsMock.noData);
const component = await render(<ChainIndicators/>);
await expect(component).toHaveScreenshot();
});
ui/marketplace/MarketplaceAppInfo.pw.tsx
View file @ 1b977de2
import { test, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import { apps as appsMock } from 'mocks/apps/apps';
import TestApp from 'playwright/TestApp';
import { test, expect, devices } from 'playwright/lib';
import MarketplaceAppInfo from './MarketplaceAppInfo';
test('base view +@dark-mode', async({ mount, page }) => {
await mount(
<TestApp>
<MarketplaceAppInfo data={ appsMock[0] }/>
</TestApp>,
);
test('base view +@dark-mode', async({ render, page }) => {
await render(<MarketplaceAppInfo data={ appsMock[0] }/>);
await page.getByText('Info').click();
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 500, height: 400 } });
});
test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view', async({ mount, page }) => {
await mount(
<TestApp>
<MarketplaceAppInfo data={ appsMock[0] }/>
</TestApp>,
);
test('base view', async({ render, page }) => {
await render(<MarketplaceAppInfo data={ appsMock[0] }/>);
await page.getByLabel('Show project info').click();
await expect(page).toHaveScreenshot();
});
});
ui/marketplace/MarketplaceAppModal.pw.tsx
View file @ 1b977de2
import { test, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import type { MarketplaceAppWithSecurityReport } from 'types/client/marketplace';
import { apps as appsMock } from 'mocks/apps/apps';
import TestApp from 'playwright/TestApp';
import { test, expect, devices } from 'playwright/lib';
import MarketplaceAppModal from './MarketplaceAppModal';
......@@ -16,20 +15,9 @@ const props = {
isFavorite: false,
};
const testFn: Parameters<typeof test>[1] = async({ mount, page }) => {
await page.route(appsMock[0].logo, (route) =>
route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
}),
);
await mount(
<TestApp>
<MarketplaceAppModal { ...props }/>
</TestApp>,
);
const testFn: Parameters<typeof test>[1] = async({ render, page, mockAssetResponse }) => {
await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg');
await render(<MarketplaceAppModal { ...props }/>);
await expect(page).toHaveScreenshot();
};
......
ui/pages/Accounts.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import type { AddressesResponse } from 'types/api/addresses';
import * as addressMocks from 'mocks/address/address';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import Accounts from './Accounts';
const ADDRESSES_API_URL = buildApiUrl('addresses');
const addresses: AddressesResponse = {
items: [
{
......@@ -32,21 +28,9 @@ const addresses: AddressesResponse = {
next_page_params: null,
};
test('base view +@mobile +@dark-mode', async({ mount, page }) => {
await page.route(ADDRESSES_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(addresses),
}));
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
const component = await mount(
<TestApp>
<Accounts/>
</TestApp>,
);
test('base view +@mobile +@dark-mode', async({ render, mockTextAd, mockApiResponse }) => {
await mockTextAd();
await mockApiResponse('addresses', addresses);
const component = await render(<Accounts/>);
await expect(component).toHaveScreenshot();
});
ui/pages/Blob.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as textAdMock from 'mocks/ad/textAd';
import * as blobsMock from 'mocks/blobs/blobs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { test, expect } from 'playwright/lib';
import * as pwConfig from 'playwright/utils/config';
import Blob from './Blob';
const BLOB_API_URL = buildApiUrl('blob', { hash: blobsMock.base1.hash });
const hooksConfig = {
router: {
query: { hash: blobsMock.base1.hash },
},
};
test.beforeEach(async({ page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: JSON.stringify(textAdMock.duck),
}));
await page.route(textAdMock.duck.ad.thumbnail, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
test.beforeEach(async({ mockTextAd }) => {
await mockTextAd();
});
test('base view +@mobile +@dark-mode', async({ mount, page }) => {
await page.route(BLOB_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(blobsMock.base1),
}));
const component = await mount(
<TestApp>
<Blob/>
</TestApp>,
{ hooksConfig },
);
test('base view +@mobile +@dark-mode', async({ render, mockApiResponse, page }) => {
await mockApiResponse('blob', blobsMock.base1, { pathParams: { hash: blobsMock.base1.hash } });
const component = await render(<Blob/>, { hooksConfig });
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
test('without data', async({ mount, page }) => {
await page.route(BLOB_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(blobsMock.withoutData),
}));
const component = await mount(
<TestApp>
<Blob/>
</TestApp>,
{ hooksConfig },
);
test('without data', async({ render, mockApiResponse, page }) => {
await mockApiResponse('blob', blobsMock.withoutData, { pathParams: { hash: blobsMock.base1.hash } });
const component = await render(<Blob/>, { hooksConfig });
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
ui/pages/CsvExport.pw.tsx
View file @ 1b977de2
......@@ -4,7 +4,7 @@ import React from 'react';
import * as addressMock from 'mocks/address/address';
import * as tokenMock from 'mocks/tokens/tokenInfo';
import { test, expect } from 'playwright/lib';
import * as configs from 'playwright/utils/configs';
import * as pwConfig from 'playwright/utils/config';
import CsvExport from './CsvExport';
......@@ -20,7 +20,7 @@ test('base view +@mobile +@dark-mode', async({ render, page, mockApiResponse })
await expect(component).toHaveScreenshot({
mask: [ page.locator('.recaptcha') ],
maskColor: configs.maskColor,
maskColor: pwConfig.maskColor,
});
});
......@@ -37,6 +37,6 @@ test('token holders', async({ render, page, mockApiResponse }) => {
await expect(component).toHaveScreenshot({
mask: [ page.locator('.recaptcha') ],
maskColor: configs.maskColor,
maskColor: pwConfig.maskColor,
});
});
ui/pages/GasTracker.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as textAdMock from 'mocks/ad/textAd';
import * as statsMock from 'mocks/stats/index';
import * as statsLineMock from 'mocks/stats/line';
import * as statsLinesMock from 'mocks/stats/lines';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import GasTracker from './GasTracker';
const STATS_LINES_API_URL = buildApiUrl('stats_lines');
const GAS_PRICE_CHART_API_URL = buildApiUrl('stats_line', { id: 'averageGasPrice' }) + '?**';
const STATS_API_URL = buildApiUrl('stats');
test.beforeEach(async({ page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: JSON.stringify(textAdMock.duck),
}));
await page.route(textAdMock.duck.ad.thumbnail, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
test.beforeEach(async({ mockTextAd }) => {
await mockTextAd();
});
test('base view +@dark-mode +@mobile', async({ mount, page }) => {
await page.route(STATS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ ...statsMock.base, coin_price: '2442.789' }),
}));
await page.route(STATS_LINES_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(statsLinesMock.base),
}));
await page.route(GAS_PRICE_CHART_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(statsLineMock.averageGasPrice),
}));
const component = await mount(
<TestApp>
<GasTracker/>
</TestApp>,
test('base view +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
await mockApiResponse('stats', { ...statsMock.base, coin_price: '2442.789' });
await mockApiResponse('stats_lines', statsLinesMock.base);
const chartApiUrl = await mockApiResponse(
'stats_line',
statsLineMock.averageGasPrice,
{ pathParams: { id: 'averageGasPrice' }, queryParams: { from: '**' } },
);
await page.waitForResponse(GAS_PRICE_CHART_API_URL);
const component = await render(<GasTracker/>);
await page.waitForResponse(chartApiUrl);
await page.waitForFunction(() => {
return document.querySelector('path[data-name="chart-Averagegasprice-small"]')?.getAttribute('opacity') === '1';
});
await expect(component).toHaveScreenshot();
});
ui/pages/Home.pw.tsx
View file @ 1b977de2
......@@ -6,16 +6,15 @@ import * as dailyTxsMock from 'mocks/stats/daily_txs';
import * as statsMock from 'mocks/stats/index';
import * as txMock from 'mocks/txs/tx';
import { test, expect, devices } from 'playwright/lib';
import TestApp from 'playwright/TestApp';
import * as configs from 'playwright/utils/configs';
import * as pwConfig from 'playwright/utils/config';
import Home from './Home';
test.describe('default view', () => {
let component: Locator;
test.beforeEach(async({ mount, mockApiResponse, mockAssetResponse }) => {
await mockAssetResponse(statsMock.base.coin_image, './playwright/mocks/image_s.jpg');
test.beforeEach(async({ render, mockApiResponse, mockAssetResponse }) => {
await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
await mockApiResponse('stats', statsMock.base);
await mockApiResponse('homepage_blocks', [
blockMock.base,
......@@ -28,27 +27,23 @@ test.describe('default view', () => {
]);
await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
component = await mount(
<TestApp>
<Home/>
</TestApp>,
);
component = await render(<Home/>);
});
test('-@default +@dark-mode', async({ page }) => {
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
test.describe('screen xl', () => {
test.use({ viewport: configs.viewport.xl });
test.use({ viewport: pwConfig.viewport.xl });
test('', async({ page }) => {
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
});
......@@ -62,7 +57,7 @@ test.describe('custom hero plate background', () => {
]);
});
test('default view', async({ mount, page }) => {
test('default view', async({ render, page }) => {
await page.route(IMAGE_URL, (route) => {
return route.fulfill({
status: 200,
......@@ -70,17 +65,13 @@ test.describe('custom hero plate background', () => {
});
});
const component = await mount(
<TestApp>
<Home/>
</TestApp>,
);
const component = await render(<Home/>);
const heroPlate = component.locator('div[data-label="hero plate"]');
await expect(heroPlate).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
});
......@@ -89,8 +80,8 @@ test.describe('custom hero plate background', () => {
test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view', async({ mount, page, mockAssetResponse, mockApiResponse }) => {
await mockAssetResponse(statsMock.base.coin_image, './playwright/mocks/image_s.jpg');
test('base view', async({ render, page, mockAssetResponse, mockApiResponse }) => {
await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
await mockApiResponse('stats', statsMock.base);
await mockApiResponse('homepage_blocks', [
blockMock.base,
......@@ -103,15 +94,11 @@ test.describe('mobile', () => {
]);
await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
const component = await mount(
<TestApp>
<Home/>
</TestApp>,
);
const component = await render(<Home/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
});
ui/pages/Login.pw.tsx
View file @ 1b977de2
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import contextWithFeatures from 'playwright/fixtures/contextWithFeatures';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import Login from './Login';
const testWithFeature = base.extend({
context: contextWithFeatures([
{ id: 'test_value', value: 'kitty' },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
testWithFeature('has feature text', async({ mount }) => {
const component = await mount(
<TestApp>
<Login/>
</TestApp>,
);
test.fixme('has feature text', async({ render, mockFeatures }) => {
await mockFeatures([
[ 'test_value', 'kitty' ],
]);
const component = await render(<Login/>);
const featureText = component.getByText('kitty');
await expect(featureText).toBeVisible();
});
ui/pages/NameDomain.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import config from 'configs/app';
import * as textAdMock from 'mocks/ad/textAd';
import * as ensDomainMock from 'mocks/ens/domain';
import * as ensDomainEventsMock from 'mocks/ens/events';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import NameDomain from './NameDomain';
const DOMAIN_API_URL = buildApiUrl('domain_info', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
const DOMAIN_EVENTS_API_URL = buildApiUrl('domain_events', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
test.beforeEach(async({ page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: JSON.stringify(textAdMock.duck),
}));
await page.route(textAdMock.duck.ad.thumbnail, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
test('details tab', async({ render, mockTextAd, mockApiResponse }) => {
await mockTextAd();
await mockApiResponse('domain_info', ensDomainMock.ensDomainA, {
pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
});
});
test('details tab', async({ mount, page }) => {
await page.route(DOMAIN_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(ensDomainMock.ensDomainA),
}));
const component = await mount(
<TestApp>
<NameDomain/>
</TestApp>,
const component = await render(
<NameDomain/>,
{ hooksConfig: {
router: {
query: { name: ensDomainMock.ensDomainA.name },
......@@ -43,30 +21,24 @@ test('details tab', async({ mount, page }) => {
},
} },
);
await expect(component).toHaveScreenshot();
});
test('history tab +@mobile', async({ mount, page }) => {
await page.route(DOMAIN_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(ensDomainMock.ensDomainA),
}));
await page.route(DOMAIN_EVENTS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({
test('history tab +@mobile', async({ render, mockTextAd, mockApiResponse }) => {
await mockTextAd();
await mockApiResponse('domain_info', ensDomainMock.ensDomainA, {
pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
});
await mockApiResponse('domain_events', {
items: [
ensDomainEventsMock.ensDomainEventA,
ensDomainEventsMock.ensDomainEventB,
],
totalRecords: 2,
}),
}));
const component = await mount(
<TestApp>
<NameDomain/>
</TestApp>,
}, {
pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
});
const component = await render(
<NameDomain/>,
{ hooksConfig: {
router: {
query: { name: ensDomainMock.ensDomainA.name, tab: 'history' },
......@@ -74,6 +46,5 @@ test('history tab +@mobile', async({ mount, page }) => {
},
} },
);
await expect(component).toHaveScreenshot();
});
ui/pages/NameDomains.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import config from 'configs/app';
import * as textAdMock from 'mocks/ad/textAd';
import * as ensDomainMock from 'mocks/ens/domain';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import NameDomains from './NameDomains';
const DOMAINS_LOOKUP_API_URL = buildApiUrl('domains_lookup', { chainId: config.chain.id }) + '?only_active=true';
test.beforeEach(async({ page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: JSON.stringify(textAdMock.duck),
}));
await page.route(textAdMock.duck.ad.thumbnail, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
});
test('default view +@mobile', async({ mount, page }) => {
await page.route(DOMAINS_LOOKUP_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({
test('default view +@mobile', async({ render, mockApiResponse, mockTextAd }) => {
await mockTextAd();
await mockApiResponse('domains_lookup', {
items: [
ensDomainMock.ensDomainA,
ensDomainMock.ensDomainB,
......@@ -35,16 +16,14 @@ test('default view +@mobile', async({ mount, page }) => {
ensDomainMock.ensDomainD,
],
next_page_params: {
token_id: '<token-id>',
page_token: '<token>',
page_size: 50,
},
}),
}));
const component = await mount(
<TestApp>
<NameDomains/>
</TestApp>,
);
}, {
pathParams: { chainId: config.chain.id },
queryParams: { only_active: true },
});
const component = await render(<NameDomains/>);
await expect(component).toHaveScreenshot();
});
ui/pages/Token.pw.tsx
View file @ 1b977de2
......@@ -7,7 +7,7 @@ import { tokenInfo, tokenCounters, bridgedTokenA } from 'mocks/tokens/tokenInfo'
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import * as socketServer from 'playwright/fixtures/socketServer';
import { test, expect, devices } from 'playwright/lib';
import * as configs from 'playwright/utils/configs';
import * as pwConfig from 'playwright/utils/config';
import Token from './Token';
......@@ -41,8 +41,8 @@ test('base view', async({ render, page, createSocket }) => {
socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -59,8 +59,8 @@ test('with verified info', async({ render, page, createSocket, mockApiResponse,
await page.getByRole('button', { name: /project info/i }).click();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -86,8 +86,8 @@ test('bridged token', async({ render, page, createSocket, mockApiResponse, mockA
socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -101,8 +101,8 @@ test.describe('mobile', () => {
socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -116,8 +116,8 @@ test.describe('mobile', () => {
socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
});
ui/pages/VerifiedContracts.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as textAdMock from 'mocks/ad/textAd';
import { verifiedContractsCountersMock } from 'mocks/contracts/counters';
import * as verifiedContractsMock from 'mocks/contracts/index';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import VerifiedContracts from './VerifiedContracts';
const VERIFIED_CONTRACTS_API_URL = buildApiUrl('verified_contracts');
const VERIFIED_CONTRACTS_COUNTERS_API_URL = buildApiUrl('verified_contracts_counters');
test.beforeEach(async({ page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: JSON.stringify(textAdMock.duck),
}));
await page.route(textAdMock.duck.ad.thumbnail, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
});
test('base view +@mobile', async({ mount, page }) => {
await page.route(VERIFIED_CONTRACTS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(verifiedContractsMock.baseResponse),
}));
await page.route(VERIFIED_CONTRACTS_COUNTERS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(verifiedContractsCountersMock),
}));
const component = await mount(
<TestApp>
<VerifiedContracts/>
</TestApp>,
);
test('base view +@mobile', async({ render, mockTextAd, mockApiResponse }) => {
await mockTextAd();
await mockApiResponse('verified_contracts', verifiedContractsMock.baseResponse);
await mockApiResponse('verified_contracts_counters', verifiedContractsCountersMock);
const component = await render(<VerifiedContracts/>);
await expect(component).toHaveScreenshot();
});
ui/shared/AppError/AppError.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import * as configs from 'playwright/utils/configs';
import { test, expect } from 'playwright/lib';
import * as pwConfig from 'playwright/utils/config';
import AppError from './AppError';
test('status code 404', async({ mount }) => {
test('status code 404', async({ render }) => {
const error = { message: 'Not found', cause: { status: 404 } } as Error;
const component = await mount(
<TestApp>
<AppError error={ error }/>
</TestApp>,
);
const component = await render(<AppError error={ error }/>);
await expect(component).toHaveScreenshot();
});
test('status code 422', async({ mount }) => {
test('status code 422', async({ render }) => {
const error = { message: 'Unprocessable entry', cause: { status: 422 } } as Error;
const component = await mount(
<TestApp>
<AppError error={ error }/>
</TestApp>,
);
const component = await render(<AppError error={ error }/>);
await expect(component).toHaveScreenshot();
});
test('status code 500', async({ mount }) => {
test('status code 500', async({ render }) => {
const error = { message: 'Unknown error', cause: { status: 500 } } as Error;
const component = await mount(
<TestApp>
<AppError error={ error }/>
</TestApp>,
);
const component = await render(<AppError error={ error }/>);
await expect(component).toHaveScreenshot();
});
test('tx not found', async({ mount }) => {
test('tx not found', async({ render }) => {
const error = { message: 'Not found', cause: { status: 404, resource: 'tx' } } as Error;
const component = await mount(
<TestApp>
<AppError error={ error }/>
</TestApp>,
);
const component = await render(<AppError error={ error }/>);
await expect(component).toHaveScreenshot();
});
test('block lost consensus', async({ mount }) => {
test('block lost consensus', async({ render }) => {
const error = {
message: 'Not found',
cause: { payload: { message: 'Block lost consensus', hash: 'hash' } },
} as Error;
const component = await mount(
<TestApp>
<AppError error={ error }/>
</TestApp>,
);
const component = await render(<AppError error={ error }/>);
await expect(component).toHaveScreenshot();
});
test('too many requests +@mobile', async({ mount, page }) => {
test('too many requests +@mobile', async({ render, page }) => {
const error = {
message: 'Too many requests',
cause: { status: 429 },
} as Error;
const component = await mount(
<TestApp>
<AppError error={ error }/>
</TestApp>,
);
const component = await render(<AppError error={ error }/>);
await page.waitForResponse('https://www.google.com/recaptcha/api2/**');
await expect(component).toHaveScreenshot({
mask: [ page.locator('.recaptcha') ],
maskColor: configs.maskColor,
maskColor: pwConfig.maskColor,
});
});
ui/shared/FancySelect/FancySelect.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import _noop from 'lodash/noop';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import FancySelect from './FancySelect';
......@@ -24,15 +23,13 @@ const defaultProps = {
[ 'md' as const, 'lg' as const ].forEach((size) => {
test.describe(`size ${ size } +@dark-mode`, () => {
test('empty', async({ mount, page }) => {
const component = await mount(
<TestApp>
test('empty', async({ render, page }) => {
const component = await render(
<FancySelect
{ ...defaultProps }
size={ size }
value={ null }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......@@ -42,23 +39,20 @@ const defaultProps = {
await expect(page).toHaveScreenshot();
});
test('filled', async({ mount }) => {
const component = await mount(
<TestApp>
test('filled', async({ render }) => {
const component = await render(
<FancySelect
{ ...defaultProps }
size={ size }
value={ OPTIONS[0] }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('error', async({ mount }) => {
const component = await mount(
<TestApp>
test('error', async({ render }) => {
const component = await render(
<FancySelect
{ ...defaultProps }
size={ size }
......@@ -67,8 +61,7 @@ const defaultProps = {
type: 'unknown',
message: 'cannot be empty',
}}
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......@@ -78,31 +71,27 @@ const defaultProps = {
await expect(component).toHaveScreenshot();
});
test('disabled', async({ mount }) => {
const component = await mount(
<TestApp>
test('disabled', async({ render }) => {
const component = await render(
<FancySelect
{ ...defaultProps }
size={ size }
value={ OPTIONS[0] }
isDisabled
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('read-only', async({ mount }) => {
const component = await mount(
<TestApp>
test('read-only', async({ render }) => {
const component = await render(
<FancySelect
{ ...defaultProps }
size={ size }
value={ OPTIONS[0] }
isReadOnly
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......
ui/shared/NetworkExplorers.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import NetworkExplorers from './NetworkExplorers';
test('base view', async({ mount, page }) => {
const component = await mount(
<TestApp>
<NetworkExplorers type="tx" pathParam="0x123"/>
</TestApp>,
);
test('base view', async({ render, page }) => {
const component = await render(<NetworkExplorers type="tx" pathParam="0x123"/>);
await component.getByText('2').click();
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 300, height: 150 } });
});
ui/shared/Page/PageTitle.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as textAdMock from 'mocks/ad/textAd';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import DefaultView from './specs/DefaultView';
import LongNameAndManyTags from './specs/LongNameAndManyTags';
import WithTextAd from './specs/WithTextAd';
test.beforeEach(async({ page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: JSON.stringify(textAdMock.duck),
}));
await page.route(textAdMock.duck.ad.thumbnail, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
await page.route('https://example.com/logo.png', (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
test.beforeEach(async({ mockTextAd, mockAssetResponse }) => {
await mockTextAd();
await mockAssetResponse('https://example.com/logo.png', './playwright/mocks/image_s.jpg');
});
test('default view +@mobile', async({ mount }) => {
const component = await mount(
<TestApp>
<DefaultView/>
</TestApp>,
);
test('default view +@mobile', async({ render }) => {
const component = await render(<DefaultView/>);
await expect(component).toHaveScreenshot();
});
test('with text ad +@mobile', async({ mount }) => {
const component = await mount(
<TestApp>
<WithTextAd/>
</TestApp>,
);
test('with text ad +@mobile', async({ render }) => {
const component = await render(<WithTextAd/>);
await expect(component).toHaveScreenshot();
});
test('with long name and many tags +@mobile', async({ mount }) => {
const component = await mount(
<TestApp>
<LongNameAndManyTags/>
</TestApp>,
);
test('with long name and many tags +@mobile', async({ render }) => {
const component = await render(<LongNameAndManyTags/>);
await expect(component).toHaveScreenshot();
});
ui/shared/SocketNewItemsNotice.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import SocketNewItemsNotice from './SocketNewItemsNotice';
......@@ -12,35 +11,17 @@ const hooksConfig = {
},
};
test('2 new items in validated txs list +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
<SocketNewItemsNotice url="/" num={ 2 }/>
</TestApp>,
{ hooksConfig },
);
test('2 new items in validated txs list +@dark-mode', async({ render }) => {
const component = await render(<SocketNewItemsNotice url="/" num={ 2 }/>, { hooksConfig });
await expect(component).toHaveScreenshot();
});
test('connection loss', async({ mount }) => {
const component = await mount(
<TestApp>
<SocketNewItemsNotice url="/" alert="Connection is lost. Please reload the page."/>
</TestApp>,
{ hooksConfig },
);
test('connection loss', async({ render }) => {
const component = await render(<SocketNewItemsNotice url="/" alert="Connection is lost. Please reload the page."/>, { hooksConfig });
await expect(component).toHaveScreenshot();
});
test('fetching', async({ mount }) => {
const component = await mount(
<TestApp>
<SocketNewItemsNotice url="/"/>
</TestApp>,
{ hooksConfig },
);
test('fetching', async({ render }) => {
const component = await render(<SocketNewItemsNotice url="/"/>, { hooksConfig });
await expect(component).toHaveScreenshot();
});
ui/shared/Tabs/TabsWithScroll.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import type { TabItem } from './types';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import TabsWithScroll from './TabsWithScroll';
test('with counters', async({ mount }) => {
test('with counters', async({ render }) => {
const tabs: Array<TabItem> = [
{
id: 'tab1',
......@@ -28,13 +27,7 @@ test('with counters', async({ mount }) => {
component: null,
},
];
const component = await mount(
<TestApp>
<TabsWithScroll tabs={ tabs }/>
</TestApp>,
);
const component = await render(<TabsWithScroll tabs={ tabs }/>);
await component.getByText('Third tab').hover();
await expect(component).toHaveScreenshot();
});
ui/shared/TokenTransfer/TokenTransferList.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
import TestApp from 'playwright/TestApp';
import { test, expect, devices } from 'playwright/lib';
import TokenTransferList from './TokenTransferList';
......@@ -24,29 +23,27 @@ const data = [
tokenTransferMock.erc1155D,
];
test('without tx info', async({ mount }) => {
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
test('without tx info', async({ render }) => {
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<TokenTransferList
data={ data }
showTxInfo={ false }
/>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
});
test('with tx info', async({ mount }) => {
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
test('with tx info', async({ render }) => {
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<TokenTransferList
data={ data }
showTxInfo={ true }
/>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
......
ui/shared/TokenTransfer/TokenTransferTable.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import TokenTransferTable from './TokenTransferTable';
test('without tx info', async({ mount }) => {
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
test('without tx info', async({ render }) => {
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<TokenTransferTable
data={ tokenTransferMock.mixTokens.items }
top={ 0 }
showTxInfo={ false }
/>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
});
test('with tx info', async({ mount }) => {
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/>
test('with tx info', async({ render }) => {
const component = await render(
<Box pt={{ base: '134px', lg: 6 }}>
<TokenTransferTable
data={ tokenTransferMock.mixTokens.items }
top={ 0 }
showTxInfo={ true }
/>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
......
ui/shared/Utilization/Utilization.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import Utilization from './Utilization';
test.use({ viewport: { width: 100, height: 50 } });
test('green color scheme +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
<Utilization value={ 0.423 }/>
</TestApp>,
);
test('green color scheme +@dark-mode', async({ render }) => {
const component = await render(<Utilization value={ 0.423 }/>);
await expect(component).toHaveScreenshot();
});
test('gray color scheme +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
<Utilization value={ 0.423 } colorScheme="gray"/>
</TestApp>,
);
test('gray color scheme +@dark-mode', async({ render }) => {
const component = await render(<Utilization value={ 0.423 } colorScheme="gray"/>);
await expect(component).toHaveScreenshot();
});
ui/shared/address/AddressFromTo.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as addressMock from 'mocks/address/address';
import TestApp from 'playwright/TestApp';
import * as configs from 'playwright/utils/configs';
import { test, expect } from 'playwright/lib';
import * as pwConfig from 'playwright/utils/config';
import AddressFromTo from './AddressFromTo';
test.use({ viewport: configs.viewport.mobile });
test.use({ viewport: pwConfig.viewport.mobile });
test('outgoing txn', async({ mount }) => {
const component = await mount(
<TestApp>
test('outgoing txn', async({ render }) => {
const component = await render(
<AddressFromTo
from={ addressMock.withoutName }
to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
current={ addressMock.withoutName.hash }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('incoming txn', async({ mount }) => {
const component = await mount(
<TestApp>
test('incoming txn', async({ render }) => {
const component = await render(
<AddressFromTo
from={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
to={ addressMock.withoutName }
current={ addressMock.withoutName.hash }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('compact mode', async({ mount }) => {
const component = await mount(
<TestApp>
test('compact mode', async({ render }) => {
const component = await render(
<AddressFromTo
from={ addressMock.withoutName }
to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
mode="compact"
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('loading state', async({ mount }) => {
const component = await mount(
<TestApp>
test('loading state', async({ render }) => {
const component = await render(
<AddressFromTo
from={ addressMock.withoutName }
to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
isLoading
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
ui/shared/address/AddressFromToIcon.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import AddressFromToIcon from './AddressFromToIcon';
test.use({ viewport: { width: 36, height: 36 } });
[ 'in', 'out', 'self', 'unspecified' ].forEach((type) => {
test(`${ type } txn type +@dark-mode`, async({ mount }) => {
const component = await mount(
<TestApp>
test(`${ type } txn type +@dark-mode`, async({ render }) => {
const component = await render(
<Box p={ 2 }>
<AddressFromToIcon type={ type }/>
</Box>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
});
......
ui/shared/blob/BlobDataType.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import BlobDataType from './BlobDataType';
test.use({ viewport: { width: 100, height: 50 } });
test('image data', async({ mount }) => {
const component = await mount(
<TestApp>
<BlobDataType data="0x89504E470D0A1A0A0000000D494844520000003C0000003C0403"/>
</TestApp>,
);
test('image data', async({ render }) => {
const component = await render(<BlobDataType data="0x89504E470D0A1A0A0000000D494844520000003C0000003C0403"/>);
await expect(component).toHaveScreenshot();
});
test('raw data', async({ mount }) => {
const component = await mount(
<TestApp>
<BlobDataType data="0x010203040506"/>
</TestApp>,
);
test('raw data', async({ render }) => {
const component = await render(<BlobDataType data="0x010203040506"/>);
await expect(component).toHaveScreenshot();
});
test('text data', async({ mount }) => {
const component = await mount(
<TestApp>
<BlobDataType data="0x7b226e616d65223a22706963732f"/>
</TestApp>,
);
test('text data', async({ render }) => {
const component = await render(<BlobDataType data="0x7b226e616d65223a22706963732f"/>);
await expect(component).toHaveScreenshot();
});
ui/shared/chart/ChartWidget.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import type { Props } from './ChartWidget';
import ChartWidget from './ChartWidget';
......@@ -29,12 +28,9 @@ const props: Props = {
isError: false,
};
test('base view +@dark-mode', async({ mount, page }) => {
const component = await mount(
<TestApp>
<ChartWidget { ...props }/>
</TestApp>,
);
test('base view +@dark-mode', async({ render, page }) => {
const component = await render(<ChartWidget { ...props }/>);
await page.waitForFunction(() => {
return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
});
......@@ -54,27 +50,17 @@ test('base view +@dark-mode', async({ mount, page }) => {
await expect(component).toHaveScreenshot();
});
test('loading', async({ mount }) => {
const component = await mount(
<TestApp>
<ChartWidget { ...props } isLoading minH="250px"/>
</TestApp>,
);
test('loading', async({ render }) => {
const component = await render(<ChartWidget { ...props } isLoading minH="250px"/>);
await expect(component).toHaveScreenshot();
});
test('error', async({ mount }) => {
const component = await mount(
<TestApp>
<ChartWidget { ...props } isError/>
</TestApp>,
);
test('error', async({ render }) => {
const component = await render(<ChartWidget { ...props } isError/>);
await expect(component).toHaveScreenshot();
});
test('small values', async({ mount, page }) => {
test('small values', async({ render, page }) => {
const modifiedProps = {
...props,
items: [
......@@ -92,18 +78,14 @@ test('small values', async({ mount, page }) => {
],
};
const component = await mount(
<TestApp>
<ChartWidget { ...modifiedProps }/>
</TestApp>,
);
const component = await render(<ChartWidget { ...modifiedProps }/>);
await page.waitForFunction(() => {
return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
});
await expect(component).toHaveScreenshot();
});
test('small variations in big values', async({ mount, page }) => {
test('small variations in big values', async({ render, page }) => {
const modifiedProps = {
...props,
items: [
......@@ -121,11 +103,7 @@ test('small variations in big values', async({ mount, page }) => {
],
};
const component = await mount(
<TestApp>
<ChartWidget { ...modifiedProps }/>
</TestApp>,
);
const component = await render(<ChartWidget { ...modifiedProps }/>);
await page.waitForFunction(() => {
return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
});
......
ui/shared/entities/address/AddressEntity.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
import * as addressMock from 'mocks/address/address';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import AddressEntity from './AddressEntity';
......@@ -14,14 +13,12 @@ test.use({ viewport: { width: 180, height: 140 } });
test.describe('icon size', () => {
iconSizes.forEach((size) => {
test(size, async({ mount }) => {
const component = await mount(
<TestApp>
test(size, async({ render }) => {
const component = await render(
<AddressEntity
address={ addressMock.withoutName }
iconSize={ size }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......@@ -30,26 +27,22 @@ test.describe('icon size', () => {
});
test.describe('contract', () => {
test('unverified', async({ mount, page }) => {
const component = await mount(
<TestApp>
test('unverified', async({ render, page }) => {
const component = await render(
<AddressEntity
address={{ ...addressMock.contract, is_verified: false }}
/>
</TestApp>,
/>,
);
await component.getByText(/eternal/i).hover();
await expect(page).toHaveScreenshot();
});
test('verified', async({ mount }) => {
const component = await mount(
<TestApp>
test('verified', async({ render }) => {
const component = await render(
<AddressEntity
address={{ ...addressMock.contract, is_verified: true }}
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......@@ -57,27 +50,23 @@ test.describe('contract', () => {
});
test.describe('loading', () => {
test('without alias', async({ mount }) => {
const component = await mount(
<TestApp>
test('without alias', async({ render }) => {
const component = await render(
<AddressEntity
address={ addressMock.withoutName }
isLoading
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('with alias', async({ mount }) => {
const component = await mount(
<TestApp>
test('with alias', async({ render }) => {
const component = await render(
<AddressEntity
address={ addressMock.withName }
isLoading
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......@@ -85,83 +74,71 @@ test.describe('loading', () => {
});
test('with ENS', async({ mount }) => {
const component = await mount(
<TestApp>
test('with ENS', async({ render }) => {
const component = await render(
<AddressEntity
address={ addressMock.withEns }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('with name tag', async({ mount }) => {
const component = await mount(
<TestApp>
test('with name tag', async({ render }) => {
const component = await render(
<AddressEntity
address={ addressMock.withNameTag }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('external link', async({ mount }) => {
const component = await mount(
<TestApp>
test('external link', async({ render }) => {
const component = await render(
<AddressEntity
address={ addressMock.withoutName }
isExternal
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('no link', async({ mount }) => {
const component = await mount(
<TestApp>
test('no link', async({ render }) => {
const component = await render(
<AddressEntity
address={ addressMock.withoutName }
noLink
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('customization', async({ mount }) => {
const component = await mount(
<TestApp>
test('customization', async({ render }) => {
const component = await render(
<AddressEntity
address={ addressMock.withoutName }
truncation="constant"
p={ 3 }
borderWidth="1px"
borderColor="blue.700"
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('hover', async({ page, mount }) => {
const component = await mount(
<TestApp>
test('hover', async({ page, render }) => {
const component = await render(
<AddressHighlightProvider>
<Box p={ 3 }>
<AddressEntity
address={ addressMock.withoutName }
/>
</Box>
</AddressHighlightProvider>
</TestApp>,
</AddressHighlightProvider>,
);
await component.getByText(addressMock.hash.slice(0, 4)).hover();
......
ui/shared/entities/block/BlockEntity.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import BlockEntity from './BlockEntity';
......@@ -11,14 +10,12 @@ test.use({ viewport: { width: 180, height: 30 } });
test.describe('icon sizes', () => {
iconSizes.forEach((size) => {
test(size, async({ mount }) => {
const component = await mount(
<TestApp>
test(size, async({ render }) => {
const component = await render(
<BlockEntity
number={ 17943507 }
iconSize={ size }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......@@ -26,27 +23,23 @@ test.describe('icon sizes', () => {
});
});
test('loading', async({ mount }) => {
const component = await mount(
<TestApp>
test('loading', async({ render }) => {
const component = await render(
<BlockEntity
number={ 17943507 }
isLoading
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('external link +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
test('external link +@dark-mode', async({ render }) => {
const component = await render(
<BlockEntity
number={ 17943507 }
isExternal
/>
</TestApp>,
/>,
);
await component.getByText('17943507').hover();
......@@ -54,28 +47,24 @@ test('external link +@dark-mode', async({ mount }) => {
await expect(component).toHaveScreenshot();
});
test('long number', async({ mount }) => {
const component = await mount(
<TestApp>
test('long number', async({ render }) => {
const component = await render(
<BlockEntity
number={ 1794350723452223 }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('customization', async({ mount }) => {
const component = await mount(
<TestApp>
test('customization', async({ render }) => {
const component = await render(
<BlockEntity
number={ 17943507 }
p={ 3 }
borderWidth="1px"
borderColor="blue.700"
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......
ui/shared/entities/ens/EnsEntity.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import EnsEntity from './EnsEntity';
......@@ -12,14 +11,12 @@ test.use({ viewport: { width: 180, height: 30 } });
test.describe('icon size', () => {
iconSizes.forEach((size) => {
test(size, async({ mount }) => {
const component = await mount(
<TestApp>
test(size, async({ render }) => {
const component = await render(
<EnsEntity
name={ name }
iconSize={ size }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......@@ -27,26 +24,22 @@ test.describe('icon size', () => {
});
});
test('loading', async({ mount }) => {
const component = await mount(
<TestApp>
test('loading', async({ render }) => {
const component = await render(
<EnsEntity
name={ name }
isLoading
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('with long name', async({ mount }) => {
const component = await mount(
<TestApp>
test('with long name', async({ render }) => {
const component = await render(
<EnsEntity
name="kitty.kitty.kitty.cat.eth"
/>
</TestApp>,
/>,
);
await component.getByText(name.slice(0, 4)).hover();
......@@ -54,16 +47,14 @@ test('with long name', async({ mount }) => {
await expect(component).toHaveScreenshot();
});
test('customization', async({ mount }) => {
const component = await mount(
<TestApp>
test('customization', async({ render }) => {
const component = await render(
<EnsEntity
name={ name }
p={ 3 }
borderWidth="1px"
borderColor="blue.700"
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......
ui/shared/entities/nft/NftEntity.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import NftEntity from './NftEntity';
......@@ -12,15 +11,13 @@ test.use({ viewport: { width: 180, height: 30 } });
test.describe('icon sizes', () => {
iconSizes.forEach((size) => {
test(size, async({ mount }) => {
const component = await mount(
<TestApp>
test(size, async({ render }) => {
const component = await render(
<NftEntity
hash={ hash }
id={ 1042 }
iconSize={ size }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......@@ -28,44 +25,38 @@ test.describe('icon sizes', () => {
});
});
test('loading', async({ mount }) => {
const component = await mount(
<TestApp>
test('loading', async({ render }) => {
const component = await render(
<NftEntity
hash={ hash }
id={ 1042 }
isLoading
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('long id', async({ mount }) => {
const component = await mount(
<TestApp>
test('long id', async({ render }) => {
const component = await render(
<NftEntity
hash={ hash }
id={ 1794350723452223 }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('customization', async({ mount }) => {
const component = await mount(
<TestApp>
test('customization', async({ render }) => {
const component = await render(
<NftEntity
hash={ hash }
id={ 1042 }
p={ 3 }
borderWidth="1px"
borderColor="blue.700"
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......
ui/shared/entities/token/TokenEntity.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as tokenMock from 'mocks/tokens/tokenInfo';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import TokenEntity from './TokenEntity';
......@@ -13,14 +12,12 @@ test.use({ viewport: { width: 300, height: 100 } });
test.describe('icon size', () => {
iconSizes.forEach((size) => {
test(size, async({ mount }) => {
const component = await mount(
<TestApp>
test(size, async({ render }) => {
const component = await render(
<TokenEntity
token={ tokenMock.tokenInfo }
iconSize={ size }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......@@ -28,7 +25,7 @@ test.describe('icon size', () => {
});
});
test('with logo, long name and symbol', async({ page, mount }) => {
test('with logo, long name and symbol', async({ page, render }) => {
const LOGO_URL = 'https://example.com/logo.png';
await page.route(LOGO_URL, (route) => {
return route.fulfill({
......@@ -37,8 +34,7 @@ test('with logo, long name and symbol', async({ page, mount }) => {
});
});
await mount(
<TestApp>
await render(
<TokenEntity
token={{
name: 'This token is the best token ever',
......@@ -46,8 +42,7 @@ test('with logo, long name and symbol', async({ page, mount }) => {
address: tokenMock.tokenInfo.address,
icon_url: LOGO_URL,
}}
/>
</TestApp>,
/>,
);
await page.getByText(/this/i).hover();
......@@ -57,22 +52,19 @@ test('with logo, long name and symbol', async({ page, mount }) => {
await expect(page).toHaveScreenshot();
});
test('loading', async({ mount }) => {
const component = await mount(
<TestApp>
test('loading', async({ render }) => {
const component = await render(
<TokenEntity
token={ tokenMock.tokenInfo }
isLoading
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('customization', async({ mount }) => {
const component = await mount(
<TestApp>
test('customization', async({ render }) => {
const component = await render(
<Box
borderWidth="1px"
borderColor="orange.500"
......@@ -84,8 +76,7 @@ test('customization', async({ mount }) => {
borderWidth="1px"
borderColor="blue.700"
/>
</Box>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
......
ui/shared/entities/tx/TxEntity.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import TxEntity from './TxEntity';
......@@ -12,14 +11,12 @@ test.use({ viewport: { width: 180, height: 30 } });
test.describe('icon size', () => {
iconSizes.forEach((size) => {
test(size, async({ mount }) => {
const component = await mount(
<TestApp>
test(size, async({ render }) => {
const component = await render(
<TxEntity
hash={ hash }
iconSize={ size }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......@@ -27,40 +24,34 @@ test.describe('icon size', () => {
});
});
test('loading', async({ mount }) => {
const component = await mount(
<TestApp>
test('loading', async({ render }) => {
const component = await render(
<TxEntity
hash={ hash }
isLoading
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('external link', async({ mount }) => {
const component = await mount(
<TestApp>
test('external link', async({ render }) => {
const component = await render(
<TxEntity
hash={ hash }
isExternal
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('with copy +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
test('with copy +@dark-mode', async({ render }) => {
const component = await render(
<TxEntity
hash={ hash }
noCopy={ false }
/>
</TestApp>,
/>,
);
await component.getByText(hash.slice(0, 4)).hover();
......@@ -68,17 +59,15 @@ test('with copy +@dark-mode', async({ mount }) => {
await expect(component).toHaveScreenshot();
});
test('customization', async({ mount }) => {
const component = await mount(
<TestApp>
test('customization', async({ render }) => {
const component = await render(
<TxEntity
hash={ hash }
truncation="constant"
p={ 3 }
borderWidth="1px"
borderColor="blue.700"
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......
ui/shared/entities/userOp/UserOpEntity.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import UserOpEntity from './UserOpEntity';
......@@ -12,14 +11,12 @@ test.use({ viewport: { width: 180, height: 30 } });
test.describe('icon size', () => {
iconSizes.forEach((size) => {
test(size, async({ mount }) => {
const component = await mount(
<TestApp>
test(size, async({ render }) => {
const component = await render(
<UserOpEntity
hash={ hash }
iconSize={ size }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......@@ -27,27 +24,23 @@ test.describe('icon size', () => {
});
});
test('loading', async({ mount }) => {
const component = await mount(
<TestApp>
test('loading', async({ render }) => {
const component = await render(
<UserOpEntity
hash={ hash }
isLoading
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('with copy +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
test('with copy +@dark-mode', async({ render }) => {
const component = await render(
<UserOpEntity
hash={ hash }
noCopy={ false }
/>
</TestApp>,
/>,
);
await component.getByText(hash.slice(0, 4)).hover();
......@@ -55,17 +48,15 @@ test('with copy +@dark-mode', async({ mount }) => {
await expect(component).toHaveScreenshot();
});
test('customization', async({ mount }) => {
const component = await mount(
<TestApp>
test('customization', async({ render }) => {
const component = await render(
<UserOpEntity
hash={ hash }
truncation="constant"
p={ 3 }
borderWidth="1px"
borderColor="blue.700"
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
......
ui/shared/gas/GasInfoTooltip.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import type { GasPriceInfo } from 'types/api/stats';
import { SECOND } from 'lib/consts';
import * as statsMock from 'mocks/stats/index';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import GasInfoTooltip from './GasInfoTooltip';
import GasPrice from './GasPrice';
......@@ -13,13 +13,11 @@ const dataUpdatedAt = Date.now() - 30 * SECOND;
test.use({ viewport: { width: 300, height: 300 } });
test('all data', async({ mount, page }) => {
await mount(
<TestApp>
test('all data', async({ render, page }) => {
await render(
<GasInfoTooltip data={ statsMock.base } dataUpdatedAt={ dataUpdatedAt } isOpen>
<span>Gas <GasPrice data={ statsMock.base.gas_prices.average }/></span>
</GasInfoTooltip>
</TestApp>,
<span>Gas <GasPrice data={ statsMock.base.gas_prices?.average as GasPriceInfo }/></span>
</GasInfoTooltip>,
);
// await page.getByText(/gas/i).hover();
......@@ -27,13 +25,11 @@ test('all data', async({ mount, page }) => {
await expect(page).toHaveScreenshot();
});
test('without primary unit price', async({ mount, page }) => {
await mount(
<TestApp>
test('without primary unit price', async({ render, page }) => {
await render(
<GasInfoTooltip data={ statsMock.withoutFiatPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
<span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices.average }/></span>
</GasInfoTooltip>
</TestApp>,
<span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices?.average as GasPriceInfo }/></span>
</GasInfoTooltip>,
);
// await page.getByText(/gas/i).hover();
......@@ -41,13 +37,11 @@ test('without primary unit price', async({ mount, page }) => {
await expect(page).toHaveScreenshot();
});
test('without secondary unit price', async({ mount, page }) => {
await mount(
<TestApp>
test('without secondary unit price', async({ render, page }) => {
await render(
<GasInfoTooltip data={ statsMock.withoutGweiPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
<span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices.average }/></span>
</GasInfoTooltip>
</TestApp>,
<span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices?.average as GasPriceInfo }/></span>
</GasInfoTooltip>,
);
// await page.getByText(/gas/i).hover();
......@@ -55,13 +49,11 @@ test('without secondary unit price', async({ mount, page }) => {
await expect(page).toHaveScreenshot();
});
test('no data', async({ mount, page }) => {
await mount(
<TestApp>
test('no data', async({ render, page }) => {
await render(
<GasInfoTooltip data={ statsMock.withoutBothPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
<span>Gas: <GasPrice data={ statsMock.withoutBothPrices.gas_prices.average }/></span>
</GasInfoTooltip>
</TestApp>,
<span>Gas: <GasPrice data={ statsMock.withoutBothPrices.gas_prices?.average as GasPriceInfo }/></span>
</GasInfoTooltip>,
);
// await page.getByText(/gas/i).hover();
......@@ -69,21 +61,18 @@ test('no data', async({ mount, page }) => {
await expect(page).toHaveScreenshot();
});
const oneUnitTest = test.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_GAS_TRACKER_UNITS', value: '["gwei"]' },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
test.describe('one unit', () => {
test.beforeEach(async({ mockEnvs }) => {
await mockEnvs([
[ 'NEXT_PUBLIC_GAS_TRACKER_UNITS', '["gwei"]' ],
]);
});
oneUnitTest.describe('one unit', () => {
oneUnitTest('with data', async({ mount, page }) => {
await mount(
<TestApp>
test('with data', async({ render, page }) => {
await render(
<GasInfoTooltip data={ statsMock.withoutFiatPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
<span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices.average }/></span>
</GasInfoTooltip>
</TestApp>,
<span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices?.average as GasPriceInfo }/></span>
</GasInfoTooltip>,
);
// await page.getByText(/gas/i).hover();
......@@ -91,13 +80,11 @@ oneUnitTest.describe('one unit', () => {
await expect(page).toHaveScreenshot();
});
oneUnitTest('without data', async({ mount, page }) => {
await mount(
<TestApp>
test('without data', async({ render, page }) => {
await render(
<GasInfoTooltip data={ statsMock.withoutGweiPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
<span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices.average }/></span>
</GasInfoTooltip>
</TestApp>,
<span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices?.average as GasPriceInfo }/></span>
</GasInfoTooltip>,
);
// await page.getByText(/gas/i).hover();
......
ui/shared/layout/Layout.pw.tsx
View file @ 1b977de2
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { indexingStatus } from 'mocks/stats/index';
import { test, expect } from 'playwright/lib';
import Layout from './Layout';
const API_URL = buildApiUrl('homepage_indexing_status');
const test = base.extend({
context: contextWithEnvs([
{
name: 'NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE',
value: 'We are currently lacking pictures of <i>ducks</i>. Please <a href="mailto:duck@blockscout.com">send</a> us one.',
},
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
test('base view +@mobile', async({ mount, page }) => {
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ finished_indexing_blocks: false, indexed_blocks_ratio: 0.1 }),
}));
const component = await mount(
<TestApp>
<Layout>Page Content</Layout>
</TestApp>,
);
test('base view +@mobile', async({ render, mockEnvs, mockApiResponse }) => {
await mockEnvs([
[
'NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE',
'We are currently lacking pictures of <i>ducks</i>. Please <a href="mailto:duck@blockscout.com">send</a> us one.',
],
]);
await mockApiResponse('homepage_indexing_status', indexingStatus);
const component = await render(<Layout>Page Content</Layout>);
await expect(component).toHaveScreenshot();
});
ui/shared/layout/LayoutError.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { indexingStatus } from 'mocks/stats/index';
import { test, expect } from 'playwright/lib';
import LayoutHome from './LayoutHome';
const API_URL = buildApiUrl('homepage_indexing_status');
test('base view +@mobile', async({ mount, page }) => {
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ finished_indexing_blocks: false, indexed_blocks_ratio: 0.1 }),
}));
const component = await mount(
<TestApp>
test('base view +@mobile', async({ render, mockApiResponse }) => {
await mockApiResponse('homepage_indexing_status', indexingStatus);
const component = await render(
<LayoutHome>
<Box pt={ 10 }>Error</Box>
</LayoutHome>
</TestApp>,
</LayoutHome>,
);
await expect(component).toHaveScreenshot();
});
ui/shared/layout/LayoutHome.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { indexingStatus } from 'mocks/stats/index';
import { test, expect } from 'playwright/lib';
import LayoutHome from './LayoutHome';
const API_URL = buildApiUrl('homepage_indexing_status');
test('base view +@mobile', async({ mount, page }) => {
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ finished_indexing_blocks: false, indexed_blocks_ratio: 0.1 }),
}));
const component = await mount(
<TestApp>
<LayoutHome>Page Content</LayoutHome>
</TestApp>,
);
test('base view +@mobile', async({ render, mockApiResponse }) => {
await mockApiResponse('homepage_indexing_status', indexingStatus);
const component = await render(<LayoutHome>Page Content</LayoutHome>);
await expect(component).toHaveScreenshot();
});
ui/shared/logs/LogDecodedInputData.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as mocks from 'mocks/txs/decodedInputData';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import LogDecodedInputData from './LogDecodedInputData';
test('with indexed fields +@mobile +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
<LogDecodedInputData data={ mocks.withIndexedFields }/>
</TestApp>,
);
test('with indexed fields +@mobile +@dark-mode', async({ render }) => {
const component = await render(<LogDecodedInputData data={ mocks.withIndexedFields }/>);
await expect(component).toHaveScreenshot();
});
test('without indexed fields +@mobile', async({ mount }) => {
const component = await mount(
<TestApp>
<LogDecodedInputData data={ mocks.withoutIndexedFields }/>
</TestApp>,
);
test('without indexed fields +@mobile', async({ render }) => {
const component = await render(<LogDecodedInputData data={ mocks.withoutIndexedFields }/>);
await expect(component).toHaveScreenshot();
});
ui/shared/logs/LogItem.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as addressMocks from 'mocks/address/address';
import * as inputDataMocks from 'mocks/txs/decodedInputData';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import LogItem from './LogItem';
......@@ -15,9 +14,8 @@ const TOPICS = [
];
const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee';
test('with decoded input data +@mobile +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
test('with decoded input data +@mobile +@dark-mode', async({ render }) => {
const component = await render(
<LogItem
index={ 42 }
decoded={ inputDataMocks.withIndexedFields }
......@@ -26,15 +24,13 @@ test('with decoded input data +@mobile +@dark-mode', async({ mount }) => {
data={ DATA }
type="transaction"
tx_hash={ null }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
test('without decoded input data +@mobile', async({ mount }) => {
const component = await mount(
<TestApp>
test('without decoded input data +@mobile', async({ render }) => {
const component = await render(
<LogItem
index={ 42 }
decoded={ null }
......@@ -43,8 +39,7 @@ test('without decoded input data +@mobile', async({ mount }) => {
data={ DATA }
type="transaction"
tx_hash={ null }
/>
</TestApp>,
/>,
);
await expect(component).toHaveScreenshot();
});
ui/shared/logs/LogTopic.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import LogTopic from './LogTopic';
test('address view +@mobile -@default', async({ mount }) => {
const component = await mount(
<TestApp>
<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
</TestApp>,
);
test('address view +@mobile -@default', async({ render }) => {
const component = await render(<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>);
await component.locator('select[aria-label="Data type"]').selectOption('address');
await expect(component).toHaveScreenshot();
});
test('hex view +@mobile -@default', async({ mount }) => {
const component = await mount(
<TestApp>
<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
</TestApp>,
);
test('hex view +@mobile -@default', async({ render }) => {
const component = await render(<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>);
await component.locator('select[aria-label="Data type"]').selectOption('hex');
await expect(component).toHaveScreenshot();
......
ui/shared/nft/NftMedia.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import { Box } from '@chakra-ui/react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import NftMedia from './NftMedia';
test.describe('no url', () => {
test.use({ viewport: { width: 250, height: 250 } });
test('preview +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
<NftMedia animationUrl={ null } imageUrl={ null }/>
</TestApp>,
);
test('preview +@dark-mode', async({ render }) => {
const component = await render(<NftMedia animationUrl={ null } imageUrl={ null }/>);
await expect(component).toHaveScreenshot();
});
test('with fallback', async({ mount, page }) => {
test('with fallback', async({ render, mockAssetResponse }) => {
const IMAGE_URL = 'https://localhost:3000/my-image.jpg';
await page.route(IMAGE_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_long.jpg',
});
});
const component = await mount(
<TestApp>
<NftMedia animationUrl={ null } imageUrl={ IMAGE_URL }/>
</TestApp>,
);
await mockAssetResponse(IMAGE_URL, './playwright/mocks/image_long.jpg');
const component = await render(<NftMedia animationUrl={ null } imageUrl={ IMAGE_URL }/>);
await expect(component).toHaveScreenshot();
});
test('non-media url and fallback', async({ mount, page }) => {
test('non-media url and fallback', async({ render, page, mockAssetResponse }) => {
const ANIMATION_URL = 'https://localhost:3000/my-animation.m3u8';
const ANIMATION_MEDIA_TYPE_API_URL = `/node-api/media-type?url=${ encodeURIComponent(ANIMATION_URL) }`;
const IMAGE_URL = 'https://localhost:3000/my-image.jpg';
......@@ -47,88 +30,40 @@ test.describe('no url', () => {
body: JSON.stringify({ type: undefined }),
});
});
await mockAssetResponse(IMAGE_URL, './playwright/mocks/image_long.jpg');
await page.route(IMAGE_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_long.jpg',
});
});
const component = await mount(
<TestApp>
<NftMedia animationUrl={ ANIMATION_URL } imageUrl={ IMAGE_URL }/>
</TestApp>,
);
const component = await render(<NftMedia animationUrl={ ANIMATION_URL } imageUrl={ IMAGE_URL }/>);
await expect(component).toHaveScreenshot();
});
});
test.describe('image', () => {
test.use({ viewport: { width: 250, height: 250 } });
const MEDIA_URL = 'https://localhost:3000/my-image.jpg';
test.beforeEach(async({ page }) => {
await page.route(MEDIA_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_long.jpg',
});
});
test.beforeEach(async({ mockAssetResponse }) => {
await mockAssetResponse(MEDIA_URL, './playwright/mocks/image_long.jpg');
});
test('preview +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
test('preview +@dark-mode', async({ render, page }) => {
await render(
<Box boxSize="250px">
<NftMedia animationUrl={ MEDIA_URL } imageUrl={ null }/>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
});
});
test('image preview hover', async({ mount, page }) => {
const MEDIA_URL = 'https://localhost:3000/my-image.jpg';
await page.route(MEDIA_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_long.jpg',
});
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } });
});
const component = await mount(
<TestApp>
<NftMedia animationUrl={ MEDIA_URL } imageUrl={ null } w="250px"/>
</TestApp>,
);
test('preview hover', async({ render, page }) => {
const component = await render(<NftMedia animationUrl={ MEDIA_URL } imageUrl={ null } w="250px"/>);
await component.getByAltText('Token instance image').hover();
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } });
});
test('image fullscreen +@dark-mode +@mobile', async({ mount, page }) => {
const MEDIA_URL = 'https://localhost:3000/my-image.jpg';
await page.route(MEDIA_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_long.jpg',
});
});
const component = await mount(
<TestApp>
<NftMedia animationUrl={ MEDIA_URL } imageUrl={ null } withFullscreen w="250px"/>
</TestApp>,
);
test('fullscreen +@dark-mode +@mobile', async({ render, page }) => {
const component = await render(<NftMedia animationUrl={ MEDIA_URL } imageUrl={ null } withFullscreen w="250px"/>);
await component.getByAltText('Token instance image').click();
await expect(page).toHaveScreenshot();
});
});
test.describe('page', () => {
......@@ -137,27 +72,16 @@ test.describe('page', () => {
const MEDIA_URL = 'https://localhost:3000/page.html';
const MEDIA_TYPE_API_URL = `/node-api/media-type?url=${ encodeURIComponent(MEDIA_URL) }`;
test.beforeEach(async({ page }) => {
await page.route(MEDIA_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/page.html',
});
});
test.beforeEach(async({ page, mockAssetResponse }) => {
await mockAssetResponse(MEDIA_URL, './playwright/mocks/page.html');
await page.route(MEDIA_TYPE_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ type: 'html' }),
}));
});
test('preview +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
<NftMedia animationUrl={ MEDIA_URL } imageUrl={ null }/>
</TestApp>,
);
test('preview +@dark-mode', async({ render }) => {
const component = await render(<NftMedia animationUrl={ MEDIA_URL } imageUrl={ null }/>);
await expect(component).toHaveScreenshot();
});
});
ui/shared/pagination/Pagination.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import type { PaginationParams } from './types';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import Pagination from './Pagination';
test.use({ viewport: { width: 250, height: 50 } });
test('default view', async({ mount }) => {
test('default view', async({ render }) => {
const props: PaginationParams = {
page: 2,
isVisible: true,
......@@ -21,11 +20,6 @@ test('default view', async({ mount }) => {
onPrevPageClick: () => {},
resetPage: () => {},
};
const component = await mount(
<TestApp>
<Pagination { ...props } w="fit-content"/>
</TestApp>,
);
const component = await render(<Pagination { ...props } w="fit-content"/>);
await expect(component).toHaveScreenshot();
});
ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import RadioButtonGroupTest from './specs/RadioButtonGroupTest';
test('radio button group', async({ mount }) => {
const component = await mount(
<TestApp>
test('radio button group', async({ render }) => {
const component = await render(
<Box w="400px" p="10px">
<RadioButtonGroupTest/>
</Box>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
});
ui/shared/statusTag/StatusTag.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import StatusTag from './StatusTag';
test('ok status', async({ page, mount }) => {
await mount(
<TestApp>
<StatusTag type="ok" text="Test"/>
</TestApp>,
);
test('ok status', async({ page, render }) => {
await render(<StatusTag type="ok" text="Test"/>);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 75, height: 30 } });
});
test('error status', async({ page, mount }) => {
await mount(
<TestApp>
<StatusTag type="error" text="Test"/>
</TestApp>,
);
test('error status', async({ page, render }) => {
await render(<StatusTag type="error" text="Test"/>);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 75, height: 30 } });
});
test('pending status', async({ page, mount }) => {
await mount(
<TestApp>
<StatusTag type="pending" text="Test"/>
</TestApp>,
);
test('pending status', async({ page, render }) => {
await render(<StatusTag type="pending" text="Test"/>);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 75, height: 30 } });
});
ui/shared/verificationSteps/VerificationSteps.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { ZKEVM_L2_TX_STATUSES } from 'types/api/transaction';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import VerificationSteps from './VerificationSteps';
test('first step +@mobile +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
test('first step +@mobile +@dark-mode', async({ render }) => {
const component = await render(
<Box p={ 10 }>
<VerificationSteps currentStep={ ZKEVM_L2_TX_STATUSES[0] } steps={ ZKEVM_L2_TX_STATUSES }/>
</Box>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
});
test('second status', async({ mount }) => {
const component = await mount(
<TestApp>
<VerificationSteps currentStep={ ZKEVM_L2_TX_STATUSES[1] } steps={ ZKEVM_L2_TX_STATUSES }/>
</TestApp>,
test('second status', async({ render }) => {
const component = await render(
<VerificationSteps currentStep={ ZKEVM_L2_TX_STATUSES[1] } steps={ ZKEVM_L2_TX_STATUSES }/>,
);
await expect(component).toHaveScreenshot();
});
ui/snippets/footer/Footer.pw.tsx
View file @ 1b977de2
......@@ -2,7 +2,7 @@ import React from 'react';
import { FOOTER_LINKS } from 'mocks/config/footerLinks';
import { test, expect } from 'playwright/lib';
import * as configs from 'playwright/utils/configs';
import * as pwConfig from 'playwright/utils/config';
import Footer from './Footer';
......@@ -30,7 +30,7 @@ test.describe('with custom links, max cols', () => {
});
test.describe('screen xl', () => {
test.use({ viewport: configs.viewport.xl });
test.use({ viewport: pwConfig.viewport.xl });
test('', async({ page }) => {
await expect(page).toHaveScreenshot();
......
ui/snippets/header/HeaderDesktop.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import HeaderDesktop from './HeaderDesktop';
test('default view +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
<HeaderDesktop/>
</TestApp>,
);
test('default view +@dark-mode', async({ render }) => {
const component = await render(<HeaderDesktop/>);
await expect(component).toHaveScreenshot();
});
ui/snippets/header/HeaderMobile.pw.tsx
View file @ 1b977de2
import { test, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect, devices } from 'playwright/lib';
import HeaderMobile from './HeaderMobile';
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('default view +@dark-mode', async({ mount, page }) => {
await mount(
<TestApp>
<HeaderMobile/>
</TestApp>,
);
test('default view +@dark-mode', async({ render, page }) => {
await render(<HeaderMobile/>);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 150 } });
});
ui/snippets/navigation/NavigationDesktop.pw.tsx
View file @ 1b977de2
......@@ -7,7 +7,7 @@ import * as cookies from 'lib/cookies';
import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
import { contextWithAuth } from 'playwright/fixtures/auth';
import { test, expect } from 'playwright/lib';
import * as configs from 'playwright/utils/configs';
import * as pwConfig from 'playwright/utils/config';
import NavigationDesktop from './NavigationDesktop';
......@@ -46,7 +46,7 @@ test.describe('no auth', () => {
});
test.describe('xl screen', () => {
test.use({ viewport: configs.viewport.xl });
test.use({ viewport: pwConfig.viewport.xl });
test('+@dark-mode', async() => {
await expect(component).toHaveScreenshot();
......@@ -76,7 +76,7 @@ authTest.describe('auth', () => {
});
authTest.describe('xl screen', () => {
authTest.use({ viewport: configs.viewport.xl });
authTest.use({ viewport: pwConfig.viewport.xl });
authTest('+@dark-mode', async() => {
await expect(component).toHaveScreenshot();
......@@ -85,7 +85,7 @@ authTest.describe('auth', () => {
});
test.describe('with tooltips', () => {
test.use({ viewport: configs.viewport.xl });
test.use({ viewport: pwConfig.viewport.xl });
test('', async({ render, page }) => {
const component = await render(
......@@ -123,7 +123,7 @@ test.describe('with submenu', () => {
});
test.describe('xl screen', () => {
test.use({ viewport: configs.viewport.xl });
test.use({ viewport: pwConfig.viewport.xl });
test('', async() => {
await expect(component).toHaveScreenshot();
......@@ -157,7 +157,7 @@ noSideBarCookieTest.describe('cookie set to false', () => {
});
noSideBarCookieTest.describe('xl screen', () => {
noSideBarCookieTest.use({ viewport: configs.viewport.xl });
noSideBarCookieTest.use({ viewport: pwConfig.viewport.xl });
noSideBarCookieTest('', async() => {
const networkMenu = component.locator('button[aria-label="Network menu"]');
......@@ -202,7 +202,7 @@ test('hover +@dark-mode', async({ render }) => {
});
test.describe('hover xl screen', () => {
test.use({ viewport: configs.viewport.xl });
test.use({ viewport: pwConfig.viewport.xl });
test('+@dark-mode', async({ render }) => {
const component = await render(
......
ui/snippets/networkMenu/NetworkLogo.pw.tsx
View file @ 1b977de2
......@@ -2,7 +2,7 @@ import type { Locator } from '@playwright/test';
import React from 'react';
import { test, expect } from 'playwright/lib';
import * as configs from 'playwright/utils/configs';
import * as pwConfig from 'playwright/utils/config';
import NetworkLogo from './NetworkLogo';
......@@ -24,7 +24,7 @@ test.describe('placeholder logo', () => {
});
test.describe('screen xl', () => {
test.use({ viewport: configs.viewport.xl });
test.use({ viewport: pwConfig.viewport.xl });
test('+@dark-mode', async({ render }) => {
const component = await render(<NetworkLogo/>);
......@@ -52,7 +52,7 @@ test.describe('custom logo', () => {
});
test.describe('screen xl', () => {
test.use({ viewport: configs.viewport.xl });
test.use({ viewport: pwConfig.viewport.xl });
test('+@dark-mode', async() => {
await expect(component.locator('a')).toHaveScreenshot();
......@@ -83,7 +83,7 @@ test.describe('custom logo with dark option -@default +@dark-mode', () => {
});
test.describe('screen xl', () => {
test.use({ viewport: configs.viewport.xl });
test.use({ viewport: pwConfig.viewport.xl });
test('', async() => {
await expect(component.locator('a')).toHaveScreenshot();
......
ui/snippets/searchBar/SearchBarInput.pw.tsx
View file @ 1b977de2
import { LightMode } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import SearchBarInput from './SearchBarInput';
......@@ -13,26 +12,18 @@ const props = {
value: 'duck duck',
};
test('input on regular page +@mobile +@dark-mode', async({ mount, page }) => {
await mount(
<TestApp>
<SearchBarInput { ...props }/>
</TestApp>,
);
test('input on regular page +@mobile +@dark-mode', async({ render, page }) => {
await render(<SearchBarInput { ...props }/>);
const input = page.getByPlaceholder(/search by/i);
await expect(input).toHaveScreenshot();
});
test('input on home page +@mobile +@dark-mode', async({ mount, page }) => {
await mount(
<TestApp>
test('input on home page +@mobile +@dark-mode', async({ render, page }) => {
await render(
<LightMode>
<SearchBarInput { ...props } isHomepage/>
</LightMode>
</TestApp>,
</LightMode>,
);
const input = page.getByPlaceholder(/search by/i);
await expect(input).toHaveScreenshot();
});
ui/snippets/topBar/TopBar.pw.tsx
View file @ 1b977de2
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as statsMock from 'mocks/stats/index';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import TopBar from './TopBar';
const test = base.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_SWAP_BUTTON_URL', value: 'uniswap' },
{ name: 'NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL', value: 'DUCK' },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
test.beforeEach(async({ mockEnvs }) => {
await mockEnvs([
[ 'NEXT_PUBLIC_SWAP_BUTTON_URL', 'uniswap' ],
[ 'NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL', 'DUCK' ],
]);
});
test('default view +@dark-mode +@mobile', async({ mount, page }) => {
await page.route(buildApiUrl('stats'), (route) => route.fulfill({
status: 200,
body: JSON.stringify(statsMock.base),
}));
const component = await mount(
<TestApp>
<TopBar/>
</TestApp>,
);
test('default view +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
await mockApiResponse('stats', statsMock.base);
const component = await render(<TopBar/>);
await component.getByText(/\$1\.39/).click();
await expect(page.getByText(/last update/i)).toBeVisible();
......@@ -36,17 +24,8 @@ test('default view +@dark-mode +@mobile', async({ mount, page }) => {
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 400 } });
});
test('with secondary coin price +@mobile', async({ mount, page }) => {
await page.route(buildApiUrl('stats'), (route) => route.fulfill({
status: 200,
body: JSON.stringify(statsMock.withSecondaryCoin),
}));
const component = await mount(
<TestApp>
<TopBar/>
</TestApp>,
);
test('with secondary coin price +@mobile', async({ render, mockApiResponse }) => {
await mockApiResponse('stats', statsMock.withSecondaryCoin);
const component = await render(<TopBar/>);
await expect(component).toHaveScreenshot();
});
ui/token/TokenHolders/TokenHoldersList.pw.tsx
View file @ 1b977de2
import { test, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import { tokenHoldersERC20, tokenHoldersERC1155 } from 'mocks/tokens/tokenHolders';
import { tokenInfo, tokenInfoERC1155a } from 'mocks/tokens/tokenInfo';
import TestApp from 'playwright/TestApp';
import { test, expect, devices } from 'playwright/lib';
import TokenHoldersList from './TokenHoldersList';
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view without IDs', async({ mount }) => {
const component = await mount(
<TestApp>
<TokenHoldersList data={ tokenHoldersERC20.items } token={ tokenInfo }/>
</TestApp>,
);
test('base view without IDs', async({ render }) => {
const component = await render(<TokenHoldersList data={ tokenHoldersERC20.items } token={ tokenInfo }/>);
await expect(component).toHaveScreenshot();
});
test('base view with IDs', async({ mount }) => {
const component = await mount(
<TestApp>
<TokenHoldersList data={ tokenHoldersERC1155.items } token={ tokenInfoERC1155a }/>
</TestApp>,
);
test('base view with IDs', async({ render }) => {
const component = await render(<TokenHoldersList data={ tokenHoldersERC1155.items } token={ tokenInfoERC1155a }/>);
await expect(component).toHaveScreenshot();
});
ui/token/TokenHolders/TokenHoldersTable.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { tokenHoldersERC20, tokenHoldersERC1155 } from 'mocks/tokens/tokenHolders';
import { tokenInfo, tokenInfoERC1155a } from 'mocks/tokens/tokenInfo';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import TokenHoldersTable from './TokenHoldersTable';
test('base view without IDs', async({ mount }) => {
const component = await mount(
<TestApp>
<Box h="128px"/>
test('base view without IDs', async({ render }) => {
const component = await render(
<Box pt="128px">
<TokenHoldersTable data={ tokenHoldersERC20.items } token={ tokenInfo } top={ 76 }/>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
});
test('base view with IDs', async({ mount }) => {
const component = await mount(
<TestApp>
<Box h="128px"/>
test('base view with IDs', async({ render }) => {
const component = await render(
<Box pt="128px">
<TokenHoldersTable data={ tokenHoldersERC1155.items } token={ tokenInfoERC1155a } top={ 76 }/>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
......
ui/token/TokenInventory.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { tokenInfoERC721a } from 'mocks/tokens/tokenInfo';
import { base as tokenInstanse } from 'mocks/tokens/tokenInstance';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import TokenInventory from './TokenInventory';
test('base view +@mobile', async({ mount }) => {
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 0 }}/>
test('base view +@mobile', async({ render }) => {
const component = await render(
<Box pt={{ base: '134px', lg: 0 }}>
<TokenInventory
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore:
......@@ -30,7 +28,7 @@ test('base view +@mobile', async({ mount }) => {
data: tokenInfoERC721a,
}}
/>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
......
ui/token/TokenTransfer/TokenTransfer.pw.tsx
View file @ 1b977de2
import { Box } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import TokenTransfer from './TokenTransfer';
test('erc20 +@mobile', async({ mount }) => {
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: '100px' }}/>
test('erc20 +@mobile', async({ render }) => {
const component = await render(
<Box pt={{ base: '134px', lg: '100px' }}>
<TokenTransfer
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore:
......@@ -24,16 +22,15 @@ test('erc20 +@mobile', async({ mount }) => {
pagination: { page: 1, isVisible: true },
}}
/>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
});
test('erc721 +@mobile', async({ mount }) => {
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: '100px' }}/>
test('erc721 +@mobile', async({ render }) => {
const component = await render(
<Box pt={{ base: '134px', lg: '100px' }}>
<TokenTransfer
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore:
......@@ -47,16 +44,15 @@ test('erc721 +@mobile', async({ mount }) => {
pagination: { page: 1, isVisible: true },
}}
/>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
});
test('erc1155 +@mobile', async({ mount }) => {
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: '100px' }}/>
test('erc1155 +@mobile', async({ render }) => {
const component = await render(
<Box pt={{ base: '134px', lg: '100px' }}>
<TokenTransfer
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore:
......@@ -75,7 +71,7 @@ test('erc1155 +@mobile', async({ mount }) => {
pagination: { page: 1, isVisible: true },
}}
/>
</TestApp>,
</Box>,
);
await expect(component).toHaveScreenshot();
......
ui/tokenInfo/TokenInfoForm.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as mocks from 'mocks/account/verifiedAddresses';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import TokenInfoForm from './TokenInfoForm';
const FORM_CONFIG_URL = buildApiUrl('token_info_applications_config', { chainId: '1' });
test('base view +@mobile +@dark-mode', async({ mount, page }) => {
await page.route(mocks.TOKEN_INFO_APPLICATION_BASE.iconUrl, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_md.jpg',
});
});
await page.route(FORM_CONFIG_URL, (route) => route.fulfill({
body: JSON.stringify(mocks.TOKEN_INFO_FORM_CONFIG),
}));
test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
await mockApiResponse('token_info_applications_config', mocks.TOKEN_INFO_FORM_CONFIG, { pathParams: { chainId: '1' } });
await mockAssetResponse(mocks.TOKEN_INFO_APPLICATION_BASE.iconUrl, './playwright/mocks/image_md.jpg');
});
test('base view +@mobile +@dark-mode', async({ render }) => {
const props = {
address: mocks.VERIFIED_ADDRESS.ITEM_1.contractAddress,
tokenName: 'Test Token (TT)',
application: mocks.TOKEN_INFO_APPLICATION.APPROVED,
onSubmit: () => {},
};
const component = await mount(
<TestApp>
<TokenInfoForm { ...props }/>
</TestApp>,
);
const component = await render(<TokenInfoForm { ...props }/>);
await expect(component).toHaveScreenshot();
});
test('status IN_PROCESS', async({ mount, page }) => {
await page.route(mocks.TOKEN_INFO_APPLICATION_BASE.iconUrl, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_md.jpg',
});
});
await page.route(FORM_CONFIG_URL, (route) => route.fulfill({
body: JSON.stringify(mocks.TOKEN_INFO_FORM_CONFIG),
}));
test('status IN_PROCESS', async({ render }) => {
const props = {
address: mocks.VERIFIED_ADDRESS.ITEM_1.contractAddress,
tokenName: 'Test Token (TT)',
application: mocks.TOKEN_INFO_APPLICATION.IN_PROCESS,
onSubmit: () => {},
};
const component = await mount(
<TestApp>
<TokenInfoForm { ...props }/>
</TestApp>,
);
const component = await render(<TokenInfoForm { ...props }/>);
await expect(component).toHaveScreenshot();
});
ui/tokenInstance/TokenInstanceDetails.pw.tsx
View file @ 1b977de2
......@@ -9,8 +9,7 @@ import { tokenInfoERC721a } from 'mocks/tokens/tokenInfo';
import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import TestApp from 'playwright/TestApp';
import * as configs from 'playwright/utils/configs';
import * as pwConfig from 'playwright/utils/config';
import TokenInstanceDetails from './TokenInstanceDetails';
......@@ -42,15 +41,10 @@ test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
});
test('base view +@dark-mode +@mobile', async({ render, page }) => {
const component = await render(
<TestApp>
<TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
</TestApp>,
);
const component = await render(<TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -63,30 +57,19 @@ test.describe('action button', () => {
});
test('base view +@dark-mode +@mobile', async({ render, page }) => {
const component = await render(
<TestApp>
<TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
</TestApp>,
);
const component = await render(<TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
test('without marketplaces +@dark-mode +@mobile', async({ render, page, mockEnvs }) => {
mockEnvs(ENVS_MAP.noNftMarketplaces);
const component = await render(
<TestApp>
<TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
</TestApp>,
);
const component = await render(<TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
});
ui/tokenInstance/TokenInstanceMetadata.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import TokenInstanceMetadata from './TokenInstanceMetadata';
test('base view +@mobile', async({ mount }) => {
const component = await mount(
<TestApp>
<TokenInstanceMetadata data={ tokenInstanceMock.withRichMetadata.metadata }/>
</TestApp>,
);
test('base view +@mobile', async({ render }) => {
const component = await render(<TokenInstanceMetadata data={ tokenInstanceMock.withRichMetadata.metadata }/>);
await component.getByRole('button', { name: /png/i }).click();
await component.getByRole('button', { name: /primary/i }).click();
......@@ -26,14 +21,8 @@ test('base view +@mobile', async({ mount }) => {
await expect(component).toHaveScreenshot();
});
test('raw view', async({ mount }) => {
const component = await mount(
<TestApp>
<TokenInstanceMetadata data={ tokenInstanceMock.withRichMetadata.metadata }/>
</TestApp>,
);
test('raw view', async({ render }) => {
const component = await render(<TokenInstanceMetadata data={ tokenInstanceMock.withRichMetadata.metadata }/>);
await component.locator('select').selectOption('JSON');
await expect(component).toHaveScreenshot();
});
ui/tx/TxBlobs.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as blobsMock from 'mocks/blobs/blobs';
import * as txMock from 'mocks/txs/tx';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import TxBlobs from './TxBlobs';
import type { TxQuery } from './useTxQuery';
const TX_BLOBS_API_URL = buildApiUrl('tx_blobs', { hash: txMock.base.hash });
const hooksConfig = {
router: {
query: { hash: txMock.base.hash },
},
};
test('base view +@mobile', async({ mount, page }) => {
await page.route(TX_BLOBS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(blobsMock.txBlobs),
}));
test('base view +@mobile', async({ render, mockApiResponse }) => {
await mockApiResponse('tx_blobs', blobsMock.txBlobs, { pathParams: { hash: txMock.base.hash } });
const txQuery = {
data: txMock.base,
isPlaceholderData: false,
isError: false,
} as TxQuery;
const component = await mount(
<TestApp>
<TxBlobs txQuery={ txQuery }/>
</TestApp>,
{ hooksConfig },
);
const component = await render(<TxBlobs txQuery={ txQuery }/>, { hooksConfig });
await expect(component).toHaveScreenshot();
});
ui/tx/TxInternals.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as internalTxsMock from 'mocks/txs/internalTxs';
import * as txMock from 'mocks/txs/tx';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import TxInternals from './TxInternals';
import type { TxQuery } from './useTxQuery';
const TX_HASH = txMock.base.hash;
const API_URL_TX_INTERNALS = buildApiUrl('tx_internal_txs', { hash: TX_HASH });
const hooksConfig = {
router: {
query: { hash: TX_HASH },
},
};
test('base view +@mobile', async({ mount, page }) => {
await page.route(API_URL_TX_INTERNALS, (route) => route.fulfill({
status: 200,
body: JSON.stringify(internalTxsMock.baseResponse),
}));
test('base view +@mobile', async({ render, mockApiResponse }) => {
await mockApiResponse('tx_internal_txs', internalTxsMock.baseResponse, { pathParams: { hash: TX_HASH } });
const txQuery = {
data: txMock.base,
isPlaceholderData: false,
isError: false,
} as TxQuery;
const component = await mount(
<TestApp>
<TxInternals txQuery={ txQuery }/>
</TestApp>,
{ hooksConfig },
);
const component = await render(<TxInternals txQuery={ txQuery }/>, { hooksConfig });
await expect(component).toHaveScreenshot();
});
ui/tx/TxState.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as txStateMock from 'mocks/txs/state';
import * as txMock from 'mocks/txs/tx';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import TxState from './TxState';
import type { TxQuery } from './useTxQuery';
const TX_STATE_API_URL = buildApiUrl('tx_state_changes', { hash: txMock.base.hash });
const hooksConfig = {
router: {
query: { hash: txMock.base.hash },
},
};
test('base view +@mobile', async({ mount, page }) => {
await page.route(TX_STATE_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(txStateMock.baseResponse),
}));
test('base view +@mobile', async({ render, mockApiResponse }) => {
await mockApiResponse('tx_state_changes', txStateMock.baseResponse, { pathParams: { hash: txMock.base.hash } });
const txQuery = {
data: txMock.base,
isPlaceholderData: false,
isError: false,
} as TxQuery;
const component = await mount(
<TestApp>
<TxState txQuery={ txQuery }/>
</TestApp>,
{ hooksConfig },
);
const component = await render(<TxState txQuery={ txQuery }/>, { hooksConfig });
await expect(component).toHaveScreenshot();
});
ui/tx/details/TxInfo.pw.tsx
View file @ 1b977de2
......@@ -3,7 +3,7 @@ import React from 'react';
import * as txMock from 'mocks/txs/tx';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import * as configs from 'playwright/utils/configs';
import * as pwConfig from 'playwright/utils/config';
import TxInfo from './TxInfo';
......@@ -13,8 +13,8 @@ test('between addresses +@mobile +@dark-mode', async({ render, page }) => {
await page.getByText('View details').click();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -22,8 +22,8 @@ test('creating contact', async({ render, page }) => {
const component = await render(<TxInfo data={ txMock.withContractCreation } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -31,8 +31,8 @@ test('with token transfer +@mobile', async({ render, page }) => {
const component = await render(<TxInfo data={ txMock.withTokenTransfer } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -40,8 +40,8 @@ test('with decoded revert reason', async({ render, page }) => {
const component = await render(<TxInfo data={ txMock.withDecodedRevertReason } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -49,8 +49,8 @@ test('with decoded raw reason', async({ render, page }) => {
const component = await render(<TxInfo data={ txMock.withRawRevertReason } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -60,8 +60,8 @@ test('pending', async({ render, page }) => {
await page.getByText('View details').click();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -69,8 +69,8 @@ test('with actions uniswap +@mobile +@dark-mode', async({ render, page }) => {
const component = await render(<TxInfo data={ txMock.withActionsUniswap } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -80,8 +80,8 @@ test('with blob', async({ render, page }) => {
await page.getByText('View details').click();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -89,8 +89,8 @@ test('l2', async({ render, page, mockEnvs }) => {
await mockEnvs(ENVS_MAP.optimisticRollup);
const component = await render(<TxInfo data={ txMock.l2tx } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -101,8 +101,8 @@ test('without testnet warning', async({ render, page, mockEnvs }) => {
const component = await render(<TxInfo data={ txMock.l2tx } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
......@@ -111,7 +111,7 @@ test('stability customization', async({ render, page, mockEnvs }) => {
const component = await render(<TxInfo data={ txMock.stabilityTx } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
mask: [ page.locator(pwConfig.adsBannerSelector) ],
maskColor: pwConfig.maskColor,
});
});
ui/txs/TxAdditionalInfo.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as txMock from 'mocks/txs/tx';
import TestApp from 'playwright/TestApp';
import { test, expect } from 'playwright/lib';
import TxAdditionalInfo from './TxAdditionalInfo';
test('regular transaction +@dark-mode', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxAdditionalInfo tx={ txMock.base }/>
</TestApp>,
);
test('regular transaction +@dark-mode', async({ render, page }) => {
const component = await render(<TxAdditionalInfo tx={ txMock.base }/>);
await component.getByLabel('Transaction info').click();
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 600 } });
});
test('regular transaction +@mobile -@default', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxAdditionalInfo tx={ txMock.base } isMobile/>
</TestApp>,
);
test('regular transaction +@mobile -@default', async({ render, page }) => {
const component = await render(<TxAdditionalInfo tx={ txMock.base } isMobile/>);
await component.getByLabel('Transaction info').click();
await expect(page).toHaveScreenshot();
});
test('blob transaction', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxAdditionalInfo tx={ txMock.withBlob }/>
</TestApp>,
);
test('blob transaction', async({ render, page }) => {
const component = await render(<TxAdditionalInfo tx={ txMock.withBlob }/>);
await component.getByLabel('Transaction info').click();
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 600 } });
});
ui/txs/TxsListItem.pw.tsx
View file @ 1b977de2
import { test, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import * as txMock from 'mocks/txs/tx';
import TestApp from 'playwright/TestApp';
import { test, expect, devices } from 'playwright/lib';
import TxsListItem from './TxsListItem';
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
<TxsListItem tx={ txMock.withWatchListNames } showBlockInfo/>
</TestApp>,
);
test('base view +@dark-mode', async({ render }) => {
const component = await render(<TxsListItem tx={ txMock.withWatchListNames } showBlockInfo/>);
await expect(component).toHaveScreenshot();
});
test('with base address', async({ mount }) => {
const component = await mount(
<TestApp>
<TxsListItem tx={ txMock.withWatchListNames } showBlockInfo currentAddress={ txMock.base.from.hash }/>
</TestApp>,
);
test('with base address', async({ render }) => {
const component = await render(<TxsListItem tx={ txMock.withWatchListNames } showBlockInfo currentAddress={ txMock.base.from.hash }/>);
await expect(component).toHaveScreenshot();
});
ui/txs/TxsStats.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as statsMock from 'mocks/stats';
import * as txsStatsMock from 'mocks/txs/stats';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import { test, expect } from 'playwright/lib';
import TxsStats from './TxsStats';
const TXS_STATS_API_URL = buildApiUrl('txs_stats');
const STATS_API_URL = buildApiUrl('stats');
test('base view +@mobile', async({ mount, page }) => {
await page.route(STATS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(statsMock.base),
}));
await page.route(TXS_STATS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(txsStatsMock.base),
}));
const component = await mount(
<TestApp>
<TxsStats/>
</TestApp>,
);
test('base view +@mobile', async({ render, mockApiResponse }) => {
await mockApiResponse('stats', statsMock.base);
await mockApiResponse('txs_stats', txsStatsMock.base);
const component = await render(<TxsStats/>);
await expect(component).toHaveScreenshot();
});
ui/txs/TxsTable.pw.tsx
View file @ 1b977de2
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as txMock from 'mocks/txs/tx';
import TestApp from 'playwright/TestApp';
import * as configs from 'playwright/utils/configs';
import { test, expect } from 'playwright/lib';
import * as pwConfig from 'playwright/utils/config';
import TxsTable from './TxsTable';
test.describe('base view', () => {
test('+@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
{ /* eslint-disable-next-line react/jsx-no-bind */ }
<TxsTable txs={ [ txMock.base, txMock.withWatchListNames ] } sort={ () => () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/>
</TestApp>,
test('+@dark-mode', async({ render }) => {
const component = await render(
<TxsTable
txs={ [ txMock.base, txMock.withWatchListNames ] }
// eslint-disable-next-line react/jsx-no-bind
sort={ () => () => {} }
top={ 0 }
showBlockInfo
showSocketInfo={ false }
/>,
);
await component.getByText('kitty').first().hover();
......@@ -23,14 +26,18 @@ test.describe('base view', () => {
});
test.describe('screen xl', () => {
test.use({ viewport: configs.viewport.xl });
test('', async({ mount }) => {
const component = await mount(
<TestApp>
{ /* eslint-disable-next-line react/jsx-no-bind */ }
<TxsTable txs={ [ txMock.base, txMock.withWatchListNames ] } sort={ () => () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/>
</TestApp>,
test.use({ viewport: pwConfig.viewport.xl });
test('', async({ render }) => {
const component = await render(
<TxsTable
txs={ [ txMock.base, txMock.withWatchListNames ] }
// eslint-disable-next-line react/jsx-no-bind
sort={ () => () => {} }
top={ 0 }
showBlockInfo
showSocketInfo={ false }
/>,
);
await component.getByText('kitty').first().hover();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment