tags for tests

playwright-ct.config.ts

@@ -12,7 +12,7 @@ const config: PlaywrightTestConfig = {
 
   testMatch: /.*\.pw\.tsx/,
 
-  snapshotPathTemplate: '{testDir}/{testFileDir}/__screenshots__/{testFileName}_{arg}{ext}',
+  snapshotPathTemplate: '{testDir}/{testFileDir}/__screenshots__/{testFileName}_{projectName}_{arg}{ext}',
 
   /* Maximum time one test can run for. */
   timeout: 10 * 1000,
@@ -57,8 +57,36 @@ const config: PlaywrightTestConfig = {
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: devices['Desktop Chrome'],
+      name: 'default',
+      grepInvert: /-@default/,
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1200, height: 750 },
+      },
+    },
+    {
+      name: 'mobile',
+      grep: /\+@mobile/,
+      use: {
+        ...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/,
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1200, height: 750 },
+        colorScheme: 'dark',
+      },
     },
   ],
 };

playwright/TestApp.tsx

@@ -1,16 +1,14 @@
 import { ChakraProvider } from '@chakra-ui/react';
-import type { ColorMode } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 
 import theme from 'theme';
 
 type Props = {
   children: React.ReactNode;
-  colorMode?: ColorMode;
 }
 
-const TestApp = ({ children, colorMode = 'light' }: Props) => {
+const TestApp = ({ children }: Props) => {
   const [ queryClient ] = React.useState(() => new QueryClient({
     defaultOptions: {
       queries: {
@@ -21,7 +19,7 @@ const TestApp = ({ children, colorMode = 'light' }: Props) => {
   }));
 
   return (
-    <ChakraProvider theme={{ ...theme, config: { ...theme.config, initialColorMode: colorMode } }}>
+    <ChakraProvider theme={ theme }>
       <QueryClientProvider client={ queryClient }>
         { children }
       </QueryClientProvider>

ui/shared/Utilization/Utilization.pw.tsx

@@ -7,7 +7,7 @@ import Utilization from './Utilization';
 
 test.use({ viewport: { width: 100, height: 50 } });
 
-test('green color scheme in light mode', async({ mount }) => {
+test('green color scheme +@dark-mode', async({ mount }) => {
   const component = await mount(
     <TestApp>
       <Utilization value={ 0.423 }/>
@@ -16,29 +16,11 @@ test('green color scheme in light mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('green color scheme in dark mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp colorMode="dark">
-      <Utilization value={ 0.423 }/>
-    </TestApp>,
-  );
-  await expect(component).toHaveScreenshot();
-});
-
-test('gray color scheme in light mode', async({ mount }) => {
+test('gray color scheme +@dark-mode', async({ mount }) => {
   const component = await mount(
     <TestApp>
       <Utilization value={ 0.423 } colorScheme="gray"/>
     </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });
-
-test('gray color scheme in dark mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp colorMode="dark">
-      <Utilization value={ 0.423 } colorScheme="gray"/>
-    </TestApp>,
-  );
-  await expect(component).toHaveScreenshot();
-});

ui/tx/TxDecodedInputData/TxDecodedInputData.pw.tsx

@@ -3,68 +3,23 @@ import React from 'react';
 
 import * as mocks from 'mocks/txs/decodedInputData';
 import TestApp from 'playwright/TestApp';
-import { DESKTOP, MOBILE } from 'playwright/viewports';
 
 import TxDecodedInputData from './TxDecodedInputData';
 
-test.describe('desktop', () => {
-  test.use({ viewport: DESKTOP });
-
-  test('dark color mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp colorMode="dark">
-        <TxDecodedInputData data={ mocks.withIndexedFields }/>
-      </TestApp>,
-    );
-    await expect(component).toHaveScreenshot();
-  });
-
-  test('with indexed fields', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <TxDecodedInputData data={ mocks.withIndexedFields }/>
-      </TestApp>,
-    );
-    await expect(component).toHaveScreenshot();
-  });
-
-  test('without indexed fields', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <TxDecodedInputData data={ mocks.withoutIndexedFields }/>
-      </TestApp>,
-    );
-    await expect(component).toHaveScreenshot();
-  });
+test('with indexed fields +@mobile +@dark-mode', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <TxDecodedInputData data={ mocks.withIndexedFields }/>
+    </TestApp>,
+  );
+  await expect(component).toHaveScreenshot();
 });
 
-test.describe('mobile', () => {
-  test.use({ viewport: MOBILE });
-
-  test('dark color mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp colorMode="dark">
-        <TxDecodedInputData data={ mocks.withIndexedFields }/>
-      </TestApp>,
-    );
-    await expect(component).toHaveScreenshot();
-  });
-
-  test('with indexed fields', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <TxDecodedInputData data={ mocks.withIndexedFields }/>
-      </TestApp>,
-    );
-    await expect(component).toHaveScreenshot();
-  });
-
-  test('without indexed fields', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <TxDecodedInputData data={ mocks.withoutIndexedFields }/>
-      </TestApp>,
-    );
-    await expect(component).toHaveScreenshot();
-  });
+test('without indexed fields +@mobile', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <TxDecodedInputData data={ mocks.withoutIndexedFields }/>
+    </TestApp>,
+  );
+  await expect(component).toHaveScreenshot();
 });

ui/tx/logs/TxLogItem.pw.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import * as addressMocks from 'mocks/address/address';
 import * as inputDataMocks from 'mocks/txs/decodedInputData';
 import TestApp from 'playwright/TestApp';
-import { DESKTOP, MOBILE } from 'playwright/viewports';
 
 import TxLogItem from './TxLogItem';
 
@@ -16,56 +15,32 @@ const TOPICS = [
 ];
 const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee';
 
-[
-  { name: 'desktop', viewport: DESKTOP },
-  { name: 'mobile', viewport: MOBILE },
-].forEach(({ name, viewport }) => {
-  test.describe(name, () => {
-    test.use({ viewport });
-
-    test('with decoded input data', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <TxLogItem
-            index={ 42 }
-            decoded={ inputDataMocks.withIndexedFields }
-            address={ addressMocks.withName }
-            topics={ TOPICS }
-            data={ DATA }
-          />
-        </TestApp>,
-      );
-      await expect(component).toHaveScreenshot();
-    });
-
-    test('without decoded input data', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <TxLogItem
-            index={ 42 }
-            decoded={ null }
-            address={ addressMocks.withoutName }
-            topics={ TOPICS }
-            data={ DATA }
-          />
-        </TestApp>,
-      );
-      await expect(component).toHaveScreenshot();
-    });
+test('with decoded input data +@mobile +@dark-mode', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <TxLogItem
+        index={ 42 }
+        decoded={ inputDataMocks.withIndexedFields }
+        address={ addressMocks.withName }
+        topics={ TOPICS }
+        data={ DATA }
+      />
+    </TestApp>,
+  );
+  await expect(component).toHaveScreenshot();
+});
 
-    test('dark color mode', async({ mount }) => {
-      const component = await mount(
-        <TestApp colorMode="dark">
-          <TxLogItem
-            index={ 42 }
-            decoded={ inputDataMocks.withIndexedFields }
-            address={ addressMocks.withName }
-            topics={ TOPICS }
-            data={ DATA }
-          />
-        </TestApp>,
-      );
-      await expect(component).toHaveScreenshot();
-    });
-  });
+test('without decoded input data +@mobile', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <TxLogItem
+        index={ 42 }
+        decoded={ null }
+        address={ addressMocks.withoutName }
+        topics={ TOPICS }
+        data={ DATA }
+      />
+    </TestApp>,
+  );
+  await expect(component).toHaveScreenshot();
 });

ui/tx/logs/TxLogTopic.pw.tsx

@@ -2,13 +2,10 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import TestApp from 'playwright/TestApp';
-import { MOBILE } from 'playwright/viewports';
 
 import TxLogTopic from './TxLogTopic';
 
-test.use({ viewport: MOBILE });
-
-test('address view', async({ mount }) => {
+test('address view +@mobile -@default', async({ mount }) => {
   const component = await mount(
     <TestApp>
       <TxLogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
@@ -19,7 +16,7 @@ test('address view', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('hex view', async({ mount }) => {
+test('hex view +@mobile -@default', async({ mount }) => {
   const component = await mount(
     <TestApp>
       <TxLogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>