From dc0155d16ba6c6e1859f021ed62bdf4c68f10c2f Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Tue, 5 Nov 2024 17:11:58 +0100
Subject: [PATCH] test(TooltipPrimitive): add visual tests

---
 .../TooltipPrimitive.ct-story.tsx             | 55 +++++++++++++++++++
 .../TooltipPrimitive/TooltipPrimitive.ct.tsx  | 41 ++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct-story.tsx
 create mode 100644 packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct.tsx

diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct-story.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct-story.tsx
new file mode 100644
index 0000000000..e763732e55
--- /dev/null
+++ b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct-story.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+
+import { PLACEMENTS } from "../../common/placements";
+import Stack from "../../Stack";
+import Text from "../../Text";
+import type { Props } from "./types";
+
+import TooltipPrimitive from ".";
+
+export const tooltipContentCtStory = <Text>Lorem ipsum.</Text>;
+
+type TooltipPrimitiveProps = Pick<Props, "size" | "removeUnderlinedText" | "error" | "help">;
+
+export function TooltipPrimitiveVisualDefaultStory({
+  size = "medium",
+  removeUnderlinedText,
+  error,
+  help,
+}: TooltipPrimitiveProps) {
+  return (
+    <div className="min-h-[96px]">
+      <TooltipPrimitive
+        content={tooltipContentCtStory}
+        error={error}
+        help={help}
+        removeUnderlinedText={removeUnderlinedText}
+        size={size}
+        tooltipShown
+      >
+        <Text>Tooltip.</Text>
+      </TooltipPrimitive>
+    </div>
+  );
+}
+
+export function TooltipPrimitiveVariousPlacementsStory() {
+  return (
+    <div className="lm:grid-cols-3 mm:grid-cols-2 lm:grid-rows-4 mm:grid-rows-6 lm:min-h-[800px] grid min-h-[1300px] grid-cols-1">
+      {Object.values(PLACEMENTS).map(placement => (
+        <div className="p-200 relative flex size-full items-center">
+          <Stack
+            justify={
+              // eslint-disable-next-line no-nested-ternary
+              placement.includes("left") ? "end" : placement.includes("right") ? "start" : "center"
+            }
+          >
+            <TooltipPrimitive content={tooltipContentCtStory} placement={placement} tooltipShown>
+              <Text>Tooltip</Text>
+            </TooltipPrimitive>
+          </Stack>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct.tsx
new file mode 100644
index 0000000000..a02fa1a9e6
--- /dev/null
+++ b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import {
+  TooltipPrimitiveVisualDefaultStory,
+  TooltipPrimitiveVariousPlacementsStory,
+} from "./TooltipPrimitive.ct-story";
+
+test.describe("Tooltip primitive visual tests", () => {
+  test(`screenshot for default - various placements`, async ({ mount, page }) => {
+    const viewportSize = await page.viewportSize();
+
+    if (viewportSize) {
+      // Set a new height, keeping the original width
+      await page.setViewportSize({ width: viewportSize.width, height: 1300 });
+    }
+
+    const component = await mount(<TooltipPrimitiveVariousPlacementsStory />);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot for help state`, async ({ mount }) => {
+    const component = await mount(<TooltipPrimitiveVisualDefaultStory help />);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot for error state`, async ({ mount }) => {
+    const component = await mount(<TooltipPrimitiveVisualDefaultStory error />);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot for small size`, async ({ mount }) => {
+    const component = await mount(<TooltipPrimitiveVisualDefaultStory size="small" />);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot for no underline text`, async ({ mount }) => {
+    const component = await mount(<TooltipPrimitiveVisualDefaultStory removeUnderlinedText />);
+    await expect(component).toHaveScreenshot();
+  });
+});