feat(stats): implement getRenderState and getWidgetRenderState (#…

…4565)
algolia · Nov 30, 2020 · af9f189 · af9f189
1 parent 2b9d42e
commit af9f189
Show file tree

Hide file tree

Showing 2 changed files with 237 additions and 16 deletions.
diff --git a/src/connectors/stats/__tests__/connectStats-test.js b/src/connectors/stats/__tests__/connectStats-test.js
@@ -1,9 +1,36 @@
 import jsHelper from 'algoliasearch-helper';
 const SearchResults = jsHelper.SearchResults;
+import { createSearchClient } from '../../../../test/mock/createSearchClient';
+import { createSingleSearchResponse } from '../../../../test/mock/createAPIResponse';
+import {
+  createInitOptions,
+  createRenderOptions,
+} from '../../../../test/mock/createWidget';
 
 import connectStats from '../connectStats';
 
 describe('connectStats', () => {
+  const getInitializedWidget = (config = {}) => {
+    const renderFn = jest.fn();
+    const makeWidget = connectStats(renderFn);
+    const widget = makeWidget({
+      ...config,
+    });
+
+    const helper = jsHelper(createSearchClient(), 'indexName', {
+      index: 'indexName',
+    });
+
+    widget.init(
+      createInitOptions({
+        helper,
+        state: helper.state,
+      })
+    );
+
+    return [widget, helper];
+  };
+
   describe('Usage', () => {
     it('throws without render function', () => {
       expect(() => {
@@ -33,6 +60,177 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/stats/js/#c
     });
   });
 
+  describe('getRenderState', () => {
+    test('returns the widget render state without results', () => {
+      const renderFn = jest.fn();
+      const unmountFn = jest.fn();
+      const createStats = connectStats(renderFn, unmountFn);
+      const stats = createStats();
+      const helper = jsHelper(createSearchClient(), 'indexName', {
+        index: 'indexName',
+      });
+
+      const renderState = stats.getRenderState(
+        { stats: {} },
+        createInitOptions({ helper })
+      );
+
+      expect(renderState.stats).toEqual({
+        hitsPerPage: undefined,
+        nbHits: 0,
+        nbPages: 0,
+        page: 0,
+        processingTimeMS: -1,
+        query: '',
+        widgetParams: {},
+      });
+    });
+
+    test('returns the widget render state with empty results', () => {
+      const [stats, helper] = getInitializedWidget();
+
+      const renderState = stats.getRenderState(
+        { stats: {} },
+        createRenderOptions({
+          helper,
+          state: helper.state,
+          results: new SearchResults(helper.state, [
+            createSingleSearchResponse(),
+          ]),
+        })
+      );
+
+      expect(renderState.stats).toEqual({
+        hitsPerPage: 20,
+        nbHits: 0,
+        nbPages: 0,
+        page: 0,
+        processingTimeMS: 0,
+        query: '',
+        widgetParams: {},
+      });
+    });
+
+    test('returns the widget render state with results', () => {
+      const [stats, helper] = getInitializedWidget();
+
+      const renderState = stats.getRenderState(
+        { stats: {} },
+        createRenderOptions({
+          helper,
+          state: helper.state,
+          results: new SearchResults(helper.state, [
+            createSingleSearchResponse({
+              hits: [
+                { brand: 'samsung', objectID: '1' },
+                { brand: 'apple', objectID: '2' },
+                { brand: 'sony', objectID: '3' },
+                { brand: 'benq', objectID: '4' },
+                { brand: 'dyson', objectID: '5' },
+              ],
+              hitsPerPage: 3,
+              query: 'apple',
+            }),
+          ]),
+        })
+      );
+
+      expect(renderState.stats).toEqual({
+        hitsPerPage: 3,
+        nbHits: 5,
+        nbPages: 2,
+        page: 0,
+        processingTimeMS: 0,
+        query: 'apple',
+        widgetParams: {},
+      });
+    });
+  });
+
+  describe('getWidgetRenderState', () => {
+    test('returns the widget render state without results', () => {
+      const renderFn = jest.fn();
+      const unmountFn = jest.fn();
+      const createStats = connectStats(renderFn, unmountFn);
+      const stats = createStats();
+      const helper = jsHelper(createSearchClient(), 'indexName', {
+        index: 'indexName',
+      });
+
+      const renderState = stats.getWidgetRenderState(
+        createInitOptions({ helper })
+      );
+
+      expect(renderState).toEqual({
+        hitsPerPage: undefined,
+        nbHits: 0,
+        nbPages: 0,
+        page: 0,
+        processingTimeMS: -1,
+        query: '',
+        widgetParams: {},
+      });
+    });
+
+    test('returns the widget render state with empty results', () => {
+      const [stats, helper] = getInitializedWidget();
+
+      const renderState = stats.getWidgetRenderState(
+        createRenderOptions({
+          helper,
+          state: helper.state,
+          results: new SearchResults(helper.state, [
+            createSingleSearchResponse(),
+          ]),
+        })
+      );
+
+      expect(renderState).toEqual({
+        hitsPerPage: 20,
+        nbHits: 0,
+        nbPages: 0,
+        page: 0,
+        processingTimeMS: 0,
+        query: '',
+        widgetParams: {},
+      });
+    });
+
+    test('returns the widget render state with results', () => {
+      const [stats, helper] = getInitializedWidget();
+
+      const renderState = stats.getWidgetRenderState(
+        createRenderOptions({
+          helper,
+          state: helper.state,
+          results: new SearchResults(helper.state, [
+            createSingleSearchResponse({
+              hits: [
+                { brand: 'samsung', objectID: '1' },
+                { brand: 'apple', objectID: '2' },
+                { brand: 'sony', objectID: '3' },
+                { brand: 'benq', objectID: '4' },
+                { brand: 'dyson', objectID: '5' },
+              ],
+              hitsPerPage: 3,
+              query: 'apple',
+            }),
+          ]),
+        })
+      );
+
+      expect(renderState).toEqual({
+        hitsPerPage: 3,
+        nbHits: 5,
+        nbPages: 2,
+        page: 0,
+        processingTimeMS: 0,
+        query: 'apple',
+        widgetParams: {},
+      });
+    });
+  });
+
   it('Renders during init and render', () => {
     // test that the dummyRendering is called with the isFirstRendering
     // flag set accordingly

diff --git a/src/connectors/stats/connectStats.js b/src/connectors/stats/connectStats.js
@@ -57,33 +57,25 @@ export default function connectStats(renderFn, unmountFn = noop) {
   return (widgetParams = {}) => ({
     $$type: 'ais.stats',
 
-    init({ helper, instantSearchInstance }) {
+    init(initOptions) {
+      const { instantSearchInstance } = initOptions;
+
       renderFn(
         {
+          ...this.getWidgetRenderState(initOptions),
           instantSearchInstance,
-          hitsPerPage: helper.state.hitsPerPage,
-          nbHits: 0,
-          nbPages: 0,
-          page: helper.state.page || 0,
-          processingTimeMS: -1,
-          query: helper.state.query || '',
-          widgetParams,
         },
         true
       );
     },
 
-    render({ results, instantSearchInstance }) {
+    render(renderOptions) {
+      const { instantSearchInstance } = renderOptions;
+
       renderFn(
         {
+          ...this.getWidgetRenderState(renderOptions),
           instantSearchInstance,
-          hitsPerPage: results.hitsPerPage,
-          nbHits: results.nbHits,
-          nbPages: results.nbPages,
-          page: results.page,
-          processingTimeMS: results.processingTimeMS,
-          query: results.query,
-          widgetParams,
         },
         false
       );
@@ -92,5 +84,36 @@ export default function connectStats(renderFn, unmountFn = noop) {
     dispose() {
       unmountFn();
     },
+
+    getRenderState(renderState, renderOptions) {
+      return {
+        ...renderState,
+        stats: this.getWidgetRenderState(renderOptions),
+      };
+    },
+
+    getWidgetRenderState({ results, helper }) {
+      if (!results) {
+        return {
+          hitsPerPage: helper.state.hitsPerPage,
+          nbHits: 0,
+          nbPages: 0,
+          page: helper.state.page || 0,
+          processingTimeMS: -1,
+          query: helper.state.query || '',
+          widgetParams,
+        };
+      }
+
+      return {
+        hitsPerPage: results.hitsPerPage,
+        nbHits: results.nbHits,
+        nbPages: results.nbPages,
+        page: results.page,
+        processingTimeMS: results.processingTimeMS,
+        query: results.query,
+        widgetParams,
+      };
+    },
   });
 }