fix(panel): safely access state in mapStateToCanRefine (#876)

Haroenv · web-flow · commit 435c7d3d890a · 2020-10-05T09:41:03.000+02:00
Most of the widgets were assuming the shape of state is always "right", but since #871 it is also called with an empty object. This PR does the following things: - changes all widgets to work correctly with empty object - makes sure always a boolean is returned from mapStateToCanRefine to make tests easier - make tests of mapStateToCanRefine consistent, as well as adding a unit test to each of the methods using {} as state closes #875 fixes #874
diff --git a/package.json b/package.json
@@ -114,7 +114,7 @@
   "bundlesize": [
     {
       "path": "./dist/vue-instantsearch.js",
-      "maxSize": "48.00 kB"
+      "maxSize": "48.10 kB"
     },
     {
       "path": "./dist/vue-instantsearch.common.js",
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
@@ -58,7 +58,7 @@ export default {
   mixins: [
     createWidgetMixin({ connector: connectBreadcrumb }),
     createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.canRefine,
+      mapStateToCanRefine: state => Boolean(state.canRefine),
     }),
     createSuitMixin({ name: 'Breadcrumb' }),
   ],
diff --git a/src/components/ClearRefinements.vue b/src/components/ClearRefinements.vue
@@ -31,7 +31,7 @@ export default {
   mixins: [
     createWidgetMixin({ connector: connectClearRefinements }),
     createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.hasRefinements,
+      mapStateToCanRefine: state => Boolean(state.hasRefinements),
     }),
     createSuitMixin({ name: 'ClearRefinements' }),
   ],
diff --git a/src/components/CurrentRefinements.vue b/src/components/CurrentRefinements.vue
@@ -65,7 +65,8 @@ export default {
     createSuitMixin({ name: 'CurrentRefinements' }),
     createWidgetMixin({ connector: connectCurrentRefinements }),
     createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.items.length > 0,
+      mapStateToCanRefine: state =>
+        Boolean(state.items) && state.items.length > 0,
     }),
   ],
   props: {
diff --git a/src/components/HierarchicalMenu.vue b/src/components/HierarchicalMenu.vue
@@ -45,7 +45,8 @@ import { createPanelConsumerMixin } from '../mixins/panel';
 import HierarchicalMenuList from './HierarchicalMenuList.vue';
 import { createSuitMixin } from '../mixins/suit';
 
-const mapStateToCanRefine = state => state.items.length > 0;
+const mapStateToCanRefine = state =>
+  Boolean(state.items) && state.items.length > 0;
 
 export default {
   name: 'AisHierarchicalMenu',
diff --git a/src/components/HitsPerPage.vue b/src/components/HitsPerPage.vue
@@ -36,7 +36,7 @@ export default {
     createSuitMixin({ name: 'HitsPerPage' }),
     createWidgetMixin({ connector: connectHitsPerPage }),
     createPanelConsumerMixin({
-      mapStateToCanRefine: state => !state.hasNoResults,
+      mapStateToCanRefine: state => state.hasNoResults === false,
     }),
   ],
   props: {
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
@@ -56,7 +56,7 @@ export default {
     createSuitMixin({ name: 'Menu' }),
     createWidgetMixin({ connector: connectMenu }),
     createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.canRefine,
+      mapStateToCanRefine: state => Boolean(state.canRefine),
     }),
   ],
   props: {
diff --git a/src/components/MenuSelect.vue b/src/components/MenuSelect.vue
@@ -48,7 +48,7 @@ export default {
     createSuitMixin({ name: 'MenuSelect' }),
     createWidgetMixin({ connector: connectMenu }),
     createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.canRefine,
+      mapStateToCanRefine: state => Boolean(state.canRefine),
     }),
   ],
   props: {
diff --git a/src/components/NumericMenu.vue b/src/components/NumericMenu.vue
@@ -44,7 +44,7 @@ export default {
     createWidgetMixin({ connector: connectNumericMenu }),
     createSuitMixin({ name: 'NumericMenu' }),
     createPanelConsumerMixin({
-      mapStateToCanRefine: state => !state.hasNoResults,
+      mapStateToCanRefine: state => state.hasNoResults === false,
     }),
   ],
   props: {
diff --git a/src/components/RangeInput.vue b/src/components/RangeInput.vue
@@ -60,7 +60,7 @@ import { createPanelConsumerMixin } from '../mixins/panel';
 import { createSuitMixin } from '../mixins/suit';
 
 const mapStateToCanRefine = state =>
-  state && state.range && state.range.min !== state.range.max;
+  state && Boolean(state.range) && state.range.min !== state.range.max;
 
 export default {
   name: 'AisRangeInput',
diff --git a/src/components/RatingMenu.vue b/src/components/RatingMenu.vue
@@ -88,7 +88,7 @@ export default {
     createSuitMixin({ name: 'RatingMenu' }),
     createWidgetMixin({ connector: connectRatingMenu }),
     createPanelConsumerMixin({
-      mapStateToCanRefine: state => !state.hasNoResults,
+      mapStateToCanRefine: state => state.hasNoResults === false,
     }),
   ],
   props: {
diff --git a/src/components/RefinementList.vue b/src/components/RefinementList.vue
@@ -111,7 +111,7 @@ export default {
     createSuitMixin({ name: 'RefinementList' }),
     createWidgetMixin({ connector: connectRefinementList }),
     createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.canRefine,
+      mapStateToCanRefine: state => Boolean(state.canRefine),
     }),
   ],
   props: {
diff --git a/src/components/SortBy.vue b/src/components/SortBy.vue
@@ -38,7 +38,7 @@ export default {
     createWidgetMixin({ connector: connectSortBy }),
 
     createPanelConsumerMixin({
-      mapStateToCanRefine: state => !state.hasNoResults,
+      mapStateToCanRefine: state => state.hasNoResults === false,
     }),
   ],
   props: {
diff --git a/src/components/ToggleRefinement.vue b/src/components/ToggleRefinement.vue
@@ -34,7 +34,7 @@ import { createWidgetMixin } from '../mixins/widget';
 import { createPanelConsumerMixin } from '../mixins/panel';
 import { createSuitMixin } from '../mixins/suit';
 
-const mapStateToCanRefine = state => Boolean(state.value.count);
+const mapStateToCanRefine = state => Boolean(state.value && state.value.count);
 
 export default {
   name: 'AisToggleRefinement',
diff --git a/src/components/__tests__/Breadcrumb.js b/src/components/__tests__/Breadcrumb.js
@@ -186,7 +186,9 @@ describe('default render', () => {
     expect(refine).toHaveBeenCalledTimes(1);
     expect(refine).toHaveBeenCalledWith('TV & Home Theater');
   });
+});
 
+describe('panel', () => {
   it('calls the Panel mixin with `canRefine`', () => {
     __setState({ ...defaultState });
 
@@ -206,6 +208,8 @@ describe('default render', () => {
     });
 
     expect(mapStateToCanRefine()).toBe(false);
+
+    expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
   });
 });
 
@@ -301,7 +305,7 @@ describe('custom default render', () => {
 });
 
 describe('custom rootLabel render', () => {
-  const roolLabelSlot = `
+  const rootLabelSlot = `
     <template>Home page</template>
   `;
 
@@ -311,7 +315,7 @@ describe('custom rootLabel render', () => {
     const wrapper = mount(Breadcrumb, {
       propsData: defaultProps,
       scopedSlots: {
-        rootLabel: roolLabelSlot,
+        rootLabel: rootLabelSlot,
       },
     });
 
@@ -328,7 +332,7 @@ describe('custom rootLabel render', () => {
     const wrapper = mount(Breadcrumb, {
       propsData: defaultProps,
       scopedSlots: {
-        rootLabel: roolLabelSlot,
+        rootLabel: rootLabelSlot,
       },
     });
 
diff --git a/src/components/__tests__/ClearRefinements.js b/src/components/__tests__/ClearRefinements.js
@@ -196,4 +196,6 @@ it('calls the Panel mixin with `hasRefinement`', () => {
   });
 
   expect(mapStateToCanRefine()).toBe(false);
+
+  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
diff --git a/src/components/__tests__/CurrentRefinements.js b/src/components/__tests__/CurrentRefinements.js
@@ -167,6 +167,27 @@ describe.each([
   });
 });
 
+it('calls the Panel mixin with `canRefine`', () => {
+  __setState({ items: [{}] });
+
+  const wrapper = mount(CurrentRefinements);
+
+  const mapStateToCanRefine = () =>
+    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
+
+  expect(mapStateToCanRefine()).toBe(true);
+
+  wrapper.setData({
+    state: {
+      items: [],
+    },
+  });
+
+  expect(mapStateToCanRefine()).toBe(false);
+
+  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
+});
+
 it('calls `refine` with a refinement', () => {
   const spies = [jest.fn(), jest.fn()];
 
@@ -222,7 +243,7 @@ describe('custom render', () => {
           v-for="item in items"
           :key="item.attribute"
           >
-          {{item.label}}: 
+          {{item.label}}:
           <button
             v-for="refinement in item.refinements"
             @click="item.refine(refinement)"
@@ -237,7 +258,7 @@ describe('custom render', () => {
 
   const itemScopedSlot = `
     <div slot-scope="{ item, refine }">
-      {{item.label}}: 
+      {{item.label}}:
       <button
         v-for="refinement in item.refinements"
         @click="item.refine(refinement)"
diff --git a/src/components/__tests__/HierarchicalMenu.js b/src/components/__tests__/HierarchicalMenu.js
@@ -463,27 +463,29 @@ describe('default render', () => {
 
     expect(toggleShowMore).toHaveBeenCalledTimes(1);
   });
+});
 
-  it('calls the Panel mixin with `items.length`', () => {
-    __setState({ ...defaultState });
+it('calls the Panel mixin with `items.length`', () => {
+  __setState({ ...defaultState });
 
-    const wrapper = mount(HierarchicalMenu, {
-      propsData: defaultProps,
-    });
+  const wrapper = mount(HierarchicalMenu, {
+    propsData: defaultProps,
+  });
 
-    const mapStateToCanRefine = () =>
-      wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
+  const mapStateToCanRefine = () =>
+    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
 
-    expect(mapStateToCanRefine()).toBe(true);
+  expect(mapStateToCanRefine()).toBe(true);
 
-    wrapper.setData({
-      state: {
-        items: [],
-      },
-    });
-
-    expect(mapStateToCanRefine()).toBe(false);
+  wrapper.setData({
+    state: {
+      items: [],
+    },
   });
+
+  expect(mapStateToCanRefine()).toBe(false);
+
+  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
 
 describe('custom default render', () => {
diff --git a/src/components/__tests__/HitsPerPage.js b/src/components/__tests__/HitsPerPage.js
@@ -99,4 +99,6 @@ it('calls the Panel mixin with `hasNoResults`', () => {
   });
 
   expect(mapStateToCanRefine()).toBe(false);
+
+  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
diff --git a/src/components/__tests__/Menu.js b/src/components/__tests__/Menu.js
@@ -313,27 +313,28 @@ describe('default render', () => {
 
     expect(toggleShowMore).toHaveBeenCalledTimes(1);
   });
+});
 
-  it('calls the Panel mixin with `canRefine`', () => {
-    __setState({ ...defaultState });
-
-    const wrapper = mount(Menu, {
-      propsData: defaultProps,
-    });
+it('calls the Panel mixin with `canRefine`', () => {
+  __setState({ ...defaultState });
 
-    const mapStateToCanRefine = () =>
-      wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
+  const wrapper = mount(Menu, {
+    propsData: defaultProps,
+  });
 
-    expect(mapStateToCanRefine()).toBe(true);
+  const mapStateToCanRefine = () =>
+    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
 
-    wrapper.setData({
-      state: {
-        canRefine: false,
-      },
-    });
+  expect(mapStateToCanRefine()).toBe(true);
 
-    expect(mapStateToCanRefine()).toBe(false);
+  wrapper.setData({
+    state: {
+      canRefine: false,
+    },
   });
+  expect(mapStateToCanRefine()).toBe(false);
+
+  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
 
 describe('custom default render', () => {
diff --git a/src/components/__tests__/MenuSelect.js b/src/components/__tests__/MenuSelect.js
@@ -199,27 +199,29 @@ describe('default render', () => {
     expect(refine).toHaveBeenCalledTimes(1);
     expect(refine).toHaveBeenCalledWith('Apple');
   });
+});
 
-  it('calls the Panel mixin with `canRefine`', () => {
-    __setState({ ...defaultState });
+it('calls the Panel mixin with `canRefine`', () => {
+  __setState({ ...defaultState });
 
-    const wrapper = mount(MenuSelect, {
-      propsData: defaultProps,
-    });
+  const wrapper = mount(MenuSelect, {
+    propsData: defaultProps,
+  });
 
-    const mapStateToCanRefine = () =>
-      wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
+  const mapStateToCanRefine = () =>
+    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
 
-    expect(mapStateToCanRefine()).toBe(true);
+  expect(mapStateToCanRefine()).toBe(true);
 
-    wrapper.setData({
-      state: {
-        canRefine: false,
-      },
-    });
-
-    expect(mapStateToCanRefine()).toBe(false);
+  wrapper.setData({
+    state: {
+      canRefine: false,
+    },
   });
+
+  expect(mapStateToCanRefine()).toBe(false);
+
+  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
 
 describe('custom item slot', () => {
diff --git a/src/components/__tests__/NumericMenu.js b/src/components/__tests__/NumericMenu.js
diff --git a/src/components/__tests__/Pagination.js b/src/components/__tests__/Pagination.js
diff --git a/src/components/__tests__/RangeInput.js b/src/components/__tests__/RangeInput.js
diff --git a/src/components/__tests__/RatingMenu.js b/src/components/__tests__/RatingMenu.js
diff --git a/src/components/__tests__/RefinementList.js b/src/components/__tests__/RefinementList.js
diff --git a/src/components/__tests__/SortBy.js b/src/components/__tests__/SortBy.js
diff --git a/src/components/__tests__/ToggleRefinement.js b/src/components/__tests__/ToggleRefinement.js
diff --git a/src/components/__tests__/__snapshots__/RefinementList.js.snap b/src/components/__tests__/__snapshots__/RefinementList.js.snap

Original file line number	Diff line number	Diff line change
`@@ -114,7 +114,7 @@`
`114`	`114`	`"bundlesize": [`
`115`	`115`	`{`
`116`	`116`	`"path": "./dist/vue-instantsearch.js",`
`117`		`- "maxSize": "48.00 kB"`
	`117`	`+ "maxSize": "48.10 kB"`
`118`	`118`	`},`
`119`	`119`	`{`
`120`	`120`	`"path": "./dist/vue-instantsearch.common.js",`