add query context to tests

subscan-explorer · Nov 23, 2022 · f5eb670 · f5eb670
1 parent 10faf2d
commit f5eb670
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 59 deletions.
diff --git a/playwright/RenderWithChakra.tsx b/playwright/RenderWithChakra.tsx
diff --git a/playwright/TestApp.tsx b/playwright/TestApp.tsx
@@ -0,0 +1,32 @@
+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 [ queryClient ] = React.useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        retry: 0,
+      },
+    },
+  }));
+
+  return (
+    <ChakraProvider theme={{ ...theme, config: { ...theme.config, initialColorMode: colorMode } }}>
+      <QueryClientProvider client={ queryClient }>
+        { children }
+      </QueryClientProvider>
+    </ChakraProvider>
+  );
+};
+
+export default TestApp;
diff --git a/ui/shared/AppError/AppError.pw.tsx b/ui/shared/AppError/AppError.pw.tsx
@@ -1,26 +1,26 @@
 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import RenderWithChakra from 'playwright/RenderWithChakra';
+import TestApp from 'playwright/TestApp';
 
 import AppError from './AppError';
 
 test.use({ viewport: { width: 900, height: 400 } });
 
 test('status code 404', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra>
+    <TestApp>
       <AppError statusCode={ 404 }/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });
 
 test('status code 500', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra>
+    <TestApp>
       <AppError statusCode={ 500 }/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/Utilization/Utilization.pw.tsx b/ui/shared/Utilization/Utilization.pw.tsx
@@ -1,44 +1,44 @@
 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import RenderWithChakra from 'playwright/RenderWithChakra';
+import TestApp from 'playwright/TestApp';
 
 import Utilization from './Utilization';
 
 test.use({ viewport: { width: 100, height: 50 } });
 
 test('green color scheme in light mode', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra>
+    <TestApp>
       <Utilization value={ 0.423 }/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });
 
 test('green color scheme in dark mode', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra colorMode="dark">
+    <TestApp colorMode="dark">
       <Utilization value={ 0.423 }/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });
 
 test('gray color scheme in light mode', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra>
+    <TestApp>
       <Utilization value={ 0.423 } colorScheme="gray"/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });
 
 test('gray color scheme in dark mode', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra colorMode="dark">
+    <TestApp colorMode="dark">
       <Utilization value={ 0.423 } colorScheme="gray"/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/tx/TxDecodedInputData/TxDecodedInputData.pw.tsx b/ui/tx/TxDecodedInputData/TxDecodedInputData.pw.tsx
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as mocks from 'mocks/txs/decodedInputData';
-import RenderWithChakra from 'playwright/RenderWithChakra';
+import TestApp from 'playwright/TestApp';
 import { DESKTOP, MOBILE } from 'playwright/viewports';
 
 import TxDecodedInputData from './TxDecodedInputData';
@@ -12,27 +12,27 @@ test.describe('desktop', () => {
 
   test('dark color mode', async({ mount }) => {
     const component = await mount(
-      <RenderWithChakra colorMode="dark">
+      <TestApp colorMode="dark">
         <TxDecodedInputData data={ mocks.withIndexedFields }/>
-      </RenderWithChakra>,
+      </TestApp>,
     );
     await expect(component).toHaveScreenshot();
   });
 
   test('with indexed fields', async({ mount }) => {
     const component = await mount(
-      <RenderWithChakra>
+      <TestApp>
         <TxDecodedInputData data={ mocks.withIndexedFields }/>
-      </RenderWithChakra>,
+      </TestApp>,
     );
     await expect(component).toHaveScreenshot();
   });
 
   test('without indexed fields', async({ mount }) => {
     const component = await mount(
-      <RenderWithChakra>
+      <TestApp>
         <TxDecodedInputData data={ mocks.withoutIndexedFields }/>
-      </RenderWithChakra>,
+      </TestApp>,
     );
     await expect(component).toHaveScreenshot();
   });
@@ -43,27 +43,27 @@ test.describe('mobile', () => {
 
   test('dark color mode', async({ mount }) => {
     const component = await mount(
-      <RenderWithChakra colorMode="dark">
+      <TestApp colorMode="dark">
         <TxDecodedInputData data={ mocks.withIndexedFields }/>
-      </RenderWithChakra>,
+      </TestApp>,
     );
     await expect(component).toHaveScreenshot();
   });
 
   test('with indexed fields', async({ mount }) => {
     const component = await mount(
-      <RenderWithChakra>
+      <TestApp>
         <TxDecodedInputData data={ mocks.withIndexedFields }/>
-      </RenderWithChakra>,
+      </TestApp>,
     );
     await expect(component).toHaveScreenshot();
   });
 
   test('without indexed fields', async({ mount }) => {
     const component = await mount(
-      <RenderWithChakra>
+      <TestApp>
         <TxDecodedInputData data={ mocks.withoutIndexedFields }/>
-      </RenderWithChakra>,
+      </TestApp>,
     );
     await expect(component).toHaveScreenshot();
   });

diff --git a/ui/tx/logs/TxLogItem.pw.tsx b/ui/tx/logs/TxLogItem.pw.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import * as addressMocks from 'mocks/address/address';
 import * as inputDataMocks from 'mocks/txs/decodedInputData';
-import RenderWithChakra from 'playwright/RenderWithChakra';
+import TestApp from 'playwright/TestApp';
 import { DESKTOP, MOBILE } from 'playwright/viewports';
 
 import TxLogItem from './TxLogItem';
@@ -25,45 +25,45 @@ const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee
 
     test('with decoded input data', async({ mount }) => {
       const component = await mount(
-        <RenderWithChakra>
+        <TestApp>
           <TxLogItem
             index={ 42 }
             decoded={ inputDataMocks.withIndexedFields }
             address={ addressMocks.withName }
             topics={ TOPICS }
             data={ DATA }
           />
-        </RenderWithChakra>,
+        </TestApp>,
       );
       await expect(component).toHaveScreenshot();
     });
 
     test('without decoded input data', async({ mount }) => {
       const component = await mount(
-        <RenderWithChakra>
+        <TestApp>
           <TxLogItem
             index={ 42 }
             decoded={ null }
             address={ addressMocks.withoutName }
             topics={ TOPICS }
             data={ DATA }
           />
-        </RenderWithChakra>,
+        </TestApp>,
       );
       await expect(component).toHaveScreenshot();
     });
 
     test('dark color mode', async({ mount }) => {
       const component = await mount(
-        <RenderWithChakra colorMode="dark">
+        <TestApp colorMode="dark">
           <TxLogItem
             index={ 42 }
             decoded={ inputDataMocks.withIndexedFields }
             address={ addressMocks.withName }
             topics={ TOPICS }
             data={ DATA }
           />
-        </RenderWithChakra>,
+        </TestApp>,
       );
       await expect(component).toHaveScreenshot();
     });

diff --git a/ui/tx/logs/TxLogTopic.pw.tsx b/ui/tx/logs/TxLogTopic.pw.tsx
@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import RenderWithChakra from 'playwright/RenderWithChakra';
+import TestApp from 'playwright/TestApp';
 import { MOBILE } from 'playwright/viewports';
 
 import TxLogTopic from './TxLogTopic';
@@ -10,9 +10,9 @@ test.use({ viewport: MOBILE });
 
 test('address view', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra>
+    <TestApp>
       <TxLogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await component.locator('select[aria-label="Data type"]').selectOption('address');
 
@@ -21,9 +21,9 @@ test('address view', async({ mount }) => {
 
 test('hex view', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra>
+    <TestApp>
       <TxLogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await component.locator('select[aria-label="Data type"]').selectOption('hex');