diff --git a/scripts/playground.html b/scripts/playground.html index f99447b3..17ca249e 100644 --- a/scripts/playground.html +++ b/scripts/playground.html @@ -26,11 +26,11 @@ apiKey: '25626fae796133dc1e734c6bcaaeac3c', indexName: 'docsearch', inputSelector: '#q', - handleSelected(input, event, suggestion) { - console.info(input); - console.info(event); - console.info(suggestion); - }, + // handleSelected(input, event, suggestion) { + // console.info(input); + // console.info(event); + // console.info(suggestion); + // }, debug: true // Set debug to true if you want to inspect the dropdown }); diff --git a/src/lib/__tests__/DocSearch-test.js b/src/lib/__tests__/DocSearch-test.js index b435e278..c023ee7c 100644 --- a/src/lib/__tests__/DocSearch-test.js +++ b/src/lib/__tests__/DocSearch-test.js @@ -3,6 +3,17 @@ import sinon from 'sinon'; import $ from '../zepto'; import DocSearch from '../DocSearch'; +/** + * Pitfalls: + * Whenever you call new DocSearch(), it will add the a new dropdown markup to + * the page. Because we are clearing the document.body.innerHTML between each + * test, it usually is not a problem. + * Except that autocomplete.js remembers internally how many times it has been + * called, and adds this number to classes of elements it creates. + * DO NOT rely on any .ds-dataset-X, .ds-suggestions-X, etc classes where X is + * a number. This will change if you add or remove tests and will break your + * tests. + **/ describe('DocSearch', () => { beforeEach(() => { @@ -424,7 +435,7 @@ describe('DocSearch', () => { open: expect.any(Function), }); const expectedEvent = expect.objectContaining({ - type: 'autocomplete:selected' + type: 'autocomplete:selected', }); const expectedSuggestion = expect.objectContaining({ url: 'https://website.com/doc/page', @@ -440,15 +451,38 @@ describe('DocSearch', () => { expect(customHandleSelected).toHaveBeenCalledWith( expectedInput, expectedEvent, - expectedSuggestion, + expectedSuggestion ); resolve(); }); }); - xit('should prevent all clicks on links if a custom handleSelected is specified', () => { - // TODO - // If handleSelected, we target one link, we manually trigger a click on - // it, and we check that preventDefault is called on the event + it('should prevent all clicks on links if a custom handleSelected is specified', () => { + // Given + const options = { + apiKey: 'key', + indexName: 'foo', + inputSelector: '#input', + handleSelected: jest.fn(), + }; + + // Building a dropdown with links inside + const ds = new DocSearch(options); + ds.autocomplete.trigger('autocomplete:shown'); + const dataset = $('.algolia-autocomplete'); + const suggestions = $('
'); + const testLink = $('test link'); + dataset.append(suggestions); + suggestions.append(testLink); + + // Simulating a click on the link + const clickEvent = new $.Event('click'); + clickEvent.preventDefault = jest.fn(); + testLink.trigger(clickEvent); + + return new Promise(resolve => { + expect(clickEvent.preventDefault).toHaveBeenCalled(); + resolve(); + }); }); }); diff --git a/src/lib/version.js b/src/lib/version.js index 180e214b..07725172 100644 --- a/src/lib/version.js +++ b/src/lib/version.js @@ -1 +1 @@ -export default '3.0.0'; +export default '2.5.2';