From dff51430fa8cc398385acccd30fa8d45d5501e7e Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Wed, 6 Nov 2024 16:36:31 +0100
Subject: [PATCH] test(Tooltip): add visual tests

---
 .../src/Tooltip/Tooltip.ct-story.tsx          |  37 +++++++
 .../src/Tooltip/Tooltip.ct.tsx                | 102 ++++++++++++++++++
 2 files changed, 139 insertions(+)
 create mode 100644 packages/orbit-components/src/Tooltip/Tooltip.ct-story.tsx
 create mode 100644 packages/orbit-components/src/Tooltip/Tooltip.ct.tsx

diff --git a/packages/orbit-components/src/Tooltip/Tooltip.ct-story.tsx b/packages/orbit-components/src/Tooltip/Tooltip.ct-story.tsx
new file mode 100644
index 0000000000..52393c6a0b
--- /dev/null
+++ b/packages/orbit-components/src/Tooltip/Tooltip.ct-story.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+import { PLACEMENTS } from "../common/placements";
+import { tooltipContentCtStory } from "../primitives/TooltipPrimitive/TooltipPrimitive.ct-story";
+import Stack from "../Stack";
+import { Icons } from "../..";
+import type { Props, Size } from "./types";
+
+import Tooltip from ".";
+
+type TooltipPrimitiveProps = Pick<Props, "placement" | "block">;
+
+export function DefaultTooltip({ placement = PLACEMENTS.BOTTOM, block }: TooltipPrimitiveProps) {
+  return (
+    <div className="lm:min-h-[600px] min-h-[800px]">
+      <div className="lm:top-[275px] relative">
+        <Stack justify={placement.includes("left") || placement.includes("end") ? "end" : "start"}>
+          <Tooltip content={tooltipContentCtStory()} placement={placement} block={block}>
+            <Icons.Airplane />
+          </Tooltip>
+        </Stack>
+      </div>
+    </div>
+  );
+}
+
+export function TooltipWithImage({ size = "medium" }: { size?: Size }) {
+  return (
+    <div className="min-h-[750px]">
+      <Stack justify="center">
+        <Tooltip size={size} content={tooltipContentCtStory(true)}>
+          <Icons.Airplane />
+        </Tooltip>
+      </Stack>
+    </div>
+  );
+}
diff --git a/packages/orbit-components/src/Tooltip/Tooltip.ct.tsx b/packages/orbit-components/src/Tooltip/Tooltip.ct.tsx
new file mode 100644
index 0000000000..b56b67c77c
--- /dev/null
+++ b/packages/orbit-components/src/Tooltip/Tooltip.ct.tsx
@@ -0,0 +1,102 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+import { defaultTokens } from "@kiwicom/orbit-design-tokens";
+
+import { DefaultTooltip, TooltipWithImage } from "./Tooltip.ct-story";
+import { PLACEMENTS } from "../common/placements";
+import type { Size } from "../primitives/TooltipPrimitive/types";
+
+const skipIfViewportSmallerThan = (viewport, width, message) => {
+  test.skip(viewport !== null && viewport.width < width, message);
+};
+
+const skipIfViewportLargerThanOrEqual = (viewport, width, message) => {
+  test.skip(viewport !== null && viewport.width >= width, message);
+};
+
+test.describe("Tooltip visual tests", () => {
+  const sizes: Size[] = ["small", "medium"];
+  const { breakpointLargeMobile } = defaultTokens;
+
+  Object.values(PLACEMENTS).forEach(placement => {
+    test(`screenshot for default - ${placement} - desktop`, async ({ mount, viewport }) => {
+      skipIfViewportSmallerThan(
+        viewport,
+        breakpointLargeMobile,
+        "This feature is largeMobile, tablet and desktop only",
+      );
+
+      const component = await mount(<DefaultTooltip placement={placement} />);
+
+      await component.getByRole("button").hover();
+      await expect(component).toHaveScreenshot();
+    });
+  });
+
+  sizes.forEach(size => {
+    test(`screenshot with image inside - ${size} on desktop`, async ({ mount, viewport }) => {
+      skipIfViewportSmallerThan(
+        viewport,
+        breakpointLargeMobile,
+        "This feature is largeMobile, tablet and desktop only",
+      );
+
+      const component = await mount(<TooltipWithImage size={size} />);
+
+      await component.getByRole("button").hover();
+      await expect(component).toHaveScreenshot();
+    });
+  });
+
+  test(`screenshot - block tooltip on desktop`, async ({ mount, viewport }) => {
+    skipIfViewportSmallerThan(
+      viewport,
+      breakpointLargeMobile,
+      "This feature is largeMobile, tablet and desktop only",
+    );
+
+    const component = await mount(<DefaultTooltip block />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  // Tests below cover mobile views - the tooltip is visible on click.
+  Object.values(PLACEMENTS).forEach(placement => {
+    test(`screenshot for default - ${placement} on mobile`, async ({ mount, viewport, page }) => {
+      skipIfViewportLargerThanOrEqual(
+        viewport,
+        breakpointLargeMobile,
+        "This feature is small and medium mobile only",
+      );
+
+      const component = await mount(<DefaultTooltip placement={placement} />);
+
+      const tooltip = await page.getByRole("tooltip");
+
+      await component.getByRole("button").click();
+
+      await expect(tooltip).toBeVisible();
+      await expect(component).toHaveScreenshot();
+    });
+  });
+
+  sizes.forEach(size => {
+    test(`screenshot with image inside - ${size} on mobile`, async ({ mount, viewport, page }) => {
+      skipIfViewportLargerThanOrEqual(
+        viewport,
+        breakpointLargeMobile,
+        "This feature is small and medium mobile only",
+      );
+
+      const component = await mount(<TooltipWithImage size={size} />);
+
+      const tooltip = await page.getByRole("tooltip");
+
+      await component.getByRole("button").click();
+
+      await expect(tooltip).toBeVisible();
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});