diff --git a/packages/orbit-components/src/Tooltip/Tooltip.ct-story.tsx b/packages/orbit-components/src/Tooltip/Tooltip.ct-story.tsx new file mode 100644 index 0000000000..52393c6a0b --- /dev/null +++ b/packages/orbit-components/src/Tooltip/Tooltip.ct-story.tsx @@ -0,0 +1,37 @@ +import React from "react"; + +import { PLACEMENTS } from "../common/placements"; +import { tooltipContentCtStory } from "../primitives/TooltipPrimitive/TooltipPrimitive.ct-story"; +import Stack from "../Stack"; +import { Icons } from "../.."; +import type { Props, Size } from "./types"; + +import Tooltip from "."; + +type TooltipPrimitiveProps = Pick; + +export function DefaultTooltip({ placement = PLACEMENTS.BOTTOM, block }: TooltipPrimitiveProps) { + return ( +
+
+ + + + + +
+
+ ); +} + +export function TooltipWithImage({ size = "medium" }: { size?: Size }) { + return ( +
+ + + + + +
+ ); +} diff --git a/packages/orbit-components/src/Tooltip/Tooltip.ct.tsx b/packages/orbit-components/src/Tooltip/Tooltip.ct.tsx new file mode 100644 index 0000000000..a89c659d2c --- /dev/null +++ b/packages/orbit-components/src/Tooltip/Tooltip.ct.tsx @@ -0,0 +1,104 @@ +import * as React from "react"; +import { test, expect } from "@playwright/experimental-ct-react"; +import { defaultTokens } from "@kiwicom/orbit-design-tokens"; + +import { DefaultTooltip, TooltipWithImage } from "./Tooltip.ct-story"; +import type { Placement } from "../common/placements"; +import type { Size } from "../primitives/TooltipPrimitive/types"; + +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("Tooltip visual tests", () => { + const { breakpointLargeMobile } = defaultTokens; + + const placements = ["top", "right", "bottom", "left"]; + const sizes: Size[] = ["small", "medium"]; + + placements.forEach(placement => { + test(`screenshot for default - ${placement} - desktop`, async ({ mount, viewport }) => { + skipIfViewportSmallerThan( + viewport, + breakpointLargeMobile, + "This feature is largeMobile, tablet and desktop only", + ); + + const component = await mount(); + + await component.getByRole("button").hover(); + await expect(component).toHaveScreenshot(); + }); + }); + + sizes.forEach(size => { + test(`screenshot with image inside - ${size} on desktop`, async ({ mount, viewport }) => { + skipIfViewportSmallerThan( + viewport, + breakpointLargeMobile, + "This feature is largeMobile, tablet and desktop only", + ); + + const component = await mount(); + + await component.getByRole("button").hover(); + await expect(component).toHaveScreenshot(); + }); + }); + + test(`screenshot - block tooltip on desktop`, async ({ mount, viewport }) => { + skipIfViewportSmallerThan( + viewport, + breakpointLargeMobile, + "This feature is largeMobile, tablet and desktop only", + ); + + const component = await mount(); + + await component.getByRole("button").hover(); + await expect(component).toHaveScreenshot(); + }); + + // Tests below cover mobile views - the tooltip is visible on click. + placements.forEach(placement => { + test(`screenshot for default - ${placement} on mobile`, async ({ mount, viewport, page }) => { + skipIfViewportLargerThanOrEqual( + viewport, + breakpointLargeMobile, + "This feature is small and medium mobile only", + ); + + const component = await mount(); + + const tooltip = await page.getByRole("tooltip"); + + await component.getByRole("button").click(); + + await expect(tooltip).toBeVisible(); + await expect(component).toHaveScreenshot(); + }); + }); + + sizes.forEach(size => { + test(`screenshot with image inside - ${size} on mobile`, async ({ mount, viewport, page }) => { + skipIfViewportLargerThanOrEqual( + viewport, + breakpointLargeMobile, + "This feature is small and medium mobile only", + ); + + const component = await mount(); + + const tooltip = await page.getByRole("tooltip"); + + await component.getByRole("button").click(); + + await expect(tooltip).toBeVisible(); + await expect(component).toHaveScreenshot(); + }); + }); +});