feat(refinement-list): implement transformItems

dev/app/builtin/stories/refinement-list.stories.js

@@ -115,5 +115,55 @@ export default () => {
           })
         );
       })
+    )
+    .add(
+      'with transformed items',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.refinementList({
+            container,
+            attributeName: 'brand',
+            operator: 'or',
+            limit: 10,
+            templates: {
+              header: 'Transformed brands',
+            },
+            transformItems: items =>
+              items.map(item => ({
+                ...item,
+                label: `${item.label} (transformed)`,
+                highlighted: `${item.highlighted} (transformed)`,
+              })),
+          })
+        );
+      })
+    )
+    .add(
+      'with searchable transformed items',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.refinementList({
+            container,
+            attributeName: 'brand',
+            operator: 'or',
+            limit: 10,
+            templates: {
+              header: 'Transformed searchable brands',
+            },
+            searchForFacetValues: {
+              placeholder: 'Find other brands...',
+              templates: {
+                noResults: 'No results',
+              },
+            },
+            transformItems: items =>
+              items.map(item => ({
+                ...item,
+                label: `${item.label} (transformed)`,
+                highlighted: `${item.highlighted} (transformed)`,
+              })),
+          })
+        );
+      })
     );
 };

src/connectors/refinement-list/__tests__/connectRefinementList-test.js

@@ -145,6 +145,69 @@ describe('connectRefinementList', () => {
     });
   });
 
+  it('transforms items if requested', () => {
+    const { makeWidget, rendering } = createWidgetFactory();
+    const widget = makeWidget({
+      attributeName: 'category',
+      transformItems: items =>
+        items.map(item => ({
+          ...item,
+          label: 'transformed',
+          value: 'transformed',
+          highlighted: 'transformed',
+        })),
+    });
+
+    const helper = jsHelper({}, '', widget.getConfiguration({}));
+    helper.search = jest.fn();
+
+    widget.init({
+      helper,
+      state: helper.state,
+    });
+
+    const firstRenderingOptions = rendering.mock.calls[0][0];
+    expect(firstRenderingOptions.items).toEqual([]);
+
+    widget.render({
+      results: new SearchResults(helper.state, [
+        {
+          hits: [],
+          facets: {
+            category: {
+              c1: 880,
+              c2: 47,
+            },
+          },
+        },
+        {
+          facets: {
+            category: {
+              c1: 880,
+              c2: 47,
+            },
+          },
+        },
+      ]),
+      state: helper.state,
+      helper,
+    });
+
+    const secondRenderingOptions = rendering.mock.calls[1][0];
+    expect(secondRenderingOptions.items).toEqual([
+      expect.objectContaining({
+        label: 'transformed',
+        value: 'transformed',
+        highlighted: 'transformed',
+      }),
+      expect.objectContaining({
+        label: 'transformed',
+        value: 'transformed',
+        highlighted: 'transformed',
+      }),
+    ]);
+  });
+
   it('Provide a function to clear the refinements at each step', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
@@ -737,6 +800,110 @@ describe('connectRefinementList', () => {
     });
   });
 
+  it('can search in facet values with transformed items', () => {
+    const { makeWidget, rendering } = createWidgetFactory();
+    const widget = makeWidget({
+      attributeName: 'category',
+      limit: 2,
+      transformItems: items =>
+        items.map(item => ({
+          ...item,
+          label: 'transformed',
+          value: 'transformed',
+          highlighted: 'transformed',
+        })),
+    });
+
+    const helper = jsHelper({}, '', widget.getConfiguration({}));
+    helper.search = jest.fn();
+    helper.searchForFacetValues = jest.fn().mockReturnValue(
+      Promise.resolve({
+        exhaustiveFacetsCount: true,
+        facetHits: [
+          {
+            count: 33,
+            highlighted: 'will be transformed',
+            value: 'will be transformed',
+          },
+          {
+            count: 9,
+            highlighted: 'will be transformed',
+            value: 'will be transformed',
+          },
+        ],
+        processingTimeMS: 1,
+      })
+    );
+
+    // Simulate the lifecycle
+    widget.init({
+      helper,
+      state: helper.state,
+      createURL: () => '#',
+      onHistoryChange: () => {},
+    });
+    expect(rendering).toHaveBeenCalledTimes(1);
+
+    widget.render({
+      results: new SearchResults(helper.state, [
+        {
+          hits: [],
+          facets: {
+            category: {
+              c1: 880,
+            },
+          },
+        },
+        {
+          facets: {
+            category: {
+              c1: 880,
+            },
+          },
+        },
+      ]),
+      state: helper.state,
+      helper,
+      createURL: () => '#',
+    });
+    expect(rendering).toHaveBeenCalledTimes(2);
+    // Simulation end
+
+    const search = rendering.mock.calls[1][0].searchForItems;
+    search('transfo');
+
+    const [
+      sffvFacet,
+      sffvQuery,
+      maxNbItems,
+      paramOverride,
+    ] = helper.searchForFacetValues.mock.calls[0];
+
+    expect(sffvQuery).toBe('transfo');
+    expect(sffvFacet).toBe('category');
+    expect(maxNbItems).toBe(2);
+    expect(paramOverride).toEqual({
+      highlightPreTag: undefined,
+      highlightPostTag: undefined,
+    });
+
+    return Promise.resolve().then(() => {
+      expect(rendering).toHaveBeenCalledTimes(3);
+      expect(rendering.mock.calls[2][0].items).toEqual([
+        expect.objectContaining({
+          highlighted: 'transformed',
+          label: 'transformed',
+          value: 'transformed',
+        }),
+        expect.objectContaining({
+          highlighted: 'transformed',
+          label: 'transformed',
+          value: 'transformed',
+        }),
+      ]);
+    });
+  });
+
   it('can search in facet values, and reset pre post tags if needed', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({

src/connectors/refinement-list/connectRefinementList.js

@@ -25,7 +25,8 @@ search.addWidget(
     [ limit ],
     [ showMoreLimit ],
     [ sortBy = ['isRefined', 'count:desc', 'name:asc'] ],
-    [ escapeFacetValues = false ]
+    [ escapeFacetValues = false ],
+    [ transformItems ]
   })
 );
 
@@ -69,6 +70,7 @@ export const checkUsage = ({
  * is showing more items.
  * @property {string[]|function} [sortBy = ['isRefined', 'count:desc', 'name:asc']] How to sort refinements. Possible values: `count|isRefined|name:asc|name:desc`.
  * @property {boolean} [escapeFacetValues = false] Escapes the content of the facet values.
+ * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
 /**
@@ -159,6 +161,7 @@ export default function connectRefinementList(renderFn, unmountFn) {
       showMoreLimit,
       sortBy = ['isRefined', 'count:desc', 'name:asc'],
       escapeFacetValues = false,
+      transformItems = items => items,
     } = widgetParams;
 
     checkUsage({
@@ -267,12 +270,12 @@ export default function connectRefinementList(renderFn, unmountFn) {
               ? escapeFacets(results.facetHits)
               : results.facetHits;
 
-            const normalizedFacetValues = facetValues.map(
-              ({ value, ...item }) => ({
+            const normalizedFacetValues = transformItems(
+              facetValues.map(({ value, ...item }) => ({
                 ...item,
                 value,
                 label: value,
-              })
+              }))
             );
 
             render({
@@ -369,7 +372,9 @@ export default function connectRefinementList(renderFn, unmountFn) {
         } = renderOptions;
 
         const facetValues = results.getFacetValues(attributeName, { sortBy });
-        const items = facetValues.slice(0, this.getLimit()).map(formatItems);
+        const items = transformItems(
+          facetValues.slice(0, this.getLimit()).map(formatItems)
+        );
 
         const maxValuesPerFacetConfig = state.getQueryParameter(
           'maxValuesPerFacet'

src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`refinementList() render renders transformed items correctly 1`] = `
+<HeaderFooter-AutoHide
+  canToggleShowMore={false}
+  collapsible={false}
+  createURL={[Function]}
+  cssClasses={
+    Object {
+      "active": "ais-refinement-list--item__active",
+      "body": "ais-refinement-list--body",
+      "checkbox": "ais-refinement-list--checkbox",
+      "count": "ais-refinement-list--count",
+      "footer": "ais-refinement-list--footer",
+      "header": "ais-refinement-list--header",
+      "item": "ais-refinement-list--item",
+      "label": "ais-refinement-list--label",
+      "list": "ais-refinement-list--list",
+      "root": "ais-refinement-list",
+    }
+  }
+  facetValues={
+    Array [
+      Object {
+        "highlighted": "foo",
+        "label": "foo",
+        "transformed": true,
+        "value": "foo",
+      },
+      Object {
+        "highlighted": "bar",
+        "label": "bar",
+        "transformed": true,
+        "value": "bar",
+      },
+    ]
+  }
+  hasExhaustiveItems={true}
+  headerFooterData={
+    Object {
+      "header": Object {
+        "refinedFacetsCount": 0,
+      },
+    }
+  }
+  isFromSearch={false}
+  isShowingMore={false}
+  searchFacetValues={undefined}
+  searchIsAlwaysActive={false}
+  searchPlaceholder="Search for other..."
+  shouldAutoHideContainer={false}
+  showMore={false}
+  templateProps={
+    Object {
+      "templates": Object {
+        "footer": "",
+        "header": "",
+        "item": "<label class=\\"{{cssClasses.label}}\\">
+  <input type=\\"checkbox\\"
+         class=\\"{{cssClasses.checkbox}}\\"
+         value=\\"{{value}}\\"
+         {{#isRefined}}checked{{/isRefined}} />
+      {{{highlighted}}}
+  <span class=\\"{{cssClasses.count}}\\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>
+</label>",
+      },
+      "templatesConfig": Object {},
+      "transformData": undefined,
+      "useCustomCompileOptions": Object {
+        "footer": false,
+        "header": false,
+        "item": false,
+      },
+    }
+  }
+  toggleRefinement={[Function]}
+  toggleShowMore={[Function]}
+/>
+`;

src/widgets/refinement-list/__tests__/refinement-list-test.js

@@ -185,6 +185,23 @@ describe('refinementList()', () => {
         expect(props.headerFooterData.header.refinedFacetsCount).toEqual(2);
       });
     });
+
+    it('renders transformed items correctly', () => {
+      widget = refinementList({
+        ...options,
+        transformItems: items =>
+          items.map(item => ({ ...item, transformed: true })),
+      });
+
+      widget.init({
+        helper,
+        createURL,
+        instantSearchInstance,
+      });
+      widget.render({ results, helper, state });
+
+      expect(ReactDOM.render.firstCall.args[0]).toMatchSnapshot();
+    });
   });
 
   describe('show more', () => {