Turn on eslint playwright plugin and eslint react-query plugin (#2401)

* fix pw eslint rules * turn on no-unstable-deps rule * fix eslint warnings
blockscout · Nov 15, 2024 · aeb7b86 · aeb7b86
1 parent 21e1fde
commit aeb7b86
Show file tree

Hide file tree

Showing 78 changed files with 86 additions and 86 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -230,16 +230,13 @@ export default tseslint.config(
 
   {
     plugins: { '@tanstack/query': reactQueryPlugin },
-    rules: {
-      '@tanstack/query/no-unstable-deps': 'off', // TODO @tom2drum turn on this rule
-    },
   },
 
   {
-    plugins: { playwright: playwrightPlugin },
+    ...playwrightPlugin.configs['flat/recommended'],
     files: [ '**/*.pw.tsx' ],
     rules: {
-      'playwright/valid-title': 'warn', // TODO @tom2drum turn on this rule
+      ...playwrightPlugin.configs['flat/recommended'].rules,
       'playwright/no-standalone-expect': 'off', // this rules does not work correctly with extended test functions
     },
   },

diff --git a/theme/components/Button/Button.pw.tsx b/theme/components/Button/Button.pw.tsx
@@ -18,7 +18,7 @@ test.use({ viewport: { width: 150, height: 350 } });
   { variant: 'radio_group', states: [ 'default', 'hovered', 'selected' ], withDarkMode: true },
 ].forEach(({ variant, colorScheme, withDarkMode, states }) => {
   test.describe(`variant ${ variant }${ colorScheme ? ` with ${ colorScheme } color scheme` : '' }${ withDarkMode ? ' +@dark-mode' : '' }`, () => {
-    test('', async({ render }) => {
+    test('base view', async({ render }) => {
       const component = await render(
         <Flex p={ 2 } flexDir="column" rowGap={ 3 }>
           { states?.map((state) => {

diff --git a/...ton/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-1.png b/...ton/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-1.png
diff --git a/...enshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-base-view-1.png b/...enshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-base-view-1.png
diff --git a/...on/__screenshots__/Button.pw.tsx_dark-color-mode_variant-header-dark-mode-1.png b/...on/__screenshots__/Button.pw.tsx_dark-color-mode_variant-header-dark-mode-1.png
diff --git a/...nshots__/Button.pw.tsx_dark-color-mode_variant-header-dark-mode-base-view-1.png b/...nshots__/Button.pw.tsx_dark-color-mode_variant-header-dark-mode-base-view-1.png
diff --git a/...tton/__screenshots__/Button.pw.tsx_dark-color-mode_variant-hero-dark-mode-1.png b/...tton/__screenshots__/Button.pw.tsx_dark-color-mode_variant-hero-dark-mode-1.png
diff --git a/...eenshots__/Button.pw.tsx_dark-color-mode_variant-hero-dark-mode-base-view-1.png b/...eenshots__/Button.pw.tsx_dark-color-mode_variant-hero-dark-mode-base-view-1.png
diff --git a/...n.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-1.png b/...n.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-1.png
diff --git a/...ark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-base-view-1.png b/...ark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-base-view-1.png
diff --git a/...n.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-1.png b/...n.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-1.png
diff --git a/...ark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-base-view-1.png b/...ark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-base-view-1.png
diff --git a/...-mode_variant-radio-group-dark-mode-1.png → ...ant-radio-group-dark-mode-base-view-1.png b/...-mode_variant-radio-group-dark-mode-1.png → ...ant-radio-group-dark-mode-base-view-1.png
diff --git a/...on/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-1.png b/...on/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-1.png
diff --git a/...nshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-base-view-1.png b/...nshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-base-view-1.png
diff --git a/...on.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-1.png b/...on.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-1.png
diff --git a/...dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-base-view-1.png b/...dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-base-view-1.png
diff --git a/...ents/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-1.png b/...ents/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-1.png
diff --git a/...n/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-base-view-1.png b/...n/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-base-view-1.png
diff --git a/...nts/Button/__screenshots__/Button.pw.tsx_default_variant-header-dark-mode-1.png b/...nts/Button/__screenshots__/Button.pw.tsx_default_variant-header-dark-mode-1.png
diff --git a/.../__screenshots__/Button.pw.tsx_default_variant-header-dark-mode-base-view-1.png b/.../__screenshots__/Button.pw.tsx_default_variant-header-dark-mode-base-view-1.png
diff --git a/...nents/Button/__screenshots__/Button.pw.tsx_default_variant-hero-dark-mode-1.png b/...nents/Button/__screenshots__/Button.pw.tsx_default_variant-hero-dark-mode-1.png
diff --git a/...on/__screenshots__/Button.pw.tsx_default_variant-hero-dark-mode-base-view-1.png b/...on/__screenshots__/Button.pw.tsx_default_variant-hero-dark-mode-base-view-1.png
diff --git a/...__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-1.png b/...__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-1.png
diff --git a/...pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-base-view-1.png b/...pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-base-view-1.png
diff --git a/...__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-1.png b/...__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-1.png
diff --git a/...pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-base-view-1.png b/...pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-base-view-1.png
diff --git a/...fault_variant-radio-group-dark-mode-1.png → ...ant-radio-group-dark-mode-base-view-1.png b/...fault_variant-radio-group-dark-mode-1.png → ...ant-radio-group-dark-mode-base-view-1.png
diff --git a/...nts/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-1.png b/...nts/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-1.png
diff --git a/.../__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-base-view-1.png b/.../__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-base-view-1.png
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-1.png
diff --git a/...ents/Button/__screenshots__/Button.pw.tsx_default_variant-solid-base-view-1.png b/...ents/Button/__screenshots__/Button.pw.tsx_default_variant-solid-base-view-1.png
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-1.png
diff --git a/...nts/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-base-view-1.png b/...nts/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-base-view-1.png
diff --git a/...s__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-1.png b/...s__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-1.png
diff --git a/....pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-base-view-1.png b/....pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-base-view-1.png
diff --git a/theme/components/Tooltip/Tooltip.pw.tsx b/theme/components/Tooltip/Tooltip.pw.tsx
@@ -31,8 +31,8 @@ test.fixme('with icon', async({ render, page }) => {
   );
 
   const tooltip = page.getByText(/tooltip content/i);
-  expect(await tooltip.isVisible()).toBe(false);
+  await expect(tooltip).toBeHidden();
 
   await component.locator('svg[aria-label="Trigger"]').hover();
-  expect(await tooltip.isVisible()).toBe(true);
+  await expect(tooltip).toBeVisible();
 });
diff --git a/ui/address/AddressTokenTransfers.pw.tsx b/ui/address/AddressTokenTransfers.pw.tsx
@@ -115,7 +115,8 @@ test.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'token_transfer', { token_transfers: [ tokenTransferMock.erc1155B, tokenTransferMock.erc1155C ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(4);
@@ -147,7 +148,8 @@ test.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'token_transfer', { token_transfers: [ tokenTransferMock.erc1155B, tokenTransferMock.erc1155C ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);
@@ -183,7 +185,8 @@ test.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'token_transfer', { token_transfers: [ tokenTransferMock.erc1155B, tokenTransferMock.erc20 ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);
@@ -221,7 +224,8 @@ test.describe('socket', () => {
       { token_transfers: [ tokenTransferMock.erc1155B, tokenTransferMock.erc20, tokenTransferMock.erc1155C, tokenTransferMock.erc721 ] },
     );
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);

diff --git a/ui/address/AddressTokens.pw.tsx b/ui/address/AddressTokens.pw.tsx
@@ -166,7 +166,7 @@ test.describe('mobile', () => {
 test.describe('update balances via socket', () => {
   test.describe.configure({ mode: 'serial' });
 
-  test('', async({ render, page, createSocket, mockApiResponse }) => {
+  test('base flow', async({ render, page, createSocket, mockApiResponse }) => {
     test.slow();
 
     const hooksConfig = {

diff --git a/ui/address/AddressTxs.pw.tsx b/ui/address/AddressTxs.pw.tsx
@@ -48,7 +48,7 @@ test.describe('base view', () => {
   test.describe('screen xl', () => {
     test.use({ viewport: pwConfig.viewport.xl });
 
-    test('', async() => {
+    test('base view', async() => {
       test.slow();
       await expect(component).toHaveScreenshot();
     });
@@ -83,7 +83,8 @@ test.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'transaction', { transactions: [ txMock.base2, txMock.base4 ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(4);
@@ -112,7 +113,8 @@ test.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'transaction', { transactions: [ txMock.base, txMock.base2 ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);
@@ -141,7 +143,8 @@ test.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'transaction', { transactions: [ txMock.base2, txMock.base3, txMock.base4 ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);
@@ -179,7 +182,8 @@ test.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'transaction', { transactions: [ txMock.base2, txMock.base4 ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);
@@ -214,7 +218,8 @@ test.describe('socket', () => {
 
     socketServer.sendMessage(socket, channel, 'transaction', { transactions: [ txMock.base2, txMock.base3, txMock.base4 ] });
 
-    await page.waitForSelector('tbody tr:nth-child(3)');
+    const thirdRow = page.locator('tbody tr:nth-child(3)');
+    await thirdRow.waitFor();
 
     const itemsCountNew = await page.locator('tbody tr').count();
     expect(itemsCountNew).toBe(3);

diff --git a/..._default_update-balances-via-socket-1.png → ...pdate-balances-via-socket-base-flow-1.png b/..._default_update-balances-via-socket-1.png → ...pdate-balances-via-socket-base-flow-1.png
diff --git a/..._default_update-balances-via-socket-2.png → ...pdate-balances-via-socket-base-flow-2.png b/..._default_update-balances-via-socket-2.png → ...pdate-balances-via-socket-base-flow-2.png
diff --git a/....pw.tsx_default_base-view-screen-xl-1.png → ...fault_base-view-screen-xl-base-view-1.png b/....pw.tsx_default_base-view-screen-xl-1.png → ...fault_base-view-screen-xl-base-view-1.png
diff --git a/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx b/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx
@@ -52,7 +52,7 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
     });
   };
 
-  const mutation = useMutation({
+  const { mutateAsync, isPending } = useMutation({
     mutationFn: updateApiKey,
     onSuccess: async(data) => {
       const response = data as unknown as ApiKey;
@@ -89,8 +89,8 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
 
   const onSubmit: SubmitHandler<Inputs> = useCallback(async(data) => {
     setAlertVisible(false);
-    await mutation.mutateAsync(data);
-  }, [ mutation, setAlertVisible ]);
+    await mutateAsync(data);
+  }, [ mutateAsync, setAlertVisible ]);
 
   return (
     <FormProvider { ...formApi }>
@@ -119,7 +119,7 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
             size="lg"
             type="submit"
             isDisabled={ !formApi.formState.isDirty }
-            isLoading={ mutation.isPending }
+            isLoading={ isPending }
           >
             { data ? 'Save' : 'Generate API key' }
           </Button>

diff --git a/ui/block/useBlockTxsQuery.tsx b/ui/block/useBlockTxsQuery.tsx
@@ -157,14 +157,12 @@ export default function useBlockTxsQuery({ heightOrHash, blockQuery, tab }: Para
     ((apiQuery.isError || apiQuery.isPlaceholderData) && apiQuery.errorUpdateCount > 0)
   ) && rpcQuery.data && publicClient);
 
-  const rpcQueryWithPages: QueryWithPagesResult<'block_txs'> = React.useMemo(() => {
-    return {
-      ...rpcQuery as UseQueryResult<BlockTransactionsResponse, ResourceError>,
-      pagination: emptyPagination,
-      onFilterChange: () => {},
-      onSortingChange: () => {},
-    };
-  }, [ rpcQuery ]);
+  const rpcQueryWithPages: QueryWithPagesResult<'block_txs'> = {
+    ...rpcQuery as UseQueryResult<BlockTransactionsResponse, ResourceError>,
+    pagination: emptyPagination,
+    onFilterChange: () => {},
+    onSortingChange: () => {},
+  };
 
   const query = isRpcQuery ? rpcQueryWithPages : apiQuery;
 

diff --git a/ui/block/useBlockWithdrawalsQuery.tsx b/ui/block/useBlockWithdrawalsQuery.tsx
@@ -124,14 +124,12 @@ export default function useBlockWithdrawalsQuery({ heightOrHash, blockQuery, tab
     ((apiQuery.isError || apiQuery.isPlaceholderData) && apiQuery.errorUpdateCount > 0)
   ) && rpcQuery.data && publicClient);
 
-  const rpcQueryWithPages: QueryWithPagesResult<'block_withdrawals'> = React.useMemo(() => {
-    return {
-      ...rpcQuery as UseQueryResult<BlockWithdrawalsResponse, ResourceError>,
-      pagination: emptyPagination,
-      onFilterChange: () => {},
-      onSortingChange: () => {},
-    };
-  }, [ rpcQuery ]);
+  const rpcQueryWithPages: QueryWithPagesResult<'block_withdrawals'> = {
+    ...rpcQuery as UseQueryResult<BlockWithdrawalsResponse, ResourceError>,
+    pagination: emptyPagination,
+    onFilterChange: () => {},
+    onSortingChange: () => {},
+  };
 
   const query = isRpcQuery ? rpcQueryWithPages : apiQuery;
 

diff --git a/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx b/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx
@@ -62,7 +62,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisi
     });
   };
 
-  const mutation = useMutation({
+  const { mutateAsync, isPending } = useMutation({
     mutationFn: customAbiKey,
     onSuccess: async(data) => {
       const response = data as unknown as CustomAbi;
@@ -101,8 +101,8 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisi
   const onSubmit: SubmitHandler<Inputs> = useCallback(async(formData) => {
     setAlertVisible(false);
     const id = data && 'id' in data ? String(data.id) : undefined;
-    await mutation.mutateAsync({ ...formData, id });
-  }, [ mutation, data, setAlertVisible ]);
+    await mutateAsync({ ...formData, id });
+  }, [ mutateAsync, data, setAlertVisible ]);
 
   return (
     <FormProvider { ...formApi }>
@@ -140,7 +140,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisi
             size="lg"
             type="submit"
             isDisabled={ !formApi.formState.isDirty }
-            isLoading={ mutation.isPending }
+            isLoading={ isPending }
           >
             { data && 'id' in data ? 'Save' : 'Create custom ABI' }
           </Button>

diff --git a/ui/pages/Home.pw.tsx b/ui/pages/Home.pw.tsx
@@ -40,7 +40,7 @@ test.describe('default view', () => {
   test.describe('screen xl', () => {
     test.use({ viewport: pwConfig.viewport.xl });
 
-    test('', async({ page }) => {
+    test('base view', async({ page }) => {
       await expect(component).toHaveScreenshot({
         mask: [ page.locator(pwConfig.adsBannerSelector) ],
         maskColor: pwConfig.maskColor,

diff --git a/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_mobile_base-view-mobile-1.png
diff --git a/....tsx_default_default-view-screen-xl-1.png → ...lt_default-view-screen-xl-base-view-1.png b/....tsx_default_default-view-screen-xl-1.png → ...lt_default-view-screen-xl-base-view-1.png
diff --git a/ui/shared/DeleteModal.tsx b/ui/shared/DeleteModal.tsx
@@ -39,7 +39,7 @@ const DeleteModal: React.FC<Props> = ({
     onClose();
   }, [ onClose, setAlertVisible ]);
 
-  const mutation = useMutation({
+  const { mutate, isPending } = useMutation({
     mutationFn,
     onSuccess: async() => {
       onSuccess();
@@ -52,8 +52,8 @@ const DeleteModal: React.FC<Props> = ({
 
   const onDeleteClick = useCallback(() => {
     setAlertVisible(false);
-    mutation.mutate();
-  }, [ setAlertVisible, mutation ]);
+    mutate();
+  }, [ setAlertVisible, mutate ]);
 
   const isMobile = useIsMobile();
 
@@ -71,7 +71,7 @@ const DeleteModal: React.FC<Props> = ({
           <Button
             size="lg"
             onClick={ onDeleteClick }
-            isLoading={ mutation.isPending }
+            isLoading={ isPending }
             // FIXME: chackra's button is disabled when isLoading
             isDisabled={ false }
           >

diff --git a/ui/shared/entities/address/AddressEntity.pw.tsx b/ui/shared/entities/address/AddressEntity.pw.tsx
@@ -19,7 +19,7 @@ test.use({ viewport: { width: 180, height: 140 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ render }) => {
+    test(`${ size }`, async({ render }) => {
       const component = await render(
         <AddressEntity
           address={ addressMock.withoutName }

diff --git a/ui/shared/entities/block/BlockEntity.pw.tsx b/ui/shared/entities/block/BlockEntity.pw.tsx
@@ -10,7 +10,7 @@ test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon sizes', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ render }) => {
+    test(`${ size }`, async({ render }) => {
       const component = await render(
         <BlockEntity
           number={ 17943507 }

diff --git a/ui/shared/entities/ens/EnsEntity.pw.tsx b/ui/shared/entities/ens/EnsEntity.pw.tsx
@@ -12,7 +12,7 @@ test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ render }) => {
+    test(`${ size }`, async({ render }) => {
       const component = await render(
         <EnsEntity
           domain={ name }
@@ -61,8 +61,9 @@ test('customization', async({ render }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test.describe('', () => {
+test.describe('tooltip test', () => {
   test.use({ viewport: { width: 300, height: 400 } });
+
   test('with protocol info', async({ render, page, mockAssetResponse }) => {
     await mockAssetResponse(domainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
 

diff --git a/.../__screenshots__/EnsEntity.pw.tsx_default_tooltip-test-with-protocol-info-1.png b/.../__screenshots__/EnsEntity.pw.tsx_default_tooltip-test-with-protocol-info-1.png
diff --git a/.../entities/ens/__screenshots__/EnsEntity.pw.tsx_default_with-protocol-info-1.png b/.../entities/ens/__screenshots__/EnsEntity.pw.tsx_default_with-protocol-info-1.png
diff --git a/ui/shared/entities/nft/NftEntity.pw.tsx b/ui/shared/entities/nft/NftEntity.pw.tsx
@@ -11,7 +11,7 @@ test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon sizes', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ render }) => {
+    test(`${ size }`, async({ render }) => {
       const component = await render(
         <NftEntity
           hash={ hash }

diff --git a/ui/shared/entities/token/TokenEntity.pw.tsx b/ui/shared/entities/token/TokenEntity.pw.tsx
@@ -12,7 +12,7 @@ test.use({ viewport: { width: 300, height: 100 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ render }) => {
+    test(`${ size }`, async({ render }) => {
       const component = await render(
         <TokenEntity
           token={ tokenMock.tokenInfo }

diff --git a/ui/shared/entities/tx/TxEntity.pw.tsx b/ui/shared/entities/tx/TxEntity.pw.tsx
@@ -11,7 +11,7 @@ test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ render }) => {
+    test(`${ size }`, async({ render }) => {
       const component = await render(
         <TxEntity
           hash={ hash }

diff --git a/ui/shared/entities/userOp/UserOpEntity.pw.tsx b/ui/shared/entities/userOp/UserOpEntity.pw.tsx
@@ -11,7 +11,7 @@ test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ render }) => {
+    test(`${ size }`, async({ render }) => {
       const component = await render(
         <UserOpEntity
           hash={ hash }

diff --git a/ui/snippets/footer/Footer.pw.tsx b/ui/snippets/footer/Footer.pw.tsx
@@ -32,7 +32,7 @@ test.describe('with custom links, max cols', () => {
   test.describe('screen xl', () => {
     test.use({ viewport: pwConfig.viewport.xl });
 
-    test('', async({ page }) => {
+    test('base view', async({ page }) => {
       await expect(page).toHaveScreenshot();
     });
   });

diff --git a/..._screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-1.png b/..._screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-1.png
diff --git a/...ts__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-base-view-1.png b/...ts__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-base-view-1.png
diff --git a/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx b/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx
@@ -89,7 +89,7 @@ authTest.describe('auth', () => {
 test.describe('with tooltips', () => {
   test.use({ viewport: pwConfig.viewport.xl });
 
-  test('', async({ render, page }) => {
+  test('base view', async({ render, page }) => {
     const component = await render(
       <Flex w="100%" minH="100vh" alignItems="stretch">
         <NavigationDesktop/>
@@ -120,14 +120,14 @@ test.describe('with submenu', () => {
     await page.locator('div[aria-label="Blockchain link group"]').hover();
   });
 
-  test('', async() => {
+  test('base view', async() => {
     await expect(component).toHaveScreenshot();
   });
 
   test.describe('xl screen', () => {
     test.use({ viewport: pwConfig.viewport.xl });
 
-    test('', async() => {
+    test('base view', async() => {
       await expect(component).toHaveScreenshot();
     });
   });

diff --git a/...on/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png b/...on/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png
diff --git a/...l/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-base-view-1.png b/...l/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-base-view-1.png
diff --git a/...l/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png b/...l/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png
diff --git a/...shots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-base-view-1.png b/...shots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-base-view-1.png
diff --git a/...n/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-1.png b/...n/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-1.png
diff --git a/.../__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-base-view-1.png b/.../__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-base-view-1.png