test: add Tag visual tests

packages/orbit-components/src/Tag/Tag.ct-story.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+
+import type { Props } from "./types";
+import * as Icons from "../icons";
+
+import Tag from ".";
+
+export function TestTag(props: Props) {
+  return (
+    <div className="p-xxs inline-block">
+      <Tag {...props} />
+    </div>
+  );
+}
+
+export function DefaultTestStory() {
+  return (
+    <div className="gap-md p-xxs flex flex-col items-start">
+      <h2>Neutral</h2>
+      <div className="gap-sm flex flex-wrap">
+        <Tag>Non actionable</Tag>
+        <Tag iconLeft={<Icons.PlusMinus />}>With icon</Tag>
+        <Tag onClick={() => {}}>Default</Tag>
+        <Tag selected onClick={() => {}}>
+          Selected
+        </Tag>
+        <Tag onRemove={() => {}}>Removable</Tag>
+        <Tag selected onRemove={() => {}} onClick={() => {}}>
+          Selected Removable
+        </Tag>
+      </div>
+      <h2>Colored</h2>
+      <div className="gap-sm flex flex-wrap">
+        <Tag type="colored">Non actionable</Tag>
+        <Tag type="colored" iconLeft={<Icons.PlusMinus />}>
+          With icon
+        </Tag>
+        <Tag type="colored" onClick={() => {}}>
+          Default
+        </Tag>
+        <Tag type="colored" selected onClick={() => {}}>
+          Selected
+        </Tag>
+        <Tag type="colored" onRemove={() => {}}>
+          Removable
+        </Tag>
+        <Tag type="colored" selected onRemove={() => {}} onClick={() => {}}>
+          Selected Removable
+        </Tag>
+      </div>
+      <h2>dateTag</h2>
+      <div className="gap-sm flex flex-wrap">
+        <Tag dateTag>Neutral dateTag</Tag>
+        <Tag dateTag onClick={() => {}}>
+          Clickable dateTag
+        </Tag>
+        <Tag dateTag selected onClick={() => {}}>
+          Selected dateTag
+        </Tag>
+        <Tag type="colored" dateTag>
+          Colored dateTag
+        </Tag>
+        <Tag type="colored" dateTag onClick={() => {}}>
+          Clickable colored dateTag
+        </Tag>
+        <Tag type="colored" dateTag selected onClick={() => {}}>
+          Selected colored dateTag
+        </Tag>
+      </div>
+      <h2>Size small</h2>
+      <div className="gap-sm flex flex-wrap">
+        <Tag size="small">Neutral small</Tag>
+        <Tag size="small" iconLeft={<Icons.PlusMinus />}>
+          Small w/ icon
+        </Tag>
+        <Tag size="small" onRemove={() => {}}>
+          Small removable
+        </Tag>
+      </div>
+    </div>
+  );
+}

packages/orbit-components/src/Tag/Tag.ct.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import { TestTag, DefaultTestStory } from "./Tag.ct-story";
+
+const NON_INTERACTABLE_TAGS = [
+  {
+    testTitle: "Non-interactable Neutral",
+    type: "neutral",
+    onClick: undefined,
+    onRemove: undefined,
+  },
+  {
+    testTitle: "Non-interactable Colored",
+    type: "colored",
+    onClick: undefined,
+    onRemove: undefined,
+  },
+] as const;
+
+const INTERECTABLE_TAGS = [
+  { testTitle: "Neutral", type: "neutral" },
+  { testTitle: "Neutral Selected", type: "neutral", selected: true },
+  { testTitle: "Neutral DateTag", type: "neutral", dateTag: true, selected: false },
+  { testTitle: "Neutral DateTag Selected", type: "neutral", dateTag: true, selected: true },
+  { testTitle: "Colored", type: "colored" },
+  { testTitle: "Colored Selected", type: "colored", selected: true },
+  { testTitle: "Colored DateTag", type: "colored", dateTag: true, selected: false },
+  { testTitle: "Colored DateTag Selected", type: "colored", dateTag: true, selected: true },
+] as const;
+
+test.describe("visual Tag", () => {
+  test("screenshot general", async ({ mount }) => {
+    const component = await mount(<DefaultTestStory />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  [...NON_INTERACTABLE_TAGS, ...INTERECTABLE_TAGS].forEach(({ testTitle, ...props }) => {
+    test(`screenshot ${testTitle} hover`, async ({ mount }) => {
+      const component = await mount(
+        <TestTag dataTest="tag" onClick={() => {}} onRemove={() => {}} {...props}>
+          {testTitle}
+        </TestTag>,
+      );
+
+      await component.getByTestId("tag").hover();
+      await expect(component).toHaveScreenshot();
+    });
+  });
+
+  [...NON_INTERACTABLE_TAGS, ...INTERECTABLE_TAGS].forEach(({ testTitle, ...props }) => {
+    test(`screenshot ${testTitle} focus`, async ({ mount }) => {
+      const component = await mount(
+        <TestTag dataTest="tag" onClick={() => {}} onRemove={() => {}} {...props}>
+          {testTitle}
+        </TestTag>,
+      );
+
+      await component.getByTestId("tag").focus();
+      await expect(component).toHaveScreenshot();
+    });
+  });
+
+  [...NON_INTERACTABLE_TAGS, ...INTERECTABLE_TAGS].forEach(({ testTitle, ...props }) => {
+    test(`screenshot ${testTitle} active`, async ({ mount }) => {
+      const component = await mount(
+        <TestTag dataTest="tag" onClick={() => {}} onRemove={() => {}} {...props}>
+          {testTitle}
+        </TestTag>,
+      );
+
+      await component.getByTestId("tag").click();
+      await expect(component).toHaveScreenshot();
+    });
+  });
+
+  INTERECTABLE_TAGS.forEach(({ testTitle, ...props }) => {
+    test(`screenshot ${testTitle} focus remove button`, async ({ mount }) => {
+      const component = await mount(
+        <TestTag onClick={() => {}} onRemove={() => {}} {...props}>
+          {testTitle}
+        </TestTag>,
+      );
+
+      await component.getByRole("button", { name: "close", exact: true }).focus();
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});