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 = { ...@@ -12,7 +12,7 @@ const config: PlaywrightTestConfig = {
testMatch: /.*\.pw\.tsx/, 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. */ /* Maximum time one test can run for. */
timeout: 10 * 1000, timeout: 10 * 1000,
...@@ -57,8 +57,36 @@ const config: PlaywrightTestConfig = { ...@@ -57,8 +57,36 @@ const config: PlaywrightTestConfig = {
/* Configure projects for major browsers */ /* Configure projects for major browsers */
projects: [ projects: [
{ {
name: 'chromium', name: 'default',
use: devices['Desktop Chrome'], 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 { ChakraProvider } from '@chakra-ui/react';
import type { ColorMode } from '@chakra-ui/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react'; import React from 'react';
...@@ -7,10 +6,9 @@ import theme from 'theme'; ...@@ -7,10 +6,9 @@ import theme from 'theme';
type Props = { type Props = {
children: React.ReactNode; children: React.ReactNode;
colorMode?: ColorMode;
} }
const TestApp = ({ children, colorMode = 'light' }: Props) => { const TestApp = ({ children }: Props) => {
const [ queryClient ] = React.useState(() => new QueryClient({ const [ queryClient ] = React.useState(() => new QueryClient({
defaultOptions: { defaultOptions: {
queries: { queries: {
...@@ -21,7 +19,7 @@ const TestApp = ({ children, colorMode = 'light' }: Props) => { ...@@ -21,7 +19,7 @@ const TestApp = ({ children, colorMode = 'light' }: Props) => {
})); }));
return ( return (
<ChakraProvider theme={{ ...theme, config: { ...theme.config, initialColorMode: colorMode } }}> <ChakraProvider theme={ theme }>
<QueryClientProvider client={ queryClient }> <QueryClientProvider client={ queryClient }>
{ children } { children }
</QueryClientProvider> </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'; ...@@ -7,7 +7,7 @@ import Utilization from './Utilization';
test.use({ viewport: { width: 100, height: 50 } }); 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( const component = await mount(
<TestApp> <TestApp>
<Utilization value={ 0.423 }/> <Utilization value={ 0.423 }/>
...@@ -16,16 +16,7 @@ test('green color scheme in light mode', async({ mount }) => { ...@@ -16,16 +16,7 @@ test('green color scheme in light mode', async({ mount }) => {
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
}); });
test('green color scheme in dark mode', async({ mount }) => { test('gray color scheme +@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 }) => {
const component = await mount( const component = await mount(
<TestApp> <TestApp>
<Utilization value={ 0.423 } colorScheme="gray"/> <Utilization value={ 0.423 } colorScheme="gray"/>
...@@ -33,12 +24,3 @@ test('gray color scheme in light mode', async({ mount }) => { ...@@ -33,12 +24,3 @@ test('gray color scheme in light mode', async({ mount }) => {
); );
await expect(component).toHaveScreenshot(); 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'; ...@@ -3,68 +3,23 @@ import React from 'react';
import * as mocks from 'mocks/txs/decodedInputData'; import * as mocks from 'mocks/txs/decodedInputData';
import TestApp from 'playwright/TestApp'; import TestApp from 'playwright/TestApp';
import { DESKTOP, MOBILE } from 'playwright/viewports';
import TxDecodedInputData from './TxDecodedInputData'; import TxDecodedInputData from './TxDecodedInputData';
test.describe('desktop', () => { test('with indexed fields +@mobile +@dark-mode', async({ mount }) => {
test.use({ viewport: DESKTOP }); const component = await mount(
<TestApp>
test('dark color mode', async({ mount }) => { <TxDecodedInputData data={ mocks.withIndexedFields }/>
const component = await mount( </TestApp>,
<TestApp colorMode="dark"> );
<TxDecodedInputData data={ mocks.withIndexedFields }/> await expect(component).toHaveScreenshot();
</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.describe('mobile', () => { test('without indexed fields +@mobile', async({ mount }) => {
test.use({ viewport: MOBILE }); const component = await mount(
<TestApp>
test('dark color mode', async({ mount }) => { <TxDecodedInputData data={ mocks.withoutIndexedFields }/>
const component = await mount( </TestApp>,
<TestApp colorMode="dark"> );
<TxDecodedInputData data={ mocks.withIndexedFields }/> await expect(component).toHaveScreenshot();
</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();
});
}); });
ui/tx/logs/TxLogItem.pw.tsx
View file @ 059f0b9a
...@@ -4,7 +4,6 @@ import React from 'react'; ...@@ -4,7 +4,6 @@ import React from 'react';
import * as addressMocks from 'mocks/address/address'; import * as addressMocks from 'mocks/address/address';
import * as inputDataMocks from 'mocks/txs/decodedInputData'; import * as inputDataMocks from 'mocks/txs/decodedInputData';
import TestApp from 'playwright/TestApp'; import TestApp from 'playwright/TestApp';
import { DESKTOP, MOBILE } from 'playwright/viewports';
import TxLogItem from './TxLogItem'; import TxLogItem from './TxLogItem';
...@@ -16,56 +15,32 @@ const TOPICS = [ ...@@ -16,56 +15,32 @@ const TOPICS = [
]; ];
const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee'; const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee';
[ test('with decoded input data +@mobile +@dark-mode', async({ mount }) => {
{ name: 'desktop', viewport: DESKTOP }, const component = await mount(
{ name: 'mobile', viewport: MOBILE }, <TestApp>
].forEach(({ name, viewport }) => { <TxLogItem
test.describe(name, () => { index={ 42 }
test.use({ viewport }); decoded={ inputDataMocks.withIndexedFields }
address={ addressMocks.withName }
test('with decoded input data', async({ mount }) => { topics={ TOPICS }
const component = await mount( data={ DATA }
<TestApp> />
<TxLogItem </TestApp>,
index={ 42 } );
decoded={ inputDataMocks.withIndexedFields } await expect(component).toHaveScreenshot();
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('dark color mode', async({ mount }) => { test('without decoded input data +@mobile', async({ mount }) => {
const component = await mount( const component = await mount(
<TestApp colorMode="dark"> <TestApp>
<TxLogItem <TxLogItem
index={ 42 } index={ 42 }
decoded={ inputDataMocks.withIndexedFields } decoded={ null }
address={ addressMocks.withName } address={ addressMocks.withoutName }
topics={ TOPICS } topics={ TOPICS }
data={ DATA } data={ DATA }
/> />
</TestApp>, </TestApp>,
); );
await expect(component).toHaveScreenshot(); 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'; ...@@ -2,13 +2,10 @@ import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import TestApp from 'playwright/TestApp'; import TestApp from 'playwright/TestApp';
import { MOBILE } from 'playwright/viewports';
import TxLogTopic from './TxLogTopic'; import TxLogTopic from './TxLogTopic';
test.use({ viewport: MOBILE }); test('address view +@mobile -@default', async({ mount }) => {
test('address view', async({ mount }) => {
const component = await mount( const component = await mount(
<TestApp> <TestApp>
<TxLogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/> <TxLogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
...@@ -19,7 +16,7 @@ test('address view', async({ mount }) => { ...@@ -19,7 +16,7 @@ test('address view', async({ mount }) => {
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
}); });
test('hex view', async({ mount }) => { test('hex view +@mobile -@default', async({ mount }) => {
const component = await mount( const component = await mount(
<TestApp> <TestApp>
<TxLogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/> <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