From b93951f10db80022cd8426d42cba31bb183ab58a Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Tue, 3 Sep 2024 17:07:14 +0200
Subject: [PATCH] test(Checkbox): add visual tests for active tooltip

---
 .../src/Checkbox/Checkbox.ct-story.tsx        | 17 +++++++++--
 .../src/Checkbox/Checkbox.ct.tsx              | 30 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/packages/orbit-components/src/Checkbox/Checkbox.ct-story.tsx b/packages/orbit-components/src/Checkbox/Checkbox.ct-story.tsx
index eb7f224fe3..363234681f 100644
--- a/packages/orbit-components/src/Checkbox/Checkbox.ct-story.tsx
+++ b/packages/orbit-components/src/Checkbox/Checkbox.ct-story.tsx
@@ -1,10 +1,10 @@
 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" />
@@ -12,8 +12,19 @@ export default function CheckboxStory() {
       <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>
+  );
+}
diff --git a/packages/orbit-components/src/Checkbox/Checkbox.ct.tsx b/packages/orbit-components/src/Checkbox/Checkbox.ct.tsx
index e01e0577f8..ce5a8a0868 100644
--- a/packages/orbit-components/src/Checkbox/Checkbox.ct.tsx
+++ b/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();
   });
 });