USWDS-3479 Combo Box Subsequent Selection

spec/unit/combo-box/combo-box-change-event.spec.js

@@ -3,117 +3,12 @@ const path = require("path");
 const sinon = require("sinon");
 const assert = require("assert");
 const ComboBox = require("../../../src/js/components/combo-box");
+const EVENTS = require("./events");
 
 const TEMPLATE = fs.readFileSync(
   path.join(__dirname, "/combo-box-change-event.template.html")
 );
 
-const EVENTS = {};
-
-/**
- * send a click event
- * @param {HTMLElement} el the element to sent the event to
- */
-EVENTS.click = el => {
-  const evt = new MouseEvent("click", {
-    view: el.ownerDocument.defaultView,
-    bubbles: true,
-    cancelable: true
-  });
-  el.dispatchEvent(evt);
-};
-
-/**
- * send a focusout event
- * @param {HTMLElement} el the element to sent the event to
- */
-EVENTS.focusout = el => {
-  const evt = new Event("focusout", {
-    bubbles: true,
-    cancelable: true
-  });
-  el.dispatchEvent(evt);
-};
-
-/**
- * send a keyup A event
- * @param {HTMLElement} el the element to sent the event to
- */
-EVENTS.keyupA = el => {
-  const evt = new KeyboardEvent("keyup", {
-    bubbles: true,
-    key: "a",
-    keyCode: 65
-  });
-  el.dispatchEvent(evt);
-};
-
-/**
- * send a keyup O event
- * @param {HTMLElement} el the element to sent the event to
- */
-EVENTS.keyupO = el => {
-  const evt = new KeyboardEvent("keyup", {
-    bubbles: true,
-    key: "o",
-    keyCode: 79
-  });
-  el.dispatchEvent(evt);
-};
-
-/**
- * send a keydown Enter event
- * @param {HTMLElement} el the element to sent the event to
- * @returns {{preventDefaultSpy: sinon.SinonSpy<[], void>}}
- */
-EVENTS.keydownEnter = el => {
-  const evt = new KeyboardEvent("keydown", {
-    bubbles: true,
-    key: "Enter",
-    keyCode: 13
-  });
-  const preventDefaultSpy = sinon.spy(evt, "preventDefault");
-  el.dispatchEvent(evt);
-  return { preventDefaultSpy };
-};
-
-/**
- * send a keydown Escape event
- * @param {HTMLElement} el the element to sent the event to
- */
-EVENTS.keydownEscape = el => {
-  const evt = new KeyboardEvent("keydown", {
-    bubbles: true,
-    key: "Escape",
-    keyCode: 27
-  });
-  el.dispatchEvent(evt);
-};
-
-/**
- * send a keydown ArrowDown event
- * @param {HTMLElement} el the element to sent the event to
- */
-EVENTS.keydownArrowDown = el => {
-  const evt = new KeyboardEvent("keydown", {
-    bubbles: true,
-    key: "ArrowDown"
-  });
-  el.dispatchEvent(evt);
-};
-
-/**
- * send a keydown Tab event
- * @param {HTMLElement} el the element to sent the event to
- */
-EVENTS.keydownTab = el => {
-  const evt = new KeyboardEvent("keydown", {
-    bubbles: true,
-    key: "Tab"
-  });
-  el.dispatchEvent(evt);
-};
-
 describe("combo box component change event dispatch", () => {
   const { body } = document;
 
@@ -178,86 +73,56 @@ describe("combo box component change event dispatch", () => {
     );
   });
 
-  it("should emit change events when clearing input values when an incomplete item is remaining on blur", () => {
+  it("should emit change events when resetting input values when an incomplete item is submitted through enter", () => {
     select.value = "value-ActionScript";
     input.value = "a";
-    EVENTS.keyupA(input);
-    assert.ok(!list.hidden, "should display the option list");
-
-    EVENTS.keydownTab(input);
-    EVENTS.focusout(input);
-
-    assert.equal(select.value, "", "should clear the value on the select");
-    assert.equal(input.value, "", "should clear the value on the input");
-    assert.ok(selectChangeSpy.called, "should have dispatched a change event");
-    assert.ok(inputChangeSpy.called, "should have dispatched a change event");
-  });
-
-  it("should emit change events when clearing input values when an incomplete item is submitted through enter", () => {
-    select.value = "value-ActionScript";
-    input.value = "a";
-    EVENTS.keyupA(input);
+    EVENTS.input(input);
     assert.ok(!list.hidden, "should display the option list");
 
     EVENTS.keydownEnter(input);
 
-    assert.equal(select.value, "", "should clear the value on the select");
-    assert.equal(input.value, "", "should clear the value on the input");
-    assert.ok(selectChangeSpy.called, "should have dispatched a change event");
-    assert.ok(inputChangeSpy.called, "should have dispatched a change event");
-  });
-
-  it("should not emit change events when closing the list but not the clear the input value when escape is performed while the list is open", () => {
-    select.value = "value-ActionScript";
-    input.value = "a";
-    EVENTS.keyupA(input);
-    assert.ok(!list.hidden, "should display the option list");
-
-    EVENTS.keydownEscape(input);
-
+    assert.equal(select.value, "value-ActionScript");
     assert.equal(
-      select.value,
-      "value-ActionScript",
-      "should not change the value of the select"
+      input.value,
+      "ActionScript",
+      "should reset the value on the input"
     );
-    assert.equal(input.value, "a", "should not change the value in the input");
     assert.ok(
       selectChangeSpy.notCalled,
       "should not have dispatched a change event"
     );
-    assert.ok(
-      inputChangeSpy.notCalled,
-      "should not have dispatched a change event"
-    );
+    assert.ok(inputChangeSpy.called, "should have dispatched a change event");
   });
 
-  it("should emit change events when setting the input value when a complete selection is submitted by clicking away", () => {
+  it("should emit change events when closing the list but not the clear the input value when escape is performed while the list is open", () => {
     select.value = "value-ActionScript";
-    input.value = "go";
-    EVENTS.keyupO(input);
+    input.value = "a";
+    EVENTS.input(input);
     assert.ok(!list.hidden, "should display the option list");
 
-    EVENTS.keydownTab(input);
-    EVENTS.focusout(input);
+    EVENTS.keydownEscape(input);
 
     assert.equal(
       select.value,
-      "value-Go",
-      "should set that item to being the select option"
+      "value-ActionScript",
+      "should not change the value of the select"
     );
     assert.equal(
       input.value,
-      "Go",
-      "should set that item to being the input value"
+      "ActionScript",
+      "should reset the value in the input"
+    );
+    assert.ok(
+      selectChangeSpy.notCalled,
+      "should not have dispatched a change event"
     );
-    assert.ok(selectChangeSpy.called, "should have dispatched a change event");
     assert.ok(inputChangeSpy.called, "should have dispatched a change event");
   });
 
   it("should emit change events when setting the input value when a complete selection is submitted by pressing enter", () => {
     select.value = "value-ActionScript";
     input.value = "go";
-    EVENTS.keyupO(input);
+    EVENTS.input(input);
     assert.ok(!list.hidden, "should display the option list");
 
     EVENTS.keydownEnter(input);
@@ -280,7 +145,7 @@ describe("combo box component change event dispatch", () => {
     select.value = "value-JavaScript";
     input.value = "la";
 
-    EVENTS.keyupA(input);
+    EVENTS.input(input);
     EVENTS.keydownArrowDown(input);
     const focusedOption = document.activeElement;
     assert.equal(
@@ -300,11 +165,11 @@ describe("combo box component change event dispatch", () => {
     assert.ok(inputChangeSpy.called, "should have dispatched a change event");
   });
 
-  it("should not emit change events when pressing escape from a focused item", () => {
+  it("should emit change events when pressing escape from a focused item", () => {
     select.value = "value-JavaScript";
     input.value = "la";
 
-    EVENTS.keyupA(input);
+    EVENTS.input(input);
     assert.ok(
       !list.hidden && list.children.length,
       "should display the option list with options"
@@ -319,20 +184,20 @@ describe("combo box component change event dispatch", () => {
     EVENTS.keydownEscape(focusedOption);
 
     assert.ok(list.hidden, "should hide the option list");
-    assert.equal(list.children.length, 0, "should empty the option list");
     assert.equal(
       select.value,
       "value-JavaScript",
       "should not change the value of the select"
     );
-    assert.equal(input.value, "la", "should not change the value in the input");
-    assert.ok(
-      selectChangeSpy.notCalled,
-      "should not have dispatched a change event"
+    assert.equal(
+      input.value,
+      "JavaScript",
+      "should reset the value in the input"
     );
     assert.ok(
-      inputChangeSpy.notCalled,
+      selectChangeSpy.notCalled,
       "should not have dispatched a change event"
     );
+    assert.ok(inputChangeSpy.called, "should have dispatched a change event");
   });
 });

spec/unit/combo-box/combo-box-change-event.template.html

@@ -3,12 +3,7 @@
     >Your preferred programming language:
   </label>
   <div class="usa-combo-box">
-    <select
-      id="combo-box"
-      name="combo-box"
-      class="usa-select usa-combo-box__select"
-      required
-    >
+    <select id="combo-box" name="combo-box" class="usa-select">
       <option value="">Select one...</option>
       <option value="value-ActionScript">ActionScript</option>
       <option value="value-AppleScript">AppleScript</option>

spec/unit/combo-box/combo-box-default-value.template.html

@@ -3,11 +3,7 @@
     >Your preferred programming language:
   </label>
   <div class="usa-combo-box" data-default-value="value-Go">
-    <select
-      id="combo-box"
-      name="combo-box"
-      class="usa-select usa-combo-box__select"
-    >
+    <select id="combo-box" name="combo-box" class="usa-select">
       <option value="">Select a language...</option>
       <option value="value-ActionScript">ActionScript</option>
       <option value="value-AppleScript">AppleScript</option>

spec/unit/combo-box/combo-box-disabled.spec.js

@@ -28,6 +28,7 @@ describe("combo box component - disabled enhancement", () => {
   let root;
   let input;
   let select;
+  let toggle;
   let list;
 
   beforeEach(() => {
@@ -36,6 +37,7 @@ describe("combo box component - disabled enhancement", () => {
     root = body.querySelector(".usa-combo-box");
     input = root.querySelector(".usa-combo-box__input");
     select = root.querySelector(".usa-combo-box__select");
+    toggle = root.querySelector(".usa-combo-box__toggle-list");
     list = root.querySelector(".usa-combo-box__list");
   });
 
@@ -63,4 +65,17 @@ describe("combo box component - disabled enhancement", () => {
 
     assert.ok(list.hidden, "should not display the option list");
   });
+
+  it("should not show the list when clicking the disabled button", () => {
+    EVENTS.click(toggle);
+
+    assert.ok(list.hidden, "should not display the option list");
+  });
+
+  it("should show the list when clicking the input once the component has been enabled", () => {
+    ComboBox.enable(root);
+    EVENTS.click(input);
+
+    assert.ok(!list.hidden, "should display the option list");
+  });
 });

spec/unit/combo-box/combo-box-disabled.template.html

@@ -1,5 +1,6 @@
 <form class="usa-form">
-  <label class="usa-label" for="combobox">Your preferred programming language:
+  <label class="usa-label" for="combobox"
+    >Your preferred programming language:
   </label>
   <div class="usa-combo-box">
     <select id="combo-box" name="combo-box" class="usa-select" disabled>
@@ -29,4 +30,4 @@
       <option value="value-Scheme">Scheme</option>
     </select>
   </div>
-</form>
+</form>

spec/unit/combo-box/combo-box-placeholder.template.html

@@ -3,11 +3,7 @@
     >Your preferred programming language:
   </label>
   <div class="usa-combo-box" data-placeholder="Select one...">
-    <select
-      id="combo-box"
-      name="combo-box"
-      class="usa-select usa-combo-box__select"
-    >
+    <select id="combo-box" name="combo-box" class="usa-select">
       <option value="">Select a language...</option>
       <option value="value-ActionScript">ActionScript</option>
       <option value="value-AppleScript">AppleScript</option>