fix(connectors): prefer wrappers over bind (#2575)

* fix(connectors): prefer wrappers over bind
Previously we were using bind, which will be applied at each init. This
is ok for one time mount, but since we can mount and unmount dynamically
now, it's a problem.

* chore: fix test for price-range and toggle widgets
* refactor: remove unnecessary spread

Author: bobylito

src/connectors/price-ranges/connectPriceRanges.js

@@ -158,13 +158,15 @@ export default function connectPriceRanges(renderFn, unmountFn) {
       },
 
       init({ helper, instantSearchInstance }) {
-        this._refine = this._refine.bind(this, helper);
+        this.refine = opts => {
+          this._refine(helper, opts);
+        };
 
         renderFn(
           {
             instantSearchInstance,
             items: [],
-            refine: this._refine,
+            refine: this.refine,
             widgetParams,
           },
           true
@@ -209,7 +211,7 @@ export default function connectPriceRanges(renderFn, unmountFn) {
         renderFn(
           {
             items: facetValues,
-            refine: this._refine,
+            refine: this.refine,
             widgetParams,
             instantSearchInstance,
           },

src/connectors/toggle/connectToggle.js

@@ -128,7 +128,7 @@ export default function connectToggle(renderFn, unmountFn) {
         };
       },
 
-      toggleRefinement(helper, { isRefined } = {}) {
+      _toggleRefinement(helper, { isRefined } = {}) {
         // Checking
         if (!isRefined) {
           if (hasAnOffValue) {
@@ -160,7 +160,9 @@ export default function connectToggle(renderFn, unmountFn) {
               )
           );
 
-        this.toggleRefinement = this.toggleRefinement.bind(this, helper);
+        this.toggleRefinement = opts => {
+          this._toggleRefinement(helper, opts);
+        };
 
         const isRefined = state.isDisjunctiveFacetRefined(attributeName, on);
 

src/widgets/price-ranges/__tests__/price-ranges-test.js

@@ -146,7 +146,7 @@ describe('priceRanges()', () => {
     });
 
     it('refines on the lower bound', () => {
-      widget._refine({ from: 10, to: undefined });
+      widget.refine({ from: 10, to: undefined });
       expect(helper.clearRefinements.calledOnce).toBe(
         true,
         'helper.clearRefinements called once'
@@ -159,7 +159,7 @@ describe('priceRanges()', () => {
     });
 
     it('refines on the upper bound', () => {
-      widget._refine({ fromt: undefined, to: 10 });
+      widget.refine({ fromt: undefined, to: 10 });
       expect(helper.clearRefinements.calledOnce).toBe(
         true,
         'helper.clearRefinements called once'
@@ -168,7 +168,7 @@ describe('priceRanges()', () => {
     });
 
     it('refines on the 2 bounds', () => {
-      widget._refine({ from: 10, to: 20 });
+      widget.refine({ from: 10, to: 20 });
       expect(helper.clearRefinements.calledOnce).toBe(
         true,
         'helper.clearRefinements called once'

src/widgets/toggle/__tests__/currentToggle-test.js

@@ -400,10 +400,10 @@ describe('currentToggle()', () => {
       let helper;
 
       function toggleOn() {
-        widget.toggleRefinement(helper, { isRefined: false });
+        widget.toggleRefinement({ isRefined: false });
       }
       function toggleOff() {
-        widget.toggleRefinement(helper, { isRefined: true });
+        widget.toggleRefinement({ isRefined: true });
       }
 
       beforeEach(() => {
@@ -424,6 +424,11 @@ describe('currentToggle()', () => {
             userValues,
           });
           widget.getConfiguration();
+          const state = {
+            isDisjunctiveFacetRefined: sinon.stub().returns(false),
+          };
+          const createURL = () => '#';
+          widget.init({ state, helper, createURL, instantSearchInstance });
 
           // When
           toggleOn();
@@ -443,6 +448,11 @@ describe('currentToggle()', () => {
             userValues,
           });
           widget.getConfiguration();
+          const state = {
+            isDisjunctiveFacetRefined: sinon.stub().returns(true),
+          };
+          const createURL = () => '#';
+          widget.init({ state, helper, createURL, instantSearchInstance });
 
           // When
           toggleOff();
@@ -468,6 +478,11 @@ describe('currentToggle()', () => {
             values: userValues,
           });
           widget.getConfiguration();
+          const state = {
+            isDisjunctiveFacetRefined: sinon.stub().returns(false),
+          };
+          const createURL = () => '#';
+          widget.init({ state, helper, createURL, instantSearchInstance });
 
           // When
           toggleOn();
@@ -494,6 +509,11 @@ describe('currentToggle()', () => {
             values: userValues,
           });
           widget.getConfiguration();
+          const state = {
+            isDisjunctiveFacetRefined: sinon.stub().returns(true),
+          };
+          const createURL = () => '#';
+          widget.init({ state, helper, createURL, instantSearchInstance });
 
           // When
           toggleOff();