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,113 @@
 import * as React from "react";
 import { test, expect } from "@playwright/experimental-ct-react";
 
-import CheckboxStory from "./Checkbox.ct-story";
+import { CheckboxStory, CheckboxWithTooltipStory } from "./Checkbox.ct-story";
 
 test.describe("visual Checkbox", () => {
   test("Checkbox", async ({ mount }) => {
     const component = await mount(<CheckboxStory />);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - disabled, active tooltip on desktop", async ({ mount, browserName }) => {
+    /**
+     * This command skips the test if the browser is not Chromium.
+     * Condition inside is based on the browser name,
+     * which is specified by the device name in playwright-ct.config.ts file.
+     * Using that we can distinguish mobile/tablet devices and desktop devices.
+     */
+    test.skip(browserName !== "chromium", "This feature is desktop-only");
+
+    const component = await mount(<CheckboxWithTooltipStory disabled />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - checked, active tooltip on desktop", async ({ mount, browserName }) => {
+    test.skip(browserName !== "chromium", "This feature is desktop-only");
+
+    const component = await mount(<CheckboxWithTooltipStory checked />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - readOnly, active tooltip on desktop", async ({ mount, browserName }) => {
+    test.skip(browserName !== "chromium", "This feature is desktop-only");
+
+    const component = await mount(<CheckboxWithTooltipStory readOnly />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - hasError, active tooltip on desktop", async ({ mount, browserName }) => {
+    test.skip(browserName !== "chromium", "This feature is desktop-only");
+
+    const component = await mount(<CheckboxWithTooltipStory hasError />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - checked, disabled tooltip on desktop", async ({ mount, browserName }) => {
+    test.skip(browserName !== "chromium", "This feature is desktop-only");
+
+    const component = await mount(<CheckboxWithTooltipStory checked disabled />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - disabled, active tooltip on mobile", async ({ mount, browserName, page }) => {
+    /**
+     * This command skips the test if the browser is not Webkit.
+     * Condition inside is based on the browser name,
+     * which is specified by the device name in playwright-ct.config.ts file.
+     * Using that we can distinguish mobile/tablet devices and desktop devices.
+     */
+    test.skip(browserName !== "webkit", "This feature is mobile and tablet only");
+    const component = await mount(<CheckboxWithTooltipStory disabled />);
+
+    await component.getByRole("button").click();
+    await page.getByRole("tooltip").last().isVisible();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - checked, active tooltip on mobile", async ({ mount, browserName, page }) => {
+    test.skip(browserName !== "webkit", "This feature is mobile and tablet only");
+    const component = await mount(<CheckboxWithTooltipStory checked />);
+
+    await component.getByRole("button").click();
+    await page.getByRole("tooltip").last().isVisible();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - readOnly, active tooltip on mobile", async ({ mount, browserName, page }) => {
+    test.skip(browserName !== "webkit", "This feature is mobile and tablet only");
+    const component = await mount(<CheckboxWithTooltipStory readOnly />);
+
+    await component.getByRole("button").click();
+    await page.getByRole("tooltip").last().isVisible();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - hasError, active tooltip on mobile", async ({ mount, browserName, page }) => {
+    test.skip(browserName !== "webkit", "This feature is mobile and tablet only");
+    const component = await mount(<CheckboxWithTooltipStory hasError />);
+
+    await component.getByRole("button").click();
+    await page.getByRole("tooltip").last().isVisible();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - checked, disbled tooltip on mobile", async ({ mount, browserName, page }) => {
+    test.skip(browserName !== "webkit", "This feature is mobile and tablet only");
+    const component = await mount(<CheckboxWithTooltipStory checked disabled />);
 
+    await component.getByRole("button").click();
+    await page.getByRole("tooltip").last().isVisible();
     await expect(component).toHaveScreenshot();
   });
 });