Fix InputField and Radio

.github/contribution/testing-conventions.md

@@ -94,14 +94,12 @@ Screenshots are OS-specific. CI runs Linux on its machines. In order to generate
 screenshots, you need to run the tests on Linux. You can do that by running the tests in Docker:
 
 - `docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash`
-- `rm -rf packages/orbit-components/playwright/.cache`
-- `yarn install --frozen-lockfile`
+- `yarn run docker:reset`
 - `yarn components test-ct --update-snapshots`
 
 After you're done, reset the environment:
 
-- `rm -rf packages/orbit-components/playwright/.cache`
-- `yarn install --frozen-lockfile`
+- `yarn run docker:reset`
 
 Both `darwin` and `linux` screenshots are kept:
 

package.json

@@ -33,7 +33,8 @@
     "tailwind-preset": "yarn workspace @kiwicom/orbit-tailwind-preset",
     "tokens": "yarn workspace @kiwicom/orbit-design-tokens",
     "tracking": "yarn workspace @kiwicom/orbit-tracking",
-    "update-supported-browsers": "markdown --path .github/contribution/testing-conventions.md && git add .github/contribution/testing-conventions.md"
+    "update-supported-browsers": "markdown --path .github/contribution/testing-conventions.md && git add .github/contribution/testing-conventions.md",
+    "docker:reset": "rm -rf packages/orbit-components/playwright/.cache && yarn install --frozen-lockfile"
   },
   "engines": {
     "yarn": ">=1.19.1"

packages/orbit-components/playwright-ct.config.ts

@@ -13,6 +13,11 @@ export default defineConfig({
   retries: process.env.CI == null ? 0 : 2,
   workers: process.env.CI == null ? undefined : 1,
   reporter: process.env.CI == null ? "list" : "github",
+  expect: {
+    toHaveScreenshot: {
+      threshold: 0.01, // default is 0.2 and that is way too lax, gives false negatives
+    },
+  },
   use: {
     trace: "on-first-retry",
     testIdAttribute: "data-test",

packages/orbit-components/playwright/index.tsx

@@ -1 +1,14 @@
 import "./index.css";
+
+import * as React from "react";
+import { beforeMount } from "@playwright/experimental-ct-react/hooks";
+
+import RandomIdProvider from "../src/OrbitProvider/RandomId/Provider";
+
+beforeMount(async ({ App }) => {
+  return (
+    <RandomIdProvider useId={React.useId}>
+      <App />
+    </RandomIdProvider>
+  );
+});

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+
+import Tag from "../Tag";
+import type { Props } from "./types";
+
+import InputField from ".";
+
+// Green backgrounds to provide contrast
+
+export function Test(props: Props) {
+  return (
+    <div className="p-xxs bg-[#CFC]">
+      <InputField label="Label" dataTest="input" {...props} />
+    </div>
+  );
+}
+
+export function TestError(props: Props) {
+  return (
+    <div className="px-xxs py-xxl bg-[#CFC]">
+      <InputField label="Label" error="Error" dataTest="input" {...props} />
+    </div>
+  );
+}
+
+export function TestHelp(props: Props) {
+  return (
+    <div className="px-xxs py-xxl bg-[#CFC]">
+      <InputField label="Label" help="Help" dataTest="input" {...props} />
+    </div>
+  );
+}
+
+export function TestSuffix() {
+  return (
+    <div className="p-xxs bg-[#CFC]">
+      <InputField label="Label" suffix={<span className="pe-sm">kg</span>} />
+    </div>
+  );
+}
+
+export function TestTags() {
+  return (
+    <div className="p-xxs bg-[#CFC]">
+      <InputField
+        label="Label"
+        tags={[
+          <Tag selected>Snake 🐍</Tag>,
+          <Tag>Badger 🦡</Tag>,
+          <Tag>Badger 🦡</Tag>,
+          <Tag>Badger 🦡</Tag>,
+          <Tag>Badger 🦡</Tag>,
+          <Tag>Badger 🦡</Tag>,
+          <Tag>Badger 🦡</Tag>,
+          <Tag>Badger 🦡</Tag>,
+          <Tag>Badger 🦡</Tag>,
+          <Tag>Badger 🦡</Tag>,
+          <Tag>Badger 🦡</Tag>,
+          <Tag>Badger 🦡</Tag>,
+          <Tag>Badger 🦡</Tag>,
+          <Tag>Mushroom 🍄</Tag>,
+          <Tag>Mushroom 🍄</Tag>,
+        ]}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import { Test, TestError, TestHelp, TestSuffix, TestTags } from "./InputField.ct-story";
+
+test.describe("visual InputField", () => {
+  test("screenshot", async ({ mount }) => {
+    const component = await mount(<Test />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot disabled", async ({ mount }) => {
+    const component = await mount(<Test disabled />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot hover", async ({ mount }) => {
+    const component = await mount(<Test />);
+    component.getByTestId("input").hover();
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot focus", async ({ mount }) => {
+    const component = await mount(<Test />);
+    component.getByTestId("input").focus();
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot inline label", async ({ mount }) => {
+    const component = await mount(<Test inlineLabel />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot placeholder", async ({ mount }) => {
+    const component = await mount(<Test placeholder="Placeholder" />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot value", async ({ mount }) => {
+    const component = await mount(<Test value="Value" />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot required", async ({ mount }) => {
+    const component = await mount(<Test required />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot help", async ({ mount }) => {
+    const component = await mount(<TestHelp />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot help focus", async ({ mount }) => {
+    const component = await mount(<TestHelp />);
+    component.getByTestId("input").focus();
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot error", async ({ mount }) => {
+    const component = await mount(<TestError />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot error hover", async ({ mount }) => {
+    const component = await mount(<TestError />);
+    component.getByTestId("input").hover();
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot error focus", async ({ mount }) => {
+    const component = await mount(<TestError />);
+    component.getByTestId("input").focus();
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot prefix", async ({ mount }) => {
+    const component = await mount(<Test prefix="$" />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot suffix", async ({ mount }) => {
+    const component = await mount(<TestSuffix />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot tags", async ({ mount }) => {
+    const component = await mount(<TestTags />);
+
+    await expect(component).toHaveScreenshot();
+  });
+});

packages/orbit-components/src/InputField/index.tsx

@@ -37,7 +37,7 @@ export const FakeInput = ({
       disabled || readOnly
         ? "bg-form-element-disabled-background"
         : [
-            "bg-transparent",
+            "bg-form-element-background",
             error
               ? "peer-hover:shadow-form-element-error-hover"
               : "peer-hover:shadow-form-element-hover",

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import type { Props } from "./types";
+
+import Radio from ".";
+
+// Green backgrounds to provide contrast
+
+export function Test(props: Props) {
+  return (
+    <div className="p-xxs bg-[#CFC]">
+      <Radio label="Label" {...props} />
+    </div>
+  );
+}

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

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import { Test } from "./Radio.ct-story";
+
+test.describe("visual Radio", () => {
+  test("screenshot", async ({ mount }) => {
+    const component = await mount(<Test />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot hover", async ({ mount }) => {
+    const component = await mount(<Test />);
+    await component.getByText("Label").hover();
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot focus", async ({ mount }) => {
+    const component = await mount(<Test />);
+    await component.getByText("Label").focus();
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot disabled", async ({ mount }) => {
+    const component = await mount(<Test disabled />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot info", async ({ mount }) => {
+    const component = await mount(<Test info="Moar info" />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot checked", async ({ mount }) => {
+    const component = await mount(<Test checked />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot error", async ({ mount }) => {
+    const component = await mount(<Test hasError />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot error hover", async ({ mount }) => {
+    const component = await mount(<Test hasError />);
+    await component.getByText("Label").hover();
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot error focus", async ({ mount }) => {
+    const component = await mount(<Test hasError />);
+    await component.getByText("Label").focus();
+
+    await expect(component).toHaveScreenshot();
+  });
+});