diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Adaptive-light-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Adaptive-light-chromium-linux.png new file mode 100644 index 0000000000..e05477eb8c Binary files /dev/null and b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Adaptive-light-chromium-linux.png differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Default-dark-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Default-dark-chromium-linux.png deleted file mode 100644 index d360ec3944..0000000000 Binary files a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Default-dark-chromium-linux.png and /dev/null differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Default-dark-webkit-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Default-dark-webkit-linux.png deleted file mode 100644 index a9cd718ed0..0000000000 Binary files a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Default-dark-webkit-linux.png and /dev/null differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Default-light-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Default-light-chromium-linux.png index 2cce9f0e31..7c30526e0c 100644 Binary files a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Default-light-chromium-linux.png and b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Default-light-chromium-linux.png differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Default-light-webkit-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Default-light-webkit-linux.png deleted file mode 100644 index 1c12d8c11f..0000000000 Binary files a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-Default-light-webkit-linux.png and /dev/null differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-EmptyCustom-light-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-EmptyCustom-light-chromium-linux.png new file mode 100644 index 0000000000..8c2d125800 Binary files /dev/null and b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-EmptyCustom-light-chromium-linux.png differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-EmptyDefault-light-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-EmptyDefault-light-chromium-linux.png new file mode 100644 index 0000000000..437056edb0 Binary files /dev/null and b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-EmptyDefault-light-chromium-linux.png differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-HOCWithTableSorting-dark-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-HOCWithTableSorting-dark-chromium-linux.png deleted file mode 100644 index df5744b1e4..0000000000 Binary files a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-HOCWithTableSorting-dark-chromium-linux.png and /dev/null differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-HOCWithTableSorting-dark-webkit-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-HOCWithTableSorting-dark-webkit-linux.png deleted file mode 100644 index 609f9ee9b4..0000000000 Binary files a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-HOCWithTableSorting-dark-webkit-linux.png and /dev/null differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-HOCWithTableSorting-light-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-HOCWithTableSorting-light-chromium-linux.png index 31292b1dde..f323ebbaf8 100644 Binary files a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-HOCWithTableSorting-light-chromium-linux.png and b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-HOCWithTableSorting-light-chromium-linux.png differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-HOCWithTableSorting-light-webkit-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-HOCWithTableSorting-light-webkit-linux.png deleted file mode 100644 index 14a346142d..0000000000 Binary files a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-render-story-HOCWithTableSorting-light-webkit-linux.png and /dev/null differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-column-config-light-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-column-config-light-chromium-linux.png new file mode 100644 index 0000000000..256184a1f7 Binary files /dev/null and b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-column-config-light-chromium-linux.png differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-light-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-light-chromium-linux.png new file mode 100644 index 0000000000..c0b4ab1739 Binary files /dev/null and b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-light-chromium-linux.png differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-actions-light-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-actions-light-chromium-linux.png new file mode 100644 index 0000000000..d591b564aa Binary files /dev/null and b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-actions-light-chromium-linux.png differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-checkbox-light-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-checkbox-light-chromium-linux.png new file mode 100644 index 0000000000..2f14669a46 Binary files /dev/null and b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-checkbox-light-chromium-linux.png differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-copy-light-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-copy-light-chromium-linux.png new file mode 100644 index 0000000000..c91c6bca0d Binary files /dev/null and b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-copy-light-chromium-linux.png differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-filterable-settings-light-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-filterable-settings-light-chromium-linux.png new file mode 100644 index 0000000000..ab98d02b18 Binary files /dev/null and b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-filterable-settings-light-chromium-linux.png differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-settings-light-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-settings-light-chromium-linux.png new file mode 100644 index 0000000000..3accf5a598 Binary files /dev/null and b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-settings-light-chromium-linux.png differ diff --git a/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-table-settings-light-chromium-linux.png b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-table-settings-light-chromium-linux.png new file mode 100644 index 0000000000..b9a30b9c9c Binary files /dev/null and b/src/components/Table/__snapshots__/Table.visual.test.tsx-snapshots/Table-smoke-with-table-settings-light-chromium-linux.png differ diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx index 5fc37aa74a..0108d6534d 100644 --- a/src/components/Table/__stories__/Table.stories.tsx +++ b/src/components/Table/__stories__/Table.stories.tsx @@ -201,7 +201,7 @@ const WithTableSelectionTemplate: StoryFn> = (args) => { }; export const HOCWithTableSelection = WithTableSelectionTemplate.bind({}); -const DEFAULT_SETTINGS = columns.map((x) => ({id: x.id, isSelected: true})); +export const DEFAULT_SETTINGS = columns.map((x) => ({id: x.id, isSelected: true})); // --------------------------------- const WithTableSettingsTemplate: StoryFn> = (args, context) => { const [settings, setSettings] = React.useState(DEFAULT_SETTINGS); diff --git a/src/components/Table/__tests__/Table.visual.test.tsx b/src/components/Table/__tests__/Table.visual.test.tsx index d5c014cc63..95cce9f49d 100644 --- a/src/components/Table/__tests__/Table.visual.test.tsx +++ b/src/components/Table/__tests__/Table.visual.test.tsx @@ -1,17 +1,203 @@ -import {test} from '~playwright/core'; +import {expect} from '@playwright/experimental-ct-react'; -import {TableStories} from './helpersPlaywright'; +import {smokeTest, test} from '~playwright/core'; -test.describe('Table', () => { +import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios'; + +import type {TestTableColumnConfig} from './cases'; +import { + columnAlignCases, + columnStickyCases, + columnWidthCases, + edgePaddingCases, + placeholderCases, + rowDescriptorCases, + verticalAlignCases, + wordWrapCases, +} from './cases'; +import type {TestTableProps} from './helpersPlaywright'; +import { + TableStories, + TestTable, + TestTableWithCustomColumnConfig, + TestTableWithSettings, +} from './helpersPlaywright'; + +test.describe('Table', {tag: '@Table'}, () => { test('render story: ', async ({mount, expectScreenshot}) => { await mount(); - await expectScreenshot(); + await expectScreenshot({ + themes: ['light'], + }); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot({ + themes: ['light'], + }); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot({ + themes: ['light'], + }); + }); + + test('render story: ', async ({mount, page, expectScreenshot}) => { + const size = page.viewportSize(); + if (size) { + await page.setViewportSize({ + width: 1000, + height: size.height, + }); + } + + await mount(, { + width: 'auto', + }); + + await expectScreenshot({ + themes: ['light'], + }); }); test('render story: ', async ({mount, expectScreenshot}) => { await mount(); - await expectScreenshot(); + await expectScreenshot({ + themes: ['light'], + }); + }); + + smokeTest('', async ({mount, expectScreenshot}) => { + const smokeScenarios = createSmokeScenarios( + {}, + { + edgePadding: edgePaddingCases, + verticalAlign: verticalAlignCases, + wordWrap: wordWrapCases, + getRowDescriptor: rowDescriptorCases, + }, + ); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+ +
+
+ ))} +
, + ); + + await expectScreenshot({ + themes: ['light'], + }); + }); + + smokeTest('column config', async ({mount, expectScreenshot}) => { + const smokeScenarios = createSmokeScenarios( + {}, + { + align: columnAlignCases, + sticky: columnStickyCases, + width: columnWidthCases, + placeholder: placeholderCases, + }, + ); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+ +
+
+ ))} +
, + ); + + await expectScreenshot({ + themes: ['light'], + }); + }); + + smokeTest('with copy', async ({mount, expectScreenshot}) => { + const root = await mount(); + + await root.locator('.g-table__copy').locator('nth=0').hover(); + + await expectScreenshot({ + themes: ['light'], + }); + }); + + smokeTest('with actions', async ({mount, page, expectScreenshot}) => { + const root = await mount(); + + await root.locator('button').locator('nth=0').click(); + + await expectScreenshot({ + themes: ['light'], + component: page.locator('body'), + }); + }); + + smokeTest('with checkbox', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot({ + themes: ['light'], + }); + }); + + smokeTest('with settings', async ({mount, page, expectScreenshot}) => { + const root = await mount(); + + await root.locator('button').locator('nth=0').click(); + await expect(page.locator('.g-popup')).toBeVisible(); + + await expectScreenshot({ + themes: ['light'], + component: root, + }); + }); + + smokeTest('with table settings', async ({mount, page, expectScreenshot}) => { + const root = await mount(); + + await root.locator('button').locator('nth=0').click(); + await expect(page.locator('.g-popup')).toBeVisible(); + + await expectScreenshot({ + themes: ['light'], + component: root, + }); + }); + + smokeTest('with filterable settings', async ({mount, page, expectScreenshot}) => { + const root = await mount( +
+ +
, + ); + + await root.locator('button').locator('nth=0').click(); + await expect(page.locator('.g-popup')).toBeVisible(); + + await expectScreenshot({ + themes: ['light'], + component: root, + }); }); }); diff --git a/src/components/Table/__tests__/cases.tsx b/src/components/Table/__tests__/cases.tsx new file mode 100644 index 0000000000..9cb9b57f53 --- /dev/null +++ b/src/components/Table/__tests__/cases.tsx @@ -0,0 +1,42 @@ +import type {Cases, CasesWithName} from '../../../stories/tests-factory/models'; +import type {DescriptorType, TableColumnConfig, TableProps} from '../Table'; + +import type {DataItem} from './utils'; + +export type TestTableColumnConfig = Partial>; + +export const columnAlignCases: Cases['align']> = [ + 'start', + 'end', + 'center', + 'left', + 'right', +]; + +export const columnStickyCases: Cases['sticky']> = [ + 'start', + 'end', + 'left', + 'right', +]; + +export const columnWidthCases: Cases['width']> = [200]; + +export const placeholderCases: Cases['placeholder']> = ['empty']; + +export const edgePaddingCases: Cases['edgePadding']> = [true]; + +export const verticalAlignCases: Cases['verticalAlign']> = ['top', 'middle']; + +export const wordWrapCases: Cases['wordWrap']> = [true]; + +export const rowDescriptorCases: CasesWithName['getRowDescriptor']> = [ + [ + 'disabled', + (): DescriptorType => { + return { + id: `${Math.random()}`, + }; + }, + ], +]; diff --git a/src/components/Table/__tests__/helpersPlaywright.tsx b/src/components/Table/__tests__/helpersPlaywright.tsx index 97d0a0ef78..13ac6cd62a 100644 --- a/src/components/Table/__tests__/helpersPlaywright.tsx +++ b/src/components/Table/__tests__/helpersPlaywright.tsx @@ -1,5 +1,63 @@ +import * as React from 'react'; + import {composeStories} from '@storybook/react'; +import type {TableColumnConfig, TableProps} from '../Table'; +import {Table} from '../Table'; import * as DefaultTableStories from '../__stories__/Table.stories'; +import {DEFAULT_SETTINGS} from '../__stories__/Table.stories'; +import type {TableSettingsData} from '../hoc'; +import {withTableSettings} from '../hoc'; + +import type {DataItem} from './utils'; +import {columns, data} from './utils'; export const TableStories = composeStories(DefaultTableStories); + +export type TestTableProps = Partial>; + +export const TestTableWithCustomColumnConfig = (props: { + columnConfig: Partial>; +}) => { + const {columnConfig} = props; + + const customColumnConfig = columns.map((item) => { + return { + ...item, + ...columnConfig, + }; + }); + + return ; +}; + +export const TestTable = (props: Partial>) => { + return
; +}; + +const TableWithSettings = withTableSettings({ + width: 200, + sortable: false, + filterable: false, +})(Table); + +export const TestTableWithSettings = (props: Partial>) => { + const customColumnConfig = columns.map((item) => { + return { + ...item, + meta: {sort: true}, + }; + }); + + const [settings, setSettings] = React.useState(DEFAULT_SETTINGS); + + return ( + + ); +};