diff --git a/.eslintrc.js b/.eslintrc.js index 20881d308f..cd540371c6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -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/*', diff --git a/mocks/address/tokens.ts b/mocks/address/tokens.ts index f3fd58b8d5..c494c9bbe3 100644 --- a/mocks/address/tokens.ts +++ b/mocks/address/tokens.ts @@ -1,4 +1,4 @@ -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 = { diff --git a/mocks/contract/solidityscanReport.ts b/mocks/contract/solidityscanReport.ts index 000adabf7f..41cbc785f2 100644 --- a/mocks/contract/solidityscanReport.ts +++ b/mocks/contract/solidityscanReport.ts @@ -1,5 +1,8 @@ -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: { diff --git a/mocks/stats/index.ts b/mocks/stats/index.ts index a3f5d6b212..e6fecc8d98 100644 --- a/mocks/stats/index.ts +++ b/mocks/stats/index.ts @@ -1,6 +1,8 @@ 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', +}; diff --git a/mocks/tokens/tokenInfo.ts b/mocks/tokens/tokenInfo.ts index a732712775..a22c7537e5 100644 --- a/mocks/tokens/tokenInfo.ts +++ b/mocks/tokens/tokenInfo.ts @@ -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'> = { diff --git a/mocks/txs/state.ts b/mocks/txs/state.ts index 204fe1c867..1156972035 100644 --- a/mocks/txs/state.ts +++ b/mocks/txs/state.ts @@ -1,4 +1,4 @@ -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, diff --git a/playwright/TestApp.tsx b/playwright/TestApp.tsx index ca65a6e0c6..8010c542f9 100644 --- a/playwright/TestApp.tsx +++ b/playwright/TestApp.tsx @@ -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 ( - + diff --git a/playwright/fixtures/contextWithEnvs.ts b/playwright/fixtures/contextWithEnvs.ts deleted file mode 100644 index d9c1464462..0000000000 --- a/playwright/fixtures/contextWithEnvs.ts +++ /dev/null @@ -1,24 +0,0 @@ -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} envs - * @return {*} {Parameters[0]['context']} - */ -export default function contextWithEnvsFixture(envs: Array): Parameters[0]['context'] { - return async({ browser }, use) => { - const context = await createContextWithStorage(browser, envs); - - await use(context); - await context.close(); - }; -} diff --git a/playwright/fixtures/contextWithFeatures.ts b/playwright/fixtures/contextWithFeatures.ts deleted file mode 100644 index 84f8a55f20..0000000000 --- a/playwright/fixtures/contextWithFeatures.ts +++ /dev/null @@ -1,25 +0,0 @@ -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} envs - * @return {*} {Parameters[0]['context']} - */ -export default function contextWithFeaturesFixture(envs: Array): Parameters[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(); - }; -} diff --git a/playwright/fixtures/createContextWithStorage.ts b/playwright/fixtures/createContextWithStorage.ts deleted file mode 100644 index 178dbf8a30..0000000000 --- a/playwright/fixtures/createContextWithStorage.ts +++ /dev/null @@ -1,22 +0,0 @@ -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: [], - }, - }); -} diff --git a/playwright/fixtures/mockApiResponse.ts b/playwright/fixtures/mockApiResponse.ts index 595b623ae9..a7b3594f89 100644 --- a/playwright/fixtures/mockApiResponse.ts +++ b/playwright/fixtures/mockApiResponse.ts @@ -6,6 +6,7 @@ import type { ResourceName, ResourcePayload } from 'lib/api/resources'; interface Options { pathParams?: Parameters>[1]; queryParams?: Parameters>[2]; + times?: number; } export type MockApiResponseFixture = (resourceName: R, responseMock: ResourcePayload, options?: Options) => Promise; @@ -17,7 +18,7 @@ const fixture: TestFixture = async({ pag await page.route(apiUrl, (route) => route.fulfill({ status: 200, body: JSON.stringify(responseMock), - })); + }), { times: options?.times }); return apiUrl; }); diff --git a/playwright/fixtures/render.tsx b/playwright/fixtures/render.tsx index 88f7fe669f..789f77ad63 100644 --- a/playwright/fixtures/render.tsx +++ b/playwright/fixtures/render.tsx @@ -1,3 +1,4 @@ +/* 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'; diff --git a/playwright/fixtures/socketServer.ts b/playwright/fixtures/socketServer.ts index f6d730ce42..154bb6bb2d 100644 --- a/playwright/fixtures/socketServer.ts +++ b/playwright/fixtures/socketServer.ts @@ -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; @@ -20,7 +20,7 @@ export interface SocketServerFixture { // eslint-disable-next-line @typescript-eslint/no-unused-vars export const createSocket: TestFixture = async({ page }, use) => { - const socketServer = new WebSocketServer({ port: app.socketPort }); + const socketServer = new WebSocketServer({ port: socketPort }); const connectionPromise = new Promise((resolve) => { socketServer.on('connection', (socket: WebSocket) => { diff --git a/playwright/utils/app.ts b/playwright/utils/app.ts deleted file mode 100644 index 466757ee9b..0000000000 --- a/playwright/utils/app.ts +++ /dev/null @@ -1 +0,0 @@ -export const socketPort = 3200; diff --git a/playwright/utils/buildApiUrl.ts b/playwright/utils/buildApiUrl.ts deleted file mode 100644 index 346828c618..0000000000 --- a/playwright/utils/buildApiUrl.ts +++ /dev/null @@ -1,20 +0,0 @@ -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} [pathParams] - * @return {*} string - */ -export default function buildApiUrl(resourceName: R, pathParams?: ResourcePathParams) { - const resource = RESOURCES[resourceName]; - const origin = 'endpoint' in resource && resource.endpoint ? resource.endpoint + (resource.basePath ?? '') : config.api.endpoint; - return origin + compile(resource.path)(pathParams); -} diff --git a/playwright/utils/configs.ts b/playwright/utils/config.ts similarity index 90% rename from playwright/utils/configs.ts rename to playwright/utils/config.ts index ec83566ac7..32a234a605 100644 --- a/playwright/utils/configs.ts +++ b/playwright/utils/config.ts @@ -1,4 +1,3 @@ -/* eslint-disable max-len */ import { devices } from '@playwright/test'; export const viewport = { diff --git a/playwright/utils/socket.ts b/playwright/utils/socket.ts new file mode 100644 index 0000000000..26a8a2202b --- /dev/null +++ b/playwright/utils/socket.ts @@ -0,0 +1 @@ +export const port = 3200; diff --git a/theme/components/Alert/Alert.pw.tsx b/theme/components/Alert/Alert.pw.tsx index 96918e2cd6..6314658e43 100644 --- a/theme/components/Alert/Alert.pw.tsx +++ b/theme/components/Alert/Alert.pw.tsx @@ -1,9 +1,8 @@ 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 = [ 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( - - - - + test(`${ testName } +@dark-mode`, async({ render }) => { + const component = await render( + + + This is alert text - - - , + + , ); await expect(component).toHaveScreenshot(); diff --git a/theme/components/Button/Button.pw.tsx b/theme/components/Button/Button.pw.tsx index 4c0a48ba62..7ad23f7b05 100644 --- a/theme/components/Button/Button.pw.tsx +++ b/theme/components/Button/Button.pw.tsx @@ -1,8 +1,7 @@ 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( - - - , - ); + test('base', async({ render }) => { + const component = await render(); await expect(component.locator('button')).toHaveScreenshot(); }); - test('disabled', async({ mount }) => { - const component = await mount( - - - , - ); + test('disabled', async({ render }) => { + const component = await render(); await expect(component.locator('button')).toHaveScreenshot(); }); - test('hovered', async({ mount }) => { - const component = await mount( - - - , - ); + test('hovered', async({ render }) => { + const component = await render(); await component.getByText(/click/i).hover(); await expect(component.locator('button')).toHaveScreenshot(); }); - test('active', async({ mount }) => { - const component = await mount( - - - , - ); + test('active', async({ render }) => { + const component = await render(); await expect(component.locator('button')).toHaveScreenshot(); }); }); diff --git a/theme/components/Form/FormControl.pw.tsx b/theme/components/Form/FormControl.pw.tsx index 3e3a4f9a22..39ab811036 100644 --- a/theme/components/Form/FormControl.pw.tsx +++ b/theme/components/Form/FormControl.pw.tsx @@ -1,20 +1,17 @@ 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( - - - - Smart contract / Address (0x...) - - , + test('empty', async({ render }) => { + const component = await render( + + + Smart contract / Address (0x...) + , ); 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( - - - - Smart contract / Address (0x...) - - , + test('empty error', async({ render }) => { + const component = await render( + + + Smart contract / Address (0x...) + , ); 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( - - - - Smart contract / Address (0x...) - - , + test('filled', async({ render }) => { + const component = await render( + + + Smart contract / Address (0x...) + , ); await expect(component).toHaveScreenshot(); }); - test('filled disabled', async({ mount }) => { - const component = await mount( - - - - Smart contract / Address (0x...) - - , + test('filled disabled', async({ render }) => { + const component = await render( + + + Smart contract / Address (0x...) + , ); await expect(component).toHaveScreenshot(); }); - test('filled read-only', async({ mount }) => { - const component = await mount( - - - - Smart contract / Address (0x...) - - , + test('filled read-only', async({ render }) => { + const component = await render( + + + Smart contract / Address (0x...) + , ); await expect(component).toHaveScreenshot(); }); - test('filled error', async({ mount }) => { - const component = await mount( - - - - Smart contract / Address (0x...) - - , + test('filled error', async({ render }) => { + const component = await render( + + + Smart contract / Address (0x...) + , ); 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( - - - - Smart contract / Address (0x...) - - , + test('empty', async({ render }) => { + const component = await render( + + + Smart contract / Address (0x...) + , ); 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( - - - - Smart contract / Address (0x...) - - , + test('filled', async({ render }) => { + const component = await render( + + + Smart contract / Address (0x...) + , ); await expect(component).toHaveScreenshot(); diff --git a/theme/components/Tag/Tag.pw.tsx b/theme/components/Tag/Tag.pw.tsx index 2f02a6cefd..28da22a9ef 100644 --- a/theme/components/Tag/Tag.pw.tsx +++ b/theme/components/Tag/Tag.pw.tsx @@ -1,29 +1,20 @@ 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( - - content - , - ); - + test(`${ colorScheme } color scheme +@dark-mode`, async({ render }) => { + const component = await render(content); await expect(component.getByText(/content/i)).toHaveScreenshot(); }); }); -test('with long text', async({ mount }) => { - const component = await mount( - - - this is very looooooooooong text - - , +test('with long text', async({ render }) => { + const component = await render( + + this is very looooooooooong text + , ); - await expect(component.getByText(/this/i)).toHaveScreenshot(); }); diff --git a/theme/components/Tooltip/Tooltip.pw.tsx b/theme/components/Tooltip/Tooltip.pw.tsx index 370df8836e..049f9caa20 100644 --- a/theme/components/Tooltip/Tooltip.pw.tsx +++ b/theme/components/Tooltip/Tooltip.pw.tsx @@ -1,18 +1,15 @@ 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( - - - +test('base view +@dark-mode', async({ render, page }) => { + const component = await render( + + trigger - - - , + + , ); 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( - - - - - - - - - , +test.fixme('with icon', async({ render, page }) => { + const component = await render( + + + + + + + , ); const tooltip = page.getByText(/tooltip content/i); diff --git a/types/api/stats.ts b/types/api/stats.ts index a6b03d6686..c7585f3797 100644 --- a/types/api/stats.ts +++ b/types/api/stats.ts @@ -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; diff --git a/ui/address/AddressCoinBalance.pw.tsx b/ui/address/AddressCoinBalance.pw.tsx index 95bcf16aa8..a8fdd971a3 100644 --- a/ui/address/AddressCoinBalance.pw.tsx +++ b/ui/address/AddressCoinBalance.pw.tsx @@ -1,41 +1,24 @@ -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( - - - , - { 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(, { 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(); }); diff --git a/ui/address/AddressDetails.pw.tsx b/ui/address/AddressDetails.pw.tsx index 24505f2162..7d49ae723d 100644 --- a/ui/address/AddressDetails.pw.tsx +++ b/ui/address/AddressDetails.pw.tsx @@ -1,26 +1,16 @@ -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( - - - , - { 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(, { 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( - - - , - { 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(, { 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( - - - , - { 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(, { 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( - - - - - , +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( + + + , { 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( - - - , - { 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(, { hooksConfig }); await expect(component).toHaveScreenshot({ - mask: [ page.locator(configs.adsBannerSelector) ], - maskColor: configs.maskColor, + mask: [ page.locator(pwConfig.adsBannerSelector) ], + maskColor: pwConfig.maskColor, }); }); diff --git a/ui/address/AddressInternalTxs.pw.tsx b/ui/address/AddressInternalTxs.pw.tsx index 38d8e6dab5..cce88f4c99 100644 --- a/ui/address/AddressInternalTxs.pw.tsx +++ b/ui/address/AddressInternalTxs.pw.tsx @@ -1,34 +1,25 @@ 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( - - +test('base view +@mobile', async({ render, mockApiResponse }) => { + await mockApiResponse('address_internal_txs', internalTxsMock.baseResponse, { pathParams: { hash: ADDRESS_HASH } }); + const component = await render( + - , + , { hooksConfig }, ); - await expect(component).toHaveScreenshot(); }); diff --git a/ui/address/AddressTokenTransfers.pw.tsx b/ui/address/AddressTokenTransfers.pw.tsx index 3befb96359..f1cd2ffb00 100644 --- a/ui/address/AddressTokenTransfers.pw.tsx +++ b/ui/address/AddressTokenTransfers.pw.tsx @@ -1,126 +1,110 @@ 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({ - 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( - - +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( + - , + , { 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( - - +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( + - , + , { 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( - - + 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( + - , + , { 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( - - + 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( + - , + , { 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( - - + await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, { + pathParams: { hash: CURRENT_ADDRESS }, + queryParams: { type: [] }, + }); + await render( + - , + , { 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( - - + await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, { + pathParams: { hash: CURRENT_ADDRESS }, + queryParams: { type: [] }, + }); + await render( + - , + , { 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( - - + await render( + - , + , { 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( - - + await render( + - , + , { hooksConfig: hooksConfigWithFilter }, + { withSocket: true }, ); const socket = await createSocket(); diff --git a/ui/address/AddressTokens.pw.tsx b/ui/address/AddressTokens.pw.tsx index 514b3aa7ad..3666588528 100644 --- a/ui/address/AddressTokens.pw.tsx +++ b/ui/address/AddressTokens.pw.tsx @@ -1,81 +1,53 @@ 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 = { - items: [ tokensMock.erc20a, tokensMock.erc20b, tokensMock.erc20c, tokensMock.erc20d ], - next_page_params: nextPageParams, - }; - const response721 = { - items: [ tokensMock.erc721a, tokensMock.erc721b, tokensMock.erc721c ], - next_page_params: nextPageParams, - }; - const response1155 = { - items: [ tokensMock.erc1155a, tokensMock.erc1155b ], - next_page_params: nextPageParams, - }; - const response404 = { - items: [ tokensMock.erc404a, tokensMock.erc404b ], - next_page_params: nextPageParams, - }; +test.beforeEach(async({ mockApiResponse }) => { + const response20: AddressTokensResponse = { + items: [ tokensMock.erc20a, tokensMock.erc20b, tokensMock.erc20c, tokensMock.erc20d ], + next_page_params: nextPageParams, + }; + const response721: AddressTokensResponse = { + items: [ tokensMock.erc721a, tokensMock.erc721b, tokensMock.erc721c ], + next_page_params: nextPageParams, + }; + const response1155: AddressTokensResponse = { + items: [ tokensMock.erc1155a, tokensMock.erc1155b ], + next_page_params: nextPageParams, + }; + 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( - - + const component = await render( + - , + , { 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( - - + const component = await render( + - , + , { 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( - - + const component = await render( + - , + , { 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( - - + const component = await render( + - , + , { 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( - - + const component = await render( + - , + , { 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( - - + const component = await render( + - , + , { hooksConfig }, ); @@ -197,13 +163,10 @@ test.describe('mobile', () => { }); }); -base.describe('update balances via socket', () => { - const test = base.extend({ - 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( - - - - - - , + 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( + + + , { 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(); diff --git a/ui/address/AddressTxs.pw.tsx b/ui/address/AddressTxs.pw.tsx index b226debc32..487b88a008 100644 --- a/ui/address/AddressTxs.pw.tsx +++ b/ui/address/AddressTxs.pw.tsx @@ -1,84 +1,78 @@ 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, - { - ...txMock.base, - hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3194', - }, - ], next_page_params: { block: 1 } }), - })); - - component = await mount( - - + test.beforeEach(async({ render, mockApiResponse }) => { + await mockApiResponse( + 'address_txs', + { + items: [ + txMock.base, + { ...txMock.base, hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3194' }, + ], + next_page_params: DEFAULT_PAGINATION, + }, + { pathParams: { hash: CURRENT_ADDRESS } }, + ); + component = await render( + - , + , { 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({ - 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( - - + await render( + - , + , { 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( - - + await render( + - , + , { 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( - - + await render( + - , + , { 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( - - + await render( + - , + , { 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( - - + await render( + - , + , { hooksConfig: hooksConfigWithFilter }, + { withSocket: true }, ); const socket = await createSocket(); diff --git a/ui/address/SolidityscanReport.pw.tsx b/ui/address/SolidityscanReport.pw.tsx index fd41c7a860..f0e43ffbff 100644 --- a/ui/address/SolidityscanReport.pw.tsx +++ b/ui/address/SolidityscanReport.pw.tsx @@ -1,27 +1,19 @@ -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( - - - , - ); +test('average report +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => { + await mockApiResponse( + 'contract_solidityscan_report', + solidityscanReportMock.solidityscanReportAverage, + { pathParams: { hash: addressHash } }, + ); + const component = await render(); 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( - - - , + const component = await render( + , ); 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( - - - , + const component = await render( + , ); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } }); diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png index 7691b76608..e42a38a5fd 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png index 0b6ecd6c0b..3c20064b8f 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png index de41e51eae..199d9470f3 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png index 3d4fd0e2da..ad9fe292ae 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png index 7eaf9b7aa5..f3dc930436 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png index 3b30cce344..308e8e18e6 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png index d9bc1996f7..e96ecd6497 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png index c12174ad3b..7c07667fd9 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png index 1022cc68a4..66a05c2ccb 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png differ diff --git a/ui/address/contract/ABI/form/ContractMethodForm.pw.tsx b/ui/address/contract/ABI/form/ContractMethodForm.pw.tsx index 8438c04d4d..9bc1c7bf10 100644 --- a/ui/address/contract/ABI/form/ContractMethodForm.pw.tsx +++ b/ui/address/contract/ABI/form/ContractMethodForm.pw.tsx @@ -1,9 +1,8 @@ -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( - - - , + const component = await render( + , ); // fill top level fields diff --git a/ui/address/contract/ContractRead.pw.tsx b/ui/address/contract/ContractRead.pw.tsx index 1dc215d070..2919aab2cc 100644 --- a/ui/address/contract/ContractRead.pw.tsx +++ b/ui/address/contract/ContractRead.pw.tsx @@ -1,37 +1,30 @@ -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( - - - , - { hooksConfig }, - ); + const component = await render(, { hooksConfig }); await component.getByText(/expand all/i).click(); diff --git a/ui/address/contract/ContractWrite.pw.tsx b/ui/address/contract/ContractWrite.pw.tsx index bf3007d2e0..5f7826a755 100644 --- a/ui/address/contract/ContractWrite.pw.tsx +++ b/ui/address/contract/ContractWrite.pw.tsx @@ -1,34 +1,24 @@ -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( - - - , - { 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(, { hooksConfig }); await component.getByText(/expand all/i).click(); - await expect(component).toHaveScreenshot(); }); diff --git a/ui/address/contract/contractSubmitAuditForm/ContractSubmitAuditForm.pw.tsx b/ui/address/contract/contractSubmitAuditForm/ContractSubmitAuditForm.pw.tsx index d82adea521..a9053cad83 100644 --- a/ui/address/contract/contractSubmitAuditForm/ContractSubmitAuditForm.pw.tsx +++ b/ui/address/contract/contractSubmitAuditForm/ContractSubmitAuditForm.pw.tsx @@ -1,18 +1,11 @@ -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( - - { /* eslint-disable-next-line react/jsx-no-bind */ } - {} }/> - , - ); - +test('base view', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/address/details/AddressQrCode.pw.tsx b/ui/address/details/AddressQrCode.pw.tsx index aef931f75e..1ae1c71187 100644 --- a/ui/address/details/AddressQrCode.pw.tsx +++ b/ui/address/details/AddressQrCode.pw.tsx @@ -1,18 +1,12 @@ -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( - - - , - ); +test('default view +@mobile +@dark-mode', async({ render, page }) => { + await render(); await page.getByRole('button', { name: /qr code/i }).click(); - await expect(page).toHaveScreenshot(); }); diff --git a/ui/address/ensDomains/AddressEnsDomains.pw.tsx b/ui/address/ensDomains/AddressEnsDomains.pw.tsx index 8f75aede6d..2836b0ee67 100644 --- a/ui/address/ensDomains/AddressEnsDomains.pw.tsx +++ b/ui/address/ensDomains/AddressEnsDomains.pw.tsx @@ -1,37 +1,37 @@ -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( - - - , + 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(); await component.getByText('4').click(); - await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 550, height: 350 } }); }); diff --git a/ui/address/tokenSelect/TokenSelect.pw.tsx b/ui/address/tokenSelect/TokenSelect.pw.tsx index e58975e540..26b50461e8 100644 --- a/ui/address/tokenSelect/TokenSelect.pw.tsx +++ b/ui/address/tokenSelect/TokenSelect.pw.tsx @@ -1,70 +1,39 @@ 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( - - - - - - - , +test('base view +@dark-mode', async({ render, page }) => { + await render( + + + + + , { 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( - - - - - - - , + test('base view', async({ render, page }) => { + await render( + + + + + , { hooksConfig }, ); @@ -100,15 +67,13 @@ test.describe('mobile', () => { }); }); -test('sort', async({ mount, page }) => { - await mount( - - - - - - - , +test('sort', async({ render, page }) => { + await render( + + + + + , { 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( - - - - - - - , +test('filter', async({ render, page }) => { + await render( + + + + + , { 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( - - - - - - - , +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( + + + + + , { hooksConfig }, ); await page.getByRole('button', { name: /select/i }).click(); diff --git a/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx b/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx index 3efcd497f8..643c9aa7c5 100644 --- a/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx +++ b/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx @@ -1,35 +1,28 @@ -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( - - - , - ); - + await render(); 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( - - - , - ); + await render(); const addressInput = page.getByLabel(/smart contract address/i); await addressInput.focus(); diff --git a/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx b/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx index bda66934aa..eefb340949 100644 --- a/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx +++ b/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx @@ -1,15 +1,14 @@ -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( - - - , - ); - + await render(); 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( - - - , - ); + await render(); const signatureInput = page.getByLabel(/signature hash/i); await signatureInput.fill(mocks.SIGNATURE); diff --git a/ui/blob/BlobData.pw.tsx b/ui/blob/BlobData.pw.tsx index 487ad0e69c..959a5a4a13 100644 --- a/ui/blob/BlobData.pw.tsx +++ b/ui/blob/BlobData.pw.tsx @@ -1,53 +1,31 @@ -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( - - - , - ); - + const component = await render(); 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( - - - , - ); - + const component = await render(); 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( - - - , - ); - +test('image blob with zeroes bytes', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/contractVerification/ContractVerificationForm.pw.tsx b/ui/contractVerification/ContractVerificationForm.pw.tsx index 44b219f38d..03398fb2ea 100644 --- a/ui/contractVerification/ContractVerificationForm.pw.tsx +++ b/ui/contractVerification/ContractVerificationForm.pw.tsx @@ -1,10 +1,9 @@ -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( - - - , - { hooksConfig }, - ); +test('flatten source code method +@dark-mode +@mobile', async({ render, page }) => { + const component = await render(, { 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( - - - , - { hooksConfig }, - ); +test('standard input json method', async({ render, page }) => { + const component = await render(, { 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({ - 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( - - - , + test('with multiple contracts', async({ render, page, createSocket }) => { + const component = await render( + , { hooksConfig }, + { withSocket: true }, ); // select method @@ -163,13 +148,8 @@ test.describe('sourcify', () => { }); }); -test('multi-part files method', async({ mount, page }) => { - const component = await mount( - - - , - { hooksConfig }, - ); +test('multi-part files method', async({ render, page }) => { + const component = await render(, { 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( - - - , - { hooksConfig }, - ); +test('vyper contract method', async({ render, page }) => { + const component = await render(, { 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( - - - , - { hooksConfig }, - ); +test('vyper multi-part method', async({ render, page }) => { + const component = await render(, { 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( - - - , - { hooksConfig }, - ); +test('vyper vyper-standard-input method', async({ render, page }) => { + const component = await render(, { hooksConfig }); // select method await component.getByLabel(/verification method/i).focus(); diff --git a/ui/gasTracker/GasTrackerPriceSnippet.pw.tsx b/ui/gasTracker/GasTrackerPriceSnippet.pw.tsx index 31ea84081c..ac81323c70 100644 --- a/ui/gasTracker/GasTrackerPriceSnippet.pw.tsx +++ b/ui/gasTracker/GasTrackerPriceSnippet.pw.tsx @@ -1,14 +1,16 @@ 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 }) => { diff --git a/ui/home/LatestTxs.pw.tsx b/ui/home/LatestTxs.pw.tsx index 6e16add22f..a3b0d4880d 100644 --- a/ui/home/LatestTxs.pw.tsx +++ b/ui/home/LatestTxs.pw.tsx @@ -1,10 +1,8 @@ -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({ 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([ - txMock.base, - txMock.withContractCreation, - txMock.withTokenTransfer, - txMock.withWatchListNames, - ]), - })); - - const component = await mount( - - - , - ); - - 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', async({ render, mockApiResponse }) => { + await mockApiResponse('homepage_txs', [ txMock.base, txMock.withContractCreation, txMock.withTokenTransfer, txMock.withWatchListNames, - ]), - })); + ]); - const component = await mount( - - - , - ); + const component = await render(); + await expect(component).toHaveScreenshot(); + }); +}); + +test('default view +@dark-mode', async({ render, mockApiResponse }) => { + await mockApiResponse('homepage_txs', [ + txMock.base, + txMock.withContractCreation, + txMock.withTokenTransfer, + txMock.withWatchListNames, + ]); + const component = await render(); 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([ - txMock.base, - txMock.withContractCreation, - txMock.withTokenTransfer, - ]), - })); - - const component = await mount( - - - , - { hooksConfig }, - ); + test('new item', async({ render, mockApiResponse, createSocket }) => { + await mockApiResponse('homepage_txs', [ + txMock.base, + txMock.withContractCreation, + txMock.withTokenTransfer, + ]); + const component = await render(, { 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(); }); }); diff --git a/ui/home/Stats.pw.tsx b/ui/home/Stats.pw.tsx index 7c452f8bd3..dc9533ca9b 100644 --- a/ui/home/Stats.pw.tsx +++ b/ui/home/Stats.pw.tsx @@ -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(); diff --git a/ui/home/indicators/ChainIndicators.pw.tsx b/ui/home/indicators/ChainIndicators.pw.tsx index ffe5505cef..8e6b88044e 100644 --- a/ui/home/indicators/ChainIndicators.pw.tsx +++ b/ui/home/indicators/ChainIndicators.pw.tsx @@ -1,44 +1,26 @@ -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( - - - , - ); + test.beforeEach(async({ page, mockApiResponse, render }) => { + await mockApiResponse('stats', statsMock.withSecondaryCoin); + await mockApiResponse('stats_charts_txs', dailyTxsMock.base); + component = await render(); 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( - - - , - ); +test('partial data', async({ page, mockApiResponse, render }) => { + await mockApiResponse('stats', statsMock.base); + await mockApiResponse('stats_charts_txs', dailyTxsMock.partialData); + const component = await render(); 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( - - - , - ); - +test('no data', async({ mockApiResponse, render }) => { + await mockApiResponse('stats', statsMock.noChartData); + await mockApiResponse('stats_charts_txs', dailyTxsMock.noData); + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/marketplace/MarketplaceAppInfo.pw.tsx b/ui/marketplace/MarketplaceAppInfo.pw.tsx index 3419aaa5ec..17e686ab33 100644 --- a/ui/marketplace/MarketplaceAppInfo.pw.tsx +++ b/ui/marketplace/MarketplaceAppInfo.pw.tsx @@ -1,35 +1,22 @@ -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( - - - , - ); - +test('base view +@dark-mode', async({ render, page }) => { + await render(); 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( - - - , - ); - + test('base view', async({ render, page }) => { + await render(); await page.getByLabel('Show project info').click(); - await expect(page).toHaveScreenshot(); }); }); diff --git a/ui/marketplace/MarketplaceAppModal.pw.tsx b/ui/marketplace/MarketplaceAppModal.pw.tsx index ba6aca1233..dd3ac167d2 100644 --- a/ui/marketplace/MarketplaceAppModal.pw.tsx +++ b/ui/marketplace/MarketplaceAppModal.pw.tsx @@ -1,10 +1,9 @@ -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[1] = async({ mount, page }) => { - await page.route(appsMock[0].logo, (route) => - route.fulfill({ - status: 200, - path: './playwright/mocks/image_s.jpg', - }), - ); - - await mount( - - - , - ); - +const testFn: Parameters[1] = async({ render, page, mockAssetResponse }) => { + await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg'); + await render(); await expect(page).toHaveScreenshot(); }; diff --git a/ui/pages/Accounts.pw.tsx b/ui/pages/Accounts.pw.tsx index 77eb639235..669d44c00a 100644 --- a/ui/pages/Accounts.pw.tsx +++ b/ui/pages/Accounts.pw.tsx @@ -1,16 +1,12 @@ -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( - - - , - ); - +test('base view +@mobile +@dark-mode', async({ render, mockTextAd, mockApiResponse }) => { + await mockTextAd(); + await mockApiResponse('addresses', addresses); + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/pages/Blob.pw.tsx b/ui/pages/Blob.pw.tsx index 1f0f56227e..9e18607631 100644 --- a/ui/pages/Blob.pw.tsx +++ b/ui/pages/Blob.pw.tsx @@ -1,68 +1,35 @@ -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( - - - , - { 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(, { 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( - - - , - { hooksConfig }, - ); - +test('without data', async({ render, mockApiResponse, page }) => { + await mockApiResponse('blob', blobsMock.withoutData, { pathParams: { hash: blobsMock.base1.hash } }); + const component = await render(, { hooksConfig }); await expect(component).toHaveScreenshot({ - mask: [ page.locator(configs.adsBannerSelector) ], - maskColor: configs.maskColor, + mask: [ page.locator(pwConfig.adsBannerSelector) ], + maskColor: pwConfig.maskColor, }); }); diff --git a/ui/pages/CsvExport.pw.tsx b/ui/pages/CsvExport.pw.tsx index 8bf9d48264..87e24c6a96 100644 --- a/ui/pages/CsvExport.pw.tsx +++ b/ui/pages/CsvExport.pw.tsx @@ -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, }); }); diff --git a/ui/pages/GasTracker.pw.tsx b/ui/pages/GasTracker.pw.tsx index 976adeb445..6ad3490e31 100644 --- a/ui/pages/GasTracker.pw.tsx +++ b/ui/pages/GasTracker.pw.tsx @@ -1,55 +1,28 @@ -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( - - - , +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(); + await page.waitForResponse(chartApiUrl); await page.waitForFunction(() => { return document.querySelector('path[data-name="chart-Averagegasprice-small"]')?.getAttribute('opacity') === '1'; }); - await expect(component).toHaveScreenshot(); }); diff --git a/ui/pages/Home.pw.tsx b/ui/pages/Home.pw.tsx index 1e2862bffc..8e60696696 100644 --- a/ui/pages/Home.pw.tsx +++ b/ui/pages/Home.pw.tsx @@ -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( - - - , - ); + component = await render(); }); 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( - - - , - ); + const component = await render(); 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( - - - , - ); + const component = await render(); await expect(component).toHaveScreenshot({ - mask: [ page.locator(configs.adsBannerSelector) ], - maskColor: configs.maskColor, + mask: [ page.locator(pwConfig.adsBannerSelector) ], + maskColor: pwConfig.maskColor, }); }); }); diff --git a/ui/pages/Login.pw.tsx b/ui/pages/Login.pw.tsx index 5a56a8b55c..8462630141 100644 --- a/ui/pages/Login.pw.tsx +++ b/ui/pages/Login.pw.tsx @@ -1,25 +1,14 @@ -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( - - - , - ); - +test.fixme('has feature text', async({ render, mockFeatures }) => { + await mockFeatures([ + [ 'test_value', 'kitty' ], + ]); + const component = await render(); const featureText = component.getByText('kitty'); await expect(featureText).toBeVisible(); }); diff --git a/ui/pages/NameDomain.pw.tsx b/ui/pages/NameDomain.pw.tsx index d91b3297b5..a693cbb886 100644 --- a/ui/pages/NameDomain.pw.tsx +++ b/ui/pages/NameDomain.pw.tsx @@ -1,41 +1,19 @@ -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( - - - , + const component = await render( + , { 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({ - items: [ - ensDomainEventsMock.ensDomainEventA, - ensDomainEventsMock.ensDomainEventB, - ], - totalRecords: 2, - }), - })); - - const component = await mount( - - - , +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, + ], + }, { + pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name }, + }); + const component = await render( + , { hooksConfig: { router: { query: { name: ensDomainMock.ensDomainA.name, tab: 'history' }, @@ -74,6 +46,5 @@ test('history tab +@mobile', async({ mount, page }) => { }, } }, ); - await expect(component).toHaveScreenshot(); }); diff --git a/ui/pages/NameDomains.pw.tsx b/ui/pages/NameDomains.pw.tsx index 6a522b6faf..912a940986 100644 --- a/ui/pages/NameDomains.pw.tsx +++ b/ui/pages/NameDomains.pw.tsx @@ -1,50 +1,29 @@ -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({ render, mockApiResponse, mockTextAd }) => { + await mockTextAd(); + await mockApiResponse('domains_lookup', { + items: [ + ensDomainMock.ensDomainA, + ensDomainMock.ensDomainB, + ensDomainMock.ensDomainC, + ensDomainMock.ensDomainD, + ], + next_page_params: { + page_token: '', + page_size: 50, + }, + }, { + pathParams: { chainId: config.chain.id }, + queryParams: { only_active: true }, }); -}); - -test('default view +@mobile', async({ mount, page }) => { - await page.route(DOMAINS_LOOKUP_API_URL, (route) => route.fulfill({ - status: 200, - body: JSON.stringify({ - items: [ - ensDomainMock.ensDomainA, - ensDomainMock.ensDomainB, - ensDomainMock.ensDomainC, - ensDomainMock.ensDomainD, - ], - next_page_params: { - token_id: '', - }, - }), - })); - - const component = await mount( - - - , - ); + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/pages/Token.pw.tsx b/ui/pages/Token.pw.tsx index 676f606133..b2987b38b7 100644 --- a/ui/pages/Token.pw.tsx +++ b/ui/pages/Token.pw.tsx @@ -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, }); }); }); diff --git a/ui/pages/VerifiedContracts.pw.tsx b/ui/pages/VerifiedContracts.pw.tsx index ad0553eacd..7a07731b5c 100644 --- a/ui/pages/VerifiedContracts.pw.tsx +++ b/ui/pages/VerifiedContracts.pw.tsx @@ -1,45 +1,15 @@ -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( - - - , - ); - +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(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png index 7ebe27f5c0..0b11b35de2 100644 Binary files a/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png index 8e494c5f56..275cf30834 100644 Binary files a/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_mobile_base-view-mobile-dark-mode-1.png index 0f79cf36b9..fe2d6d1e37 100644 Binary files a/ui/pages/__screenshots__/Accounts.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Accounts.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-1.png new file mode 100644 index 0000000000..41e55e459c Binary files /dev/null and b/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-1.png differ diff --git a/ui/shared/AppError/AppError.pw.tsx b/ui/shared/AppError/AppError.pw.tsx index 36f23b03f3..035c589e40 100644 --- a/ui/shared/AppError/AppError.pw.tsx +++ b/ui/shared/AppError/AppError.pw.tsx @@ -1,79 +1,52 @@ -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( - - - , - ); + const component = await render(); 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( - - - , - ); + const component = await render(); 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( - - - , - ); + const component = await render(); 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( - - - , - ); + const component = await render(); 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( - - - , - ); + const component = await render(); 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( - - - , - ); + const component = await render(); await page.waitForResponse('https://www.google.com/recaptcha/api2/**'); - await expect(component).toHaveScreenshot({ mask: [ page.locator('.recaptcha') ], - maskColor: configs.maskColor, + maskColor: pwConfig.maskColor, }); }); diff --git a/ui/shared/FancySelect/FancySelect.pw.tsx b/ui/shared/FancySelect/FancySelect.pw.tsx index ff4e9791ec..1c6ebcfcbd 100644 --- a/ui/shared/FancySelect/FancySelect.pw.tsx +++ b/ui/shared/FancySelect/FancySelect.pw.tsx @@ -1,8 +1,7 @@ -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( - - - , + test('empty', async({ render, page }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); @@ -42,33 +39,29 @@ const defaultProps = { await expect(page).toHaveScreenshot(); }); - test('filled', async({ mount }) => { - const component = await mount( - - - , + test('filled', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); - test('error', async({ mount }) => { - const component = await mount( - - - , + test('error', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); @@ -78,31 +71,27 @@ const defaultProps = { await expect(component).toHaveScreenshot(); }); - test('disabled', async({ mount }) => { - const component = await mount( - - - , + test('disabled', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); - test('read-only', async({ mount }) => { - const component = await mount( - - - , + test('read-only', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); diff --git a/ui/shared/NetworkExplorers.pw.tsx b/ui/shared/NetworkExplorers.pw.tsx index 5a0e813ccb..5b9b996b81 100644 --- a/ui/shared/NetworkExplorers.pw.tsx +++ b/ui/shared/NetworkExplorers.pw.tsx @@ -1,18 +1,11 @@ -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( - - - , - ); - +test('base view', async({ render, page }) => { + const component = await render(); await component.getByText('2').click(); - await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 300, height: 150 } }); }); diff --git a/ui/shared/Page/PageTitle.pw.tsx b/ui/shared/Page/PageTitle.pw.tsx index 2c06639ecb..65e9e4fa30 100644 --- a/ui/shared/Page/PageTitle.pw.tsx +++ b/ui/shared/Page/PageTitle.pw.tsx @@ -1,58 +1,27 @@ -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( - - - , - ); - +test('default view +@mobile', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); -test('with text ad +@mobile', async({ mount }) => { - const component = await mount( - - - , - ); - +test('with text ad +@mobile', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); -test('with long name and many tags +@mobile', async({ mount }) => { - const component = await mount( - - - , - ); - +test('with long name and many tags +@mobile', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/SocketNewItemsNotice.pw.tsx b/ui/shared/SocketNewItemsNotice.pw.tsx index 2001f19ccb..f0bfdd6d23 100644 --- a/ui/shared/SocketNewItemsNotice.pw.tsx +++ b/ui/shared/SocketNewItemsNotice.pw.tsx @@ -1,7 +1,6 @@ -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( - - - , - { hooksConfig }, - ); - +test('2 new items in validated txs list +@dark-mode', async({ render }) => { + const component = await render(, { hooksConfig }); await expect(component).toHaveScreenshot(); }); -test('connection loss', async({ mount }) => { - const component = await mount( - - - , - { hooksConfig }, - ); - +test('connection loss', async({ render }) => { + const component = await render(, { hooksConfig }); await expect(component).toHaveScreenshot(); }); -test('fetching', async({ mount }) => { - const component = await mount( - - - , - { hooksConfig }, - ); - +test('fetching', async({ render }) => { + const component = await render(, { hooksConfig }); await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/Tabs/TabsWithScroll.pw.tsx b/ui/shared/Tabs/TabsWithScroll.pw.tsx index bd23336316..c323392cc1 100644 --- a/ui/shared/Tabs/TabsWithScroll.pw.tsx +++ b/ui/shared/Tabs/TabsWithScroll.pw.tsx @@ -1,13 +1,12 @@ -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 = [ { id: 'tab1', @@ -28,13 +27,7 @@ test('with counters', async({ mount }) => { component: null, }, ]; - const component = await mount( - - - , - ); - + const component = await render(); await component.getByText('Third tab').hover(); - await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/TokenTransfer/TokenTransferList.pw.tsx b/ui/shared/TokenTransfer/TokenTransferList.pw.tsx index d7137d0191..2545f7e924 100644 --- a/ui/shared/TokenTransfer/TokenTransferList.pw.tsx +++ b/ui/shared/TokenTransfer/TokenTransferList.pw.tsx @@ -1,9 +1,8 @@ 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( - - +test('without tx info', async({ render }) => { + const component = await render( + - , + , ); await expect(component).toHaveScreenshot(); }); -test('with tx info', async({ mount }) => { - const component = await mount( - - +test('with tx info', async({ render }) => { + const component = await render( + - , + , ); await expect(component).toHaveScreenshot(); diff --git a/ui/shared/TokenTransfer/TokenTransferTable.pw.tsx b/ui/shared/TokenTransfer/TokenTransferTable.pw.tsx index 83d41ce18e..e6df01eaa6 100644 --- a/ui/shared/TokenTransfer/TokenTransferTable.pw.tsx +++ b/ui/shared/TokenTransfer/TokenTransferTable.pw.tsx @@ -1,37 +1,34 @@ 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( - - +test('without tx info', async({ render }) => { + const component = await render( + - , + , ); await expect(component).toHaveScreenshot(); }); -test('with tx info', async({ mount }) => { - const component = await mount( - - +test('with tx info', async({ render }) => { + const component = await render( + - , + , ); await expect(component).toHaveScreenshot(); diff --git a/ui/shared/Utilization/Utilization.pw.tsx b/ui/shared/Utilization/Utilization.pw.tsx index 94d75faddf..f9ebb4e3dc 100644 --- a/ui/shared/Utilization/Utilization.pw.tsx +++ b/ui/shared/Utilization/Utilization.pw.tsx @@ -1,26 +1,17 @@ -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( - - - , - ); +test('green color scheme +@dark-mode', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); -test('gray color scheme +@dark-mode', async({ mount }) => { - const component = await mount( - - - , - ); +test('gray color scheme +@dark-mode', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/address/AddressFromTo.pw.tsx b/ui/shared/address/AddressFromTo.pw.tsx index 78124f3cd1..d8ca3ed9fa 100644 --- a/ui/shared/address/AddressFromTo.pw.tsx +++ b/ui/shared/address/AddressFromTo.pw.tsx @@ -1,62 +1,53 @@ -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( - - - , +test('outgoing txn', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('incoming txn', async({ mount }) => { - const component = await mount( - - - , +test('incoming txn', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('compact mode', async({ mount }) => { - const component = await mount( - - - , +test('compact mode', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('loading state', async({ mount }) => { - const component = await mount( - - - , +test('loading state', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/address/AddressFromToIcon.pw.tsx b/ui/shared/address/AddressFromToIcon.pw.tsx index e65b55479e..c1a6490630 100644 --- a/ui/shared/address/AddressFromToIcon.pw.tsx +++ b/ui/shared/address/AddressFromToIcon.pw.tsx @@ -1,21 +1,18 @@ 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( - - - - - , + test(`${ type } txn type +@dark-mode`, async({ render }) => { + const component = await render( + + + , ); await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/blob/BlobDataType.pw.tsx b/ui/shared/blob/BlobDataType.pw.tsx index a5e5e18018..69b6a0e6ef 100644 --- a/ui/shared/blob/BlobDataType.pw.tsx +++ b/ui/shared/blob/BlobDataType.pw.tsx @@ -1,35 +1,22 @@ -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( - - - , - ); +test('image data', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); -test('raw data', async({ mount }) => { - const component = await mount( - - - , - ); +test('raw data', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); -test('text data', async({ mount }) => { - const component = await mount( - - - , - ); +test('text data', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/chart/ChartWidget.pw.tsx b/ui/shared/chart/ChartWidget.pw.tsx index 4100c69801..409cf5bdd6 100644 --- a/ui/shared/chart/ChartWidget.pw.tsx +++ b/ui/shared/chart/ChartWidget.pw.tsx @@ -1,7 +1,6 @@ -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( - - - , - ); +test('base view +@dark-mode', async({ render, page }) => { + const component = await render(); + 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( - - - , - ); - +test('loading', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); -test('error', async({ mount }) => { - const component = await mount( - - - , - ); - +test('error', async({ render }) => { + const component = await render(); 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( - - - , - ); + const component = await render(); 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( - - - , - ); + const component = await render(); await page.waitForFunction(() => { return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1'; }); diff --git a/ui/shared/entities/address/AddressEntity.pw.tsx b/ui/shared/entities/address/AddressEntity.pw.tsx index e62685c8c2..30103f9af5 100644 --- a/ui/shared/entities/address/AddressEntity.pw.tsx +++ b/ui/shared/entities/address/AddressEntity.pw.tsx @@ -1,10 +1,9 @@ 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( - - - , + test(size, async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); @@ -30,26 +27,22 @@ test.describe('icon size', () => { }); test.describe('contract', () => { - test('unverified', async({ mount, page }) => { - const component = await mount( - - - , + test('unverified', async({ render, page }) => { + const component = await render( + , ); await component.getByText(/eternal/i).hover(); await expect(page).toHaveScreenshot(); }); - test('verified', async({ mount }) => { - const component = await mount( - - - , + test('verified', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); @@ -57,27 +50,23 @@ test.describe('contract', () => { }); test.describe('loading', () => { - test('without alias', async({ mount }) => { - const component = await mount( - - - , + test('without alias', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); - test('with alias', async({ mount }) => { - const component = await mount( - - - , + test('with alias', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); @@ -85,83 +74,71 @@ test.describe('loading', () => { }); -test('with ENS', async({ mount }) => { - const component = await mount( - - - , +test('with ENS', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('with name tag', async({ mount }) => { - const component = await mount( - - - , +test('with name tag', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('external link', async({ mount }) => { - const component = await mount( - - - , +test('external link', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('no link', async({ mount }) => { - const component = await mount( - - - , +test('no link', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('customization', async({ mount }) => { - const component = await mount( - - - , +test('customization', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('hover', async({ page, mount }) => { - const component = await mount( - - - - - - - , +test('hover', async({ page, render }) => { + const component = await render( + + + + + , ); await component.getByText(addressMock.hash.slice(0, 4)).hover(); diff --git a/ui/shared/entities/block/BlockEntity.pw.tsx b/ui/shared/entities/block/BlockEntity.pw.tsx index 0098f03b05..0c1b858024 100644 --- a/ui/shared/entities/block/BlockEntity.pw.tsx +++ b/ui/shared/entities/block/BlockEntity.pw.tsx @@ -1,7 +1,6 @@ -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( - - - , + test(size, async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); @@ -26,27 +23,23 @@ test.describe('icon sizes', () => { }); }); -test('loading', async({ mount }) => { - const component = await mount( - - - , +test('loading', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('external link +@dark-mode', async({ mount }) => { - const component = await mount( - - - , +test('external link +@dark-mode', async({ render }) => { + const component = await render( + , ); 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( - - - , +test('long number', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('customization', async({ mount }) => { - const component = await mount( - - - , +test('customization', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); diff --git a/ui/shared/entities/ens/EnsEntity.pw.tsx b/ui/shared/entities/ens/EnsEntity.pw.tsx index fc6d5c01c7..3ce477e19c 100644 --- a/ui/shared/entities/ens/EnsEntity.pw.tsx +++ b/ui/shared/entities/ens/EnsEntity.pw.tsx @@ -1,7 +1,6 @@ -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( - - - , + test(size, async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); @@ -27,26 +24,22 @@ test.describe('icon size', () => { }); }); -test('loading', async({ mount }) => { - const component = await mount( - - - , +test('loading', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('with long name', async({ mount }) => { - const component = await mount( - - - , +test('with long name', async({ render }) => { + const component = await render( + , ); 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( - - - , +test('customization', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); diff --git a/ui/shared/entities/nft/NftEntity.pw.tsx b/ui/shared/entities/nft/NftEntity.pw.tsx index c426b8b8fa..3b8437cdc3 100644 --- a/ui/shared/entities/nft/NftEntity.pw.tsx +++ b/ui/shared/entities/nft/NftEntity.pw.tsx @@ -1,7 +1,6 @@ -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( - - - , + test(size, async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); @@ -28,44 +25,38 @@ test.describe('icon sizes', () => { }); }); -test('loading', async({ mount }) => { - const component = await mount( - - - , +test('loading', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('long id', async({ mount }) => { - const component = await mount( - - - , +test('long id', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('customization', async({ mount }) => { - const component = await mount( - - - , +test('customization', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); diff --git a/ui/shared/entities/token/TokenEntity.pw.tsx b/ui/shared/entities/token/TokenEntity.pw.tsx index 670148d9d2..4812927bb8 100644 --- a/ui/shared/entities/token/TokenEntity.pw.tsx +++ b/ui/shared/entities/token/TokenEntity.pw.tsx @@ -1,9 +1,8 @@ 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( - - - , + test(size, async({ render }) => { + const component = await render( + , ); 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,17 +34,15 @@ test('with logo, long name and symbol', async({ page, mount }) => { }); }); - await mount( - - - , + await render( + , ); await page.getByText(/this/i).hover(); @@ -57,35 +52,31 @@ test('with logo, long name and symbol', async({ page, mount }) => { await expect(page).toHaveScreenshot(); }); -test('loading', async({ mount }) => { - const component = await mount( - - - , +test('loading', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('customization', async({ mount }) => { - const component = await mount( - - { + const component = await render( + + - - - , + borderColor="blue.700" + /> + , ); await expect(component).toHaveScreenshot(); diff --git a/ui/shared/entities/tx/TxEntity.pw.tsx b/ui/shared/entities/tx/TxEntity.pw.tsx index bd971ca18a..10a32cefee 100644 --- a/ui/shared/entities/tx/TxEntity.pw.tsx +++ b/ui/shared/entities/tx/TxEntity.pw.tsx @@ -1,7 +1,6 @@ -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( - - - , + test(size, async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); @@ -27,40 +24,34 @@ test.describe('icon size', () => { }); }); -test('loading', async({ mount }) => { - const component = await mount( - - - , +test('loading', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('external link', async({ mount }) => { - const component = await mount( - - - , +test('external link', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('with copy +@dark-mode', async({ mount }) => { - const component = await mount( - - - , +test('with copy +@dark-mode', async({ render }) => { + const component = await render( + , ); 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( - - - , +test('customization', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); diff --git a/ui/shared/entities/userOp/UserOpEntity.pw.tsx b/ui/shared/entities/userOp/UserOpEntity.pw.tsx index c4a8faa3f0..d1d3704381 100644 --- a/ui/shared/entities/userOp/UserOpEntity.pw.tsx +++ b/ui/shared/entities/userOp/UserOpEntity.pw.tsx @@ -1,7 +1,6 @@ -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( - - - , + test(size, async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); @@ -27,27 +24,23 @@ test.describe('icon size', () => { }); }); -test('loading', async({ mount }) => { - const component = await mount( - - - , +test('loading', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('with copy +@dark-mode', async({ mount }) => { - const component = await mount( - - - , +test('with copy +@dark-mode', async({ render }) => { + const component = await render( + , ); 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( - - - , +test('customization', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); diff --git a/ui/shared/gas/GasInfoTooltip.pw.tsx b/ui/shared/gas/GasInfoTooltip.pw.tsx index b59a026f56..0be7c3b3fb 100644 --- a/ui/shared/gas/GasInfoTooltip.pw.tsx +++ b/ui/shared/gas/GasInfoTooltip.pw.tsx @@ -1,10 +1,10 @@ -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( - - - Gas - - , +test('all data', async({ render, page }) => { + await render( + + Gas + , ); // 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( - - - Gas: - - , +test('without primary unit price', async({ render, page }) => { + await render( + + Gas: + , ); // 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( - - - Gas: - - , +test('without secondary unit price', async({ render, page }) => { + await render( + + Gas: + , ); // 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( - - - Gas: - - , +test('no data', async({ render, page }) => { + await render( + + Gas: + , ); // 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( - - - Gas: - - , + test('with data', async({ render, page }) => { + await render( + + Gas: + , ); // 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( - - - Gas: - - , + test('without data', async({ render, page }) => { + await render( + + Gas: + , ); // await page.getByText(/gas/i).hover(); diff --git a/ui/shared/layout/Layout.pw.tsx b/ui/shared/layout/Layout.pw.tsx index 3295dccd1c..77cbe1e63b 100644 --- a/ui/shared/layout/Layout.pw.tsx +++ b/ui/shared/layout/Layout.pw.tsx @@ -1,35 +1,18 @@ -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 ducks. Please send 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( - - Page Content - , - ); - +test('base view +@mobile', async({ render, mockEnvs, mockApiResponse }) => { + await mockEnvs([ + [ + 'NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE', + 'We are currently lacking pictures of ducks. Please send us one.', + ], + ]); + await mockApiResponse('homepage_indexing_status', indexingStatus); + const component = await render(Page Content); await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/layout/LayoutError.pw.tsx b/ui/shared/layout/LayoutError.pw.tsx index 6fe13e10bd..b5608d645b 100644 --- a/ui/shared/layout/LayoutError.pw.tsx +++ b/ui/shared/layout/LayoutError.pw.tsx @@ -1,27 +1,17 @@ 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( - - - Error - - , +test('base view +@mobile', async({ render, mockApiResponse }) => { + await mockApiResponse('homepage_indexing_status', indexingStatus); + const component = await render( + + Error + , ); - await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/layout/LayoutHome.pw.tsx b/ui/shared/layout/LayoutHome.pw.tsx index 94b7b0cdcd..aca7c54997 100644 --- a/ui/shared/layout/LayoutHome.pw.tsx +++ b/ui/shared/layout/LayoutHome.pw.tsx @@ -1,24 +1,12 @@ -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( - - Page Content - , - ); - +test('base view +@mobile', async({ render, mockApiResponse }) => { + await mockApiResponse('homepage_indexing_status', indexingStatus); + const component = await render(Page Content); await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/logs/LogDecodedInputData.pw.tsx b/ui/shared/logs/LogDecodedInputData.pw.tsx index ea58b4212e..d5cd7b2201 100644 --- a/ui/shared/logs/LogDecodedInputData.pw.tsx +++ b/ui/shared/logs/LogDecodedInputData.pw.tsx @@ -1,25 +1,16 @@ -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( - - - , - ); +test('with indexed fields +@mobile +@dark-mode', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); -test('without indexed fields +@mobile', async({ mount }) => { - const component = await mount( - - - , - ); +test('without indexed fields +@mobile', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/logs/LogItem.pw.tsx b/ui/shared/logs/LogItem.pw.tsx index d537307308..3c7b59b993 100644 --- a/ui/shared/logs/LogItem.pw.tsx +++ b/ui/shared/logs/LogItem.pw.tsx @@ -1,9 +1,8 @@ -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,36 +14,32 @@ const TOPICS = [ ]; const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee'; -test('with decoded input data +@mobile +@dark-mode', async({ mount }) => { - const component = await mount( - - - , +test('with decoded input data +@mobile +@dark-mode', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); -test('without decoded input data +@mobile', async({ mount }) => { - const component = await mount( - - - , +test('without decoded input data +@mobile', async({ render }) => { + const component = await render( + , ); await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/logs/LogTopic.pw.tsx b/ui/shared/logs/LogTopic.pw.tsx index 9664f2671a..5f38d8c44d 100644 --- a/ui/shared/logs/LogTopic.pw.tsx +++ b/ui/shared/logs/LogTopic.pw.tsx @@ -1,27 +1,18 @@ -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( - - - , - ); +test('address view +@mobile -@default', async({ render }) => { + const component = await render(); 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( - - - , - ); +test('hex view +@mobile -@default', async({ render }) => { + const component = await render(); await component.locator('select[aria-label="Data type"]').selectOption('hex'); await expect(component).toHaveScreenshot(); diff --git a/ui/shared/nft/NftMedia.pw.tsx b/ui/shared/nft/NftMedia.pw.tsx index 4b91def420..b709b17c85 100644 --- a/ui/shared/nft/NftMedia.pw.tsx +++ b/ui/shared/nft/NftMedia.pw.tsx @@ -1,42 +1,25 @@ -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( - - - , - ); - + test('preview +@dark-mode', async({ render }) => { + const component = await render(); 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( - - - , - ); - + await mockAssetResponse(IMAGE_URL, './playwright/mocks/image_long.jpg'); + const component = await render(); 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( - - - , - ); - + const component = await render(); 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( - + test('preview +@dark-mode', async({ render, page }) => { + await render( + - , + , ); - - await expect(component).toHaveScreenshot(); + await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } }); }); -}); - -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', - }); + test('preview hover', async({ render, page }) => { + const component = await render(); + await component.getByAltText('Token instance image').hover(); + await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } }); }); - const component = await mount( - - - , - ); - - 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', - }); + test('fullscreen +@dark-mode +@mobile', async({ render, page }) => { + const component = await render(); + await component.getByAltText('Token instance image').click(); + await expect(page).toHaveScreenshot(); }); - const component = await mount( - - - , - ); - - 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( - - - , - ); - + test('preview +@dark-mode', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); }); diff --git a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_image-preview-dark-mode-1.png b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_image-preview-dark-mode-1.png index b60b305a6c..59ba859811 100644 Binary files a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_image-preview-dark-mode-1.png and b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_image-preview-dark-mode-1.png differ diff --git a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-dark-mode-1.png b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-dark-mode-1.png index 2a4baa8e3a..4273139faf 100644 Binary files a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-dark-mode-1.png and b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-dark-mode-1.png differ diff --git a/ui/shared/pagination/Pagination.pw.tsx b/ui/shared/pagination/Pagination.pw.tsx index e962550667..14e8276ded 100644 --- a/ui/shared/pagination/Pagination.pw.tsx +++ b/ui/shared/pagination/Pagination.pw.tsx @@ -1,15 +1,14 @@ -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( - - - , - ); - + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx b/ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx index 01e60fc43b..a3b7fee236 100644 --- a/ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx +++ b/ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx @@ -1,19 +1,15 @@ 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( - - - - - , +test('radio button group', async({ render }) => { + const component = await render( + + + , ); - await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/statusTag/StatusTag.pw.tsx b/ui/shared/statusTag/StatusTag.pw.tsx index d289c54b5c..0aa9e64356 100644 --- a/ui/shared/statusTag/StatusTag.pw.tsx +++ b/ui/shared/statusTag/StatusTag.pw.tsx @@ -1,37 +1,20 @@ -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( - - - , - ); - +test('ok status', async({ page, render }) => { + await render(); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 75, height: 30 } }); }); -test('error status', async({ page, mount }) => { - await mount( - - - , - ); - +test('error status', async({ page, render }) => { + await render(); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 75, height: 30 } }); - }); -test('pending status', async({ page, mount }) => { - await mount( - - - , - ); - +test('pending status', async({ page, render }) => { + await render(); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 75, height: 30 } }); }); diff --git a/ui/shared/verificationSteps/VerificationSteps.pw.tsx b/ui/shared/verificationSteps/VerificationSteps.pw.tsx index 9447631099..3c83438f8f 100644 --- a/ui/shared/verificationSteps/VerificationSteps.pw.tsx +++ b/ui/shared/verificationSteps/VerificationSteps.pw.tsx @@ -1,33 +1,24 @@ 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( - - - - - , +test('first step +@mobile +@dark-mode', async({ render }) => { + const component = await render( + + + , ); - await expect(component).toHaveScreenshot(); }); -test('second status', async({ mount }) => { - - const component = await mount( - - - , +test('second status', async({ render }) => { + const component = await render( + , ); - await expect(component).toHaveScreenshot(); }); diff --git a/ui/snippets/footer/Footer.pw.tsx b/ui/snippets/footer/Footer.pw.tsx index 3b8498e3b2..82d7c8ede4 100644 --- a/ui/snippets/footer/Footer.pw.tsx +++ b/ui/snippets/footer/Footer.pw.tsx @@ -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(); diff --git a/ui/snippets/header/HeaderDesktop.pw.tsx b/ui/snippets/header/HeaderDesktop.pw.tsx index cb56f9e4ee..be197237e5 100644 --- a/ui/snippets/header/HeaderDesktop.pw.tsx +++ b/ui/snippets/header/HeaderDesktop.pw.tsx @@ -1,16 +1,10 @@ -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( - - - , - ); - +test('default view +@dark-mode', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/snippets/header/HeaderMobile.pw.tsx b/ui/snippets/header/HeaderMobile.pw.tsx index 90c10640dc..f1658dfa72 100644 --- a/ui/snippets/header/HeaderMobile.pw.tsx +++ b/ui/snippets/header/HeaderMobile.pw.tsx @@ -1,18 +1,12 @@ -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( - - - , - ); - +test('default view +@dark-mode', async({ render, page }) => { + await render(); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 150 } }); }); diff --git a/ui/snippets/navigation/NavigationDesktop.pw.tsx b/ui/snippets/navigation/NavigationDesktop.pw.tsx index 27eb280a88..626f0fcd6f 100644 --- a/ui/snippets/navigation/NavigationDesktop.pw.tsx +++ b/ui/snippets/navigation/NavigationDesktop.pw.tsx @@ -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( diff --git a/ui/snippets/networkMenu/NetworkLogo.pw.tsx b/ui/snippets/networkMenu/NetworkLogo.pw.tsx index ad6172d5f7..0c4985cbd2 100644 --- a/ui/snippets/networkMenu/NetworkLogo.pw.tsx +++ b/ui/snippets/networkMenu/NetworkLogo.pw.tsx @@ -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(); @@ -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(); diff --git a/ui/snippets/searchBar/SearchBarInput.pw.tsx b/ui/snippets/searchBar/SearchBarInput.pw.tsx index 8e6bd9b059..d365034acf 100644 --- a/ui/snippets/searchBar/SearchBarInput.pw.tsx +++ b/ui/snippets/searchBar/SearchBarInput.pw.tsx @@ -1,8 +1,7 @@ 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( - - - , - ); +test('input on regular page +@mobile +@dark-mode', async({ render, page }) => { + await render(); const input = page.getByPlaceholder(/search by/i); - await expect(input).toHaveScreenshot(); }); -test('input on home page +@mobile +@dark-mode', async({ mount, page }) => { - await mount( - - - - - , +test('input on home page +@mobile +@dark-mode', async({ render, page }) => { + await render( + + + , ); const input = page.getByPlaceholder(/search by/i); - await expect(input).toHaveScreenshot(); }); diff --git a/ui/snippets/topBar/TopBar.pw.tsx b/ui/snippets/topBar/TopBar.pw.tsx index 1880147dfd..8c97ec86af 100644 --- a/ui/snippets/topBar/TopBar.pw.tsx +++ b/ui/snippets/topBar/TopBar.pw.tsx @@ -1,32 +1,20 @@ -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( - - - , - ); +test('default view +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => { + await mockApiResponse('stats', statsMock.base); + const component = await render(); 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( - - - , - ); - +test('with secondary coin price +@mobile', async({ render, mockApiResponse }) => { + await mockApiResponse('stats', statsMock.withSecondaryCoin); + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/token/TokenHolders/TokenHoldersList.pw.tsx b/ui/token/TokenHolders/TokenHoldersList.pw.tsx index 2bd3fd1267..c6b1f4fca9 100644 --- a/ui/token/TokenHolders/TokenHoldersList.pw.tsx +++ b/ui/token/TokenHolders/TokenHoldersList.pw.tsx @@ -1,30 +1,19 @@ -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( - - - , - ); - +test('base view without IDs', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); -test('base view with IDs', async({ mount }) => { - const component = await mount( - - - , - ); - +test('base view with IDs', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/token/TokenHolders/TokenHoldersTable.pw.tsx b/ui/token/TokenHolders/TokenHoldersTable.pw.tsx index fca3b76946..793c5e66fb 100644 --- a/ui/token/TokenHolders/TokenHoldersTable.pw.tsx +++ b/ui/token/TokenHolders/TokenHoldersTable.pw.tsx @@ -1,30 +1,27 @@ 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( - - +test('base view without IDs', async({ render }) => { + const component = await render( + - , + , ); await expect(component).toHaveScreenshot(); }); -test('base view with IDs', async({ mount }) => { - const component = await mount( - - +test('base view with IDs', async({ render }) => { + const component = await render( + - , + , ); await expect(component).toHaveScreenshot(); diff --git a/ui/token/TokenInventory.pw.tsx b/ui/token/TokenInventory.pw.tsx index d7b75dee28..522b729513 100644 --- a/ui/token/TokenInventory.pw.tsx +++ b/ui/token/TokenInventory.pw.tsx @@ -1,17 +1,15 @@ 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( - - +test('base view +@mobile', async({ render }) => { + const component = await render( + { data: tokenInfoERC721a, }} /> - , + , ); await expect(component).toHaveScreenshot(); diff --git a/ui/token/TokenTransfer/TokenTransfer.pw.tsx b/ui/token/TokenTransfer/TokenTransfer.pw.tsx index 70e6eb4699..417c9fa502 100644 --- a/ui/token/TokenTransfer/TokenTransfer.pw.tsx +++ b/ui/token/TokenTransfer/TokenTransfer.pw.tsx @@ -1,16 +1,14 @@ 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( - - +test('erc20 +@mobile', async({ render }) => { + const component = await render( + { pagination: { page: 1, isVisible: true }, }} /> - , + , ); await expect(component).toHaveScreenshot(); }); -test('erc721 +@mobile', async({ mount }) => { - const component = await mount( - - +test('erc721 +@mobile', async({ render }) => { + const component = await render( + { pagination: { page: 1, isVisible: true }, }} /> - , + , ); await expect(component).toHaveScreenshot(); }); -test('erc1155 +@mobile', async({ mount }) => { - const component = await mount( - - +test('erc1155 +@mobile', async({ render }) => { + const component = await render( + { pagination: { page: 1, isVisible: true }, }} /> - , + , ); await expect(component).toHaveScreenshot(); diff --git a/ui/tokenInfo/TokenInfoForm.pw.tsx b/ui/tokenInfo/TokenInfoForm.pw.tsx index 46ed578c00..ac7ce03bf9 100644 --- a/ui/tokenInfo/TokenInfoForm.pw.tsx +++ b/ui/tokenInfo/TokenInfoForm.pw.tsx @@ -1,66 +1,33 @@ -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( - - - , - ); - + const component = await render(); 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( - - - , - ); - + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/tokenInstance/TokenInstanceDetails.pw.tsx b/ui/tokenInstance/TokenInstanceDetails.pw.tsx index 8b2c1cb068..af5a0568b9 100644 --- a/ui/tokenInstance/TokenInstanceDetails.pw.tsx +++ b/ui/tokenInstance/TokenInstanceDetails.pw.tsx @@ -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( - - - , - ); - + const component = await render(); 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( - - - , - ); - + const component = await render(); 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( - - - , - ); - + const component = await render(); await expect(component).toHaveScreenshot({ - mask: [ page.locator(configs.adsBannerSelector) ], - maskColor: configs.maskColor, + mask: [ page.locator(pwConfig.adsBannerSelector) ], + maskColor: pwConfig.maskColor, }); }); }); diff --git a/ui/tokenInstance/TokenInstanceMetadata.pw.tsx b/ui/tokenInstance/TokenInstanceMetadata.pw.tsx index b27f7f46b6..430c67b3ee 100644 --- a/ui/tokenInstance/TokenInstanceMetadata.pw.tsx +++ b/ui/tokenInstance/TokenInstanceMetadata.pw.tsx @@ -1,17 +1,12 @@ -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( - - - , - ); +test('base view +@mobile', async({ render }) => { + const component = await render(); 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( - - - , - ); - +test('raw view', async({ render }) => { + const component = await render(); await component.locator('select').selectOption('JSON'); - await expect(component).toHaveScreenshot(); }); diff --git a/ui/tx/TxBlobs.pw.tsx b/ui/tx/TxBlobs.pw.tsx index dcec52a170..5ec48a6825 100644 --- a/ui/tx/TxBlobs.pw.tsx +++ b/ui/tx/TxBlobs.pw.tsx @@ -1,39 +1,25 @@ -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( - - - , - { hooksConfig }, - ); - + const component = await render(, { hooksConfig }); await expect(component).toHaveScreenshot(); }); diff --git a/ui/tx/TxInternals.pw.tsx b/ui/tx/TxInternals.pw.tsx index 3e0c2e30be..fbbb15b7d0 100644 --- a/ui/tx/TxInternals.pw.tsx +++ b/ui/tx/TxInternals.pw.tsx @@ -1,40 +1,26 @@ -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( - - - , - { hooksConfig }, - ); - + const component = await render(, { hooksConfig }); await expect(component).toHaveScreenshot(); }); diff --git a/ui/tx/TxState.pw.tsx b/ui/tx/TxState.pw.tsx index 9c65e1cd5d..a07fe8025a 100644 --- a/ui/tx/TxState.pw.tsx +++ b/ui/tx/TxState.pw.tsx @@ -1,39 +1,25 @@ -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( - - - , - { hooksConfig }, - ); - + const component = await render(, { hooksConfig }); await expect(component).toHaveScreenshot(); }); diff --git a/ui/tx/details/TxInfo.pw.tsx b/ui/tx/details/TxInfo.pw.tsx index 2a1d6449d3..b7b664f7a5 100644 --- a/ui/tx/details/TxInfo.pw.tsx +++ b/ui/tx/details/TxInfo.pw.tsx @@ -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(); 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(); 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(); 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(); 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(); 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(); 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(); 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(); await expect(component).toHaveScreenshot({ - mask: [ page.locator(configs.adsBannerSelector) ], - maskColor: configs.maskColor, + mask: [ page.locator(pwConfig.adsBannerSelector) ], + maskColor: pwConfig.maskColor, }); }); diff --git a/ui/txs/TxAdditionalInfo.pw.tsx b/ui/txs/TxAdditionalInfo.pw.tsx index 3b12be42a5..d6f5f612c7 100644 --- a/ui/txs/TxAdditionalInfo.pw.tsx +++ b/ui/txs/TxAdditionalInfo.pw.tsx @@ -1,43 +1,24 @@ -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( - - - , - ); - +test('regular transaction +@dark-mode', async({ render, page }) => { + const component = await render(); 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( - - - , - ); - +test('regular transaction +@mobile -@default', async({ render, page }) => { + const component = await render(); await component.getByLabel('Transaction info').click(); - await expect(page).toHaveScreenshot(); }); -test('blob transaction', async({ mount, page }) => { - const component = await mount( - - - , - ); - +test('blob transaction', async({ render, page }) => { + const component = await render(); await component.getByLabel('Transaction info').click(); - await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 600 } }); }); diff --git a/ui/txs/TxsListItem.pw.tsx b/ui/txs/TxsListItem.pw.tsx index 945ce74011..d078e85b51 100644 --- a/ui/txs/TxsListItem.pw.tsx +++ b/ui/txs/TxsListItem.pw.tsx @@ -1,29 +1,18 @@ -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( - - - , - ); - +test('base view +@dark-mode', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); -test('with base address', async({ mount }) => { - const component = await mount( - - - , - ); - +test('with base address', async({ render }) => { + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/txs/TxsStats.pw.tsx b/ui/txs/TxsStats.pw.tsx index 704e084249..88d11e3552 100644 --- a/ui/txs/TxsStats.pw.tsx +++ b/ui/txs/TxsStats.pw.tsx @@ -1,31 +1,14 @@ -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( - - - , - ); - +test('base view +@mobile', async({ render, mockApiResponse }) => { + await mockApiResponse('stats', statsMock.base); + await mockApiResponse('txs_stats', txsStatsMock.base); + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/txs/TxsTable.pw.tsx b/ui/txs/TxsTable.pw.tsx index 7cd4d86eb6..50dd35f22d 100644 --- a/ui/txs/TxsTable.pw.tsx +++ b/ui/txs/TxsTable.pw.tsx @@ -1,20 +1,23 @@ -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( - - { /* eslint-disable-next-line react/jsx-no-bind */ } - () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/> - , + test('+@dark-mode', async({ render }) => { + const component = await render( + () => {} } + 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( - - { /* eslint-disable-next-line react/jsx-no-bind */ } - () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/> - , + test.use({ viewport: pwConfig.viewport.xl }); + + test('', async({ render }) => { + const component = await render( + () => {} } + top={ 0 } + showBlockInfo + showSocketInfo={ false } + />, ); await component.getByText('kitty').first().hover();