From 6f125b70a519ff309fe4a6f7ebe860cae27286b8 Mon Sep 17 00:00:00 2001 From: Alexandre Stanislawski Date: Wed, 1 Mar 2017 11:59:32 +0100 Subject: [PATCH] feat(connector): test connectPagination --- .../__tests__/connectPagination-test.js | 126 ++++++++++++++++++ .../pagination/connectPagination.js | 12 +- .../pagination/__tests__/pagination-test.js | 14 +- src/widgets/pagination/pagination.js | 4 +- 4 files changed, 141 insertions(+), 15 deletions(-) create mode 100644 src/connectors/pagination/__tests__/connectPagination-test.js diff --git a/src/connectors/pagination/__tests__/connectPagination-test.js b/src/connectors/pagination/__tests__/connectPagination-test.js new file mode 100644 index 0000000000..87fbe61fbd --- /dev/null +++ b/src/connectors/pagination/__tests__/connectPagination-test.js @@ -0,0 +1,126 @@ +/* eslint-env mocha */ + +import expect from 'expect'; +import sinon from 'sinon'; + +import jsHelper from 'algoliasearch-helper'; +const SearchResults = jsHelper.SearchResults; + +import connectPagination from '../connectPagination.js'; + +const fakeClient = {addAlgoliaAgent: () => {}}; + +describe('connectPagination', () => { + it('connectPagination - Renders during init and render', () => { + const container = document.createElement('div'); + // test that the dummyRendering is called with the isFirstRendering + // flag set accordingly + const rendering = sinon.stub(); + const makeWidget = connectPagination(rendering); + const widget = makeWidget({ + container, + }); + + // does not have a getConfiguration method + expect(widget.getConfiguration).toBe(undefined); + + const helper = jsHelper(fakeClient); + helper.search = sinon.stub(); + + widget.init({ + helper, + state: helper.state, + createURL: () => '#', + onHistoryChange: () => {}, + }); + + { // should call the rendering once with isFirstRendering to true + expect(rendering.callCount).toBe(1); + const isFirstRendering = rendering.lastCall.args[1]; + expect(isFirstRendering).toBe(true); + + // should provide good values for the first rendering + const firstRenderingOptions = rendering.lastCall.args[0]; + expect(firstRenderingOptions.currentPage).toBe(0); + expect(firstRenderingOptions.nbHits).toBe(0); + expect(firstRenderingOptions.nbPages).toBe(0); + expect(firstRenderingOptions.shouldAutoHideContainer).toBe(true); + expect(firstRenderingOptions.showFirstLast).toBe(true); + } + + widget.render({ + results: new SearchResults(helper.state, [{ + hits: [{test: 'oneTime'}], + nbHits: 1, + nbPages: 1, + page: 0, + }]), + state: helper.state, + helper, + createURL: () => '#', + }); + + { // Should call the rendering a second time, with isFirstRendering to false + expect(rendering.callCount).toBe(2); + const isFirstRendering = rendering.lastCall.args[1]; + expect(isFirstRendering).toBe(false); + + // should call the rendering with values from the results + const secondRenderingOptions = rendering.lastCall.args[0]; + expect(secondRenderingOptions.currentPage).toBe(0); + expect(secondRenderingOptions.nbHits).toBe(1); + expect(secondRenderingOptions.nbPages).toBe(1); + expect(secondRenderingOptions.shouldAutoHideContainer).toBe(false); + expect(secondRenderingOptions.showFirstLast).toBe(true); + } + }); + + it('Provides a function to update the refinements at each step', () => { + const container = document.createElement('div'); + const scrollTo = document.createElement('div'); + scrollTo.scrollIntoView = sinon.stub(); + + const rendering = sinon.stub(); + const makeWidget = connectPagination(rendering); + + const widget = makeWidget({ + container, + scrollTo, + }); + + const helper = jsHelper(fakeClient); + helper.search = sinon.stub(); + + widget.init({ + helper, + state: helper.state, + createURL: () => '#', + onHistoryChange: () => {}, + }); + + { // first rendering + const renderOptions = rendering.lastCall.args[0]; + const {setPage} = renderOptions; + setPage(2); + expect(helper.getPage()).toBe(2); + expect(helper.search.callCount).toBe(1); + expect(scrollTo.scrollIntoView.callCount).toBe(1); + } + + widget.render({ + results: new SearchResults(helper.state, [{}]), + state: helper.state, + helper, + createURL: () => '#', + }); + + { // Second rendering + const renderOptions = rendering.lastCall.args[0]; + const {setPage} = renderOptions; + setPage(7); + expect(helper.getPage()).toBe(7); + expect(helper.search.callCount).toBe(2); + expect(scrollTo.scrollIntoView.callCount).toBe(2); + } + }); +}); diff --git a/src/connectors/pagination/connectPagination.js b/src/connectors/pagination/connectPagination.js index 5abb883a43..29cc163b0a 100644 --- a/src/connectors/pagination/connectPagination.js +++ b/src/connectors/pagination/connectPagination.js @@ -91,8 +91,8 @@ const connectPagination = paginationRendering => ({ return { init({helper, createURL}) { - this.setCurrentPage = page => { - helper.setCurrentPage(page); + this.setPage = page => { + helper.setPage(page); if (scrollToNode !== false) { scrollToNode.scrollIntoView(); } @@ -104,12 +104,12 @@ const connectPagination = paginationRendering => ({ paginationRendering({ createURL: this.createURL(helper.state), cssClasses, - currentPage: helper.getPage(), + currentPage: helper.getPage() || 0, labels, nbHits: 0, nbPages: 0, padding, - setCurrentPage: this.setCurrentPage, + setPage: this.setPage, shouldAutoHideContainer: autoHideContainer, showFirstLast, containerNode, @@ -127,12 +127,12 @@ const connectPagination = paginationRendering => ({ paginationRendering({ createURL: this.createURL(state), cssClasses, - currentPage: results.page, + currentPage: state.page, labels, nbHits: results.nbHits, nbPages: this.getMaxPage(results), padding, - setCurrentPage: this.setCurrentPage, + setPage: this.setPage, shouldAutoHideContainer: autoHideContainer && results.nbHits === 0, showFirstLast, containerNode, diff --git a/src/widgets/pagination/__tests__/pagination-test.js b/src/widgets/pagination/__tests__/pagination-test.js index ea52760ebc..e6e9198059 100644 --- a/src/widgets/pagination/__tests__/pagination-test.js +++ b/src/widgets/pagination/__tests__/pagination-test.js @@ -42,7 +42,7 @@ describe('pagination()', () => { widget = pagination({container, scrollTo: false, cssClasses}); results = {hits: [{first: 'hit', second: 'hit'}], nbHits: 200, hitsPerPage: 10, nbPages: 20}; helper = { - setCurrentPage: sinon.spy(), + setPage: sinon.spy(), search: sinon.spy(), getPage: () => 0, }; @@ -54,14 +54,14 @@ describe('pagination()', () => { }); it('sets the page', () => { - widget.setCurrentPage(helper, 42); - expect(helper.setCurrentPage.calledOnce).toBe(true); + widget.setPage(helper, 42); + expect(helper.setPage.calledOnce).toBe(true); expect(helper.search.calledOnce).toBe(true); }); it('calls twice ReactDOM.render(, container)', () => { - widget.render({results, helper}); - widget.render({results, helper}); + widget.render({results, helper, state: {page: 0}}); + widget.render({results, helper, state: {page: 0}}); expect(ReactDOM.render.calledTwice).toBe(true, 'ReactDOM.render called twice'); expect(ReactDOM.render.firstCall.args[0]).toEqualJSX(); @@ -84,14 +84,14 @@ describe('pagination()', () => { it('should not scroll', () => { widget = pagination({container, scrollTo: false}); widget.init({helper}); - widget.setCurrentPage(helper, 2); + widget.setPage(helper, 2); expect(scrollIntoView.calledOnce).toBe(false, 'scrollIntoView never called'); }); it('should scroll to body', () => { widget = pagination({container}); widget.init({helper}); - widget.setCurrentPage(helper, 2); + widget.setPage(helper, 2); expect(scrollIntoView.calledOnce).toBe(true, 'scrollIntoView called once'); }); diff --git a/src/widgets/pagination/pagination.js b/src/widgets/pagination/pagination.js index 01563bb6f7..26212813c2 100644 --- a/src/widgets/pagination/pagination.js +++ b/src/widgets/pagination/pagination.js @@ -40,7 +40,7 @@ function defaultRendering({ nbHits, nbPages, padding, - setCurrentPage, + setPage, shouldAutoHideContainer, showFirstLast, containerNode, @@ -55,7 +55,7 @@ function defaultRendering({ nbHits={nbHits} nbPages={nbPages} padding={padding} - setCurrentPage={setCurrentPage} + setCurrentPage={setPage} shouldAutoHideContainer={shouldAutoHideContainer} showFirstLast={showFirstLast} />,