test(TooltipPrimitive): add visual tests

packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct-story.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+import { PLACEMENTS } from "../../common/placements";
+import Stack from "../../Stack";
+import Text from "../../Text";
+import TextLink from "../../TextLink";
+import List, { ListItem } from "../../List";
+import { Icons } from "../..";
+import type { Props, Size } from "./types";
+
+import TooltipPrimitive from ".";
+
+export const tooltipContentCtStory = (image?: boolean) => (
+  <Stack>
+    {image && (
+      <img
+        src="https://images.kiwi.com/illustrations/0x200/Rating-Q85.png"
+        alt="Preview of card help in TooltipPrimitive component"
+      />
+    )}
+    <Text>
+      We take security very seriously. Especially when it comes to your personal and sensitive
+      details.
+    </Text>
+    <List>
+      <ListItem>
+        A common variant, especially in older software, is displaying a description.
+      </ListItem>
+      <ListItem>
+        A common variant, especially in older software, is displaying a description.{" "}
+        <TextLink href="#">More info.</TextLink>
+      </ListItem>
+    </List>
+  </Stack>
+);
+
+type TooltipPrimitiveProps = Pick<Props, "placement" | "block" | "error" | "help">;
+
+export function DefaultTooltipPrimitive({
+  placement = PLACEMENTS.BOTTOM,
+  error,
+  help,
+  block,
+}: TooltipPrimitiveProps) {
+  return (
+    <div className="min-h-[600px]">
+      <div className="relative top-[275px]">
+        <Stack justify={placement.includes("left") || placement.includes("end") ? "end" : "start"}>
+          <TooltipPrimitive
+            content={tooltipContentCtStory()}
+            placement={placement}
+            error={error}
+            help={help}
+            block={block}
+          >
+            <Icons.Airplane />
+          </TooltipPrimitive>
+        </Stack>
+      </div>
+    </div>
+  );
+}
+
+export function TooltipPrimitiveWithImage({ size = "medium" }: { size?: Size }) {
+  return (
+    <div className="h-[500px]">
+      <Stack justify="center">
+        <TooltipPrimitive size={size} content={tooltipContentCtStory(true)}>
+          <Icons.Airplane />
+        </TooltipPrimitive>
+      </Stack>
+    </div>
+  );
+}

packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import type { Size } from "./types";
+import { DefaultTooltipPrimitive, TooltipPrimitiveWithImage } from "./TooltipPrimitive.ct-story";
+import { PLACEMENTS } from "../../common/placements";
+
+test.describe("Tooltip primitive visual tests", () => {
+  Object.values(PLACEMENTS).forEach(placement => {
+    test(`screenshot for default - ${placement}`, async ({ mount }) => {
+      const component = await mount(<DefaultTooltipPrimitive placement={placement} />);
+
+      await component.getByRole("button").hover();
+      await expect(component).toHaveScreenshot();
+    });
+  });
+
+  const sizes: Size[] = ["small", "medium"];
+  sizes.forEach(size => {
+    test(`screenshot with image inside - ${size}`, async ({ mount }) => {
+      const component = await mount(<TooltipPrimitiveWithImage size={size} />);
+
+      await component.getByRole("button").hover();
+      await expect(component).toHaveScreenshot();
+    });
+  });
+
+  test(`screenshot - error tooltip primitive`, async ({ mount }) => {
+    const component = await mount(<DefaultTooltipPrimitive error />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot - help tooltip primitive`, async ({ mount }) => {
+    const component = await mount(<DefaultTooltipPrimitive help />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot - block tooltip primitive`, async ({ mount }) => {
+    const component = await mount(<DefaultTooltipPrimitive block />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+});