test(Checkbox): add visual tests for active tooltip

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

@@ -1,19 +1,43 @@
 import React from "react";
 
-import Text from "../Text";
+import Tooltip from "../Tooltip";
 
 import Checkbox from ".";
 
-export default function CheckboxStory() {
+export function CheckboxStory() {
   return (
     <div className="space-y-200 flex flex-col">
       <Checkbox label="Check this box" />
       <Checkbox label="Check this box" info="I will find you and will tick you" />
       <Checkbox label="Check this box" checked />
       <Checkbox label="Check this box" disabled />
       <Checkbox label="Check this box" disabled checked />
-      <Checkbox label="Check this box" disabled tooltip={<Text>Tooltip</Text>} />
       <Checkbox label="Check this box" hasError />
     </div>
   );
 }
+
+export function CheckboxWithTooltipStory({
+  checked,
+  disabled,
+  hasError,
+  readOnly,
+}: {
+  checked?: boolean;
+  disabled?: boolean;
+  hasError?: boolean;
+  readOnly?: boolean;
+}) {
+  return (
+    <div className="space-y-200 lm:pt-1200 lm:min-h-800 flex min-h-[700px] flex-col">
+      <Checkbox
+        label="Check this box"
+        checked={checked}
+        hasError={hasError}
+        disabled={disabled}
+        readOnly={readOnly}
+        tooltip={<Tooltip content="Tooltip content is visible" placement="top" />}
+      />
+    </div>
+  );
+}

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

@@ -1,12 +1,63 @@
 import * as React from "react";
 import { test, expect } from "@playwright/experimental-ct-react";
+import { defaultTokens } from "@kiwicom/orbit-design-tokens";
 
-import CheckboxStory from "./Checkbox.ct-story";
+import { CheckboxStory, CheckboxWithTooltipStory } from "./Checkbox.ct-story";
+
+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("visual Checkbox", () => {
+  const { breakpointLargeMobile } = defaultTokens;
+
   test("Checkbox", async ({ mount }) => {
     const component = await mount(<CheckboxStory />);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - checked with tooltip on desktop", async ({ mount, viewport }) => {
+    /**
+     * This command skips the test if the viewport width is smaller than largeMobile.
+     * Condition inside is based on the viewport width,
+     * which is specified for each of the device in playwright-ct.config.ts file.
+     * Using that we can distinguish mobileSmall, mobileMedium devices and larger devices.
+     */
+    skipIfViewportSmallerThan(
+      viewport,
+      breakpointLargeMobile,
+      "This feature is largeMobile, tablet and desktop-only",
+    );
+
+    const component = await mount(<CheckboxWithTooltipStory checked />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - checked with tooltip on mobile", async ({ mount, viewport, page }) => {
+    /**
+     * This command skips the test if the viewport width is bigger than largeMobile.
+     * Condition inside is based on the viewport width,
+     * which is specified for each of the device in playwright-ct.config.ts file.
+     * Using that we can distinguish mobileSmall, mobileMedium devices and larger devices.
+     */
+    skipIfViewportLargerThanOrEqual(
+      viewport,
+      breakpointLargeMobile,
+      "This feature is small and medium mobile only",
+    );
+
+    const component = await mount(<CheckboxWithTooltipStory checked />);
+    const tooltip = await page.getByRole("tooltip");
+
+    await component.getByRole("button").click();
 
+    await expect(tooltip).toBeVisible();
     await expect(component).toHaveScreenshot();
   });
 });