add visual and a11y tests for required symbol

lib/components/label/label.a11y.test.ts

@@ -1,48 +1,6 @@
-import { html } from "@open-wc/testing";
 import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const labelTemplate = ({ component, testid }: any) => {
-    return html`
-        <fieldset data-testid="${testid}" class="p8 ws3">${component}</fieldset>
-    `;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getChildren = (status?: any) => {
-    const typeClass =
-        status && status !== "base" ? `s-label--status__${status}` : "";
-    return `
-        Example label
-        ${
-            status
-                ? `
-            <span class="s-label--status ${typeClass}">${
-                status ?? "no type"
-            }</span>
-        `
-                : ""
-        }
-    `;
-};
+import getTestArgs from "./label.test.setup";
 
 describe("label", () => {
-    runA11yTests({
-        baseClass: `s-label`,
-        modifiers: {
-            primary: ["sm", "md", "lg", "xl"],
-        },
-        // TODO: add abbr s-required-symbol variant
-        children: {
-            "default": getChildren(),
-            "status": getChildren("base"),
-            "status-beta": getChildren("beta"),
-            "status-new": getChildren("new"),
-            "status-required": getChildren("required"),
-        },
-        tag: "label",
-        template: ({ component, testid }) =>
-            labelTemplate({ component, testid }),
-    });
+    runA11yTests(getTestArgs());
 });

lib/components/label/label.test.setup.ts

@@ -0,0 +1,67 @@
+import { html } from "@open-wc/testing";
+import type { TestVariationArgs } from "../../test/test-utils";
+import "../../index";
+
+type StatusType = "base" | "beta" | "new" | "required";
+
+const labelTemplate = ({
+    component,
+    testid,
+    disabled,
+}: {
+    component: unknown;
+    testid: string;
+    disabled: boolean;
+}) => {
+    return html`
+        <fieldset
+            data-testid="${testid}"
+            class="p8 ws3"
+            ?disabled="${disabled}"
+        >
+            ${component}
+        </fieldset>
+    `;
+};
+
+const getStatus = (status: StatusType | undefined) => {
+    if (!status) return "";
+    const statusTypeClass =
+        status !== "base" ? `s-label--status__${status}` : "";
+    return `<span class="s-label--status ${statusTypeClass}">${status}</span>`;
+};
+
+const getRequiredSymbol = (required: boolean | undefined) => {
+    return required
+        ? `<abbr class="s-required-symbol" title="required">*</abbr>`
+        : "";
+};
+
+const getChildren = (text: string, status?: StatusType, required?: boolean) => {
+    return `${text}${getRequiredSymbol(required)} ${getStatus(status)}`;
+};
+
+const getTestArgs = (disabled = false): TestVariationArgs => {
+    const text = disabled ? "Disabled label" : "Example label";
+    const prefix = disabled ? "disabled-" : "";
+
+    return {
+        baseClass: `s-label`,
+        modifiers: {
+            primary: ["sm", "md", "lg", "xl"],
+        },
+        children: {
+            [`${prefix}default`]: getChildren(text),
+            [`${prefix}required`]: getChildren(text, undefined, true),
+            [`${prefix}status`]: getChildren(text, "base"),
+            [`${prefix}status-beta`]: getChildren(text, "beta"),
+            [`${prefix}status-new`]: getChildren(text, "new"),
+            [`${prefix}status-required`]: getChildren(text, "required"),
+        },
+        tag: "label",
+        template: ({ component, testid }) =>
+            labelTemplate({ component, testid, disabled }),
+    };
+};
+
+export default getTestArgs;

lib/components/label/label.visual.test.ts

@@ -1,66 +1,8 @@
-import { html } from "@open-wc/testing";
 import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const labelTemplate = ({ component, testid, isDisabled }: any) => {
-    return html`
-        <fieldset
-            data-testid="${testid}"
-            class="p8 ws3"
-            ?disabled="${isDisabled}"
-        >
-            ${component}
-        </fieldset>
-    `;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getChildren = (text: string, status?: any) => {
-    const typeClass =
-        status && status !== "base" ? `s-label--status__${status}` : "";
-    return `
-        ${text}
-        ${
-            status
-                ? `
-            <span class="s-label--status ${typeClass}">${
-                status ?? "no type"
-            }</span>
-        `
-                : ""
-        }
-    `;
-};
+import getTestArgs from "./label.test.setup";
 
 describe("label", () => {
-    [true, false].forEach((isDisabled) => {
-        const text = isDisabled ? "Disabled label" : "Example label";
-
-        runVisualTests({
-            baseClass: `s-label`,
-            modifiers: {
-                primary: ["sm", "md", "lg", "xl"],
-            },
-            // TODO: add abbr s-required-symbol variant
-            children: isDisabled
-                ? {
-                      "disabled": getChildren(text),
-                      "disabled-status": getChildren(text, "base"),
-                      "disabled-status-beta": getChildren(text, "beta"),
-                      "disabled-status-new": getChildren(text, "new"),
-                      "disabled-status-required": getChildren(text, "required"),
-                  }
-                : {
-                      "default": getChildren(text),
-                      "status": getChildren(text, "base"),
-                      "status-beta": getChildren(text, "beta"),
-                      "status-new": getChildren(text, "new"),
-                      "status-required": getChildren(text, "required"),
-                  },
-            tag: "label",
-            template: ({ component, testid }) =>
-                labelTemplate({ component, testid, isDisabled }),
-        });
+    [true, false].forEach((disabled) => {
+        runVisualTests(getTestArgs(disabled));
     });
 });