test(Table): add smoke visual tests (#1791)

src/components/Table/__stories__/Table.stories.tsx

@@ -201,7 +201,7 @@ const WithTableSelectionTemplate: StoryFn<TableProps<DataItem>> = (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<TableProps<DataItem>> = (args, context) => {
     const [settings, setSettings] = React.useState<TableSettingsData>(DEFAULT_SETTINGS);

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: <Default>', async ({mount, expectScreenshot}) => {
         await mount(<TableStories.Default />);
 
-        await expectScreenshot();
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    test('render story: <EmptyDefault>', async ({mount, expectScreenshot}) => {
+        await mount(<TableStories.EmptyDefault />);
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    test('render story: <EmptyCustom>', async ({mount, expectScreenshot}) => {
+        await mount(<TableStories.EmptyCustom />);
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    test('render story: <Adaptive>', async ({mount, page, expectScreenshot}) => {
+        const size = page.viewportSize();
+        if (size) {
+            await page.setViewportSize({
+                width: 1000,
+                height: size.height,
+            });
+        }
+
+        await mount(<TableStories.Adaptive />, {
+            width: 'auto',
+        });
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
     });
 
     test('render story: <HOCWithTableSorting>', async ({mount, expectScreenshot}) => {
         await mount(<TableStories.HOCWithTableSorting />);
 
-        await expectScreenshot();
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TestTableProps>(
+            {},
+            {
+                edgePadding: edgePaddingCases,
+                verticalAlign: verticalAlignCases,
+                wordWrap: wordWrapCases,
+                getRowDescriptor: rowDescriptorCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestTable {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('column config', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TestTableColumnConfig>(
+            {},
+            {
+                align: columnAlignCases,
+                sticky: columnStickyCases,
+                width: columnWidthCases,
+                placeholder: placeholderCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestTableWithCustomColumnConfig columnConfig={props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with copy', async ({mount, expectScreenshot}) => {
+        const root = await mount(<TableStories.HOCWithTableCopy />);
+
+        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(<TableStories.HOCWithTableActions />);
+
+        await root.locator('button').locator('nth=0').click();
+
+        await expectScreenshot({
+            themes: ['light'],
+            component: page.locator('body'),
+        });
+    });
+
+    smokeTest('with checkbox', async ({mount, expectScreenshot}) => {
+        await mount(<TableStories.HOCWithTableSelection />);
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with settings', async ({mount, page, expectScreenshot}) => {
+        const root = await mount(<TestTableWithSettings />);
+
+        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(<TableStories.HOCWithTableSettingsFactory />);
+
+        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(
+            <div style={{minHeight: 600}}>
+                <TableStories.HOCWithFilterableTableSettings />
+            </div>,
+        );
+
+        await root.locator('button').locator('nth=0').click();
+        await expect(page.locator('.g-popup')).toBeVisible();
+
+        await expectScreenshot({
+            themes: ['light'],
+            component: root,
+        });
     });
 });

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<TableColumnConfig<DataItem>>;
+
+export const columnAlignCases: Cases<TableColumnConfig<DataItem>['align']> = [
+    'start',
+    'end',
+    'center',
+    'left',
+    'right',
+];
+
+export const columnStickyCases: Cases<TableColumnConfig<DataItem>['sticky']> = [
+    'start',
+    'end',
+    'left',
+    'right',
+];
+
+export const columnWidthCases: Cases<TableColumnConfig<DataItem>['width']> = [200];
+
+export const placeholderCases: Cases<TableColumnConfig<DataItem>['placeholder']> = ['empty'];
+
+export const edgePaddingCases: Cases<TableProps<DataItem>['edgePadding']> = [true];
+
+export const verticalAlignCases: Cases<TableProps<DataItem>['verticalAlign']> = ['top', 'middle'];
+
+export const wordWrapCases: Cases<TableProps<DataItem>['wordWrap']> = [true];
+
+export const rowDescriptorCases: CasesWithName<TableProps<DataItem>['getRowDescriptor']> = [
+    [
+        'disabled',
+        (): DescriptorType => {
+            return {
+                id: `${Math.random()}`,
+            };
+        },
+    ],
+];

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<TableProps<DataItem>>;
+
+export const TestTableWithCustomColumnConfig = (props: {
+    columnConfig: Partial<TableColumnConfig<DataItem>>;
+}) => {
+    const {columnConfig} = props;
+
+    const customColumnConfig = columns.map((item) => {
+        return {
+            ...item,
+            ...columnConfig,
+        };
+    });
+
+    return <Table data={data} columns={customColumnConfig} />;
+};
+
+export const TestTable = (props: Partial<TableProps<DataItem>>) => {
+    return <Table data={data} columns={columns} {...props} />;
+};
+
+const TableWithSettings = withTableSettings<DataItem>({
+    width: 200,
+    sortable: false,
+    filterable: false,
+})(Table);
+
+export const TestTableWithSettings = (props: Partial<TableProps<DataItem>>) => {
+    const customColumnConfig = columns.map((item) => {
+        return {
+            ...item,
+            meta: {sort: true},
+        };
+    });
+
+    const [settings, setSettings] = React.useState<TableSettingsData>(DEFAULT_SETTINGS);
+
+    return (
+        <TableWithSettings
+            data={data}
+            columns={customColumnConfig}
+            settings={settings}
+            updateSettings={setSettings}
+            {...props}
+        />
+    );
+};