feat(1.3.1) - #28 #26 #27 (#30)

* feat(chrome): #28 make autocomplete configurable * feat(watcher): #27 onInputChange pass oldValue * feat(props): #26 onblur and onfocus
darrenjennings · Feb 26, 2018 · 3591aaf · 3591aaf
1 parent 155b7fa
commit 3591aaf
Show file tree

Hide file tree

Showing 16 changed files with 11,800 additions and 11,150 deletions.
diff --git a/README.md b/README.md
@@ -136,7 +136,7 @@ export default {
     };
   },
   methods: {
-    onInputChange(text) {
+    onInputChange(text, oldText) {
       if (text === null) {
         /* Maybe the text is null but you wanna do 
         * something else, but don't filter by null.
@@ -212,8 +212,10 @@ For more advanced usage, check out the examples below, and explore the <a href="
 | Prop | Type | Required | Description |
 | :--- | :--- | :---: | :--- |
 | [`id`](#inputPropsTable) | String | ✓ | id attribute on `<input>`.|
-| [`onInputChange`](#) | Function | ✓ | Triggers everytime the `<input>` changes.|
+| [`onInputChange`](#) | Function | ✓ | Triggers everytime the `<input>` changes. This is triggered via a Vue watcher, so you have both current value, and previous value access e.g. `onInputChange(text, oldText)` |
 | [`onClick`](#) | Function |  | Triggers everytime the `<input>` is clicked.|
+| [`onBlur`](#) | Function |  | HTML onblur event on `<input>` same as Vue `@blur` event binding|
+| [`onFocus`](#) | Function |  | HTML onfocus event on `<input>` same as Vue `@focus` event binding|
 | [`initialValue`](#) | String | | Set some initial value for the `<input>`.|
 | Any DOM Props | * |  | You can add any props to `<input>` as the component will `v-bind` inputProps. Similar to rest spread in JSX. See more details here: https://vuejs.org/v2/api/#v-bind |
 

diff --git a/__tests__/__snapshots__/autosuggest.test.js.snap b/__tests__/__snapshots__/autosuggest.test.js.snap
@@ -23,7 +23,6 @@ exports[`Autosuggest can click outside document to trigger close 1`] = `
          class="form-control"
   >
   <div class="autosuggest__results-container">
-    <!---->
   </div>
 </div>
 
@@ -131,7 +130,6 @@ exports[`Autosuggest can mount 1`] = `
          class="form-control"
   >
   <div class="autosuggest__results-container">
-    <!---->
   </div>
 </div>
 
@@ -431,7 +429,6 @@ exports[`Autosuggest can select from suggestions using keystroke 1`] = `
          class="form-control"
   >
   <div class="autosuggest__results-container">
-    <!---->
   </div>
 </div>
 
@@ -460,7 +457,6 @@ exports[`Autosuggest can use escape key to exit 1`] = `
          class="form-control"
   >
   <div class="autosuggest__results-container">
-    <!---->
   </div>
 </div>
 
@@ -541,3 +537,81 @@ exports[`Autosuggest is aria complete 1`] = `
 </div>
 
 `;
+
+exports[`Autosuggest onBlur and onFocus work as expected 1`] = `
+
+<div id="autosuggest"
+     data-server-rendered="true"
+>
+  <input name="q"
+         type="text"
+         autocomplete="off"
+         role="combobox"
+         aria-autocomplete="list"
+         aria-owns="autosuggest__results"
+         aria-activedescendant
+         aria-haspopup="true"
+         aria-expanded="true"
+         id="autosuggest__input"
+         initialvalue
+         onclick="function onClick() {}"
+         oninputchange="function onInputChange() {}"
+         placeholder="Type 'G'"
+         onblur="function blurred() {mockFn();}"
+         onfocus="function focused() {mockFn();}"
+         value="G"
+         class="form-control autosuggest__input-open"
+  >
+  <div class="autosuggest__results-container">
+    <div 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"
+        >
+          clifford kits
+        </li>
+        <li role="option"
+            data-suggestion-index="1"
+            data-section-name="default"
+            id="autosuggest__results_item-1"
+            class="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"
+        >
+          phonics
+        </li>
+        <li role="option"
+            data-suggestion-index="3"
+            data-section-name="default"
+            id="autosuggest__results_item-3"
+            class="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"
+        >
+          life of fred math
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+`;
diff --git a/__tests__/autosuggest.test.js b/__tests__/autosuggest.test.js
@@ -3,7 +3,7 @@ import { createRenderer } from "vue-server-renderer";
 
 import Autosuggest from "../src/Autosuggest.vue";
 
-Element.prototype.scrollTo = () => {}  // https://github.com/vuejs/vue-test-utils/issues/319
+Element.prototype.scrollTo = () => {}; // https://github.com/vuejs/vue-test-utils/issues/319
 
 // Helper to call function x number of times
 const times = x => f => {
@@ -221,26 +221,28 @@ describe("Autosuggest", () => {
     });
 
     const input = wrapper.find("input");
-    expect(input.attributes()['role']).toBe('combobox');
-    expect(input.attributes()['aria-autocomplete']).toBe('list');
-    expect(input.attributes()['aria-activedescendant']).toBe('');
-    expect(input.attributes()['aria-owns']).toBe('autosuggest__results');
-    expect(input.attributes()['aria-owns']).toBe('autosuggest__results');    
-    
+    expect(input.attributes()["role"]).toBe("combobox");
+    expect(input.attributes()["aria-autocomplete"]).toBe("list");
+    expect(input.attributes()["aria-activedescendant"]).toBe("");
+    expect(input.attributes()["aria-owns"]).toBe("autosuggest__results");
+    expect(input.attributes()["aria-owns"]).toBe("autosuggest__results");
+
     // TODO: Make sure aria-completeness is actually 2legit2quit.
-    
+
     input.trigger("click");
     wrapper.setData({ searchInput: "G" });
 
-    expect(input.attributes()['aria-haspopup']).toBe('true');
-    
+    expect(input.attributes()["aria-haspopup"]).toBe("true");
+
     const mouseDownTimes = 3;
     times(mouseDownTimes)(() => {
       input.trigger("keydown.down");
     });
 
-    const activeDescendentString = input.attributes()['aria-activedescendant'];
-    expect(parseInt(activeDescendentString[activeDescendentString.length -1])).toBe(mouseDownTimes - 1);
+    const activeDescendentString = input.attributes()["aria-activedescendant"];
+    expect(parseInt(activeDescendentString[activeDescendentString.length - 1])).toBe(
+      mouseDownTimes - 1
+    );
     expect(input.element.value).toBe(filteredOptions[0].data[mouseDownTimes - 1]);
 
     const renderer = createRenderer();
@@ -272,15 +274,15 @@ describe("Autosuggest", () => {
     const input = wrapper.find("input");
     input.trigger("click");
     wrapper.setData({ searchInput: "G" });
-    
+
     times(3)(() => {
-        input.trigger("keydown.down");
+      input.trigger("keydown.down");
     });
-  
+
     input.trigger("keydown.enter");
-    wrapper.find('li').trigger("mouseover");
-    wrapper.find('li').trigger("mouseenter");
-    wrapper.find('li').trigger("mouseleave");
+    wrapper.find("li").trigger("mouseover");
+    wrapper.find("li").trigger("mouseenter");
+    wrapper.find("li").trigger("mouseleave");
 
     const renderer = createRenderer();
     renderer.renderToString(wrapper.vm, (err, str) => {
@@ -290,14 +292,37 @@ describe("Autosuggest", () => {
       expect(str).toMatchSnapshot();
     });
   });
-});
 
-/**
- * **Force** update until vue-test-utils is out of beta
- * @param {*} wrapper mounted Vue component
- */
-function runWatchers(wrapper) {
-  wrapper.vm._watchers.forEach(watcher => {
-    watcher.run();
+  it("onBlur and onFocus work as expected", async () => {
+    let props = Object.assign({}, defaultProps);
+    const mockFn = jest.fn();
+    const blurred = () => {mockFn()};
+    const focused = () => {mockFn()};
+
+    props.inputProps.onBlur = blurred;
+    props.inputProps.onFocus = focused;
+
+    const wrapper = mount(Autosuggest, {
+      propsData: props,
+      attachToDocument: true
+    });
+
+    const input = wrapper.find("input");
+
+    input.trigger("click");
+    wrapper.setData({ searchInput: "G" });
+    await wrapper.vm.$nextTick(() => {});
+
+    input.trigger("blur");
+    input.trigger("focus");
+
+    const renderer = createRenderer();
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      if (err) {
+        return false;
+      }
+      expect(str).toMatchSnapshot();
+    });
+    expect(mockFn).toHaveBeenCalledTimes(2);
   });
-}
+});
diff --git a/build/rollup.esm.config.js b/build/rollup.esm.config.js
@@ -4,7 +4,7 @@ import filesize from "rollup-plugin-filesize";
 import json from "rollup-plugin-json";
 
 export default {
-  entry: "src/vue-autosuggest.js",
+  input: "src/vue-autosuggest.js",
   plugins: [
     vue({ compileTemplate: true, css: false }),
     json(),
@@ -14,5 +14,10 @@ export default {
     }),
     filesize()
   ],
-  targets: [{ dest: `dist/vue-autosuggest.esm.js`, format: "es" }]
+  output: [
+    {
+      file: `dist/vue-autosuggest.esm.js`,
+      format: "es"
+    }
+  ]
 };
diff --git a/build/rollup.umd.config.js b/build/rollup.umd.config.js
@@ -8,9 +8,7 @@ import replace from "rollup-plugin-replace";
 import json from "rollup-plugin-json";
 
 export default {
-  entry: "src/vue-autosuggest.js",
-  moduleName: "VueAutosuggest",
-  exports: "named",
+  input: "src/vue-autosuggest.js",
   plugins: [
     vue({ compileTemplate: true, css: false }),
     json(),
@@ -34,5 +32,12 @@ export default {
     uglify(),
     filesize()
   ],
-  targets: [{ dest: `dist/vue-autosuggest.js`, format: "umd" }]
+  output: [
+    {
+      name: "VueAutosuggest",
+      exports: "named",
+      file: `dist/vue-autosuggest.js`,
+      format: "umd"
+    }
+  ]
 };
diff --git a/docs/App.vue b/docs/App.vue
@@ -7,6 +7,7 @@
               :input-props="inputProps"
               :section-configs="sectionConfigs"
               :getSuggestionValue="getSuggestionValue"
+              ref="autocomplete"
           />
     </div>
   </div>
@@ -58,15 +59,12 @@ export default {
               value: "The Best Blog in the Entire World"
             },
             {
-              url:
-                "https://blog.educents.com/best-educational-games-2017-inchimals/",
+              url: "https://blog.educents.com/best-educational-games-2017-inchimals/",
               value: "The Best Educational Games and Toys of 2017: Inchimals"
             },
             {
-              url:
-                "https://blog.educents.com/reading-exploring-world-through-literature/",
-              value:
-                "Family Read-Alouds: Exploring the World Through Literature"
+              url: "https://blog.educents.com/reading-exploring-world-through-literature/",
+              value: "Family Read-Alouds: Exploring the World Through Literature"
             }
           ]
         }
@@ -88,16 +86,22 @@ export default {
       },
       inputProps: {
         id: "autosuggest__input",
-        initialValue: "",
         onClick: () => {},
         onInputChange: this.onInputChange,
-        placeholder: "Type 'g'"
+        placeholder: "Type 'g'",
+        onBlur: () => {
+          // console.log(e);
+        },
+        onFocus: () => {
+          // console.log(e);
+        }
       }
     };
   },
   methods: {
     onInputChange(text) {
       let filtered = [];
+
       const suggestionsData = this.options[0].data.filter(item => {
         return item.toLowerCase().indexOf(text.toLowerCase()) > -1;
       });
@@ -120,10 +124,10 @@ export default {
 
       this.filteredOptions = filtered;
     },
-    getSuggestionValue(item){
-      if(item.name == 'blog'){
+    getSuggestionValue(item) {
+      if (item.name == "blog") {
         return item.item.value;
-      }else{
+      } else {
         return item.item;
       }
     }
@@ -206,8 +210,7 @@ body {
 .autosuggest__results .autosuggest__results_item:active,
 .autosuggest__results .autosuggest__results_item:hover,
 .autosuggest__results .autosuggest__results_item:focus,
-.autosuggest__results
-  .autosuggest__results_item.autosuggest__results_item-highlighted {
+.autosuggest__results .autosuggest__results_item.autosuggest__results_item-highlighted {
   background-color: #ddd;
 }
-</style>
+</style>