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 (
@@ -12,8 +12,19 @@ export default function CheckboxStory() {
- Tooltip} />
);
}
+
+export function CheckboxWithTooltipStory() {
+ return (
+
+ }
+ />
+
+ );
+}
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();
+ 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();
+
+ 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();
+ await component.getByRole("button").click();
await expect(component).toHaveScreenshot();
});
});