test(label): add a11y; visual tests (#1529)

docs/product/components/labels.html

@@ -68,25 +68,21 @@
     <div class="stacks-preview">
 {% highlight html %}
 <form class="d-flex gy4 fd-column">
-    <div class="flex--item">
-        <label class="d-block s-label" for="example-item">
-            Question title
-            <p class="s-description mt2">Clear question titles are more likely to get answered.</p>
-        </label>
-    </div>
+    <label class="d-block s-label" for="example-item">
+        Question title
+    </label>
+    <p class="s-description mtn2 mb0">Clear question titles are more likely to get answered.</p>
     <div class="d-flex ps-relative">
         <input class="s-input" id="example-item" type="text" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?" />
     </div>
 </form>
 {% endhighlight %}
         <div class="stacks-preview--example">
             <form class="d-flex gy4 fd-column">
-                <div class="flex--item">
-                    <label class="d-block s-label" for="question-title-copy">
-                        Question title
-                        <p class="s-description mt2">Clear question titles are more likely to get answered.</p>
-                    </label>
-                </div>
+                <label class="d-block s-label" for="question-title-copy">
+                    Question title
+                </label>
+                <p class="s-description mtn2 mb0">Clear question titles are more likely to get answered.</p>
                 <div class="d-flex ps-relative">
                     <input class="s-input" id="question-title-copy" type="text" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?" />
                 </div>

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

@@ -0,0 +1,48 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/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>
+        `
+                : ""
+        }
+    `;
+};
+
+describe("label", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: `s-label`,
+        modifiers: {
+            primary: ["sm", "md", "lg", "xl"],
+        },
+        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 }),
+    });
+});

lib/components/label/label.less

@@ -79,6 +79,7 @@
         vertical-align: text-bottom;
     }
 
+    // TODO we shouldn't support descriptions and messages within labels
     .s-description,
     .s-input-message {
         font-weight: normal;

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

@@ -0,0 +1,66 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/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>
+        `
+                : ""
+        }
+    `;
+};
+
+describe("label", () => {
+    [true, false].forEach((isDisabled) => {
+        const text = isDisabled ? "Disabled label" : "Example label";
+
+        runComponentTests({
+            type: "visual",
+            baseClass: `s-label`,
+            modifiers: {
+                primary: ["sm", "md", "lg", "xl"],
+            },
+            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 }),
+        });
+    });
+});