test(Checkbox): add visual tests for active tooltip - p2

kiwicom · Sep 13, 2024 · df8321b · df8321b
1 parent 0d3ccb9
commit df8321b
Showing 1 changed file with 53 additions and 23 deletions.
diff --git a/packages/orbit-components/src/Checkbox/Checkbox.ct.tsx b/packages/orbit-components/src/Checkbox/Checkbox.ct.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { test, expect } from "@playwright/experimental-ct-react";
+import { defaultTokens } from "@kiwicom/orbit-design-tokens";
 
 import { CheckboxStory, CheckboxWithTooltipStory } from "./Checkbox.ct-story";
 
@@ -9,65 +10,83 @@ test.describe("visual Checkbox", () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test("Checkbox - disabled, active tooltip on desktop", async ({ mount, browserName }) => {
+  test("Checkbox - disabled, active tooltip on desktop", async ({ mount, viewport }) => {
     /**
      * 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");
+    test.skip(
+      viewport !== null && viewport?.width < defaultTokens.breakpointLargeMobile,
+      "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");
+  test("Checkbox - checked, active tooltip on desktop", async ({ mount, viewport }) => {
+    test.skip(
+      viewport !== null && viewport?.width < defaultTokens.breakpointLargeMobile,
+      "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");
+  test("Checkbox - readOnly, active tooltip on desktop", async ({ mount, viewport }) => {
+    test.skip(
+      viewport !== null && viewport?.width < defaultTokens.breakpointLargeMobile,
+      "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");
+  test("Checkbox - hasError, active tooltip on desktop", async ({ mount, viewport }) => {
+    test.skip(
+      viewport !== null && viewport?.width < defaultTokens.breakpointLargeMobile,
+      "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");
+  test("Checkbox - checked, disabled tooltip on desktop", async ({ mount, viewport }) => {
+    test.skip(
+      viewport !== null && viewport?.width < defaultTokens.breakpointLargeMobile,
+      "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 }) => {
+  test("Checkbox - disabled, active tooltip on mobile", async ({ mount, viewport, 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");
+    test.skip(
+      viewport !== null && viewport?.width >= defaultTokens.breakpointLargeMobile,
+      "This feature is small and medium mobile only",
+    );
     const component = await mount(<CheckboxWithTooltipStory disabled />);
 
     const tooltip = await page.getByRole("tooltip").last();
@@ -80,8 +99,11 @@ test.describe("visual Checkbox", () => {
     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");
+  test("Checkbox - checked, active tooltip on mobile", async ({ mount, viewport, page }) => {
+    test.skip(
+      viewport !== null && viewport?.width >= defaultTokens.breakpointLargeMobile,
+      "This feature is small and medium mobile only",
+    );
     const component = await mount(<CheckboxWithTooltipStory checked />);
 
     const tooltip = await page.getByRole("tooltip").last();
@@ -94,8 +116,11 @@ test.describe("visual Checkbox", () => {
     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");
+  test("Checkbox - readOnly, active tooltip on mobile", async ({ mount, viewport, page }) => {
+    test.skip(
+      viewport !== null && viewport?.width >= defaultTokens.breakpointLargeMobile,
+      "This feature is small and medium mobile only",
+    );
     const component = await mount(<CheckboxWithTooltipStory readOnly />);
 
     const tooltip = await page.getByRole("tooltip").last();
@@ -108,8 +133,11 @@ test.describe("visual Checkbox", () => {
     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");
+  test("Checkbox - hasError, active tooltip on mobile", async ({ mount, viewport, page }) => {
+    test.skip(
+      viewport !== null && viewport?.width >= defaultTokens.breakpointLargeMobile,
+      "This feature is small and medium mobile only",
+    );
     const component = await mount(<CheckboxWithTooltipStory hasError />);
 
     const tooltip = await page.getByRole("tooltip").last();
@@ -122,15 +150,17 @@ test.describe("visual Checkbox", () => {
     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 />);
+  test("Checkbox - checked, disbled tooltip on mobile", async ({ mount, viewport, page }) => {
+    test.skip(
+      viewport !== null && viewport?.width >= defaultTokens.breakpointLargeMobile,
+      "This feature is small and medium mobile only",
+    );
 
-    const tooltip = await page.getByRole("tooltip").last();
+    const component = await mount(<CheckboxWithTooltipStory checked disabled />);
 
     await expect(async () => {
       await component.getByRole("button").click();
-      await expect(tooltip).toBeVisible();
+      await expect(page.getByRole("tooltip")).toBeVisible();
     }).toPass();
 
     await expect(component).toHaveScreenshot();