From ea0264212ff106e1abbbe436389e6c0167e01c3a 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 | 30 +++++++++-- .../src/Checkbox/Checkbox.ct.tsx | 53 ++++++++++++++++++- 2 files changed, 79 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..e385708d61 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,32 @@ 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({ + checked, + disabled, + hasError, + readOnly, +}: { + checked?: boolean; + disabled?: boolean; + hasError?: boolean; + readOnly?: boolean; +}) { + 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={checked} + hasError={hasError} + disabled={disabled} + readOnly={readOnly} + 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..2e343d2e0c 100644 --- a/packages/orbit-components/src/Checkbox/Checkbox.ct.tsx +++ b/packages/orbit-components/src/Checkbox/Checkbox.ct.tsx @@ -1,12 +1,63 @@ import * as React from "react"; import { test, expect } from "@playwright/experimental-ct-react"; +import { defaultTokens } from "@kiwicom/orbit-design-tokens"; -import CheckboxStory from "./Checkbox.ct-story"; +import { CheckboxStory, CheckboxWithTooltipStory } from "./Checkbox.ct-story"; + +const skipIfViewportSmallerThan = (viewport, width, message) => { + test.skip(viewport !== null && viewport.width < width, message); +}; + +const skipIfViewportLargerThanOrEqual = (viewport, width, message) => { + test.skip(viewport !== null && viewport.width >= width, message); +}; test.describe("visual Checkbox", () => { + const { breakpointLargeMobile } = defaultTokens; + test("Checkbox", async ({ mount }) => { const component = await mount(<CheckboxStory />); + await expect(component).toHaveScreenshot(); + }); + + test("Checkbox - checked with tooltip on desktop", async ({ mount, viewport }) => { + /** + * This command skips the test if the viewport width is smaller than largeMobile. + * Condition inside is based on the viewport width, + * which is specified for each of the device in playwright-ct.config.ts file. + * Using that we can distinguish mobileSmall, mobileMedium devices and larger devices. + */ + skipIfViewportSmallerThan( + viewport, + breakpointLargeMobile, + "This feature is largeMobile, tablet and desktop-only", + ); + + const component = await mount(<CheckboxWithTooltipStory checked />); + + await component.getByRole("button").hover(); + await expect(component).toHaveScreenshot(); + }); + + test("Checkbox - checked with tooltip on mobile", async ({ mount, viewport, page }) => { + /** + * This command skips the test if the viewport width is bigger than largeMobile. + * Condition inside is based on the viewport width, + * which is specified for each of the device in playwright-ct.config.ts file. + * Using that we can distinguish mobileSmall, mobileMedium devices and larger devices. + */ + skipIfViewportLargerThanOrEqual( + viewport, + breakpointLargeMobile, + "This feature is small and medium mobile only", + ); + + const component = await mount(<CheckboxWithTooltipStory checked />); + const tooltip = await page.getByRole("tooltip"); + + await component.getByRole("button").click(); + await expect(tooltip).toBeVisible(); await expect(component).toHaveScreenshot(); }); });