From 5e85d7b2ecc9086bf58ed02720674a506d30c173 Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Mon, 5 Nov 2018 10:20:40 +0100 Subject: [PATCH] Add tests (still one test WIP) --- scripts/playground.html | 8 ++-- src/lib/__tests__/DocSearch-test.js | 74 ++++++++++++++++++++++------- 2 files changed, 61 insertions(+), 21 deletions(-) diff --git a/scripts/playground.html b/scripts/playground.html index 72b6817c..f99447b3 100644 --- a/scripts/playground.html +++ b/scripts/playground.html @@ -26,9 +26,11 @@ apiKey: '25626fae796133dc1e734c6bcaaeac3c', indexName: 'docsearch', inputSelector: '#q', - // handleSelected(input, event, suggestion) { - // console.info("You selected", 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 e075e935..b435e278 100644 --- a/src/lib/__tests__/DocSearch-test.js +++ b/src/lib/__tests__/DocSearch-test.js @@ -46,7 +46,7 @@ describe('DocSearch', () => { }; sinon.spy(DocSearch, 'checkArguments'); - sinon.stub(DocSearch, 'getInputsFromSelector').returns(true); + sinon.stub(DocSearch, 'getInputFromSelector').returns(true); DocSearch.__Rewire__('algoliasearch', AlgoliaSearch); DocSearch.__Rewire__('autocomplete', AutoComplete); @@ -54,7 +54,7 @@ describe('DocSearch', () => { afterEach(() => { DocSearch.checkArguments.restore(); - DocSearch.getInputsFromSelector.restore(); + DocSearch.getInputFromSelector.restore(); DocSearch.__ResetDependency__('algoliasearch'); DocSearch.__ResetDependency__('autocomplete'); }); @@ -136,13 +136,13 @@ describe('DocSearch', () => { it('should pass the input element as an instance property', () => { // Given const options = defaultOptions; - DocSearch.getInputsFromSelector.returns($('foo')); + DocSearch.getInputFromSelector.returns($('foo')); // When const actual = new DocSearch(options); // Then - const $inputs = actual.inputs; + const $inputs = actual.input; expect($inputs.text()).toEqual('foo'); expect($inputs[0].tagName).toEqual('SPAN'); }); @@ -194,7 +194,7 @@ describe('DocSearch', () => { autocompleteOptions: { anOption: '44' }, }; const $input = $(''); - DocSearch.getInputsFromSelector.returns([$input]); + DocSearch.getInputFromSelector.returns($input); // When new DocSearch(options); @@ -211,7 +211,7 @@ describe('DocSearch', () => { }); it('should listen to the selected and shown event of autocomplete', () => { // Given - const options = { ...defaultOptions, handleSelected: true }; + const options = { ...defaultOptions, handleSelected() {} }; // When new DocSearch(options); @@ -229,8 +229,8 @@ describe('DocSearch', () => { }); afterEach(() => { - if (DocSearch.getInputsFromSelector.restore) { - DocSearch.getInputsFromSelector.restore(); + if (DocSearch.getInputFromSelector.restore) { + DocSearch.getInputFromSelector.restore(); } }); @@ -262,7 +262,7 @@ describe('DocSearch', () => { apiKey: 'apiKey', indexName: 'indexName', }; - sinon.stub(DocSearch, 'getInputsFromSelector').returns(false); + sinon.stub(DocSearch, 'getInputFromSelector').returns(false); // When expect(() => { @@ -271,10 +271,10 @@ describe('DocSearch', () => { }); }); - describe('getInputsFromSelector', () => { - let getInputsFromSelector; + describe('getInputFromSelector', () => { + let getInputFromSelector; beforeEach(() => { - getInputsFromSelector = DocSearch.getInputsFromSelector; + getInputFromSelector = DocSearch.getInputFromSelector; }); it('should return null if no element matches the selector', () => { @@ -282,7 +282,7 @@ describe('DocSearch', () => { const selector = '.i-do-not-exist > at #all'; // When - const actual = getInputsFromSelector(selector); + const actual = getInputFromSelector(selector); // Then expect(actual).toEqual(null); @@ -292,7 +292,7 @@ describe('DocSearch', () => { const selector = '.i-am-a-span'; // When - const actual = getInputsFromSelector(selector); + const actual = getInputFromSelector(selector); // Then expect(actual).toEqual(null); @@ -302,10 +302,10 @@ describe('DocSearch', () => { const selector = '#input'; // When - const actual = getInputsFromSelector(selector); + const actual = getInputFromSelector(selector); // Then - expect($.zepto.isZ(actual[0])).toBe(true); + expect($.zepto.isZ(actual)).toBe(true); }); }); @@ -390,13 +390,12 @@ describe('DocSearch', () => { }); describe('handleSelected', () => { - it('should change the location', () => { + it('should change the location if no handleSelected specified', () => { // Given const options = { apiKey: 'key', indexName: 'foo', inputSelector: '#input', - handleSelected: true, }; // When @@ -412,6 +411,45 @@ describe('DocSearch', () => { resolve(); }); }); + it('should call the custom handleSelected if defined', () => { + // Given + const customHandleSelected = jest.fn(); + const options = { + apiKey: 'key', + indexName: 'foo', + inputSelector: '#input', + handleSelected: customHandleSelected, + }; + const expectedInput = expect.objectContaining({ + open: expect.any(Function), + }); + const expectedEvent = expect.objectContaining({ + type: 'autocomplete:selected' + }); + const expectedSuggestion = expect.objectContaining({ + url: 'https://website.com/doc/page', + }); + + // When + const ds = new DocSearch(options); + ds.autocomplete.trigger('autocomplete:selected', { + url: 'https://website.com/doc/page', + }); + + return new Promise(resolve => { + expect(customHandleSelected).toHaveBeenCalledWith( + expectedInput, + expectedEvent, + 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 + }); }); describe('handleShown', () => {