combine unit test

Author: mlloydbixal

packages/usa-input-mask/src/test/input-mask-alphanumeric.spec.js

@@ -10,17 +10,20 @@ const TEMPLATE = fs.readFileSync(
 const EVENTS = {};
 
 /**
- * send an input event
+ * send an keydown event
  * @param {HTMLElement} el the element to sent the event to
  */
-EVENTS.input = (el) => {
-  el.dispatchEvent(new KeyboardEvent("keyup", { bubbles: true }));
+EVENTS.keydown = (el) => {
+  el.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true }));
 };
 
-const inputMaskingSelector = () => document.querySelector(".usa-input-masking");
+const inputMaskSelector = () => document.querySelector(".usa-input-mask");
+// const inputMaskShellSelector = () =>
+//   document.querySelector(".usa-input-mask__content");
+
 const tests = [
   { name: "document.body", selector: () => document.body },
-  { name: "input mask", selector: inputMaskingSelector },
+  { name: "input mask", selector: inputMaskSelector },
 ];
 
 tests.forEach(({ name, selector: containerSelector }) => {
@@ -29,27 +32,64 @@ tests.forEach(({ name, selector: containerSelector }) => {
 
     let root;
     let input;
+    let statusMessageVisual;
+    let statusMessageSR;
     let shell;
 
     beforeEach(() => {
       body.innerHTML = TEMPLATE;
-      InputMask.on(containerSelector());
-
-      root = inputMaskingSelector();
-      input = root.querySelector(".usa-input");
+      root = containerSelector().parentNode;
+      console.log('ROOT: ', root.outerHTML);
+      InputMask.on(root);
+      input = root.querySelector(".usa-input-mask");
+      statusMessageVisual = root.querySelector("#alphanumericError");
+      statusMessageSR = root.querySelector("#alphanumericErrorSrOnly");
     });
 
     afterEach(() => {
-      InputMask.off(containerSelector());
+      InputMask.off(root);
       body.textContent = "";
     });
 
-    it("formats an alphanumeric example to A1B 2C3", () => {
-      input.value = "A1B2C3";
+    it("creates a visual status message on init", () => {
+      const visibleStatus = document.getElementById("#alphanumericError");
+
+      assert.strictEqual(visibleStatus.length, 1);
+    });
+
+    it("creates a screen reader status message on init", () => {
+      const srStatus = document.querySelectorAll("#alphanumericErrorSrOnly");
+
+      assert.strictEqual(srStatus.length, 1);
+    });
+
+    it("informs the user only a number character is allowed", () => {
+      input.value = "a";
+
+      EVENTS.keydown(input);
 
-      EVENTS.input(input);
-      shell = root.querySelector(".usa-input-mask--content");
-      assert.strictEqual(shell.textContent, "A1B 2C3");
+      assert.strictEqual(
+        statusMessageVisual.innerHTML,
+        "You must enter a number",
+      );
     });
+
+    // it("formats an alphanumeric example to A1B 2C3", () => {
+    //   const value = "A1B2C3";
+
+    //   for (let i = 0; i < value.length; i += 1) {
+    //     input.dispatchEvent(
+    //       new KeyboardEvent("keydown", {
+    //         bubbles: true,
+    //         key: value[i],
+    //         keyCode: value[i].charCodeAt(0),
+    //         which: value[i].charCodeAt(0),
+    //       })
+    //     );
+    //   }
+
+    //   shell = inputMaskShellSelector();
+    //   assert.strictEqual(shell.textContent, "1EG4-TE5-MK73");
+    // });
   });
 });

packages/usa-input-mask/src/test/input-mask-alphanumeric.template.html

@@ -1,22 +1,21 @@
-<div class="usa-input-masking">
-  <h3 class="site-preview-heading">Alphanumeric Input Mask</h3>
-  <label class="usa-label" for="zip">Alphanumeric example</label>
-  <div class="usa-hint" id="alphanumericHint">For example, A1B 2C3</div>
-  <span class="usa-input-mask" data-mask="___ ___">
-    <span class="usa-input-mask--content test" aria-hidden="true" id="alphanumericMask"
-      >___ ___</span
-    >
+<form class="usa-form">
+  <div class="usa-form-group">
+    <label class="usa-label" for="alphanumeric">Alphanumeric</label>
+    <div class="usa-hint" id="alphanumericHint">
+      For example, A1B 2C3
+    </div>
     <input
+      class="usa-input usa-input-mask"
+      forceupper="true"
       id="alphanumeric"
-      type="text"
       inputmode="text"
       name="alphanumeric"
-      pattern="\w\d\w \d\w\d"
-      class="usa-input usa-masked"
+      type="text"
       aria-describedby="alphanumericHint"
       maxlength="7"
       data-placeholder="___ ___"
       data-charset="A#A #A#"
+      placeholder="___ __ ____"
     />
-  </span>
-</div>
+  </div>
+</form>