fix(connectToggleRefinement): fix onFacetValue/offFacetValue on render when using arrays for on/off

src/connectors/toggle-refinement/__tests__/connectToggleRefinement-test.js

@@ -152,6 +152,117 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/toggle-refi
     }
   });
 
+  it('Renders during init and render with array value', () => {
+    // test that the dummyRendering is called with the isFirstRendering
+    // flag set accordingly
+    const rendering = jest.fn();
+    const makeWidget = connectToggleRefinement(rendering);
+
+    const attribute = 'whatever';
+    const widget = makeWidget({
+      attribute,
+      on: ['a', 'b'],
+      off: ['c'],
+    });
+
+    const config = widget.getWidgetSearchParameters(new SearchParameters({}), {
+      uiState: {},
+    });
+    expect(config).toEqual(
+      new SearchParameters({
+        disjunctiveFacets: [attribute],
+        disjunctiveFacetsRefinements: {
+          [attribute]: ['c'],
+        },
+      })
+    );
+
+    const helper = jsHelper({}, '', config);
+    helper.search = jest.fn();
+
+    widget.init({
+      helper,
+      state: helper.state,
+      createURL: () => '#',
+    });
+
+    {
+      // should call the rendering once with isFirstRendering to true
+      expect(rendering).toHaveBeenCalledTimes(1);
+      const isFirstRendering =
+        rendering.mock.calls[rendering.mock.calls.length - 1][1];
+      expect(isFirstRendering).toBe(true);
+
+      // should provide good values for the first rendering
+      const { value, widgetParams } = rendering.mock.calls[
+        rendering.mock.calls.length - 1
+      ][0];
+      expect(value).toEqual({
+        name: 'whatever',
+        count: null,
+        isRefined: false,
+        onFacetValue: {
+          isRefined: false,
+          count: 0,
+        },
+        offFacetValue: {
+          isRefined: true,
+          count: 0,
+        },
+      });
+
+      expect(widgetParams).toEqual({
+        attribute,
+        on: ['a', 'b'],
+        off: ['c'],
+      });
+    }
+
+    widget.render({
+      results: new SearchResults(helper.state, [
+        {
+          facets: {
+            whatever: {
+              a: 45,
+              b: 20,
+              c: 20,
+            },
+          },
+          nbHits: 85,
+        },
+      ]),
+      state: helper.state,
+      helper,
+      createURL: () => '#',
+    });
+
+    {
+      // Should call the rendering a second time, with isFirstRendering to false
+      expect(rendering).toHaveBeenCalledTimes(2);
+      const isFirstRendering =
+        rendering.mock.calls[rendering.mock.calls.length - 1][1];
+      expect(isFirstRendering).toBe(false);
+
+      // should provide good values after the first search
+      const { value } = rendering.mock.calls[
+        rendering.mock.calls.length - 1
+      ][0];
+      expect(value).toEqual({
+        name: 'whatever',
+        count: 65,
+        isRefined: false,
+        onFacetValue: {
+          isRefined: false,
+          count: 65,
+        },
+        offFacetValue: {
+          isRefined: true,
+          count: 20,
+        },
+      });
+    }
+  });
+
   it('does not throw without the unmount function', () => {
     const rendering = () => {};
     const makeWidget = connectToggleRefinement(rendering);

src/connectors/toggle-refinement/connectToggleRefinement.js

@@ -209,30 +209,41 @@ export default function connectToggleRefinement(renderFn, unmountFn = noop) {
         const isRefined =
           on &&
           on.every(v => helper.state.isDisjunctiveFacetRefined(attribute, v));
-        const offValue = off === undefined ? false : off;
+        const offValue = toArray(off === undefined ? false : off);
         const allFacetValues = results.getFacetValues(attribute) || [];
 
-        const onData = find(
-          allFacetValues,
-          ({ name }) => name === unescapeRefinement(on)
-        );
+        const onData =
+          on &&
+          on
+            .map(v =>
+              find(allFacetValues, ({ name }) => name === unescapeRefinement(v))
+            )
+            .filter(v => v !== undefined);
         const onFacetValue = {
-          isRefined: onData !== undefined ? onData.isRefined : false,
-          count: onData === undefined ? null : onData.count,
+          isRefined: onData.length > 0 ? onData.every(v => v.isRefined) : false,
+          count:
+            onData.length === 0
+              ? null
+              : onData.reduce((acc, v) => acc + v.count, 0),
         };
 
         const offData = hasAnOffValue
-          ? find(
-              allFacetValues,
-              ({ name }) => name === unescapeRefinement(offValue)
-            )
-          : undefined;
+          ? offValue
+              .map(v =>
+                find(
+                  allFacetValues,
+                  ({ name }) => name === unescapeRefinement(v)
+                )
+              )
+              .filter(v => v !== undefined)
+          : [];
         const offFacetValue = {
-          isRefined: offData !== undefined ? offData.isRefined : false,
+          isRefined:
+            offData.length > 0 ? offData.every(v => v.isRefined) : false,
           count:
-            offData === undefined
+            offData.length === 0
               ? allFacetValues.reduce((total, { count }) => total + count, 0)
-              : offData.count,
+              : offData.reduce((acc, v) => acc + v.count, 0),
         };
 
         // what will we show by default,