test(Checkbox): add visual tests for active tooltip

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

@@ -1,19 +1,35 @@
 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">
+    <div className="space-y-200 lm:pt-1200 lm:h-auto flex h-[700px] flex-col">
+      <Checkbox
+        label="Check this box"
+        checked
+        tooltip={<Tooltip content="Tooltip content is visible" placement="top" />}
+      />
       <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:h-auto flex 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,22 @@
 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 />);
 
+    component.getByRole("button").hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Checkbox - active tooltip on mobile", async ({ mount, browserName }) => {
+    test.skip(browserName !== "webkit", "This feature is Safari-only");
+
+    const component = await mount(<CheckboxWithTooltipStory />);
+    component.getByRole("button").click();
+
     await expect(component).toHaveScreenshot();
   });
 });