chore(TooltipPrimitive): add visual tests

kiwicom · Nov 5, 2024 · 401379a · 401379a
1 parent 33c4eb8
commit 401379a
Show file tree

Hide file tree

Showing 2 changed files with 225 additions and 0 deletions.
diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct-story.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct-story.tsx
@@ -0,0 +1,148 @@
+import React from "react";
+
+import type { Placement } from "../../common/placements";
+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 TooltipPrimitive from ".";
+
+export function DefaultTooltipPrimitive({
+  placement = PLACEMENTS.BOTTOM,
+}: {
+  placement?: Placement;
+}) {
+  return (
+    <div className="h-[200px]">
+      <div className="top-1000 mx-1000 relative">
+        <Stack justify="center">
+          <TooltipPrimitive content="Hello world!" placement={placement}>
+            <Text>
+              Incididunt consectetur ullamco labore exercitation tempor. Qui incididunt commodo est
+              veniam anim Lorem et dolor dolor. Minim fugiat reprehenderit reprehenderit voluptate
+              aliquip dolor dolor anim eiusmod consectetur labore amet. Nostrud cillum esse proident
+              nisi cillum amet culpa sunt commodo. Aliquip in excepteur eu reprehenderit magna irure
+              ad laborum aute duis. Officia duis tempor nisi velit laboris nisi qui.
+            </Text>
+          </TooltipPrimitive>
+        </Stack>
+      </div>
+    </div>
+  );
+}
+
+export function ErrorTooltipPrimitive() {
+  return (
+    <div className="h-1600">
+      <Stack justify="center">
+        <TooltipPrimitive content="Hello world!" error>
+          <Icons.Airplane />
+        </TooltipPrimitive>
+      </Stack>
+    </div>
+  );
+}
+
+export function HelpTooltipPrimitive() {
+  return (
+    <div className="h-1600">
+      <Stack justify="center">
+        <TooltipPrimitive content="Hello world!" help>
+          <Icons.Airplane />
+        </TooltipPrimitive>
+      </Stack>
+    </div>
+  );
+}
+
+export function WithImageTooltipPrimitive() {
+  return (
+    <div className="h-[500px]">
+      <Stack justify="center">
+        <TooltipPrimitive
+          content={
+            <Stack>
+              <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>
+          }
+        >
+          <Icons.Airplane />
+        </TooltipPrimitive>
+      </Stack>
+    </div>
+  );
+}
+
+export function SmallWithImageTooltipPrimitive() {
+  return (
+    <div className="h-[500px]">
+      <Stack justify="center">
+        <TooltipPrimitive
+          size="small"
+          content={
+            <Stack>
+              <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>
+          }
+        >
+          <Icons.Airplane />
+        </TooltipPrimitive>
+      </Stack>
+    </div>
+  );
+}
+
+export function BlockTooltipPrimitive() {
+  return (
+    <div className="h-[500px]">
+      <Stack justify="center">
+        <TooltipPrimitive content="Hello world!" block>
+          <Text>
+            Incididunt consectetur ullamco labore exercitation tempor. Qui incididunt commodo est
+            veniam anim Lorem et dolor dolor. Minim fugiat reprehenderit reprehenderit voluptate
+            aliquip dolor dolor anim eiusmod consectetur labore amet. Nostrud cillum esse proident
+            nisi cillum amet culpa sunt commodo. Aliquip in excepteur eu reprehenderit magna irure
+            ad laborum aute duis. Officia duis tempor nisi velit laboris nisi qui.
+          </Text>
+        </TooltipPrimitive>
+      </Stack>
+    </div>
+  );
+}
diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct.tsx
@@ -0,0 +1,77 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import {
+  DefaultTooltipPrimitive,
+  WithImageTooltipPrimitive,
+  ErrorTooltipPrimitive,
+  HelpTooltipPrimitive,
+  SmallWithImageTooltipPrimitive,
+  BlockTooltipPrimitive,
+} from "./TooltipPrimitive.ct-story";
+import { PLACEMENTS } from "../../common/placements";
+
+test.describe("Default - desktop", () => {
+  test(`screenshot for default - bottom position`, async ({ mount }) => {
+    const component = await mount(<DefaultTooltipPrimitive placement={PLACEMENTS.BOTTOM} />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot for default - top position`, async ({ mount }) => {
+    const component = await mount(<DefaultTooltipPrimitive placement={PLACEMENTS.TOP} />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot for default - left position`, async ({ mount }) => {
+    const component = await mount(<DefaultTooltipPrimitive placement={PLACEMENTS.LEFT} />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot for default - right position`, async ({ mount }) => {
+    const component = await mount(<DefaultTooltipPrimitive placement={PLACEMENTS.RIGHT} />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot with image inside - small`, async ({ mount }) => {
+    const component = await mount(<SmallWithImageTooltipPrimitive />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot with image inside - medium`, async ({ mount }) => {
+    const component = await mount(<WithImageTooltipPrimitive />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot - error tooltip primitive`, async ({ mount }) => {
+    const component = await mount(<ErrorTooltipPrimitive />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot - help tooltip primitive`, async ({ mount }) => {
+    const component = await mount(<HelpTooltipPrimitive />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test(`screenshot - block tooltip primitive`, async ({ mount }) => {
+    const component = await mount(<BlockTooltipPrimitive />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+});