test(Divider): add smoke visual tests (#1784)

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

@@ -0,0 +1,34 @@
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {DividerProps} from '../Divider';
+
+import {orientationCases} from './cases';
+import {ListWithDivider} from './helpers';
+
+test.describe('Divider', {tag: '@Divider'}, () => {
+    smokeTest('smoke', async ({mount, expectScreenshot}) => {
+        const defaultProps: DividerProps = {};
+
+        const smokeScenarios = createSmokeScenarios(defaultProps, {
+            orientation: orientationCases,
+        });
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <ListWithDivider {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+});

src/components/Divider/__tests__/cases.tsx

@@ -0,0 +1,4 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {DividerProps} from '../Divider';
+
+export const orientationCases: Cases<DividerProps['orientation']> = ['vertical', 'horizontal'];

src/components/Divider/__tests__/helpers.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import {Card} from '../../Card';
+import {ListItem} from '../../List';
+import {Flex} from '../../layout';
+import type {DividerProps} from '../Divider';
+import {Divider} from '../Divider';
+
+const listItems = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
+
+export const ListWithDivider = (props: DividerProps) => {
+    return (
+        <Card theme="normal" type="container">
+            <Flex direction={props.orientation === 'vertical' ? 'row' : 'column'}>
+                {listItems.map((value, index) => (
+                    <React.Fragment key={index}>
+                        <ListItem
+                            item={value}
+                            itemIndex={index}
+                            active={false}
+                            selected={false}
+                            onActivate={() => {}}
+                        />
+
+                        {index < listItems.length - 1 && <Divider {...props} />}
+                    </React.Fragment>
+                ))}
+            </Flex>
+        </Card>
+    );
+};