fix(state-results): provide rendering variables for initial render (#…

…1156) fixes #1154 If there's results already available, we want to render them ASAP, not waiting for a render event, similar to how the error event is listened to "immediate"
algolia · Oct 18, 2022 · 0d718d5 · 0d718d5
1 parent 815a307
commit 0d718d5
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 50 deletions.
diff --git a/src/components/StateResults.vue b/src/components/StateResults.vue
@@ -56,6 +56,7 @@ export default {
   },
   created() {
     this.instantSearchInstance.addListener('render', this.renderFn);
+    this.renderFn();
   },
   [isVue3 ? 'beforeUnmount' : 'beforeDestroy']() {
     if (this.widget) {

diff --git a/src/components/__tests__/StateResults.js b/src/components/__tests__/StateResults.js
@@ -1,27 +1,25 @@
 import { mount } from '../../../test/utils';
 import StateResults from '../StateResults.vue';
-import { __setState } from '../../mixins/widget';
+import { __setIndexHelper, __setIndexResults } from '../../mixins/widget';
 jest.mock('../../mixins/widget');
 
 it('renders explanation if no slot is used', () => {
-  __setState({
-    results: {
-      query: 'this is the quer',
-      hits: [{ objectID: '1', name: 'one' }, { objectID: '2', name: 'two' }],
-      page: 1,
-    },
+  __setIndexResults({
+    query: 'this is the quer',
+    hits: [{ objectID: '1', name: 'one' }, { objectID: '2', name: 'two' }],
+    page: 1,
+  });
+  __setIndexHelper({
     state: {
       query: 'this is the query',
     },
-    status: 'idle',
-    error: undefined,
   });
   const wrapper = mount(StateResults);
   expect(wrapper.html()).toMatchSnapshot();
 });
 
 it("doesn't render if no results", () => {
-  __setState({});
+  __setIndexResults(null);
   const wrapper = mount(StateResults);
   expect(wrapper).toHaveEmptyHTML();
 });
@@ -38,12 +36,8 @@ it('gives state & results to default slot', () => {
     page: 1,
   };
 
-  __setState({
-    state,
-    results,
-    status: 'idle',
-    error: undefined,
-  });
+  __setIndexResults(results);
+  __setIndexHelper({ state });
 
   mount(StateResults, {
     scopedSlots: {
@@ -67,10 +61,8 @@ it('allows default slot to render whatever they want', () => {
   const state = {
     query: 'hi!',
   };
-  __setState({
-    state,
-    results,
-  });
+  __setIndexResults(results);
+  __setIndexHelper({ state });
 
   const wrapper = mount({
     components: { StateResults },
@@ -106,10 +98,8 @@ it('allows default slot to render whatever they want (truthy query)', () => {
   const state = {
     query: 'hi!',
   };
-  __setState({
-    state,
-    results,
-  });
+  __setIndexResults(results);
+  __setIndexHelper({ state });
 
   const wrapper = mount({
     components: { StateResults },
@@ -145,10 +135,8 @@ it('allows default slot to render whatever they want (falsy query)', () => {
   const state = {
     query: 'hi!',
   };
-  __setState({
-    state,
-    results,
-  });
+  __setIndexResults(results);
+  __setIndexHelper({ state });
 
   const wrapper = mount({
     components: { StateResults },
@@ -177,14 +165,12 @@ it('allows default slot to render whatever they want (falsy query)', () => {
 
 describe('legacy spread props', () => {
   it('allows default slot to render whatever they want (truthy query)', () => {
-    __setState({
-      results: {
-        query: 'q',
-        hits: [{ objectID: '1', name: 'one' }, { objectID: '2', name: 'two' }],
-        page: 1,
-      },
-      state: {},
+    __setIndexResults({
+      query: 'q',
+      hits: [{ objectID: '1', name: 'one' }, { objectID: '2', name: 'two' }],
+      page: 1,
     });
+    __setIndexHelper({ state: {} });
 
     const wrapper = mount({
       components: { StateResults },
@@ -212,14 +198,12 @@ describe('legacy spread props', () => {
   });
 
   it('allows default slot to render whatever they want (falsy query)', () => {
-    __setState({
-      results: {
-        query: '',
-        hits: [{ objectID: '1', name: 'one' }, { objectID: '2', name: 'two' }],
-        page: 1,
-      },
-      state: {},
+    __setIndexResults({
+      query: '',
+      hits: [{ objectID: '1', name: 'one' }, { objectID: '2', name: 'two' }],
+      page: 1,
     });
+    __setIndexHelper({ state: {} });
 
     const wrapper = mount({
       components: { StateResults },

diff --git a/src/mixins/__mocks__/widget.js b/src/mixins/__mocks__/widget.js
@@ -1,5 +1,13 @@
 let state = {};
 let widget = {};
+let indexResults = null;
+let indexHelper = null;
+let instantSearchInstance = {
+  status: 'idle',
+  error: undefined,
+  addListener: () => {},
+  removeListener: () => {},
+};
 
 // we need to have state given by `component` before it is mounted, otherwise
 // we can't render it in most cases (items, hits, etc. are used in the template)
@@ -17,20 +25,30 @@ export function __setWidget(newWidget) {
   widget = newWidget;
 }
 
+export function __setIndexResults(newResults) {
+  indexResults = newResults;
+}
+
+export function __setIndexHelper(newHelper) {
+  indexHelper = newHelper;
+}
+
+export function __overrideInstantSearchInstance(newInstantSearchInstance) {
+  instantSearchInstance = Object.assign(
+    instantSearchInstance,
+    newInstantSearchInstance
+  );
+}
+
 export const createWidgetMixin = jest.fn(() => ({
   data() {
     return {
       state,
       widget,
-      instantSearchInstance: {
-        status: 'idle',
-        error: undefined,
-        addListener: () => {},
-        removeListener: () => {},
-      },
+      instantSearchInstance,
       getParentIndex: () => ({
-        getResults: () => null,
-        getHelper: () => null,
+        getResults: () => indexResults,
+        getHelper: () => indexHelper,
       }),
     };
   },