vue-instantsearch 4.7.0 → 4.7.1

package/src/util/__tests__/createServerRootMixin.test.js

@@ -1,3 +1,8 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/* eslint-disable jest/no-done-callback */
 import { mount, createSSRApp } from '../../../test/utils';
 import Router from 'vue-router';
 import Vuex from 'vuex';
@@ -6,6 +11,7 @@ import { createServerRootMixin } from '../createServerRootMixin';
 import InstantSearchSsr from '../../components/InstantSearchSsr';
 import Configure from '../../components/Configure';
 import SearchBox from '../../components/SearchBox.vue';
+import Index from '../../components/Index';
 import { createWidgetMixin } from '../../mixins/widget';
 import { createFakeClient } from '../testutils/client';
 import { createSerializedState } from '../testutils/helper';
@@ -100,7 +106,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsear
       });
     });
 
-    it('provides the instantsearch instance', done => {
+    it('provides the instantsearch instance', (done) => {
       const App = {
         mixins: [
           createServerRootMixin({
@@ -144,23 +150,25 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsear
   });
 
   describe('findResultsState', () => {
-    it('provides findResultsState', async done => {
-      const app = createSSRApp({
-        mixins: [
-          forceIsServerMixin,
-          createServerRootMixin({
-            searchClient: createFakeClient(),
-            indexName: 'hello',
-          }),
-        ],
-        render: renderCompat(h => h(InstantSearchSsr, {})),
-        created() {
-          expect(typeof this.instantsearch.findResultsState).toBe('function');
-          done();
-        },
-      });
+    it('provides findResultsState', () => {
+      return new Promise((resolve) => {
+        const app = createSSRApp({
+          mixins: [
+            forceIsServerMixin,
+            createServerRootMixin({
+              searchClient: createFakeClient(),
+              indexName: 'hello',
+            }),
+          ],
+          render: renderCompat((h) => h(InstantSearchSsr, {})),
+          created() {
+            expect(typeof this.instantsearch.findResultsState).toBe('function');
+            resolve();
+          },
+        });
 
-      await renderToString(app);
+        renderToString(app);
+      });
     });
 
     it('requires renderToString', async () => {
@@ -174,7 +182,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsear
             indexName: 'hello',
           }),
         ],
-        render: renderCompat(h =>
+        render: renderCompat((h) =>
           h(InstantSearchSsr, {}, [
             h(Configure, {
               attrs: {
@@ -195,7 +203,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsear
 
       const wrapper = createSSRApp({
         mixins: [forceIsServerMixin],
-        render: renderCompat(h => h(app)),
+        render: renderCompat((h) => h(app)),
       });
 
       await renderToString(wrapper);
@@ -213,7 +221,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsear
             indexName: 'hello',
           }),
         ],
-        render: renderCompat(h =>
+        render: renderCompat((h) =>
           /**
            * This code triggers this warning in Vue 3:
            * > Non-function value encountered for default slot. Prefer function slots for better performance.
@@ -247,97 +255,139 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsear
 
       const wrapper = createSSRApp({
         mixins: [forceIsServerMixin],
-        render: renderCompat(h => h(app)),
+        render: renderCompat((h) => h(app)),
       });
 
       await renderToString(wrapper);
 
-      expect(mainIndex.getWidgetState()).toMatchInlineSnapshot(`
-Object {
-  "hello": Object {
-    "configure": Object {
-      "hitsPerPage": 100,
-    },
-  },
-}
-`);
+      expect(mainIndex.getWidgetUiState({})).toMatchInlineSnapshot(`
+        {
+          "hello": {
+            "configure": {
+              "hitsPerPage": 100,
+            },
+          },
+        }
+      `);
 
       expect(searchClient.search).toHaveBeenCalledTimes(1);
       expect(searchClient.search.mock.calls[0][0]).toMatchInlineSnapshot(`
-Array [
-  Object {
-    "indexName": "hello",
-    "params": Object {
-      "facets": Array [],
-      "hitsPerPage": 100,
-      "query": "",
-      "tagFilters": "",
-    },
-  },
-]
-`);
+        [
+          {
+            "indexName": "hello",
+            "params": {
+              "facets": [],
+              "hitsPerPage": 100,
+              "query": "",
+              "tagFilters": "",
+            },
+          },
+        ]
+      `);
     });
 
-    it('returns correct results state', async done => {
+    it('returns correct results state', () => {
       const searchClient = createFakeClient();
 
-      const app = {
-        mixins: [
-          forceIsServerMixin,
-          createServerRootMixin({
-            searchClient,
-            indexName: 'hello',
-          }),
-        ],
-        render: renderCompat(h =>
-          h(InstantSearchSsr, {}, [
-            h(Configure, {
-              attrs: {
-                hitsPerPage: 100,
-              },
+      return new Promise((resolve, reject) => {
+        const app = {
+          mixins: [
+            forceIsServerMixin,
+            createServerRootMixin({
+              searchClient,
+              indexName: 'hello',
             }),
-            h(SearchBox),
-          ])
-        ),
-        async serverPrefetch() {
-          const state = await this.instantsearch.findResultsState({
-            component: this,
-            renderToString,
-          });
-          expect(state).toEqual({
-            hello: {
-              results: [
+          ],
+          render: renderCompat((h) =>
+            h(InstantSearchSsr, {}, [
+              h(Configure, {
+                attrs: {
+                  hitsPerPage: 100,
+                },
+              }),
+              h(SearchBox),
+              h(
+                Index,
                 {
+                  attrs: {
+                    indexName: 'hello',
+                    indexId: 'nestedIndex',
+                  },
+                },
+                []
+              ),
+            ])
+          ),
+          async serverPrefetch() {
+            const state = await this.instantsearch.findResultsState({
+              component: this,
+              renderToString,
+            });
+
+            try {
+              expect(state).toEqual({
+                hello: expect.objectContaining({}),
+                nestedIndex: expect.objectContaining({}),
+              });
+
+              expect(state.hello).toEqual({
+                results: [
+                  {
+                    query: '',
+                  },
+                ],
+                state: {
+                  disjunctiveFacets: [],
+                  disjunctiveFacetsRefinements: {},
+                  facets: [],
+                  facetsExcludes: {},
+                  facetsRefinements: {},
+                  hierarchicalFacets: [],
+                  hierarchicalFacetsRefinements: {},
+                  hitsPerPage: 100,
+                  index: 'hello',
+                  numericRefinements: {},
                   query: '',
+                  tagRefinements: [],
                 },
-              ],
-              state: {
-                disjunctiveFacets: [],
-                disjunctiveFacetsRefinements: {},
-                facets: [],
-                facetsExcludes: {},
-                facetsRefinements: {},
-                hierarchicalFacets: [],
-                hierarchicalFacetsRefinements: {},
-                hitsPerPage: 100,
-                index: 'hello',
-                numericRefinements: {},
-                query: '',
-                tagRefinements: [],
-              },
-            },
-          });
-          done();
-          return state;
-        },
-      };
+              });
+
+              // Parent's widgets state should not be merged into nested index state
+              expect(state.nestedIndex).toEqual({
+                results: [
+                  {
+                    query: '',
+                  },
+                ],
+                state: {
+                  disjunctiveFacets: [],
+                  disjunctiveFacetsRefinements: {},
+                  facets: [],
+                  facetsExcludes: {},
+                  facetsRefinements: {},
+                  hierarchicalFacets: [],
+                  hierarchicalFacetsRefinements: {},
+                  index: 'hello',
+                  numericRefinements: {},
+                  tagRefinements: [],
+                },
+              });
+            } catch (err) {
+              reject(err);
+            }
 
-      const wrapper = createSSRApp({
-        mixins: [forceIsServerMixin],
-        render: renderCompat(h => h(app)),
-      });
+            resolve();
+            return state;
+          },
+        };
 
-      await renderToString(wrapper);
+        const wrapper = createSSRApp({
+          mixins: [forceIsServerMixin],
+          render: renderCompat((h) => h(app)),
+        });
+
+        renderToString(wrapper);
+      });
     });
 
     it('forwards router', async () => {
@@ -372,7 +422,7 @@ Array [
           expect(this.$router).toBe(router);
           return {};
         },
-        render: renderCompat(h =>
+        render: renderCompat((h) =>
           h(InstantSearchSsr, {}, [
             h(Configure, {
               attrs: {
@@ -392,7 +442,7 @@ Array [
 
       const wrapper = createSSRApp({
         mixins: [forceIsServerMixin],
-        render: renderCompat(h => h(App)),
+        render: renderCompat((h) => h(App)),
         ...(isVue2 ? { router } : {}),
       });
       if (isVue3) {
@@ -425,7 +475,7 @@ Array [
           expect(this.$store).toBe(store);
           return {};
         },
-        render: renderCompat(h =>
+        render: renderCompat((h) =>
           h(InstantSearchSsr, {}, [
             h(Configure, {
               attrs: {
@@ -446,7 +496,7 @@ Array [
       const wrapper = createSSRApp({
         mixins: [forceIsServerMixin],
         ...(isVue2 ? { store } : {}),
-        render: renderCompat(h => h(App)),
+        render: renderCompat((h) => h(App)),
       });
 
       if (isVue3) {
@@ -483,7 +533,7 @@ Array [
               },
             },
           },
-          render: renderCompat(h =>
+          render: renderCompat((h) =>
             h(InstantSearchSsr, {}, [
               h(Configure, {
                 attrs: {
@@ -503,66 +553,71 @@ Array [
 
         const wrapper = createSSRApp({
           mixins: [forceIsServerMixin],
-          render: renderCompat(h => h(App, { props: { someProp } })),
+          render: renderCompat((h) => h(App, { props: { someProp } })),
         });
 
         await renderToString(wrapper);
       });
 
-      it('forwards slots', async done => {
+      it('forwards slots', () => {
         const searchClient = createFakeClient();
 
         expect.assertions(2);
 
-        const App = {
-          mixins: [
-            forceIsServerMixin,
-            createServerRootMixin({
-              searchClient,
-              indexName: 'hello',
-            }),
-          ],
-          components: { InstantSearchSsr },
-          template: `
+        return new Promise((resolve, reject) => {
+          const App = {
+            mixins: [
+              forceIsServerMixin,
+              createServerRootMixin({
+                searchClient,
+                indexName: 'hello',
+              }),
+            ],
+            components: { InstantSearchSsr },
+            template: `
             <InstantSearchSsr>
               <slot />
             </InstantSearchSsr>
           `,
-          serverPrefetch() {
-            return (
-              this.instantsearch
-                .findResultsState({ component: this, renderToString })
-                .then(res => {
-                  expect(
-                    this.instantsearch.mainIndex.getWidgets().map(w => w.$$type)
-                  ).toEqual(['ais.configure']);
-
-                  expect(res.hello.state.hitsPerPage).toBe(100);
-                })
-                // jest throws an error we need to catch, since stuck in the flow
-                .catch(e => {
-                  done.fail(e);
-                })
-            );
-          },
-        };
+            serverPrefetch() {
+              return (
+                this.instantsearch
+                  .findResultsState({ component: this, renderToString })
+                  .then((res) => {
+                    // eslint-disable-next-line jest/no-conditional-expect
+                    expect(
+                      this.instantsearch.mainIndex
+                        .getWidgets()
+                        .map((w) => w.$$type)
+                    ).toEqual(['ais.configure']);
+
+                    // eslint-disable-next-line jest/no-conditional-expect
+                    expect(res.hello.state.hitsPerPage).toBe(100);
+                  })
+                  // jest throws an error we need to catch, since stuck in the flow
+                  .catch((e) => {
+                    reject(e);
+                  })
+              );
+            },
+          };
 
-        const wrapper = createSSRApp({
-          mixins: [forceIsServerMixin],
-          components: { App, Configure },
-          template: `
+          const wrapper = createSSRApp({
+            mixins: [forceIsServerMixin],
+            components: { App, Configure },
+            template: `
           <App>
             <Configure :hits-per-page.camel="100" />
           </App>
         `,
-        });
+          });
 
-        await renderToString(wrapper);
-        done();
+          renderToString(wrapper).then(resolve);
+        });
       });
 
       // TODO: forwarding of scoped slots doesn't yet work.
-      it.skip('forwards scoped slots', async done => {
+      it.skip('forwards scoped slots', async (done) => {
         const searchClient = createFakeClient();
 
         expect.assertions(2);
@@ -575,22 +630,26 @@ Array [
               indexName: 'hello',
             }),
           ],
-          render: renderCompat(h =>
+          render: renderCompat((h) =>
             h(InstantSearchSsr, {}, [this.$scopedSlots.default({ test: true })])
           ),
           serverPrefetch() {
             return (
               this.instantsearch
                 .findResultsState({ component: this, renderToString })
-                .then(res => {
+                .then((res) => {
+                  // eslint-disable-next-line jest/no-conditional-expect
                   expect(
-                    this.instantsearch.mainIndex.getWidgets().map(w => w.$$type)
+                    this.instantsearch.mainIndex
+                      .getWidgets()
+                      .map((w) => w.$$type)
                   ).toEqual(['ais.configure']);
 
+                  // eslint-disable-next-line jest/no-conditional-expect
                   expect(res.hello._state.hitsPerPage).toBe(100);
                 })
                 // jest throws an error we need to catch, since stuck in the flow
-                .catch(e => {
+                .catch((e) => {
                   done.fail(e);
                 })
             );
@@ -599,7 +658,7 @@ Array [
 
         const wrapper = createSSRApp({
           mixins: [forceIsServerMixin],
-          render: renderCompat(h =>
+          render: renderCompat((h) =>
             h(App, {
               scopedSlots: {
                 default({ test }) {
@@ -633,7 +692,8 @@ Array [
               indexName: 'hello',
             }),
           ],
-          render: renderCompat(function(h) {
+          render: renderCompat(function (h) {
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
             expect(this.$root).toBe(wrapper);
             return h(InstantSearchSsr, {}, [
               h(Configure, {
@@ -654,7 +714,7 @@ Array [
 
         const wrapper = createSSRApp({
           mixins: [forceIsServerMixin],
-          render: renderCompat(h => h(App)),
+          render: renderCompat((h) => h(App)),
         });
 
         await renderToString(wrapper);
@@ -688,7 +748,7 @@ Array [
             expect(this.$nuxt).toEqual(1);
             return {};
           },
-          render: renderCompat(h =>
+          render: renderCompat((h) =>
             h(InstantSearchSsr, {}, [
               h(Configure, {
                 attrs: {
@@ -708,7 +768,7 @@ Array [
 
         const wrapper = createSSRApp({
           mixins: [forceIsServerMixin],
-          render: renderCompat(h => h(App)),
+          render: renderCompat((h) => h(App)),
         });
 
         await renderToString(wrapper);
@@ -724,7 +784,7 @@ Array [
               indexName: 'hello',
             }),
           ],
-          render: renderCompat(h =>
+          render: renderCompat((h) =>
             /**
              * This code triggers this warning in Vue 3:
              * > Non-function value encountered for default slot. Prefer function slots for better performance.
@@ -755,25 +815,25 @@ Array [
 
         const wrapper = createSSRApp({
           mixins: [forceIsServerMixin],
-          render: renderCompat(h => h(app)),
+          render: renderCompat((h) => h(app)),
         });
 
         await renderToString(wrapper);
 
         expect(searchClient.search).toHaveBeenCalledTimes(1);
         expect(searchClient.search.mock.calls[0][0]).toMatchInlineSnapshot(`
-Array [
-  Object {
-    "indexName": "hello",
-    "params": Object {
-      "facets": Array [],
-      "hitsPerPage": 100,
-      "query": "",
-      "tagFilters": "",
-    },
-  },
-]
-`);
+          [
+            {
+              "indexName": "hello",
+              "params": {
+                "facets": [],
+                "hitsPerPage": 100,
+                "query": "",
+                "tagFilters": "",
+              },
+            },
+          ]
+        `);
       });
 
       it('works when component is at root (and therefore has no $vnode)', async () => {
@@ -781,7 +841,7 @@ Array [
         let mainIndex;
 
         const app = {
-          render: renderCompat(h =>
+          render: renderCompat((h) =>
             /**
              * This code triggers this warning in Vue 3:
              * > Non-function value encountered for default slot. Prefer function slots for better performance.
@@ -821,35 +881,35 @@ Array [
           created() {
             mainIndex = this.instantsearch.mainIndex;
           },
-          render: renderCompat(h => h(app)),
+          render: renderCompat((h) => h(app)),
         });
 
         await renderToString(wrapper);
 
-        expect(mainIndex.getWidgetState()).toMatchInlineSnapshot(`
-Object {
-  "hello": Object {
-    "configure": Object {
-      "hitsPerPage": 100,
-    },
-  },
-}
-`);
+        expect(mainIndex.getWidgetUiState({})).toMatchInlineSnapshot(`
+          {
+            "hello": {
+              "configure": {
+                "hitsPerPage": 100,
+              },
+            },
+          }
+        `);
 
         expect(searchClient.search).toHaveBeenCalledTimes(1);
         expect(searchClient.search.mock.calls[0][0]).toMatchInlineSnapshot(`
-Array [
-  Object {
-    "indexName": "hello",
-    "params": Object {
-      "facets": Array [],
-      "hitsPerPage": 100,
-      "query": "",
-      "tagFilters": "",
-    },
-  },
-]
-`);
+          [
+            {
+              "indexName": "hello",
+              "params": {
+                "facets": [],
+                "hitsPerPage": 100,
+                "query": "",
+                "tagFilters": "",
+              },
+            },
+          ]
+        `);
       });
     }
   });
@@ -865,7 +925,7 @@ Array [
             indexName: 'hello',
           }),
         ],
-        render: renderCompat(h =>
+        render: renderCompat((h) =>
           h(InstantSearchSsr, {}, [
             h(Configure, {
               attrs: {
@@ -911,7 +971,7 @@ Array [
             indexName: 'hello',
           }),
         ],
-        render: renderCompat(h =>
+        render: renderCompat((h) =>
           h(InstantSearchSsr, {}, [
             h(Configure, {
               attrs: {
@@ -949,7 +1009,7 @@ Array [
             indexName: 'hello',
           }),
         ],
-        render: renderCompat(h =>
+        render: renderCompat((h) =>
           h(InstantSearchSsr, {}, [
             h(Configure, {
               attrs: {
@@ -1028,26 +1088,26 @@ Array [
           instantSearchInstance: expect.anything(),
         },
         `
-Object {
-  "createURL": [Function],
-  "helper": Anything,
-  "instantSearchInstance": Anything,
-  "parent": Anything,
-  "results": Anything,
-  "scopedResults": ArrayContaining [
-    ObjectContaining {
-      "helper": Anything,
-      "indexId": Any<String>,
-      "results": Anything,
-    },
-  ],
-  "searchMetadata": Object {
-    "isSearchStalled": false,
-  },
-  "state": Anything,
-  "templatesConfig": Object {},
-}
-`
+        {
+          "createURL": [Function],
+          "helper": Anything,
+          "instantSearchInstance": Anything,
+          "parent": Anything,
+          "results": Anything,
+          "scopedResults": ArrayContaining [
+            ObjectContaining {
+              "helper": Anything,
+              "indexId": Any<String>,
+              "results": Anything,
+            },
+          ],
+          "searchMetadata": {
+            "isSearchStalled": false,
+          },
+          "state": Anything,
+          "templatesConfig": {},
+        }
+      `
       );
     });