decrease amount of project for pw tests

playwright-ct.config.ts

@@ -80,14 +80,6 @@ const config: PlaywrightTestConfig = defineConfig({
         ...devices['iPhone 13 Pro'],
       },
     },
-    {
-      name: 'desktop xl',
-      grep: /\+@desktop-xl/,
-      use: {
-        ...devices['Desktop Chrome'],
-        viewport: { width: 1600, height: 1000 },
-      },
-    },
     {
       name: 'dark color mode',
       grep: /\+@dark-mode/,
@@ -97,23 +89,6 @@ const config: PlaywrightTestConfig = defineConfig({
         colorScheme: 'dark',
       },
     },
-    {
-      name: 'dark color mode mobile',
-      grep: /\+@dark-mode-mobile/,
-      use: {
-        ...devices['iPhone 13 Pro'],
-        colorScheme: 'dark',
-      },
-    },
-    {
-      name: 'dark color mode desktop xl',
-      grep: /\+@dark-mode-xl/,
-      use: {
-        ...devices['Desktop Chrome'],
-        viewport: { width: 1600, height: 1000 },
-        colorScheme: 'dark',
-      },
-    },
   ],
 });
 

playwright/utils/configs.ts

+import { devices } from '@playwright/test';
+
+export const viewport = {
+  mobile: devices['iPhone 13 Pro'].viewport,
+  xl: { width: 1600, height: 1000 },
+};

ui/address/AddressTxs.pw.tsx

 import { Box } from '@chakra-ui/react';
 import { test as base, expect } from '@playwright/experimental-ct-react';
+import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
+import * as configs from 'playwright/utils/configs';
 
 import AddressTxs from './AddressTxs';
 
@@ -19,32 +21,45 @@ const hooksConfig = {
   },
 };
 
-const test = base.extend<socketServer.SocketServerFixture>({
-  createSocket: socketServer.createSocket,
-});
+base.describe('base view', () => {
+  let component: Locator;
+
+  base.beforeEach(async({ page, mount }) => {
+    await page.route(API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify({ items: [ txMock.base, txMock.base ], next_page_params: { block: 1 } }),
+    }));
+
+    component = await mount(
+      <TestApp>
+        <Box h={{ base: '134px', lg: 6 }}/>
+        <AddressTxs/>
+      </TestApp>,
+      { hooksConfig },
+    );
+  });
+
+  base('+@mobile', async() => {
+    await expect(component).toHaveScreenshot();
+  });
 
-// FIXME
-// test cases which use socket cannot run in parallel since the socket server always run on the same port
-test.describe.configure({ mode: 'serial' });
-
-test('address txs +@mobile +@desktop-xl', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ txMock.base, txMock.base ], next_page_params: { block: 1 } }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
-      <AddressTxs/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await expect(component).toHaveScreenshot();
+  base.describe('screen xl', () => {
+    base.use({ viewport: configs.viewport.xl });
+
+    base('', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });
 
-test.describe('socket', () => {
+base.describe('socket', () => {
+  const test = base.extend<socketServer.SocketServerFixture>({
+    createSocket: socketServer.createSocket,
+  });
+  // FIXME
+  // test cases which use socket cannot run in parallel since the socket server always run on the same port
+  test.describe.configure({ mode: 'serial' });
+
   test('without overload', async({ mount, page, createSocket }) => {
     await page.route(API_URL, (route) => route.fulfill({
       status: 200,

ui/home/Stats.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
+import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as statsMock from 'mocks/stats/index';
 import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
+import * as configs from 'playwright/utils/configs';
 
 import Stats from './Stats';
 
 const API_URL = buildApiUrl('homepage_stats');
 
-test('all items +@mobile +@dark-mode +@desktop-xl', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
+test.describe('all items', () => {
+  let component: Locator;
 
-  const component = await mount(
-    <TestApp>
-      <Stats/>
-    </TestApp>,
-  );
+  test.beforeEach(async({ page, mount }) => {
+    await page.route(API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(statsMock.base),
+    }));
 
-  await expect(component).toHaveScreenshot();
+    component = await mount(
+      <TestApp>
+        <Stats/>
+      </TestApp>,
+    );
+  });
+
+  test('+@mobile +@dark-mode', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });
 
 test.describe('4 items', () => {

ui/home/indicators/ChainIndicators.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
+import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as dailyTxsMock from 'mocks/stats/daily_txs';
@@ -11,22 +12,36 @@ import ChainIndicators from './ChainIndicators';
 const STATS_API_URL = buildApiUrl('homepage_stats');
 const TX_CHART_API_URL = buildApiUrl('homepage_chart_txs');
 
-test('daily txs chart +@mobile +@dark-mode +@dark-mode-mobile', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(TX_CHART_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(dailyTxsMock.base),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ChainIndicators/>
-    </TestApp>,
-  );
-  await page.hover('.ChartOverlay', { position: { x: 100, y: 100 } });
-
-  await expect(component).toHaveScreenshot();
+test.describe('daily txs chart', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ page, mount }) => {
+    await page.route(STATS_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(statsMock.base),
+    }));
+    await page.route(TX_CHART_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(dailyTxsMock.base),
+    }));
+
+    component = await mount(
+      <TestApp>
+        <ChainIndicators/>
+      </TestApp>,
+    );
+    await page.hover('.ChartOverlay', { position: { x: 100, y: 100 } });
+  });
+
+  test('+@mobile', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('dark mode', () => {
+    test.use({ colorScheme: 'dark' });
+
+    test('+@mobile', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });

ui/pages/Home.pw.tsx

 import { test, expect, devices } from '@playwright/experimental-ct-react';
+import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as blockMock from 'mocks/blocks/block';
@@ -8,44 +9,59 @@ import * as txMock from 'mocks/txs/tx';
 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 insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
 
 import Home from './Home';
 
-test('default view -@default +@desktop-xl +@dark-mode', async({ mount, page }) => {
-  await page.route(buildApiUrl('homepage_stats'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(buildApiUrl('homepage_blocks'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      blockMock.base,
-      blockMock.base2,
-    ]),
-  }));
-  await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      txMock.base,
-      txMock.withContractCreation,
-      txMock.withTokenTransfer,
-    ]),
-  }));
-  await page.route(buildApiUrl('homepage_chart_txs'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(dailyTxsMock.base),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Home/>
-    </TestApp>,
-  );
-
-  await insertAdPlaceholder(page);
-
-  await expect(component.locator('main')).toHaveScreenshot();
+test.describe('default view', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ page, mount }) => {
+    await page.route(buildApiUrl('homepage_stats'), (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(statsMock.base),
+    }));
+    await page.route(buildApiUrl('homepage_blocks'), (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify([
+        blockMock.base,
+        blockMock.base2,
+      ]),
+    }));
+    await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify([
+        txMock.base,
+        txMock.withContractCreation,
+        txMock.withTokenTransfer,
+      ]),
+    }));
+    await page.route(buildApiUrl('homepage_chart_txs'), (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(dailyTxsMock.base),
+    }));
+
+    component = await mount(
+      <TestApp>
+        <Home/>
+      </TestApp>,
+    );
+
+    await insertAdPlaceholder(page);
+  });
+
+  test('-@default +@dark-mode', async() => {
+    await expect(component.locator('main')).toHaveScreenshot();
+  });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async() => {
+      await expect(component.locator('main')).toHaveScreenshot();
+    });
+  });
 });
 
 test.describe('custom hero plate background', () => {

ui/snippets/footer/Footer.pw.tsx

@@ -5,6 +5,7 @@ import type { WindowProvider } from 'wagmi';
 import { FOOTER_LINKS } from 'mocks/config/footerLinks';
 import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
+import * as configs from 'playwright/utils/configs';
 
 import Footer from './Footer';
 
@@ -18,7 +19,7 @@ base.describe('with custom links, 4 cols', () => {
     ]) as any,
   });
 
-  test('base view +@dark-mode +@mobile +@desktop-xl', async({ mount, page }) => {
+  test.beforeEach(async({ page, mount }) => {
     await page.route(FOOTER_LINKS_URL, (route) => {
       return route.fulfill({
         body: JSON.stringify(FOOTER_LINKS),
@@ -30,9 +31,19 @@ base.describe('with custom links, 4 cols', () => {
         <Footer/>
       </TestApp>,
     );
+  });
 
+  test('+@mobile +@dark-mode', async({ page }) => {
     await expect(page).toHaveScreenshot();
   });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async({ page }) => {
+      await expect(page).toHaveScreenshot();
+    });
+  });
 });
 
 base.describe('with custom links, 2 cols', () => {

ui/snippets/header/Header.pw.tsx

@@ -5,7 +5,7 @@ import TestApp from 'playwright/TestApp';
 
 import Header from './Header';
 
-test('no auth +@mobile +@dark-mode +@dark-mode-mobile', async({ mount, page }) => {
+test('no auth +@mobile', async({ mount, page }) => {
   await mount(
     <TestApp>
       <Header/>
@@ -14,3 +14,17 @@ test('no auth +@mobile +@dark-mode +@dark-mode-mobile', async({ mount, page }) =
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 150 } });
 });
+
+test.describe('dark mode', () => {
+  test.use({ colorScheme: 'dark' });
+
+  test('+@mobile', async({ mount, page }) => {
+    await mount(
+      <TestApp>
+        <Header/>
+      </TestApp>,
+    );
+
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 150 } });
+  });
+});

ui/snippets/navigation/NavigationDesktop.pw.tsx

 import { Box, Flex } from '@chakra-ui/react';
 import { test as base, expect } from '@playwright/experimental-ct-react';
+import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as cookies from 'lib/cookies';
 import authFixture from 'playwright/fixtures/auth';
 import contextWithEnvs, { createContextWithEnvs } from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
+import * as configs from 'playwright/utils/configs';
 
 import NavigationDesktop from './NavigationDesktop';
 
@@ -26,18 +28,32 @@ const test = base.extend({
   ]) as any,
 });
 
-test('no auth +@desktop-xl +@dark-mode-xl', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Flex w="100%" minH="100vh" alignItems="stretch">
-        <NavigationDesktop/>
-        <Box bgColor="lightpink" w="100%"/>
-      </Flex>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await expect(component).toHaveScreenshot();
+test.describe('no auth', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ mount }) => {
+    component = await mount(
+      <TestApp>
+        <Flex w="100%" minH="100vh" alignItems="stretch">
+          <NavigationDesktop/>
+          <Box bgColor="lightpink" w="100%"/>
+        </Flex>
+      </TestApp>,
+      { hooksConfig },
+    );
+  });
+
+  test('+@dark-mode', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('+@dark-mode', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });
 
 base.describe('auth', () => {
@@ -51,8 +67,10 @@ base.describe('auth', () => {
     },
   });
 
-  test('+@desktop-xl +@dark-mode-xl', async({ mount }) => {
-    const component = await mount(
+  let component: Locator;
+
+  test.beforeEach(async({ mount }) => {
+    component = await mount(
       <TestApp>
         <Flex w="100%" minH="100vh" alignItems="stretch">
           <NavigationDesktop/>
@@ -61,41 +79,69 @@ base.describe('auth', () => {
       </TestApp>,
       { hooksConfig },
     );
+  });
 
+  test('+@dark-mode', async() => {
     await expect(component).toHaveScreenshot();
   });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('+@dark-mode', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });
 
-test('with tooltips +@desktop-xl -@default', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <Flex w="100%" minH="100vh" alignItems="stretch">
-        <NavigationDesktop/>
-        <Box bgColor="lightpink" w="100%"/>
-      </Flex>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await page.locator('svg[aria-label="Expand/Collapse menu"]').click();
-  await page.locator('a[aria-label="Tokens link"]').hover();
-
-  await expect(component).toHaveScreenshot();
+test.describe('with tooltips', () => {
+  test.use({ viewport: configs.viewport.xl });
+
+  test('', async({ mount, page }) => {
+    const component = await mount(
+      <TestApp>
+        <Flex w="100%" minH="100vh" alignItems="stretch">
+          <NavigationDesktop/>
+          <Box bgColor="lightpink" w="100%"/>
+        </Flex>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await page.locator('svg[aria-label="Expand/Collapse menu"]').click();
+    await page.locator('a[aria-label="Tokens link"]').hover();
+
+    await expect(component).toHaveScreenshot();
+  });
 });
 
-test('with submenu +@desktop-xl +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <Flex w="100%" minH="100vh" alignItems="stretch">
-        <NavigationDesktop/>
-        <Box bgColor="lightpink" w="100%"/>
-      </Flex>
-    </TestApp>,
-    { hooksConfig },
-  );
-  await page.locator('a[aria-label="Blockchain link group"]').hover();
-
-  await expect(component).toHaveScreenshot();
+test.describe('with submenu', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ mount, page }) => {
+    component = await mount(
+      <TestApp>
+        <Flex w="100%" minH="100vh" alignItems="stretch">
+          <NavigationDesktop/>
+          <Box bgColor="lightpink" w="100%"/>
+        </Flex>
+      </TestApp>,
+      { hooksConfig },
+    );
+    await page.locator('a[aria-label="Blockchain link group"]').hover();
+  });
+
+  test('', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });
 
 base.describe('cookie set to false', () => {
@@ -109,8 +155,10 @@ base.describe('cookie set to false', () => {
     },
   });
 
-  test('navbar is opened +@desktop-xl', async({ mount }) => {
-    const component = await mount(
+  let component: Locator;
+
+  test.beforeEach(async({ mount }) => {
+    component = await mount(
       <TestApp>
         <Flex w="100%" minH="100vh" alignItems="stretch">
           <NavigationDesktop/>
@@ -119,9 +167,20 @@ base.describe('cookie set to false', () => {
       </TestApp>,
       { hooksConfig },
     );
+  });
 
+  test('', async() => {
     const networkMenu = component.locator('button[aria-label="Network menu"]');
-    expect(await networkMenu.isVisible()).toBe(true);
+    await expect(networkMenu).toBeVisible();
+  });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async() => {
+      const networkMenu = component.locator('button[aria-label="Network menu"]');
+      await expect(networkMenu).toBeVisible();
+    });
   });
 });
 

ui/snippets/networkMenu/NetworkLogo.pw.tsx

-import { test, expect } from '@playwright/experimental-ct-react';
+import { test as base, expect } from '@playwright/experimental-ct-react';
+import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
+import * as configs from 'playwright/utils/configs';
 
 import NetworkLogo from './NetworkLogo';
 
-test.describe('placeholder logo', () => {
-  const extendedTest = test.extend({
+base.describe('placeholder logo', () => {
+  const test = base.extend({
     context: contextWithEnvs([
       { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: '' },
       { name: 'NEXT_PUBLIC_NETWORK_ICON', value: '' },
@@ -15,7 +17,7 @@ test.describe('placeholder logo', () => {
     ]) as any,
   });
 
-  extendedTest('+@desktop-xl +@dark-mode +@dark-mode-xl', async({ mount }) => {
+  test('+@dark-mode', async({ mount }) => {
     const component = await mount(
       <TestApp>
         <NetworkLogo/>
@@ -24,12 +26,26 @@ test.describe('placeholder logo', () => {
 
     await expect(component.locator('a')).toHaveScreenshot();
   });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('+@dark-mode', async({ mount }) => {
+      const component = await mount(
+        <TestApp>
+          <NetworkLogo/>
+        </TestApp>,
+      );
+
+      await expect(component.locator('a')).toHaveScreenshot();
+    });
+  });
 });
 
-test.describe('custom logo', () => {
+base.describe('custom logo', () => {
   const LOGO_URL = 'https://localhost:3000/my-logo.png';
   const ICON_URL = 'https://localhost:3000/my-icon.png';
-  const extendedTest = test.extend({
+  const test = base.extend({
     context: contextWithEnvs([
       { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },
       { name: 'NEXT_PUBLIC_NETWORK_ICON', value: ICON_URL },
@@ -37,7 +53,9 @@ test.describe('custom logo', () => {
     ]) as any,
   });
 
-  extendedTest('+@desktop-xl +@dark-mode +@dark-mode-xl', async({ mount, page }) => {
+  let component: Locator;
+
+  test.beforeEach(async({ page, mount }) => {
     await page.route(LOGO_URL, (route) => {
       return route.fulfill({
         status: 200,
@@ -51,20 +69,30 @@ test.describe('custom logo', () => {
       });
     });
 
-    const component = await mount(
+    component = await mount(
       <TestApp>
         <NetworkLogo/>
       </TestApp>,
     );
+  });
 
+  test('+@dark-mode', async() => {
     await expect(component.locator('a')).toHaveScreenshot();
   });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('+@dark-mode', async() => {
+      await expect(component.locator('a')).toHaveScreenshot();
+    });
+  });
 });
 
-test.describe('custom logo with dark option', () => {
+base.describe('custom logo with dark option -@default +@dark-mode', () => {
   const LOGO_URL = 'https://localhost:3000/my-logo.png';
   const ICON_URL = 'https://localhost:3000/my-icon.png';
-  const extendedTest = test.extend({
+  const test = base.extend({
     context: contextWithEnvs([
       { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },
       { name: 'NEXT_PUBLIC_NETWORK_LOGO_DARK', value: LOGO_URL },
@@ -74,7 +102,9 @@ test.describe('custom logo with dark option', () => {
     ]) as any,
   });
 
-  extendedTest('-@default +@dark-mode +@dark-mode-xl', async({ mount, page }) => {
+  let component: Locator;
+
+  test.beforeEach(async({ page, mount }) => {
     await page.route(LOGO_URL, (route) => {
       return route.fulfill({
         status: 200,
@@ -88,12 +118,22 @@ test.describe('custom logo with dark option', () => {
       });
     });
 
-    const component = await mount(
+    component = await mount(
       <TestApp>
         <NetworkLogo/>
       </TestApp>,
     );
+  });
 
+  test('', async() => {
     await expect(component.locator('a')).toHaveScreenshot();
   });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async() => {
+      await expect(component.locator('a')).toHaveScreenshot();
+    });
+  });
 });

ui/txs/TxsTable.pw.tsx

@@ -3,16 +3,35 @@ import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
 import TestApp from 'playwright/TestApp';
+import * as configs from 'playwright/utils/configs';
 
 import TxsTable from './TxsTable';
 
-test('base view +@dark-mode +@desktop-xl', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      { /* eslint-disable-next-line react/jsx-no-bind */ }
-      <TxsTable txs={ [ txMock.base, txMock.base ] } sort={ () => () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/>
-    </TestApp>,
-  );
+test.describe('base view', () => {
 
-  await expect(component).toHaveScreenshot();
+  test('+@dark-mode', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        { /* eslint-disable-next-line react/jsx-no-bind */ }
+        <TxsTable txs={ [ txMock.base, txMock.base ] } sort={ () => () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async({ mount }) => {
+      const component = await mount(
+        <TestApp>
+          { /* eslint-disable-next-line react/jsx-no-bind */ }
+          <TxsTable txs={ [ txMock.base, txMock.base ] } sort={ () => () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/>
+        </TestApp>,
+      );
+
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });