test(Popover): add visual screenshots

test(Popover): add linux screenshots

packages/orbit-components/src/Popover/Popover.ct-story.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import type { Placement } from "@popperjs/core/lib/enums";
+
+import Text from "../Text";
+import Button from "../Button";
+import Stepper from "../Stepper";
+import Stack from "../Stack";
+
+import Popover from ".";
+
+const content = <Text>Popover content</Text>;
+
+const selects = (
+  <Stack direction="column">
+    <Stack flex shrink align="center" justify="between">
+      <Stack flex direction="column" spacing="none">
+        <Text>Adult</Text>
+        <Text type="secondary">11+</Text>
+      </Stack>
+      <Stepper minValue={0} />
+    </Stack>
+    <Stack flex shrink align="center" justify="between">
+      <Stack flex direction="column" spacing="none">
+        <Text>Child</Text>
+        <Text type="secondary">2-11</Text>
+      </Stack>
+      <Stepper minValue={0} />
+    </Stack>
+  </Stack>
+);
+
+export function DefaultPopover() {
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <Popover opened content={content}>
+        <Button>open popover</Button>
+      </Popover>
+    </div>
+  );
+}
+
+export function PopoverWithCustomWidth() {
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <Popover opened content={content} width="400px">
+        <Button>open popover</Button>
+      </Popover>
+    </div>
+  );
+}
+
+export const PopoverPlacements = ({ placement }: { placement: Placement }) => (
+  <div className="flex h-screen items-center justify-center">
+    <Popover opened content={content} placement={placement}>
+      <Button>open popover</Button>
+    </Popover>
+  </div>
+);
+
+export const PopoverWithFixedPosition = () => (
+  <div className="flex h-screen items-center justify-center">
+    <Popover opened content={content} fixed>
+      <Button>open popover</Button>
+    </Popover>
+  </div>
+);
+
+export const PopoverOverlapped = () => (
+  <div className="flex h-screen items-center justify-center">
+    <Popover opened content={content} overlapped>
+      <Button>open popover</Button>
+    </Popover>
+  </div>
+);
+
+export const PopoverLongContent = () => (
+  <div className="flex h-screen items-center justify-center">
+    <Popover opened content={<Stack>{Array.from({ length: 8 }).map(() => selects)}</Stack>}>
+      <Button>open popover</Button>
+    </Popover>
+  </div>
+);

packages/orbit-components/src/Popover/Popover.ct.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import {
+  DefaultPopover,
+  PopoverWithCustomWidth,
+  PopoverWithFixedPosition,
+  PopoverPlacements,
+  PopoverOverlapped,
+  PopoverLongContent,
+} from "./Popover.ct-story";
+import { PLACEMENTS } from "../common/consts";
+
+test.describe("visual Popover", () => {
+  test(`screenshot for default`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<DefaultPopover />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+
+  Object.values(PLACEMENTS).forEach(placement => {
+    test(`screenshot for placement ${placement}`, async ({ mount }, { project }) => {
+      if (project.name === "Desktop") {
+        const component = await mount(<PopoverPlacements placement={placement} />);
+
+        await expect(component).toHaveScreenshot();
+      }
+    });
+  });
+
+  test(`screenshot for custom width`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<PopoverWithCustomWidth />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+
+  test(`screenshot for fixed position`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<PopoverWithFixedPosition />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+
+  test(`screenshot for overlapped`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<PopoverOverlapped />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+
+  test(`screenshot for long content`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<PopoverLongContent />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+});

packages/orbit-components/src/Popover/Popover.stories.tsx

@@ -34,22 +34,22 @@ const ScrollWrapper = styled.div`
 `;
 
 const selects = (
-  <>
-    <Stack align="center">
-      <Stack spacing="none">
+  <Stack direction="column">
+    <Stack flex shrink align="center" justify="between">
+      <Stack inline direction="column" spacing="none">
         <Text>Adult</Text>
         <Text type="secondary">11+</Text>
       </Stack>
       <Stepper minValue={0} />
     </Stack>
-    <Stack align="center">
-      <Stack spacing="none">
+    <Stack flex shrink align="center" justify="between">
+      <Stack inline direction="column" spacing="none">
         <Text>Child</Text>
         <Text type="secondary">2-11</Text>
       </Stack>
       <Stepper minValue={0} />
     </Stack>
-  </>
+  </Stack>
 );
 
 const content = <Stack>{selects}</Stack>;