✅ test: add test for updateHits hook

Author: niketpathak

demo/assets/js/testable.js

@@ -987,3 +987,74 @@ const test19 = typeahead({
     `,
   },
 });
+
+const test20 = typeahead({
+  input: document.getElementById('input-twenty'),
+  source: {
+    local: colors,
+    keys: ['name'],
+    groupKey: 'group',
+  },
+  classNames: {
+    wrapper: 'typeahead-standalone typeahead-test-twenty',
+  },
+  highlight: true,
+  // autoSelect: true,
+  onSubmit: (e) => {
+    e.preventDefault();
+    document.querySelector('#input-twenty-submit-val').innerHTML = e.target.value;
+  },
+  hooks: {
+    updateHits: async (resultSet) => {
+      // to test a fetch request
+      // const response = await fetch(
+      //   'https://raw.githubusercontent.com/digitalfortress-tech/typeahead-standalone/master/docs/assets/json/superheroes.json',
+      //   {
+      //     method: 'GET',
+      //   }
+      // );
+      // const text = await response.text();
+      // const data = text && JSON.parse(text);
+
+      // const hits = data.results.slice(0, 10);
+
+      // reverse characters of words
+      const hits = resultSet.hits.map((i) => {
+        i.name = i.name.split('').reverse().join('');
+        return i;
+      });
+
+      return {
+        hits,
+        count: resultSet.count,
+      };
+    },
+  },
+  templates: {
+    suggestion: (item, resultSet) => {
+      return `<div class="text" style="background-color:${item.hash}">${item.name}</div>`;
+    },
+    group: (name, resultSet) => {
+      const count = resultSet.hits.filter((i) => i.group === name).length;
+      return `<div class="custom-group">${name} (count: ${count})</div>`;
+    },
+    header: (resultSet) => {
+      if (!resultSet.query) return 'Top Colors';
+      return `Colors Found (Total: ${resultSet.count})`;
+    },
+    footer: (resultSet) => {
+      if (!resultSet.query) return '';
+      return `<a href="#">See${
+        resultSet.count > resultSet.limit ? ` ${resultSet.count - resultSet.limit}` : ''
+      } more...</a>`;
+    },
+    notFound: (resultSet) => `Oops...Nothing Found for query - ${resultSet.query} 😪 <br>Try another color...`,
+    empty: () => {
+      return [
+        { name: 'Red', value: 'RD', hash: 'red' },
+        { name: 'Green', value: 'GR', hash: 'green' },
+        { name: 'Blue', value: 'BL', hash: 'blue', group: 'Shades of Blue' },
+      ];
+    },
+  },
+});

demo/dev.umd.html

@@ -182,29 +182,6 @@ <h4>Dummy input to test keyboard nav</h4>
           minLength: 1,
           limit: 10,
           retainFocus: true,
-          hooks: {
-            updateHits: async (resultSet) => {
-
-              const response = await fetch(
-                "https://raw.githubusercontent.com/digitalfortress-tech/typeahead-standalone/master/docs/assets/json/superheroes.json",
-                {
-                  method: 'GET',
-                }
-              );
-
-              const text = await response.text();
-              const data = text && JSON.parse(text);
-
-              const hits = data.results.slice(0,10)
-
-              // const hits = resultSet.hits.filter(hit => hit.popularity && hit.popularity > 50);
-
-              return {
-                hits,
-                count: hits.length,
-              };
-            }
-          },
           templates: {
             suggestion: (item) => {
               const date = item.release_date

demo/testable.html

@@ -330,6 +330,19 @@ <h3 class="subtitle">19. Source Keys as deeply nested values</h3>
       </form>
     </section>
 
+    <section class="section-twenty top-section">
+      <form method="GET">
+        <h3 class="subtitle">20. Hooks</h3>
+        <p class="details">updateHits hook</p>
+        <div>
+          <label for="input-twenty">Search ...</label>
+          <input id="input-twenty" name="test-18" type="search" autocomplete="off" placeholder="Search..."
+            required="true">
+          <button type="submit">OK</button>
+        </div>
+      </form>
+    </section>
+
     <br />
   </main>
   <link rel="stylesheet" href="./../dist/basic.css" />

src/common.d.ts

@@ -281,7 +281,7 @@ export interface typeaheadConfig<T extends Dictionary> {
     /**
      * The updateHits hook allows you to modify/filter/sort the search results before being rendered
      * @param hits The found results
-     * @returns
+     * @returns A promise containing nothing/void or with the ResultSet
      */
     updateHits: (
       resultSet: Pick<ResultSet<T>, 'hits' | 'query' | 'count'>