✅ test: add test for updateHits hook

digitalfortress-tech · Nov 15, 2024 · 61654fc · 61654fc
1 parent a1e7fa7
commit 61654fc
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 30 deletions.
diff --git a/cypress/e2e/typeahead-testable.cy.js b/cypress/e2e/typeahead-testable.cy.js
@@ -472,7 +472,8 @@ context('Typeahead', () => {
   });
 
   it('Highlights all words of multiple space-separated queries', () => {
-    cy.get('#input-eight').as('input8').clear().type('come th', { delay: 100 });
+    cy.get('#input-eight').as('input8').clear();
+    cy.get('@input8').type('come th', { delay: 100 });
     cy.get('.typeahead-test-eight .tt-highlight').should('have.length', 5);
   });
 
@@ -623,11 +624,13 @@ context('Typeahead', () => {
     cy.get('#input-eighteen').as('input18').type('ca', { delay: 100 });
     cy.get('.typeahead-test-eighteen .tt-list').as('list').should('not.be.visible');
 
-    cy.get('@input18').clear().type('ch', { delay: 100 });
+    cy.get('@input18').clear();
+    cy.get('@input18').type('ch', { delay: 100 });
     cy.get('@list').should('exist');
     cy.get('@list').children('.tt-suggestion').eq(0).should('have.text', 'editor-in-chief');
 
-    cy.get('@input18').clear().type('fa', { delay: 100 });
+    cy.get('@input18').clear();
+    cy.get('@input18').type('fa', { delay: 100 });
     cy.get('@list').children('.tt-suggestion').should('have.length', 3);
   });
 
@@ -636,13 +639,16 @@ context('Typeahead', () => {
     cy.get('.typeahead-test-nineteen .tt-suggestion').as('suggestions').should('have.length', 5);
     cy.get('.typeahead-test-nineteen .tt-hint').should('have.value', 'cake');
 
-    cy.get('@input19').clear().type('ca', { delay: 100 });
+    cy.get('@input19').clear();
+    cy.get('@input19').type('ca', { delay: 100 });
     cy.get('@suggestions').should('have.length', 2);
 
-    cy.get('@input19').clear().type('1', { delay: 100 });
+    cy.get('@input19').clear();
+    cy.get('@input19').type('1', { delay: 100 });
     cy.get('@suggestions').should('have.length', 1);
 
-    cy.get('@input19').clear().type('mil', { delay: 100 });
+    cy.get('@input19').clear();
+    cy.get('@input19').type('mil', { delay: 100 });
     cy.get('.typeahead-test-nineteen .tt-hint').should('have.value', '');
     cy.get('@suggestions').should('have.length', 2);
   });
@@ -657,5 +663,16 @@ context('Typeahead', () => {
     cy.get('@list').children().eq(3).should('have.text', 'Main Course');
   });
 
+  it('Hooks: updateHits hook works as expected', () => {
+    cy.get('#input-twenty').as('input20').focus();
+    cy.get('.typeahead-test-twenty .tt-suggestion').as('defaultSuggestions').should('have.length', 3);
+    cy.get('@defaultSuggestions').first().should('contain.text', 'deR');
+    cy.get('@input20').type('g', { delay: 100 });
+    cy.get('.typeahead-test-twenty .tt-suggestion').first().should('contain.text', 'yerG');
+    cy.get('@input20').type('r', { delay: 100 });
+    cy.get('.typeahead-test-twenty .tt-suggestion').first().should('contain.text', 'Grey');
+    cy.get('@input20').clear();
+  });
+
   // https://on.cypress.io/interacting-with-elements
 });
diff --git a/demo/assets/js/testable.js b/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' },
+      ];
+    },
+  },
+});
diff --git a/demo/dev.umd.html b/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

diff --git a/demo/testable.html b/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" />

diff --git a/src/common.d.ts b/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'>