From 61654fc69da1c0fef214ba0c835d42fc13de70bc Mon Sep 17 00:00:00 2001 From: Niket Pathak Date: Fri, 15 Nov 2024 14:08:27 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20test:=20add=20test=20for=20updateHi?= =?UTF-8?q?ts=20hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/typeahead-testable.cy.js | 29 +++++++++--- demo/assets/js/testable.js | 71 ++++++++++++++++++++++++++++ demo/dev.umd.html | 23 --------- demo/testable.html | 13 +++++ src/common.d.ts | 2 +- 5 files changed, 108 insertions(+), 30 deletions(-) diff --git a/cypress/e2e/typeahead-testable.cy.js b/cypress/e2e/typeahead-testable.cy.js index 32cb022..52f5435 100644 --- 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 index 4136354..8c2d811 100644 --- 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 `
${item.name}
`; + }, + group: (name, resultSet) => { + const count = resultSet.hits.filter((i) => i.group === name).length; + return `
${name} (count: ${count})
`; + }, + header: (resultSet) => { + if (!resultSet.query) return 'Top Colors'; + return `Colors Found (Total: ${resultSet.count})`; + }, + footer: (resultSet) => { + if (!resultSet.query) return ''; + return `See${ + resultSet.count > resultSet.limit ? ` ${resultSet.count - resultSet.limit}` : '' + } more...`; + }, + notFound: (resultSet) => `Oops...Nothing Found for query - ${resultSet.query} 😪
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 index d49ccfa..04281af 100644 --- a/demo/dev.umd.html +++ b/demo/dev.umd.html @@ -182,29 +182,6 @@

Dummy input to test keyboard nav

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 index 56456a7..2fe8c2a 100644 --- a/demo/testable.html +++ b/demo/testable.html @@ -330,6 +330,19 @@

19. Source Keys as deeply nested values

+
+
+

20. Hooks

+

updateHits hook

+
+ + + +
+
+
+
diff --git a/src/common.d.ts b/src/common.d.ts index 7e43f71..f6cb90a 100644 --- a/src/common.d.ts +++ b/src/common.d.ts @@ -281,7 +281,7 @@ export interface typeaheadConfig { /** * 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, 'hits' | 'query' | 'count'>