Skip to content

F
frontend
Commit 059f0b9a authored by tom's avatar tom
Browse files
Options

tags for tests

parent f5eb6707
Hide whitespace changes
Inline Side-by-side
Showing with 78 additions and 146 deletions
playwright-ct.config.ts
View file @ 059f0b9a
......@@ -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
View file @ 059f0b9a
import { ChakraProvider } from '@chakra-ui/react';
import type { ColorMode } from '@chakra-ui/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';
......@@ -7,10 +6,9 @@ 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>
......
playwright/viewports.ts deleted 100644 → 0
View file @ f5eb6707
export const DESKTOP = { width: 1000, height: 625 };
export const DESKTOP_XL = { width: 1440, height: 900 };
export const MOBILE = { width: 390, height: 844 };
ui/shared/Utilization/Utilization.pw.tsx
View file @ 059f0b9a
......@@ -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,16 +16,7 @@ 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"/>
......@@ -33,12 +24,3 @@ test('gray color scheme in light mode', async({ mount }) => {
);
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
View file @ 059f0b9a
......@@ -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
View file @ 059f0b9a
......@@ -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
View file @ 059f0b9a
......@@ -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 }/>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment