test(Checkbox): add visual tests for active tooltip

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

@@ -1,19 +1,30 @@
 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() {
+  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
+        tooltip={<Tooltip content="Tooltip content is visible" placement="top" />}
+      />
+    </div>
+  );
+}

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

@@ -1,12 +1,40 @@
 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 - 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 />);
+
+    await component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - active tooltip on mobile", async ({ mount, browserName }) => {
+    /**
+     * 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 />);
 
+    await component.getByRole("button").click();
     await expect(component).toHaveScreenshot();
   });
 });