lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Playwright tests refactoring, pt.4 (#1892)

Browse Source 
* remove feature config from the pw tests

* update screenshots
This commit is contained in:
tom goriunov
2024-05-06 19:36:27 +02:00
committed by GitHub
parent f1b741a079
commit 4420054151
55 changed files with 267 additions and 887 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mocks/l2withdrawals/withdrawals.ts
+4 -4
View File
@@ -1,4 +1,6 @@
export const data = {
import type { OptimisticL2WithdrawalsResponse } from 'types/api/optimisticL2';
export const data: OptimisticL2WithdrawalsResponse = {
items: [
{
challenge_period_end: null,
@@ -11,12 +13,12 @@ export const data = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
l1_tx_hash: '0x1a235bee32ac10cb7efdad98415737484ca66386e491cde9e17d42b136dca684',
l2_timestamp: '2022-02-15T12:50:02.000000Z',
l2_tx_hash: '0x918cd8c5c24c17e06cd02b0379510c4ad56324bf153578fb9caaaa2fe4e7dc35',
msg_nonce: 396,
msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620172',
msg_nonce_version: 1,
status: 'Ready to prove',
},
@@ -27,7 +29,6 @@ export const data = {
l2_timestamp: null,
l2_tx_hash: '0x2f117bee32ac10cb7efdad98415737484ca66386e491cde9e17d42b136def593',
msg_nonce: 391,
msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620167',
msg_nonce_version: 1,
status: 'Ready to prove',
},
@@ -38,7 +39,6 @@ export const data = {
l2_timestamp: null,
l2_tx_hash: '0xe14b1f46838176702244a5343629bcecf728ca2d9881d47b4ce46e00c387d7e3',
msg_nonce: 390,
msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620166',
msg_nonce_version: 1,
status: 'Ready for relay',
},
mocks/withdrawals/withdrawals.ts
+7 -4
View File
@@ -1,4 +1,7 @@
export const data = {
import type { AddressParam } from 'types/api/addressParams';
import type { WithdrawalsResponse } from 'types/api/withdrawals';
export const data: WithdrawalsResponse = {
items: [
{
amount: '192175000000000',
@@ -10,7 +13,7 @@ export const data = {
is_contract: false,
is_verified: null,
name: null,
},
} as AddressParam,
timestamp: '2022-06-07T18:12:24.000000Z',
validator_index: 49622,
},
@@ -24,7 +27,7 @@ export const data = {
is_contract: false,
is_verified: null,
name: null,
},
} as AddressParam,
timestamp: '2022-05-07T18:12:24.000000Z',
validator_index: 49621,
},
@@ -38,7 +41,7 @@ export const data = {
is_contract: false,
is_verified: null,
name: null,
},
} as AddressParam,
timestamp: '2022-04-07T18:12:24.000000Z',
validator_index: 49620,
},
playwright/fixtures/mockEnvs.ts
+19
View File
@@ -16,6 +16,11 @@ const fixture: TestFixture<MockEnvsFixture, { page: Page }> = async({ page }, us
export default fixture;
export const ENVS_MAP: Record<string, Array<[string, string]>> = {
optimisticRollup: [
[ 'NEXT_PUBLIC_ROLLUP_TYPE', 'optimistic' ],
[ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
[ 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL', 'https://localhost:3102' ],
],
shibariumRollup: [
[ 'NEXT_PUBLIC_ROLLUP_TYPE', 'shibarium' ],
[ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
@@ -24,6 +29,10 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
[ 'NEXT_PUBLIC_ROLLUP_TYPE', 'zkEvm' ],
[ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
],
zkSyncRollup: [
[ 'NEXT_PUBLIC_ROLLUP_TYPE', 'zkSync' ],
[ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
],
bridgedTokens: [
[ 'NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS', '[{"id":"1","title":"Ethereum","short_title":"ETH","base_url":"https://eth.blockscout.com/token/"},{"id":"56","title":"Binance Smart Chain","short_title":"BSC","base_url":"https://bscscan.com/token/"},{"id":"99","title":"POA","short_title":"POA","base_url":"https://blockscout.com/poa/core/token/"}]' ],
[ 'NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES', '[{"type":"omni","title":"OmniBridge","short_title":"OMNI"},{"type":"amb","title":"Arbitrary Message Bridge","short_title":"AMB"}]' ],
@@ -37,6 +46,16 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
blockHiddenFields: [
[ 'NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS', '["burnt_fees", "total_reward", "nonce"]' ],
],
stabilityEnvs: [
[ 'NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS', '["top_accounts"]' ],
[ 'NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS', '["value","fee_currency","gas_price","gas_fees","burnt_fees"]' ],
[ 'NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS', '["fee_per_gas"]' ],
],
beaconChain: [
[ 'NEXT_PUBLIC_HAS_BEACON_CHAIN', 'true' ],
],
txInterpretation: [
[ 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', 'blockscout' ],
noWalletClient: [
[ 'NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID', '' ],
],
playwright/utils/configs.ts
-42
View File
@@ -10,45 +10,3 @@ export const viewport = {
export const maskColor = '#4299E1'; // blue.400
export const adsBannerSelector = '.adsbyslise';
export const featureEnvs = {
beaconChain: [
{ name: 'NEXT_PUBLIC_HAS_BEACON_CHAIN', value: 'true' },
],
optimisticRollup: [
{ name: 'NEXT_PUBLIC_ROLLUP_TYPE', value: 'optimistic' },
{ name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' },
{ name: 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL', value: 'https://localhost:3102' },
],
txInterpretation: [
{ name: 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', value: 'blockscout' },
],
zkEvmRollup: [
{ name: 'NEXT_PUBLIC_ROLLUP_TYPE', value: 'zkEvm' },
{ name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' },
],
zkSyncRollup: [
{ name: 'NEXT_PUBLIC_ROLLUP_TYPE', value: 'zkSync' },
{ name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' },
],
userOps: [
{ name: 'NEXT_PUBLIC_HAS_USER_OPS', value: 'true' },
],
validators: [
{ name: 'NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE', value: 'stability' },
],
};
export const viewsEnvs = {
block: {
hiddenFields: [
{ name: 'NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS', value: '["burnt_fees", "total_reward", "nonce"]' },
],
},
};
export const stabilityEnvs = [
{ name: 'NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS', value: '["top_accounts"]' },
{ name: 'NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS', value: '["value","fee_currency","gas_price","gas_fees","burnt_fees"]' },
{ name: 'NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS', value: '["fee_per_gas"]' },
];
ui/block/BlockDetails.pw.tsx
+10 -36
View File
@@ -1,10 +1,8 @@
import React from 'react';
import * as blockMock from 'mocks/blocks/block';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
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 BlockDetails from './BlockDetails';
import type { BlockQuery } from './useBlockQuery';
@@ -15,43 +13,33 @@ const hooksConfig = {
},
};
test('regular block +@mobile +@dark-mode', async({ mount, page }) => {
test('regular block +@mobile +@dark-mode', async({ render, page }) => {
const query = {
data: blockMock.base,
isPending: false,
} as BlockQuery;
const component = await mount(
<TestApp>
<BlockDetails query={ query }/>
</TestApp>,
{ hooksConfig },
);
const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
await page.getByText('View details').click();
await expect(component).toHaveScreenshot();
});
test('genesis block', async({ mount, page }) => {
test('genesis block', async({ render, page }) => {
const query = {
data: blockMock.genesis,
isPending: false,
} as BlockQuery;
const component = await mount(
<TestApp>
<BlockDetails query={ query }/>
</TestApp>,
{ hooksConfig },
);
const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
await page.getByText('View details').click();
await expect(component).toHaveScreenshot();
});
test('with blob txs', async({ mount, page, mockEnvs }) => {
test('with blob txs', async({ render, page, mockEnvs }) => {
await mockEnvs([
[ 'NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED', 'true' ],
]);
@@ -60,35 +48,21 @@ test('with blob txs', async({ mount, page, mockEnvs }) => {
isPending: false,
} as BlockQuery;
const component = await mount(
<TestApp>
<BlockDetails query={ query }/>
</TestApp>,
{ hooksConfig },
);
const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
await page.getByText('View details').click();
await expect(component).toHaveScreenshot();
});
const customFieldsTest = test.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields) as any,
});
customFieldsTest('rootstock custom fields', async({ mount, page }) => {
test('rootstock custom fields', async({ render, page, mockEnvs }) => {
await mockEnvs(ENVS_MAP.blockHiddenFields);
const query = {
data: blockMock.rootstock,
isPending: false,
} as BlockQuery;
const component = await mount(
<TestApp>
<BlockDetails query={ query }/>
</TestApp>,
{ hooksConfig },
);
const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
await page.getByText('View details').click();
ui/home/LatestBlocks.pw.tsx
+24 -121
View File
@@ -1,145 +1,49 @@
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as blockMock from 'mocks/blocks/block';
import * as statsMock from 'mocks/stats/index';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
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 LatestBlocks from './LatestBlocks';
const STATS_API_URL = buildApiUrl('stats');
const BLOCKS_API_URL = buildApiUrl('homepage_blocks');
export const test = base.extend<socketServer.SocketServerFixture>({
createSocket: socketServer.createSocket,
});
test('default view +@mobile +@dark-mode', async({ mount, page }) => {
await page.route(STATS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(statsMock.base),
}));
await page.route(BLOCKS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
blockMock.base,
blockMock.base2,
]),
}));
const component = await mount(
<TestApp>
<LatestBlocks/>
</TestApp>,
);
test('default view +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
await mockApiResponse('stats', statsMock.base);
await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
const component = await render(<LatestBlocks/>);
await expect(component).toHaveScreenshot();
});
const testL2 = test.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
});
testL2('L2 view', async({ mount, page }) => {
await page.route(STATS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(statsMock.base),
}));
await page.route(BLOCKS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
blockMock.base,
blockMock.base2,
]),
}));
const component = await mount(
<TestApp>
<LatestBlocks/>
</TestApp>,
);
test('L2 view', async({ render, mockEnvs, mockApiResponse }) => {
await mockEnvs(ENVS_MAP.optimisticRollup);
await mockApiResponse('stats', statsMock.base);
await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
const component = await render(<LatestBlocks/>);
await expect(component).toHaveScreenshot();
});
const testNoReward = test.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields) as any,
});
testNoReward('no reward view', async({ mount, page }) => {
await page.route(STATS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(statsMock.base),
}));
await page.route(BLOCKS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
blockMock.base,
blockMock.base2,
]),
}));
const component = await mount(
<TestApp>
<LatestBlocks/>
</TestApp>,
);
test('no reward view', async({ render, mockEnvs, mockApiResponse }) => {
await mockEnvs(ENVS_MAP.blockHiddenFields);
await mockApiResponse('stats', statsMock.base);
await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
const component = await render(<LatestBlocks/>);
await expect(component).toHaveScreenshot();
});
test('with long block height', async({ mount, page }) => {
await page.route(STATS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(statsMock.base),
}));
await page.route(BLOCKS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
{
...blockMock.base,
height: 123456789012345,
},
]),
}));
const component = await mount(
<TestApp>
<LatestBlocks/>
</TestApp>,
);
test('with long block height', async({ render, mockApiResponse }) => {
await mockApiResponse('stats', statsMock.base);
await mockApiResponse('homepage_blocks', [ { ...blockMock.base, height: 123456789012345 } ]);
const component = await render(<LatestBlocks/>);
await expect(component).toHaveScreenshot();
});
test.describe('socket', () => {
test.describe.configure({ mode: 'serial' });
test('new item', async({ mount, page, createSocket }) => {
await page.route(STATS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(statsMock.base),
}));
await page.route(BLOCKS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
blockMock.base,
blockMock.base2,
]),
}));
const component = await mount(
<TestApp withSocket>
<LatestBlocks/>
</TestApp>,
);
test('new item', async({ render, mockApiResponse, createSocket }) => {
await mockApiResponse('stats', statsMock.base);
await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
const component = await render(<LatestBlocks/>, undefined, { withSocket: true });
const socket = await createSocket();
const channel = await socketServer.joinChannel(socket, 'blocks:new_block');
socketServer.sendMessage(socket, channel, 'new_block', {
@@ -150,7 +54,6 @@ test.describe('socket', () => {
timestamp: '2022-11-11T11:59:58Z',
},
});
await expect(component).toHaveScreenshot();
});
});
ui/home/LatestDeposits.pw.tsx
+6 -22
View File
@@ -1,30 +1,14 @@
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as depositMock from 'mocks/l2deposits/deposits';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import LatestDeposits from './LatestDeposits';
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
});
test('default view +@mobile +@dark-mode', async({ mount, page }) => {
await page.route(buildApiUrl('homepage_deposits'), (route) => route.fulfill({
status: 200,
body: JSON.stringify(depositMock.data.items),
}));
const component = await mount(
<TestApp>
<LatestDeposits/>
</TestApp>,
);
test('default view +@mobile +@dark-mode', async({ render, mockApiResponse, mockEnvs }) => {
await mockEnvs(ENVS_MAP.optimisticRollup);
mockApiResponse('homepage_deposits', depositMock.data.items);
const component = await render(<LatestDeposits/>);
await expect(component).toHaveScreenshot();
});
ui/home/LatestZkEvmL2Batches.pw.tsx
+6 -23
View File
@@ -1,32 +1,15 @@
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { txnBatchesData } from 'mocks/zkEvm/txnBatches';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import LatestZkEvmL2Batches from './LatestZkEvmL2Batches';
const BATCHES_API_URL = buildApiUrl('homepage_zkevm_l2_batches');
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.zkEvmRollup) as any,
});
test('default view +@mobile +@dark-mode', async({ mount, page }) => {
await page.route(BATCHES_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(txnBatchesData),
}));
const component = await mount(
<TestApp>
<LatestZkEvmL2Batches/>
</TestApp>,
);
test('default view +@mobile +@dark-mode', async({ render, mockEnvs, mockApiResponse }) => {
await mockEnvs(ENVS_MAP.zkEvmRollup);
await mockApiResponse('homepage_zkevm_l2_batches', txnBatchesData);
const component = await render(<LatestZkEvmL2Batches/>);
await expect(component).toHaveScreenshot();
});
ui/pages/BeaconChainWithdrawals.pw.tsx
+8 -35
View File
@@ -1,43 +1,16 @@
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { data as withdrawalsData } from 'mocks/withdrawals/withdrawals';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import BeaconChainWithdrawals from './BeaconChainWithdrawals';
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.beaconChain) as any,
});
const WITHDRAWALS_API_URL = buildApiUrl('withdrawals');
const WITHDRAWALS_COUNTERS_API_URL = buildApiUrl('withdrawals_counters');
test('base view +@mobile', async({ mount, page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(WITHDRAWALS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(withdrawalsData),
}));
await page.route(WITHDRAWALS_COUNTERS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ withdrawal_count: '111111', withdrawal_sum: '1010101010110101001101010' }),
}));
const component = await mount(
<TestApp>
<BeaconChainWithdrawals/>
</TestApp>,
);
test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
await mockEnvs(ENVS_MAP.beaconChain);
await mockTextAd();
await mockApiResponse('withdrawals', withdrawalsData);
await mockApiResponse('withdrawals_counters', { withdrawal_count: '111111', withdrawal_sum: '1010101010110101001101010' });
const component = await render(<BeaconChainWithdrawals/>);
await expect(component).toHaveScreenshot();
});
ui/pages/Blocks.pw.tsx
+2 -8
View File
@@ -1,13 +1,10 @@
import type { BrowserContext } from '@playwright/test';
import React from 'react';
import * as blockMock from 'mocks/blocks/block';
import * as statsMock from 'mocks/stats/index';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
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 Blocks from './Blocks';
@@ -57,11 +54,8 @@ test.describe('mobile', () => {
await expect(component).toHaveScreenshot();
});
const hiddenFieldsTest = test.extend<{ context: BrowserContext }>({
context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields),
});
hiddenFieldsTest('hidden fields', async({ render, mockApiResponse }) => {
test('hidden fields', async({ render, mockApiResponse, mockEnvs }) => {
await mockEnvs(ENVS_MAP.blockHiddenFields);
await mockApiResponse('blocks', blockMock.baseListResponse, { queryParams: { type: 'block' } });
await mockApiResponse('stats', statsMock.base);
ui/pages/OptimisticL2Deposits.pw.tsx
+8 -34
View File
@@ -1,48 +1,22 @@
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { data as depositsData } from 'mocks/l2deposits/deposits';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import OptimisticL2Deposits from './OptimisticL2Deposits';
const DEPOSITS_API_URL = buildApiUrl('optimistic_l2_deposits');
const DEPOSITS_COUNT_API_URL = buildApiUrl('optimistic_l2_deposits_count');
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
});
test('base view +@mobile', async({ mount, page }) => {
test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
// test on mobile is flaky
// my assumption is there is not enough time to calculate hashes truncation so component is unstable
// so I raised the test timeout to check if it helps
test.slow();
await mockEnvs(ENVS_MAP.optimisticRollup);
await mockTextAd();
await mockApiResponse('optimistic_l2_deposits', depositsData);
await mockApiResponse('optimistic_l2_deposits_count', 3971111);
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(DEPOSITS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(depositsData),
}));
await page.route(DEPOSITS_COUNT_API_URL, (route) => route.fulfill({
status: 200,
body: '3971111',
}));
const component = await mount(
<TestApp>
<OptimisticL2Deposits/>
</TestApp>,
);
const component = await render(<OptimisticL2Deposits/>);
await expect(component).toHaveScreenshot({ timeout: 10_000 });
});
ui/pages/OptimisticL2OutputRoots.pw.tsx
+8 -36
View File
@@ -1,48 +1,20 @@
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { outputRootsData } from 'mocks/l2outputRoots/outputRoots';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import OptimisticL2OutputRoots from './OptimisticL2OutputRoots';
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
});
const OUTPUT_ROOTS_API_URL = buildApiUrl('optimistic_l2_output_roots');
const OUTPUT_ROOTS_COUNT_API_URL = buildApiUrl('optimistic_l2_output_roots_count');
test('base view +@mobile', async({ mount, page }) => {
test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
// test on mobile is flaky
// my assumption is there is not enough time to calculate hashes truncation so component is unstable
// so I raised the test timeout to check if it helps
test.slow();
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(OUTPUT_ROOTS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(outputRootsData),
}));
await page.route(OUTPUT_ROOTS_COUNT_API_URL, (route) => route.fulfill({
status: 200,
body: '9927',
}));
const component = await mount(
<TestApp>
<OptimisticL2OutputRoots/>
</TestApp>,
);
await mockEnvs(ENVS_MAP.optimisticRollup);
await mockTextAd();
await mockApiResponse('optimistic_l2_output_roots', outputRootsData);
await mockApiResponse('optimistic_l2_output_roots_count', 9927);
const component = await render(<OptimisticL2OutputRoots/>);
await expect(component).toHaveScreenshot({ timeout: 10_000 });
});
ui/pages/OptimisticL2TxnBatches.pw.tsx
+8 -36
View File
@@ -1,48 +1,20 @@
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { txnBatchesData } from 'mocks/l2txnBatches/txnBatches';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import OptimisticL2TxnBatches from './OptimisticL2TxnBatches';
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
});
const TXN_BATCHES_API_URL = buildApiUrl('optimistic_l2_txn_batches');
const TXN_BATCHES_COUNT_API_URL = buildApiUrl('optimistic_l2_txn_batches_count');
test('base view +@mobile', async({ mount, page }) => {
test('base view +@mobile', async({ render, mockTextAd, mockEnvs, mockApiResponse }) => {
// test on mobile is flaky
// my assumption is there is not enough time to calculate hashes truncation so component is unstable
// so I raised the test timeout to check if it helps
test.slow();
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(TXN_BATCHES_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(txnBatchesData),
}));
await page.route(TXN_BATCHES_COUNT_API_URL, (route) => route.fulfill({
status: 200,
body: '1235016',
}));
const component = await mount(
<TestApp>
<OptimisticL2TxnBatches/>
</TestApp>,
);
await mockTextAd();
await mockEnvs(ENVS_MAP.optimisticRollup);
await mockApiResponse('optimistic_l2_txn_batches', txnBatchesData);
await mockApiResponse('optimistic_l2_txn_batches_count', 1235016);
const component = await render(<OptimisticL2TxnBatches/>);
await expect(component).toHaveScreenshot({ timeout: 10_000 });
});
ui/pages/OptimisticL2Withdrawals.pw.tsx
+8 -36
View File
@@ -1,48 +1,20 @@
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { data as withdrawalsData } from 'mocks/l2withdrawals/withdrawals';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import OptimisticL2Withdrawals from './OptimisticL2Withdrawals';
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
});
const WITHDRAWALS_API_URL = buildApiUrl('optimistic_l2_withdrawals');
const WITHDRAWALS_COUNT_API_URL = buildApiUrl('optimistic_l2_withdrawals_count');
test('base view +@mobile', async({ mount, page }) => {
test('base view +@mobile', async({ render, mockTextAd, mockEnvs, mockApiResponse }) => {
// test on mobile is flaky
// my assumption is there is not enough time to calculate hashes truncation so component is unstable
// so I raised the test timeout to check if it helps
test.slow();
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(WITHDRAWALS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(withdrawalsData),
}));
await page.route(WITHDRAWALS_COUNT_API_URL, (route) => route.fulfill({
status: 200,
body: '397',
}));
const component = await mount(
<TestApp>
<OptimisticL2Withdrawals/>
</TestApp>,
);
await mockTextAd();
await mockEnvs(ENVS_MAP.optimisticRollup);
await mockApiResponse('optimistic_l2_withdrawals', withdrawalsData);
await mockApiResponse('optimistic_l2_withdrawals_count', 397);
const component = await render(<OptimisticL2Withdrawals/>);
await expect(component).toHaveScreenshot({ timeout: 10_000 });
});
ui/pages/UserOp.pw.tsx
+19 -56
View File
@@ -1,73 +1,36 @@
import { test as base, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import { userOpData } from 'mocks/userOps/userOp';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect, devices } from 'playwright/lib';
import UserOp from './UserOp';
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.userOps) as any,
const hooksConfig = {
router: {
query: { hash: userOpData.hash },
isReady: true,
},
};
test.beforeEach(async({ mockEnvs }) => {
await mockEnvs(ENVS_MAP.userOps);
});
const USER_OP_API_URL = buildApiUrl('user_op', { hash: userOpData.hash });
test('base view', async({ mount, page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(USER_OP_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(userOpData),
}));
const component = await mount(
<TestApp>
<UserOp/>
</TestApp>,
{ hooksConfig: {
router: {
query: { hash: userOpData.hash },
isReady: true,
},
} },
);
test('base view', async({ render, mockTextAd, mockApiResponse }) => {
await mockTextAd();
await mockApiResponse('user_op', userOpData, { pathParams: { hash: userOpData.hash } });
const component = await render(<UserOp/>, { hooksConfig });
await expect(component).toHaveScreenshot();
});
test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view', async({ mount, page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(USER_OP_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(userOpData),
}));
const component = await mount(
<TestApp>
<UserOp/>
</TestApp>,
{ hooksConfig: {
router: {
query: { hash: userOpData.hash },
isReady: true,
},
} },
);
test('base view', async({ render, mockTextAd, mockApiResponse }) => {
await mockTextAd();
await mockApiResponse('user_op', userOpData, { pathParams: { hash: userOpData.hash } });
const component = await render(<UserOp/>, { hooksConfig });
await expect(component).toHaveScreenshot();
});
});
ui/pages/UserOps.pw.tsx
+7 -31
View File
@@ -1,40 +1,16 @@
import { Box } from '@chakra-ui/react';
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { userOpsData } from 'mocks/userOps/userOps';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import UserOps from './UserOps';
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.userOps) as any,
});
const USER_OPS_API_URL = buildApiUrl('user_ops');
test('base view +@mobile', async({ mount, page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(USER_OPS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(userOpsData),
}));
const component = await mount(
<TestApp>
<Box pt={{ base: '106px', lg: 0 }}>
<UserOps/>
</Box>
</TestApp>,
);
test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
await mockEnvs(ENVS_MAP.userOps);
await mockTextAd();
await mockApiResponse('user_ops', userOpsData);
const component = await render(<Box pt={{ base: '106px', lg: 0 }}> <UserOps/> </Box>);
await expect(component).toHaveScreenshot();
});
ui/pages/ZkEvmL2TxnBatch.pw.tsx
+13 -48
View File
@@ -1,70 +1,35 @@
import { test as base, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import { txnBatchData } from 'mocks/zkEvm/txnBatches';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect, devices } from 'playwright/lib';
import ZkEvmL2TxnBatch from './ZkEvmL2TxnBatch';
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.zkEvmRollup) as any,
});
const batchNumber = '5';
const hooksConfig = {
router: {
query: { number: '5' },
query: { number: batchNumber },
},
};
const BATCH_API_URL = buildApiUrl('zkevm_l2_txn_batch', { number: '5' });
test.beforeEach(async({ mockTextAd, mockApiResponse, mockEnvs }) => {
await mockEnvs(ENVS_MAP.zkEvmRollup);
await mockTextAd();
await mockApiResponse('zkevm_l2_txn_batch', txnBatchData, { pathParams: { number: batchNumber } });
});
test('base view', async({ mount, page }) => {
test('base view', async({ render }) => {
test.slow();
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(BATCH_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(txnBatchData),
}));
const component = await mount(
<TestApp>
<ZkEvmL2TxnBatch/>
</TestApp>,
{ hooksConfig },
);
const component = await render(<ZkEvmL2TxnBatch/>, { hooksConfig });
await expect(component).toHaveScreenshot();
});
test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view', async({ mount, page }) => {
test('base view', async({ render }) => {
test.slow();
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(BATCH_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(txnBatchData),
}));
const component = await mount(
<TestApp>
<ZkEvmL2TxnBatch/>
</TestApp>,
{ hooksConfig },
);
const component = await render(<ZkEvmL2TxnBatch/>, { hooksConfig });
await expect(component).toHaveScreenshot();
});
});
ui/pages/ZkEvmL2TxnBatches.pw.tsx
+8 -35
View File
@@ -1,43 +1,16 @@
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { txnBatchesData } from 'mocks/zkEvm/txnBatches';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import ZkEvmL2TxnBatches from './ZkEvmL2TxnBatches';
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.zkEvmRollup) as any,
});
const BATCHES_API_URL = buildApiUrl('zkevm_l2_txn_batches');
const BATCHES_COUNTERS_API_URL = buildApiUrl('zkevm_l2_txn_batches_count');
test('base view +@mobile', async({ mount, page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(BATCHES_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(txnBatchesData),
}));
await page.route(BATCHES_COUNTERS_API_URL, (route) => route.fulfill({
status: 200,
body: '9927',
}));
const component = await mount(
<TestApp>
<ZkEvmL2TxnBatches/>
</TestApp>,
);
test('base view +@mobile', async({ render, mockTextAd, mockEnvs, mockApiResponse }) => {
await mockEnvs(ENVS_MAP.zkEvmRollup);
await mockTextAd();
await mockApiResponse('zkevm_l2_txn_batches', txnBatchesData);
await mockApiResponse('zkevm_l2_txn_batches_count', 9927);
const component = await render(<ZkEvmL2TxnBatches/>);
await expect(component).toHaveScreenshot();
});
ui/pages/ZkSyncL2TxnBatch.pw.tsx
+12 -39
View File
@@ -1,60 +1,33 @@
import { test as base, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import * as zkSyncTxnBatchMock from 'mocks/zkSync/zkSyncTxnBatch';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect, devices } from 'playwright/lib';
import ZkSyncL2TxnBatch from './ZkSyncL2TxnBatch';
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.zkSyncRollup) as any,
});
const batchNumber = String(zkSyncTxnBatchMock.base.number);
const hooksConfig = {
router: {
query: { number: String(zkSyncTxnBatchMock.base.number) },
query: { number: batchNumber },
},
};
test.beforeEach(async({ page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(BATCH_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(zkSyncTxnBatchMock.base),
}));
test.beforeEach(async({ mockTextAd, mockApiResponse, mockEnvs }) => {
await mockEnvs(ENVS_MAP.zkSyncRollup);
await mockTextAd();
await mockApiResponse('zksync_l2_txn_batch', zkSyncTxnBatchMock.base, { pathParams: { number: batchNumber } });
});
const BATCH_API_URL = buildApiUrl('zksync_l2_txn_batch', { number: String(zkSyncTxnBatchMock.base.number) });
test('base view', async({ mount }) => {
const component = await mount(
<TestApp>
<ZkSyncL2TxnBatch/>
</TestApp>,
{ hooksConfig },
);
test('base view', async({ render }) => {
const component = await render(<ZkSyncL2TxnBatch/>, { hooksConfig });
await expect(component).toHaveScreenshot();
});
test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view', async({ mount }) => {
const component = await mount(
<TestApp>
<ZkSyncL2TxnBatch/>
</TestApp>,
{ hooksConfig },
);
test('base view', async({ render }) => {
const component = await render(<ZkSyncL2TxnBatch/>, { hooksConfig });
await expect(component).toHaveScreenshot();
});
});
ui/pages/ZkSyncL2TxnBatches.pw.tsx
+8 -34
View File
@@ -1,44 +1,18 @@
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as zkSyncTxnBatchesMock from 'mocks/zkSync/zkSyncTxnBatches';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import ZkSyncL2TxnBatches from './ZkSyncL2TxnBatches';
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.zkSyncRollup) as any,
});
const BATCHES_API_URL = buildApiUrl('zksync_l2_txn_batches');
const BATCHES_COUNTERS_API_URL = buildApiUrl('zksync_l2_txn_batches_count');
test('base view +@mobile', async({ mount, page }) => {
test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
test.slow();
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(BATCHES_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(zkSyncTxnBatchesMock.baseResponse),
}));
await page.route(BATCHES_COUNTERS_API_URL, (route) => route.fulfill({
status: 200,
body: '9927',
}));
const component = await mount(
<TestApp>
<ZkSyncL2TxnBatches/>
</TestApp>,
);
await mockEnvs(ENVS_MAP.zkSyncRollup);
await mockTextAd();
await mockApiResponse('zksync_l2_txn_batches', zkSyncTxnBatchesMock.baseResponse);
await mockApiResponse('zksync_l2_txn_batches_count', 9927);
const component = await render(<ZkSyncL2TxnBatches/>);
await expect(component).toHaveScreenshot();
});
ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 43 KiB

ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 54 KiB

ui/pages/__screenshots__/OptimisticL2Deposits.pw.tsx_default_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 47 KiB

ui/pages/__screenshots__/OptimisticL2Deposits.pw.tsx_mobile_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 68 KiB

ui/pages/__screenshots__/OptimisticL2OutputRoots.pw.tsx_default_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 49 KiB

ui/pages/__screenshots__/OptimisticL2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 58 KiB

ui/pages/__screenshots__/OptimisticL2TxnBatches.pw.tsx_default_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 48 KiB

ui/pages/__screenshots__/OptimisticL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 57 KiB

ui/pages/__screenshots__/OptimisticL2Withdrawals.pw.tsx_default_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 46 KiB

ui/pages/__screenshots__/OptimisticL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 52 KiB

ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 82 KiB

ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 75 KiB

ui/pages/__screenshots__/UserOps.pw.tsx_default_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 50 KiB

ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 65 KiB

ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 72 KiB

ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 67 KiB

ui/pages/__screenshots__/ZkEvmL2TxnBatches.pw.tsx_default_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 36 KiB

ui/pages/__screenshots__/ZkEvmL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 47 KiB

ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 83 KiB

ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 79 KiB

ui/pages/__screenshots__/ZkSyncL2TxnBatches.pw.tsx_default_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 42 KiB

ui/pages/__screenshots__/ZkSyncL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 57 KiB

ui/tx/TxSubHeading.pw.tsx
+41 -82
View File
@@ -1,102 +1,61 @@
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as txMock from 'mocks/txs/tx';
import { txInterpretation } from 'mocks/txs/txInterpretation';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import TxSubHeading from './TxSubHeading';
import type { TxQuery } from './useTxQuery';
const hash = '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193';
const TX_INTERPRETATION_API_URL = buildApiUrl('tx_interpretation', { hash });
const txQuery = {
data: txMock.base,
isPlaceholderData: false,
isError: false,
} as TxQuery;
test('no interpretation +@mobile', async({ mount }) => {
const component = await mount(
<TestApp>
<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>
</TestApp>,
);
test('no interpretation +@mobile', async({ render }) => {
const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
await expect(component).toHaveScreenshot();
});
const bsInterpretationTest = test.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.txInterpretation) as any,
});
bsInterpretationTest('with interpretation +@mobile +@dark-mode', async({ mount, page }) => {
await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(txInterpretation),
}));
const component = await mount(
<TestApp>
<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
bsInterpretationTest('with interpretation and view all link +@mobile', async({ mount, page }) => {
await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ data: { summaries: [ ...txInterpretation.data.summaries, ...txInterpretation.data.summaries ] } }),
}));
const component = await mount(
<TestApp>
<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
bsInterpretationTest('no interpretation, has method called', async({ mount, page }) => {
await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ data: { summaries: [] } }),
}));
const component = await mount(
<TestApp>
<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
bsInterpretationTest('no interpretation', async({ mount, page }) => {
const txPendingQuery = {
data: txMock.pending,
isPlaceholderData: false,
isError: false,
} as TxQuery;
await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ data: { summaries: [] } }),
}));
const component = await mount(
<TestApp>
<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txPendingQuery }/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
test.describe('blockscout provider', () => {
test.beforeEach(async({ mockEnvs }) => {
await mockEnvs(ENVS_MAP.txInterpretation);
});
test('with interpretation +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } });
const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
await expect(component).toHaveScreenshot();
});
test('with interpretation and view all link +@mobile', async({ render, mockApiResponse }) => {
await mockApiResponse(
'tx_interpretation',
{ data: { summaries: [ ...txInterpretation.data.summaries, ...txInterpretation.data.summaries ] } },
{ pathParams: { hash } },
);
const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
await expect(component).toHaveScreenshot();
});
test('no interpretation, has method called', async({ render, mockApiResponse }) => {
await mockApiResponse('tx_interpretation', { data: { summaries: [] } }, { pathParams: { hash } });
const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
await expect(component).toHaveScreenshot();
});
test('no interpretation', async({ render, mockApiResponse }) => {
const txPendingQuery = {
data: txMock.pending,
isPlaceholderData: false,
isError: false,
} as TxQuery;
await mockApiResponse('tx_interpretation', { data: { summaries: [] } }, { pathParams: { hash } });
const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txPendingQuery }/>);
await expect(component).toHaveScreenshot();
});
});
ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_with-interpretation-mobile-dark-mode-1.png → ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-has-method-called-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_with-interpretation-and-view-all-link-mobile-1.png → ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-1.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.6 KiB

ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-has-method-called-1.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-mobile-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_with-interpretation-and-view-all-link-mobile-1.png → ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_with-interpretation-mobile-dark-mode-1.png → ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx
+8 -17
View File
@@ -1,12 +1,10 @@
import { Box } from '@chakra-ui/react';
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import type { OptimisticL2WithdrawalStatus } from 'types/api/optimisticL2';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import * as configs from 'playwright/utils/configs';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import TxDetailsWithdrawalStatus from './TxDetailsWithdrawalStatus';
@@ -16,20 +14,13 @@ const statuses: Array<OptimisticL2WithdrawalStatus> = [
'Relayed',
];
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
});
statuses.forEach((status) => {
test(`status="${ status }"`, async({ mount }) => {
const component = await mount(
<TestApp>
<Box p={ 2 }>
<TxDetailsWithdrawalStatus status={ status } l1TxHash="0x7d93a59a228e97d084a635181c3053e324237d07566ec12287eae6da2bcf9456"/>
</Box>
</TestApp>,
test(`status="${ status }"`, async({ render, mockEnvs }) => {
await mockEnvs(ENVS_MAP.optimisticRollup);
const component = await render(
<Box p={ 2 }>
<TxDetailsWithdrawalStatus status={ status } l1TxHash="0x7d93a59a228e97d084a635181c3053e324237d07566ec12287eae6da2bcf9456"/>
</Box>,
);
await expect(component).toHaveScreenshot();
ui/tx/details/TxInfo.pw.tsx
+33 -108
View File
@@ -1,26 +1,14 @@
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as txMock from 'mocks/txs/tx';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import { test, expect } from 'playwright/lib';
import * as configs from 'playwright/utils/configs';
import TxInfo from './TxInfo';
const hooksConfig = {
router: {
query: { hash: 1 },
},
};
test('between addresses +@mobile +@dark-mode', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxInfo data={ txMock.base } isLoading={ false }/>
</TestApp>,
{ hooksConfig },
);
test('between addresses +@mobile +@dark-mode', async({ render, page }) => {
const component = await render(<TxInfo data={ txMock.base } isLoading={ false }/>);
await page.getByText('View details').click();
@@ -30,13 +18,8 @@ test('between addresses +@mobile +@dark-mode', async({ mount, page }) => {
});
});
test('creating contact', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxInfo data={ txMock.withContractCreation } isLoading={ false }/>
</TestApp>,
{ hooksConfig },
);
test('creating contact', async({ render, page }) => {
const component = await render(<TxInfo data={ txMock.withContractCreation } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
@@ -44,13 +27,8 @@ test('creating contact', async({ mount, page }) => {
});
});
test('with token transfer +@mobile', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxInfo data={ txMock.withTokenTransfer } isLoading={ false }/>
</TestApp>,
{ hooksConfig },
);
test('with token transfer +@mobile', async({ render, page }) => {
const component = await render(<TxInfo data={ txMock.withTokenTransfer } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
@@ -58,13 +36,8 @@ test('with token transfer +@mobile', async({ mount, page }) => {
});
});
test('with decoded revert reason', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxInfo data={ txMock.withDecodedRevertReason } isLoading={ false }/>
</TestApp>,
{ hooksConfig },
);
test('with decoded revert reason', async({ render, page }) => {
const component = await render(<TxInfo data={ txMock.withDecodedRevertReason } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
@@ -72,13 +45,8 @@ test('with decoded revert reason', async({ mount, page }) => {
});
});
test('with decoded raw reason', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxInfo data={ txMock.withRawRevertReason } isLoading={ false }/>
</TestApp>,
{ hooksConfig },
);
test('with decoded raw reason', async({ render, page }) => {
const component = await render(<TxInfo data={ txMock.withRawRevertReason } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
@@ -86,13 +54,8 @@ test('with decoded raw reason', async({ mount, page }) => {
});
});
test('pending', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxInfo data={ txMock.pending } isLoading={ false }/>
</TestApp>,
{ hooksConfig },
);
test('pending', async({ render, page }) => {
const component = await render(<TxInfo data={ txMock.pending } isLoading={ false }/>);
await page.getByText('View details').click();
@@ -102,13 +65,8 @@ test('pending', async({ mount, page }) => {
});
});
test('with actions uniswap +@mobile +@dark-mode', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxInfo data={ txMock.withActionsUniswap } isLoading={ false }/>
</TestApp>,
{ hooksConfig },
);
test('with actions uniswap +@mobile +@dark-mode', async({ render, page }) => {
const component = await render(<TxInfo data={ txMock.withActionsUniswap } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
@@ -116,13 +74,8 @@ test('with actions uniswap +@mobile +@dark-mode', async({ mount, page }) => {
});
});
test('with blob', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxInfo data={ txMock.withBlob } isLoading={ false }/>
</TestApp>,
{ hooksConfig },
);
test('with blob', async({ render, page }) => {
const component = await render(<TxInfo data={ txMock.withBlob } isLoading={ false }/>);
await page.getByText('View details').click();
@@ -132,18 +85,20 @@ test('with blob', async({ mount, page }) => {
});
});
const l2Test = test.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
test('l2', async({ render, page, mockEnvs }) => {
await mockEnvs(ENVS_MAP.optimisticRollup);
const component = await render(<TxInfo data={ txMock.l2tx } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
l2Test('l2', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxInfo data={ txMock.l2tx } isLoading={ false }/>
</TestApp>,
{ hooksConfig },
);
test('without testnet warning', async({ render, page, mockEnvs }) => {
await mockEnvs([
[ 'NEXT_PUBLIC_IS_TESTNET', 'false' ],
]);
const component = await render(<TxInfo data={ txMock.l2tx } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
@@ -151,39 +106,9 @@ l2Test('l2', async({ mount, page }) => {
});
});
const mainnetTest = test.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_IS_TESTNET', value: 'false' },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
mainnetTest('without testnet warning', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxInfo data={ txMock.l2tx } isLoading={ false }/>
</TestApp>,
{ hooksConfig },
);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
const stabilityTest = test.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.stabilityEnvs) as any,
});
stabilityTest('stability customization', async({ mount, page }) => {
const component = await mount(
<TestApp>
<TxInfo data={ txMock.stabilityTx } isLoading={ false }/>
</TestApp>,
{ hooksConfig },
);
test('stability customization', async({ render, page, mockEnvs }) => {
await mockEnvs(ENVS_MAP.stabilityEnvs);
const component = await render(<TxInfo data={ txMock.stabilityTx } isLoading={ false }/>);
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],