test(Table): visual tests for withTableSelection hoc (#1406)

Co-authored-by: German Vorotnikov <[email protected]>

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

@@ -25,10 +25,7 @@ import type {DataItem} from './utils';
 export default {
     title: 'Components/Data Display/Table',
     component: Table,
-    args: {
-        columns,
-        data,
-    },
+    args: {columns, data},
 } as Meta<TableProps<DataItem>>;
 
 const DefaultTemplate: StoryFn<TableProps<DataItem>> = (args) => {

src/components/Table/__tests__/Table.withTableSelection.visual.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import {withTableSelection} from '../hoc';
+
+import {HOCWithTableSelection} from './helpersPlaywright';
+
+import {test} from '~playwright/core';
+
+test.describe('Table.withTableSelection', () => {
+    test('render story: <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<HOCWithTableSelection />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <With selection>', async ({mount, expectScreenshot}) => {
+        const root = await mount(<HOCWithTableSelection />);
+        const fisrtRowCheckbox = root.getByTestId(withTableSelection.getCheckboxQa('0'));
+
+        await fisrtRowCheckbox.click();
+
+        await expectScreenshot();
+    });
+
+    test('render story: <With selection all>', async ({mount, expectScreenshot}) => {
+        const root = await mount(<HOCWithTableSelection />);
+        const fisrtRowCheckbox = root.getByTestId(withTableSelection.headerCheckboxQa);
+
+        await fisrtRowCheckbox.click();
+
+        await expectScreenshot();
+    });
+});

src/components/Table/__tests__/helpersPlaywright.ts

@@ -0,0 +1,5 @@
+import {composeStories} from '@storybook/react';
+
+import * as TableStories from '../__stories__/Table.stories';
+
+export const {HOCWithTableSelection} = composeStories(TableStories);

src/components/Table/hoc/withTableSelection/withTableSelection.tsx

@@ -73,29 +73,37 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
                 checked = false;
             }
 
-            return this.renderCheckBox({disabled, checked, handler: this.handleAllCheckBoxUpdate});
+            return this.renderCheckBox({
+                disabled,
+                checked,
+                handler: this.handleAllCheckBoxUpdate,
+                qa: withTableSelection.headerCheckboxQa,
+            });
         };
 
         private renderBodyCell = (item: I, index: number) => {
             const {selectedIds} = this.props;
-            const id = Table.getRowId(this.props, item, index);
-            const checked = selectedIds.includes(id);
+            const rowId = Table.getRowId(this.props, item, index);
+            const checked = selectedIds.includes(rowId);
 
             return this.renderCheckBox({
                 disabled: this.isDisabled(item, index),
                 checked,
-                handler: this.handleCheckBoxUpdate.bind(this, id, index),
+                handler: this.handleCheckBoxUpdate.bind(this, rowId, index),
+                qa: withTableSelection.getCheckboxQa(rowId),
             });
         };
 
         private renderCheckBox({
             disabled,
             checked,
             handler,
+            qa,
         }: {
             checked: boolean;
             disabled: boolean;
             handler: React.ChangeEventHandler<HTMLInputElement>;
+            qa: string;
         }) {
             return (
                 <Checkbox
@@ -106,6 +114,7 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
                     className={b('selection-checkbox', {
                         'vertical-align': this.props.verticalAlign,
                     })}
+                    qa={qa}
                 />
             );
         }
@@ -237,3 +246,6 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
         };
     };
 }
+
+withTableSelection.headerCheckboxQa = 'headerCheckboxQa';
+withTableSelection.getCheckboxQa = (id: string) => `CheckboxQa_${id}`;

src/components/Table/hoc/withTableSorting/withTableSorting.tsx

@@ -138,7 +138,7 @@ export function withTableSorting<I extends TableDataItem, E extends {} = {}>(
                                 </div>,
                                 <div key="spacer" className={b('sort-spacer')} />,
                                 <div key="indicator" className={b('sort-indicator')}>
-                                    <SortIndicator
+                                    <TableSortIndicator
                                         order={sortOrder || this.getColumnDefaultSortOrder(column)}
                                     />
                                 </div>,