test(Popup): update snapshots

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

@@ -1,36 +1,71 @@
-import React from 'react';
-
 import {expect} from '@playwright/experimental-ct-react';
 
-import {test} from '~playwright/core';
+import {smokeTest, test} from '~playwright/core';
 
 import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
 import type {PopupProps} from '../Popup';
 
-import {hasArrowCases, offsetCases, placementCases, strategyCases} from './cases';
+import {offsetCases, placementCases, strategyCases} from './cases';
 import {VisualTestQA} from './constants';
-import {VisualTestPopup} from './helpers';
+import {TestPopup} from './helpers';
 
 test.describe('Popup', {tag: '@Popup'}, () => {
     const defaultProps: PopupProps = {};
 
-    createSmokeScenarios(defaultProps, {
-        hasArrow: hasArrowCases,
-        placement: placementCases,
+    createSmokeScenarios<PopupProps>(defaultProps, {
         offset: offsetCases,
         strategy: strategyCases,
-    }).forEach(([title, details, props]) => {
-        test(title, details, async ({mount, page, expectScreenshot}) => {
-            const root = await mount(<VisualTestPopup {...props} />);
+    }).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, page, expectScreenshot}) => {
+            await mount(<TestPopup {...props} />);
+
+            await expect(page.getByTestId(VisualTestQA.popupContent)).toBeVisible();
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
 
-            await expectScreenshot({});
+    createSmokeScenarios<PopupProps>(
+        defaultProps,
+        {
+            placement: placementCases,
+        },
+        {
+            scenarioName: 'placement',
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, page, expectScreenshot}) => {
+            await mount(<TestPopup {...props} />);
+
+            await expect(page.getByTestId(VisualTestQA.popupContent)).toBeVisible();
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
 
-            await root.locator(`button[data-qa="${VisualTestQA.trigger}"]`).click();
+    createSmokeScenarios<PopupProps>(
+        {
+            ...defaultProps,
+            hasArrow: true,
+        },
+        {
+            placement: placementCases,
+        },
+        {
+            scenarioName: 'placement with arrow',
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, page, expectScreenshot}) => {
+            await mount(<TestPopup {...props} />);
 
             await expect(page.getByTestId(VisualTestQA.popupContent)).toBeVisible();
 
             await expectScreenshot({
-                nameSuffix: 'opened',
+                themes: ['light'],
             });
         });
     });

src/components/Popup/__tests__/cases.tsx

@@ -1,7 +1,6 @@
 import type {Cases, CasesWithName} from '../../../stories/tests-factory/models';
 import type {PopupProps} from '../Popup';
 
-export const hasArrowCases: Cases<PopupProps['hasArrow']> = [true];
 export const placementCases: Cases<PopupProps['placement']> = [
     'auto',
     'auto-start',

src/components/Popup/__tests__/helpers.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
+import * as React from 'react';
 
-import {Button} from '../../Button';
 import type {PopupProps} from '../Popup';
 import {Popup} from '../Popup';
 
 import {VisualTestQA} from './constants';
 
-export const VisualTestPopup = (props: PopupProps) => {
-    const anchorRef = React.useRef<HTMLButtonElement>(null);
-    const [open, setOpen] = React.useState(false);
+export const TestPopup = (props: PopupProps) => {
+    const anchorRef = React.useRef<HTMLDivElement>(null);
 
     return (
         <React.Fragment>
             <Popup
                 {...props}
-                open={open}
+                open
+                onClose={() => {
+                    // nothing
+                }}
                 anchorRef={anchorRef}
-                onClose={() => setOpen(false)}
                 qa={VisualTestQA.popupContent}
             >
                 <div style={{padding: 10}}>Popup content</div>
@@ -30,9 +30,19 @@ export const VisualTestPopup = (props: PopupProps) => {
                     justifyContent: 'center',
                 }}
             >
-                <Button ref={anchorRef} onClick={() => setOpen(!open)} qa={VisualTestQA.trigger}>
-                    {open ? 'Hide' : 'Show'}
-                </Button>
+                <div
+                    ref={anchorRef}
+                    style={{
+                        width: '100px',
+                        height: '100px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        border: '1px solid tomato',
+                    }}
+                >
+                    base content
+                </div>
             </div>
         </React.Fragment>
     );