Feature/vue test utils tests (#10)

* Vue test utils working tests. * Module def for jest. * REmoving idea. * New test utils. * Newest docs build. Package number increment.
darrenjennings · Nov 3, 2017 · f8df22f · f8df22f
1 parent 702e678
commit f8df22f
Show file tree

Hide file tree

Showing 9 changed files with 2,286 additions and 805 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ dist
 .opt-out
 .DS_Store
 .eslintcache
+.idea
diff --git a/__tests__/__snapshots__/autosuggest.test.js.snap b/__tests__/__snapshots__/autosuggest.test.js.snap
@@ -16,13 +16,18 @@ exports[`Autosuggest can mount 1`] = `
          id="autosuggest__input"
          initialvalue
          onclick="function onClick() {}"
-         oninputchange="function onInputChange(text) {}"
+         oninputchange="function onInputChange() {}"
          placeholder="Type 'G'"
          value
          class="form-control autosuggest__input-open"
   >
   <div class="autosuggest__results-container">
-    <!---->
+    <div role="listbox"
+         aria-labelledby="autosuggest"
+         class="autosuggest__results"
+    >
+      <!---->
+    </div>
   </div>
 </div>
 
@@ -39,18 +44,67 @@ exports[`Autosuggest can render suggestions 1`] = `
          autocomplete="off"
          aria-autosuggest="list"
          aria-owns="autosuggest__results"
-         aria-activedescendant
+         aria-activedescendant="autosuggest__results--item-0"
          aria-haspopup="true"
          id="autosuggest__input"
          initialvalue
          onclick="function onClick() {}"
-         oninputchange="function onInputChange(text) {}"
+         oninputchange="function onInputChange() {}"
          placeholder="Type 'G'"
-         value="G"
+         value="clifford kits"
          class="form-control autosuggest__input-open"
   >
   <div class="autosuggest__results-container">
-    <!---->
+    <div role="listbox"
+         aria-labelledby="autosuggest"
+         class="autosuggest__results"
+    >
+      <ul role="listbox"
+          aria-labelledby="autosuggest"
+      >
+        <!---->
+        <li role="option"
+            data-suggestion-index="0"
+            data-section-name="default"
+            id="autosuggest__results_item-0"
+            class="autosuggest__results_item autosuggest__results_item"
+        >
+          clifford kits
+        </li>
+        <li role="option"
+            data-suggestion-index="1"
+            data-section-name="default"
+            id="autosuggest__results_item-1"
+            class="autosuggest__results_item autosuggest__results_item"
+        >
+          friendly chemistry
+        </li>
+        <li role="option"
+            data-suggestion-index="2"
+            data-section-name="default"
+            id="autosuggest__results_item-2"
+            class="autosuggest__results_item autosuggest__results_item"
+        >
+          phonics
+        </li>
+        <li role="option"
+            data-suggestion-index="3"
+            data-section-name="default"
+            id="autosuggest__results_item-3"
+            class="autosuggest__results_item autosuggest__results_item"
+        >
+          life of fred
+        </li>
+        <li role="option"
+            data-suggestion-index="4"
+            data-section-name="default"
+            id="autosuggest__results_item-4"
+            class="autosuggest__results_item autosuggest__results_item"
+        >
+          life of fred math
+        </li>
+      </ul>
+    </div>
   </div>
 </div>
 

diff --git a/__tests__/autosuggest.test.js b/__tests__/autosuggest.test.js
@@ -28,16 +28,6 @@ describe("Autosuggest", () => {
         "multiplication",
         "thinking tree"
       ]
-    },
-    {
-      label: "Blog",
-      type: "url",
-      data: [
-        { url: "http://bla.com/1", value: "blog link 1" },
-        { url: "http://bla.com/1", value: "blog link 1" },
-        { url: "http://bla.com/1", value: "blog link 1" },
-        { url: "http://bla.com/1", value: "blog link 1" }
-      ]
     }
   ];
 
@@ -48,7 +38,7 @@ describe("Autosuggest", () => {
       id: "autosuggest__input",
       initialValue: "",
       onClick: () => {},
-      onInputChange: text => {},
+      onInputChange: () => {},
       placeholder: "Type 'G'"
     },
     sectionConfigs: {
@@ -78,21 +68,23 @@ describe("Autosuggest", () => {
   });
 
   it("can render suggestions", async () => {
-    const wrapper = shallow(Autosuggest, {
+    const wrapper = mount(Autosuggest, {
       propsData: defaultProps
     });
 
-    wrapper.find("#autosuggest__input").trigger("click");
-    wrapper.setData({searchInput: 'G'});
+    const input = wrapper.find("input");
+    expect(input.hasAttribute("id", defaultProps.inputProps.id));
+
+    input.trigger("click");
+    wrapper.setData({ searchInput: "G" });
+    input.trigger("keydown.down");
+
+    expect(wrapper.findAll(`ul li`).length).toBeLessThanOrEqual(defaultProps.sectionConfigs.default.limit);
+
     const renderer = createRenderer();
     renderer.renderToString(wrapper.vm, (err, str) => {
-      if (err) throw new Error(err);
       expect(str).toMatchSnapshot();
     });
-    //expect(document.body.querySelector(`#${id}`).id).toEqual(id);
-    //expect(document.querySelectorAll(`ul li`).length).toEqual(
-    //  filteredOptions[0].data.length + filteredOptions[1].data.length + 1
-    //);
   });
   /*
   it("can filter suggestions", async () => {

diff --git a/__tests__/htmlSerializer.js b/__tests__/htmlSerializer.js