Playwright tests refactoring, pt.4 (blockscout#1892)

* remove feature config from the pw tests

* update screenshots

Author: tom2drum

mocks/l2withdrawals/withdrawals.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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();