Web components - Input: Create unit tests

eslint.config.js

@@ -1,4 +1,5 @@
 import js from "@eslint/js";
 import eslintConfigPrettierRecommended from "eslint-config-prettier";
+import vitest from "@vitest/eslint-plugin";
 
-export default [js.configs.recommended, eslintConfigPrettierRecommended];
+export default [js.configs.recommended, eslintConfigPrettierRecommended, vitest];

package.json

@@ -57,6 +57,7 @@
     "@storybook/theming": "^8.2.9",
     "@storybook/web-components": "^8.2.9",
     "@storybook/web-components-vite": "^8.2.9",
+    "@vitest/eslint-plugin": "^1.1.7",
     "@vitest/ui": "^1.6.0",
     "axe-playwright": "^2.0.2",
     "concurrently": "^8.2.2",

src/components/usa-text-input/usa-text-input.spec.js

@@ -0,0 +1,36 @@
+import { beforeEach, describe, expect, it } from "vitest";
+
+import "./index.js";
+
+function getInsideInput() {
+  return document.body
+    .querySelector("usa-text-input")
+    .shadowRoot;
+}
+
+function getLabelContext() {
+  return getInsideInput().querySelector("label")?.shadowRoot?.getAttribute("for")
+}
+
+function getInputElement() {
+  return getInsideInput().querySelector("input");
+}
+
+describe("usa-text-input component", async () => {
+  beforeEach(async () => {
+    document.body.innerHTML = `
+      <usa-text-input>
+        <label for="input-type-text">Text input label</label>
+        <input id="input-type-text" name="input-type-text">
+      </usa-text-input>
+    `
+  });
+
+  it("Should show props", () => {
+    expect(getInputElement().getAttribute("id")).toContain("input-type-text");
+  })
+
+  it("Should have an associated label", () => {
+    expect(getInputElement().getAttribute("id")).toMatch(getLabelContext());
+  })
+})