fix(infiniteHits): compute isLastPage based on cached pages (#4509)

algolia · Sep 11, 2020 · b6fb1ab · b6fb1ab
1 parent 58402ce
commit b6fb1ab
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 120 deletions.
diff --git a/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.ts b/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.ts
@@ -318,6 +318,92 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
     expect(thirdRenderOptions.results).toEqual(otherResults);
   });
 
+  it('sets isLastPage to true when all pages are cached', () => {
+    const renderFn = jest.fn();
+    const makeWidget = connectInfiniteHits(renderFn);
+    const widget = makeWidget({});
+    const helper = algoliasearchHelper({} as SearchClient, '', {
+      hitsPerPage: 1,
+    });
+    helper.search = jest.fn();
+
+    widget.init!(
+      createInitOptions({
+        state: helper.state,
+        helper,
+      })
+    );
+
+    widget.render!(
+      createRenderOptions({
+        state: helper.state,
+        results: new SearchResults(helper.state, [
+          createSingleSearchResponse({
+            hits: [{ objectID: '1' }],
+            page: 0,
+            nbPages: 3,
+          }),
+        ]),
+        helper,
+      })
+    );
+
+    renderFn.mock.calls[1][0].showMore();
+    widget.render!(
+      createRenderOptions({
+        state: helper.state,
+        results: new SearchResults(helper.state, [
+          createSingleSearchResponse({
+            hits: [{ objectID: '1' }, { objectID: '2' }],
+            page: 1,
+            nbPages: 3,
+          }),
+        ]),
+        helper,
+      })
+    );
+    expect(helper.state.page).toEqual(1);
+
+    renderFn.mock.calls[2][0].showMore();
+    widget.render!(
+      createRenderOptions({
+        state: helper.state,
+        results: new SearchResults(helper.state, [
+          createSingleSearchResponse({
+            hits: [{ objectID: '1' }, { objectID: '2' }, { objectID: '3' }],
+            page: 2,
+            nbPages: 3,
+          }),
+        ]),
+        helper,
+      })
+    );
+    expect(helper.state.page).toEqual(2);
+
+    helper.setPage(0);
+    widget.render!(
+      createRenderOptions({
+        state: helper.state,
+        results: new SearchResults(helper.state, [
+          createSingleSearchResponse({
+            hits: [{ objectID: '1' }],
+            page: 0,
+            nbPages: 3,
+          }),
+        ]),
+        helper,
+      })
+    );
+    expect(helper.state.page).toEqual(0);
+
+    expect(renderFn).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        isLastPage: true,
+      }),
+      false
+    );
+  });
+
   it('escape highlight properties if requested', () => {
     const renderFn = jest.fn();
     const makeWidget = connectInfiniteHits(renderFn);

diff --git a/src/connectors/infinite-hits/connectInfiniteHits.ts b/src/connectors/infinite-hits/connectInfiniteHits.ts
@@ -291,7 +291,7 @@ const connectInfiniteHits: InfiniteHitsConnector = function connectInfiniteHits(
         }
 
         const isFirstPage = getFirstReceivedPage() === 0;
-        const isLastPage = results.nbPages <= results.page + 1;
+        const isLastPage = results.nbPages <= getLastReceivedPage() + 1;
 
         sendEvent('view', cachedHits[page]);
 

diff --git a/src/widgets/infinite-hits/__tests__/__snapshots__/infinite-hits-test.ts.snap b/src/widgets/infinite-hits/__tests__/__snapshots__/infinite-hits-test.ts.snap
@@ -112,120 +112,6 @@ Object {
 }
 `;
 
-exports[`infiniteHits() if it is the last page, then the props should contain isLastPage true 1`] = `
-Object {
-  "bindEvent": [Function],
-  "cssClasses": Object {
-    "disabledLoadMore": "ais-InfiniteHits-loadMore--disabled",
-    "disabledLoadPrevious": "ais-InfiniteHits-loadPrevious--disabled",
-    "emptyRoot": "ais-InfiniteHits--empty",
-    "item": "ais-InfiniteHits-item",
-    "list": "ais-InfiniteHits-list",
-    "loadMore": "ais-InfiniteHits-loadMore",
-    "loadPrevious": "ais-InfiniteHits-loadPrevious",
-    "root": "ais-InfiniteHits root cx",
-  },
-  "hasShowPrevious": false,
-  "hits": Array [
-    Object {
-      "__position": 1,
-      "first": "hit",
-      "second": "hit",
-    },
-  ],
-  "insights": undefined,
-  "isFirstPage": true,
-  "isLastPage": false,
-  "results": Object {
-    "hits": Array [
-      Object {
-        "__position": 1,
-        "first": "hit",
-        "second": "hit",
-      },
-    ],
-    "hitsPerPage": 2,
-    "nbPages": 2,
-    "page": 0,
-  },
-  "sendEvent": [Function],
-  "showMore": [Function],
-  "showPrevious": [Function],
-  "templateProps": Object {
-    "templates": Object {
-      "empty": "No results",
-      "item": [Function],
-      "showMoreText": "Show more results",
-      "showPreviousText": "Show previous results",
-    },
-    "templatesConfig": Object {},
-    "useCustomCompileOptions": Object {
-      "empty": false,
-      "item": false,
-      "showMoreText": false,
-      "showPreviousText": false,
-    },
-  },
-}
-`;
-
-exports[`infiniteHits() if it is the last page, then the props should contain isLastPage true 2`] = `
-Object {
-  "bindEvent": [Function],
-  "cssClasses": Object {
-    "disabledLoadMore": "ais-InfiniteHits-loadMore--disabled",
-    "disabledLoadPrevious": "ais-InfiniteHits-loadPrevious--disabled",
-    "emptyRoot": "ais-InfiniteHits--empty",
-    "item": "ais-InfiniteHits-item",
-    "list": "ais-InfiniteHits-list",
-    "loadMore": "ais-InfiniteHits-loadMore",
-    "loadPrevious": "ais-InfiniteHits-loadPrevious",
-    "root": "ais-InfiniteHits root cx",
-  },
-  "hasShowPrevious": false,
-  "hits": Array [
-    Object {
-      "__position": 1,
-      "first": "hit",
-      "second": "hit",
-    },
-  ],
-  "insights": undefined,
-  "isFirstPage": true,
-  "isLastPage": true,
-  "results": Object {
-    "hits": Array [
-      Object {
-        "__position": 3,
-        "first": "hit",
-        "second": "hit",
-      },
-    ],
-    "hitsPerPage": 2,
-    "nbPages": 2,
-    "page": 1,
-  },
-  "sendEvent": [Function],
-  "showMore": [Function],
-  "showPrevious": [Function],
-  "templateProps": Object {
-    "templates": Object {
-      "empty": "No results",
-      "item": [Function],
-      "showMoreText": "Show more results",
-      "showPreviousText": "Show previous results",
-    },
-    "templatesConfig": Object {},
-    "useCustomCompileOptions": Object {
-      "empty": false,
-      "item": false,
-      "showMoreText": false,
-      "showPreviousText": false,
-    },
-  },
-}
-`;
-
 exports[`infiniteHits() renders transformed items 1`] = `
 Object {
   "bindEvent": [Function],

diff --git a/src/widgets/infinite-hits/__tests__/infinite-hits-test.ts b/src/widgets/infinite-hits/__tests__/infinite-hits-test.ts
@@ -98,24 +98,23 @@ describe('infiniteHits()', () => {
   });
 
   it('if it is the last page, then the props should contain isLastPage true', () => {
-    const state = { page: 0 };
     const instantSearchInstance = createInstantSearch();
     widget.init({ helper, instantSearchInstance });
     widget.render({
       results: { ...results, page: 0, nbPages: 2 },
-      state,
+      state: { page: 0 },
     });
     widget.render({
       results: { ...results, page: 1, nbPages: 2 },
-      state,
+      state: { page: 1 },
     });
 
     const [firstRender, secondRender] = render.mock.calls;
 
     expect(render).toHaveBeenCalledTimes(2);
-    expect(firstRender[0].props).toMatchSnapshot();
+    expect(firstRender[0].props.isLastPage).toEqual(false);
     expect(firstRender[1]).toEqual(container);
-    expect(secondRender[0].props).toMatchSnapshot();
+    expect(secondRender[0].props.isLastPage).toEqual(true);
     expect(secondRender[1]).toEqual(container);
   });