test(List): update snapshots

src/components/List/__tests__/List.visual.test.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import {test} from '~playwright/core';
+import {smokeTest, test} from '~playwright/core';
 
 import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
 import type {ListProps} from '../types';
@@ -11,126 +9,108 @@ import {
     sizeCases,
     sortHandleAlignCases,
 } from './cases';
-import {TestFilterableList, TestList, TestListWithCustomRender} from './helpersPlaywright';
+import {TestList, TestListWithCustomRender} from './helpersPlaywright';
 
 test.describe('List', {tag: '@List'}, () => {
     const defaultProps: ListProps<string> = {
         itemsHeight: 200,
         items: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'],
     };
 
-    createSmokeScenarios(defaultProps, {
-        size: sizeCases,
-    }).forEach(([title, details, props]) => {
-        test(title, details, async ({mount, expectScreenshot}) => {
-            const root = await mount(<TestList {...props} />);
-
-            await expectScreenshot();
-
-            root.getByText('one').hover();
-
-            await expectScreenshot({
-                nameSuffix: 'after hover on first item',
-            });
-        });
-    });
-
-    createSmokeScenarios(
-        {
-            ...defaultProps,
-            items: [],
-        },
-        {
+    smokeTest('', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<ListProps<string>>(defaultProps, {
             size: sizeCases,
-            emptyPlaceholder: emptyPlaceholderCases,
-        },
-        {
-            scenarioName: 'empty',
-        },
-    ).forEach(([title, details, props]) => {
-        test(title, details, async ({mount, expectScreenshot}) => {
-            await mount(<TestList {...props} />);
-
-            await expectScreenshot();
+            filterPlaceholder: filterPlaceholderCases,
+            sortHandleAlign: sortHandleAlignCases,
         });
-    });
 
-    createSmokeScenarios(
-        defaultProps,
-        {
-            size: sizeCases,
-        },
-        {
-            scenarioName: 'custom render item',
-        },
-    ).forEach(([title, details, props]) => {
-        test(title, details, async ({mount, expectScreenshot}) => {
-            await mount(<TestListWithCustomRender {...props} />);
-
-            await expectScreenshot();
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestList {...props} />
+                        </div>
+                        <hr />
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
         });
     });
 
-    createSmokeScenarios(
-        {
-            ...defaultProps,
-            sortable: true,
-        },
-        {
-            size: sizeCases,
-            sortHandleAlign: sortHandleAlignCases,
-        },
-        {
-            scenarioName: 'with sort',
-        },
-    ).forEach(([title, details, props]) => {
-        test(title, details, async ({mount, expectScreenshot}) => {
-            await mount(<TestList {...props} />);
-
-            await expectScreenshot();
+    smokeTest('empty', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<ListProps<string>>(
+            {
+                ...defaultProps,
+                items: [],
+            },
+            {
+                filterPlaceholder: filterPlaceholderCases,
+                emptyPlaceholder: emptyPlaceholderCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestList {...props} />
+                        </div>
+                        <hr />
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
         });
     });
 
-    createSmokeScenarios(
-        {
-            ...defaultProps,
-        },
-        {
+    smokeTest('custom render item', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<ListProps<string>>(defaultProps, {
             size: sizeCases,
             filterPlaceholder: filterPlaceholderCases,
-        },
-        {
-            scenarioName: 'filterable',
-        },
-    ).forEach(([title, details, props]) => {
-        test(title, details, async ({mount, page, expectScreenshot}) => {
-            await mount(<TestFilterableList {...props} />);
-
-            await expectScreenshot();
-
-            await page.keyboard.type('on');
+            sortHandleAlign: sortHandleAlignCases,
+        });
 
-            await expectScreenshot({
-                nameSuffix: 'after apply filter',
-            });
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestListWithCustomRender {...props} />
+                        </div>
+                        <hr />
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
         });
     });
 
-    createSmokeScenarios(
-        {
+    smokeTest('virtualized', async ({mount, expectScreenshot}) => {
+        const props: ListProps<string> = {
             ...defaultProps,
             itemHeight: 30,
             virtualized: true,
-        },
-        {},
-        {
-            scenarioName: 'virtualized',
-        },
-    ).forEach(([title, details, props]) => {
-        test(title, details, async ({mount, expectScreenshot}) => {
-            await mount(<TestList {...props} />);
+        };
+
+        await mount(<TestList {...props} />);
 
-            await expectScreenshot();
+        await expectScreenshot({
+            themes: ['light'],
         });
     });
 });

src/components/List/__tests__/helpersPlaywright.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
-
 import {List} from '../List';
-import type {ListItemData, ListProps} from '../types';
+import type {ListProps} from '../types';
 
 export const TestList = <T extends string>(props: Partial<ListProps<T>>) => {
     const [activeItemIndex, setActiveItemIndex] = React.useState<number | undefined>(1);
@@ -18,25 +16,6 @@ export const TestList = <T extends string>(props: Partial<ListProps<T>>) => {
     );
 };
 
-export const TestFilterableList = <T extends string>(props: Partial<ListProps<T>>) => {
-    const [filter, setFilter] = React.useState<string>('');
-
-    const filterItem = (filter: string) => (item: ListItemData<T>) => {
-        return item.includes(filter);
-    };
-
-    return (
-        <TestList
-            {...props}
-            autoFocus
-            filterable
-            filter={filter}
-            onFilterUpdate={setFilter}
-            filterItem={filterItem}
-        />
-    );
-};
-
 export const TestListWithCustomRender = <T extends string>(props: Partial<ListProps<T>>) => {
     return (
         <TestList