test(checkbox): add a11y, visual tests (including related components) (…

…#1348)

* test(checkbox): add a11y, visual tests (including related components)

* minor docs fix

* tweaks

* lint!

* whoops!

https://media.tenor.com/gG2aT3lb5ZIAAAAC/middleditch-and-schwartz-thomas-middleditch.gif

* whoops! part II

https://twitter.com/nocontextmands/status/1285241701674758150/photo/1

* formatting

docs/product/components/checkbox.html

@@ -441,7 +441,7 @@
             <p class="s-input-message">All oranges are currently <strong>out of stock</strong>.</p>
         </label>
     </div>
-    <div class="s-checkbox-radio has-success">
+    <div class="s-check-control has-success">
         <input class="s-radio" type="radio" name="choice-valid-radio" id="choice-valid-radio-3" />
         <label class="s-label" for="choice-valid-radio-3">
             Bananas

lib/components/check-control/check-control.a11y.test.ts

@@ -0,0 +1,40 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+["checkbox", "radio"].forEach((type) => {
+    describe("s-check-control", () => {
+        // TODO include indeterminate
+        ["checked", "unchecked"].forEach((state) => {
+            runComponentTests({
+                type: "a11y",
+                baseClass: "s-check-control",
+                modifiers: {
+                    global: ["has-warning", "has-error", "has-success"],
+                },
+                children: {
+                    default: `
+                        <input
+                            class="s-${type}"
+                            type="${type}"
+                            id="test-input"
+                            name=""
+                            ${state === "checked" ? "checked" : ""}/>
+                        <label class="s-label" for="test-input">
+                            Label ${type}
+                            <p class="s-input-message">Description</p>
+                        </label>
+                    `,
+                },
+                options: {
+                    ...defaultOptions,
+                    testidSuffix: `${state}-${type}`,
+                },
+                // TODO remove when contrast bugs are fixed
+                skippedTestids: [
+                    /^s-check-control-dark-has-error-(checked|unchecked)-(checkbox|radio)$/,
+                    /^s-check-control-light-has-(success|warning)-(checked|unchecked)-(checkbox|radio)$/,
+                ],
+            });
+        });
+    });
+});

lib/components/check-control/check-control.visual.test.ts

@@ -0,0 +1,38 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+["checkbox", "radio"].forEach((type) => {
+    describe("s-check-control", () => {
+        // TODO include indeterminate
+        ["checked", "unchecked"].forEach((state) => {
+            runComponentTests({
+                type: "visual",
+                baseClass: "s-check-control",
+                modifiers: {
+                    global: ["has-warning", "has-error", "has-success"],
+                },
+                attributes: {
+                    class: "bg-black-100 hs1 ws2 p8",
+                },
+                children: {
+                    default: `
+                        <input
+                            class="s-${type}"
+                            type="${type}"
+                            id="test-input"
+                            name=""
+                            ${state === "checked" ? "checked" : ""}/>
+                        <label class="s-label" for="test-input">
+                            Label ${type}
+                            <p class="s-input-message">Description</p>
+                        </label>
+                    `,
+                },
+                options: {
+                    ...defaultOptions,
+                    testidSuffix: `${state}-${type}`,
+                },
+            });
+        });
+    });
+});

lib/components/check-group/check-group.a11y.test.ts

@@ -0,0 +1,51 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+type CheckGroup = "checkbox" | "radio";
+const checkTypes: CheckGroup[] = ["checkbox", "radio"];
+
+checkTypes.forEach((type) => {
+    describe("s-check-group", () => {
+        const checkEls: {
+            type: CheckGroup;
+            id: string;
+            state?: "checked" | "unchecked" | "indeterminate";
+        }[] = [
+            { type, id: `test-${type}1`, state: "checked" },
+            { type, id: `test-${type}2` },
+        ];
+        runComponentTests({
+            type: "a11y",
+            tag: "fieldset",
+            baseClass: "s-check-group",
+            variants: ["horizontal"],
+            children: {
+                default: `
+                    <legend class="s-label">${type} group</legend>
+                    ${checkEls
+                        .map(
+                            ({ type, state, id }, index) => `
+                        <div class="s-check-control">
+                            <input
+                                class="s-${type}"
+                                type="${type}"
+                                id="${id}-${index}"
+                                name=""
+                                ${state === "checked" ? "checked" : ""}/>
+                            <label class="s-label" for="${id}-${index}">
+                                ${type} label ${index}
+                                <p class="s-input-message">Description</p>
+                            </label>
+                        </div>
+                    `
+                        )
+                        .join("")}
+                `,
+            },
+            options: {
+                ...defaultOptions,
+                testidSuffix: type,
+            },
+        });
+    });
+});

lib/components/check-group/check-group.visual.test.ts

@@ -0,0 +1,58 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+type CheckGroup = "checkbox" | "radio";
+const checkTypes: CheckGroup[] = ["checkbox", "radio"];
+
+// Account for horizontal variant
+[true, false].forEach((isHorizontal) => {
+    checkTypes.forEach((type) => {
+        describe("s-check-group", () => {
+            const checkEls: {
+                type: CheckGroup;
+                id: string;
+                state?: "checked" | "unchecked" | "indeterminate";
+            }[] = [
+                { type, id: `test-${type}1`, state: "checked" },
+                { type, id: `test-${type}2` },
+            ];
+            runComponentTests({
+                type: "visual",
+                tag: "fieldset",
+                baseClass: "s-check-group",
+                attributes: {
+                    class: isHorizontal ? "hs1 ws3 p8" : "hs2 ws2 p8",
+                },
+                variants: isHorizontal ? ["horizontal"] : [],
+                children: {
+                    default: `
+                        <legend class="s-label">${type} group</legend>
+                        ${checkEls
+                            .map(
+                                ({ type, state, id }, index) => `
+                            <div class="s-check-control">
+                                <input
+                                    class="s-${type}"
+                                    type="${type}"
+                                    id="${id}-${index}"
+                                    name=""
+                                    ${state === "checked" ? "checked" : ""}/>
+                                <label class="s-label" for="${id}-${index}">
+                                    ${type} label ${index}
+                                    <p class="s-input-message">Description</p>
+                                </label>
+                            </div>
+                        `
+                            )
+                            .join("")}
+                    `,
+                },
+                options: {
+                    ...defaultOptions,
+                    includeNullVariant: !isHorizontal,
+                    testidSuffix: type,
+                },
+            });
+        });
+    });
+});

lib/components/checkbox_radio/checkbox_radio.a11y.test.ts

@@ -0,0 +1,39 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const checkboxTemplate = ({ component, testid, id }: any) =>
+    html` <div class="s-check-control" data-testid="${testid}">
+        ${component}
+        <label class="s-label" for="${id}">Label</label>
+    </div>`;
+
+["checkbox", "radio"].forEach((type) => {
+    describe(type, () => {
+        // TODO include indeterminate
+        ["checked", "unchecked"].forEach((state) => {
+            runComponentTests({
+                type: "a11y",
+                tag: "input",
+                baseClass: `s-${type}`,
+                attributes: {
+                    name: "test-name",
+                    id: "test-id",
+                    type,
+                    ...(state === "checked" ? { checked: "checked" } : {}),
+                },
+                template: ({ component, testid }) =>
+                    checkboxTemplate({
+                        component,
+                        testid,
+                        id: "test-id",
+                    }),
+                options: {
+                    ...defaultOptions,
+                    testidSuffix: state,
+                },
+            });
+        });
+    });
+});

lib/components/checkbox_radio/checkbox_radio.visual.test.ts

@@ -0,0 +1,35 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const checkboxTemplate = ({ component, testid }: any) =>
+    html`<div
+        class="d-inline-flex ai-center jc-center bg-black-100 hs1 ws1 p8"
+        data-testid="${testid}"
+    >
+        ${component}
+    </div>`;
+
+["checkbox", "radio"].forEach((type) => {
+    describe(type, () => {
+        // TODO include indeterminate
+        ["checked", "unchecked"].forEach((state) => {
+            runComponentTests({
+                type: "visual",
+                tag: "input",
+                baseClass: `s-${type}`,
+                attributes: {
+                    type,
+                    ...(state === "checked" ? { checked: "checked" } : {}),
+                },
+                template: ({ component, testid }) =>
+                    checkboxTemplate({ component, testid }),
+                options: {
+                    ...defaultOptions,
+                    testidSuffix: state,
+                },
+            });
+        });
+    });
+});