feat(menu): implement transformItems

dev/app/builtin/stories/menu.stories.js

@@ -19,6 +19,22 @@ export default () => {
         );
       })
     )
+    .add(
+      'with transformed items',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.menu({
+            container,
+            attributeName: 'categories',
+            transformItems: items =>
+              items.map(item => ({
+                ...item,
+                label: `${item.label} (transformed)`,
+              })),
+          })
+        );
+      })
+    )
     .add(
       'with show more and header',
       wrapWithHits(container => {

src/connectors/menu/__tests__/connectMenu-test.js

@@ -230,6 +230,59 @@ describe('connectMenu', () => {
     ]);
   });
 
+  it('provides the correct transformed facet values', () => {
+    const widget = makeWidget({
+      attributeName: 'category',
+      transformItems: items =>
+        items.map(item => ({
+          ...item,
+          label: 'transformed',
+        })),
+    });
+
+    const helper = jsHelper({}, '', widget.getConfiguration({}));
+    helper.search = sinon.stub();
+
+    helper.toggleRefinement('category', 'Decoration');
+
+    widget.init({
+      helper,
+      state: helper.state,
+    });
+
+    const firstRenderingOptions = rendering.lastCall.args[0];
+    expect(firstRenderingOptions.items).toEqual([]);
+
+    widget.render({
+      results: new SearchResults(helper.state, [
+        {
+          hits: [],
+          facets: {
+            category: {
+              Decoration: 880,
+            },
+          },
+        },
+        {
+          facets: {
+            category: {
+              Decoration: 880,
+              Outdoor: 47,
+            },
+          },
+        },
+      ]),
+      state: helper.state,
+      helper,
+    });
+
+    const secondRenderingOptions = rendering.lastCall.args[0];
+    expect(secondRenderingOptions.items).toEqual([
+      expect.objectContaining({ label: 'transformed' }),
+      expect.objectContaining({ label: 'transformed' }),
+    ]);
+  });
+
   describe('showMore', () => {
     it('should throw when `showMoreLimit` is lower than `limit`', () => {
       expect(() =>

src/connectors/menu/connectMenu.js

@@ -19,6 +19,7 @@ search.addWidget(
     [ limit ],
     [ showMoreLimit ]
     [ sortBy = ['name:asc'] ]
+    [ transformItems ]
   })
 );
 Full documentation available at https://community.algolia.com/instantsearch.js/v2/connectors/connectMenu.html
@@ -40,6 +41,7 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v
  * @property {string[]|function} [sortBy = ['name:asc']] How to sort refinements. Possible values: `count|isRefined|name:asc|name:desc`.
  *
  * You can also use a sort function that behaves like the standard Javascript [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Syntax).
+ * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
 /**
@@ -113,6 +115,7 @@ export default function connectMenu(renderFn, unmountFn) {
       limit = 10,
       sortBy = ['name:asc'],
       showMoreLimit,
+      transformItems = items => items,
     } = widgetParams;
 
     if (!attributeName || (!isNaN(showMoreLimit) && showMoreLimit < limit)) {
@@ -200,13 +203,15 @@ export default function connectMenu(renderFn, unmountFn) {
       render({ results, instantSearchInstance }) {
         const facetItems =
           results.getFacetValues(attributeName, { sortBy }).data || [];
-        const items = facetItems
-          .slice(0, this.getLimit())
-          .map(({ name: label, path: value, ...item }) => ({
-            ...item,
-            label,
-            value,
-          }));
+        const items = transformItems(
+          facetItems
+            .slice(0, this.getLimit())
+            .map(({ name: label, path: value, ...item }) => ({
+              ...item,
+              label,
+              value,
+            }))
+        );
 
         this.toggleShowMore = this.createToggleShowMore({
           results,

src/widgets/menu/__tests__/__snapshots__/menu-test.js.snap

@@ -1,6 +1,64 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`menu snapshot 1`] = `
+exports[`menu render renders transformed items 1`] = `
+<HeaderFooter-AutoHide
+  canToggleShowMore={false}
+  collapsible={false}
+  createURL={[Function]}
+  cssClasses={
+    Object {
+      "active": "ais-menu--item__active",
+      "body": "ais-menu--body",
+      "count": "ais-menu--count",
+      "footer": "ais-menu--footer",
+      "header": "ais-menu--header",
+      "item": "ais-menu--item",
+      "link": "ais-menu--link",
+      "list": "ais-menu--list",
+      "root": "ais-menu",
+    }
+  }
+  facetValues={
+    Array [
+      Object {
+        "label": "foo",
+        "transformed": true,
+        "url": "#",
+        "value": undefined,
+      },
+      Object {
+        "label": "bar",
+        "transformed": true,
+        "url": "#",
+        "value": undefined,
+      },
+    ]
+  }
+  isShowingMore={false}
+  shouldAutoHideContainer={false}
+  showMore={false}
+  templateProps={
+    Object {
+      "templates": Object {
+        "footer": "",
+        "header": "",
+        "item": "<a class=\\"{{cssClasses.link}}\\" href=\\"{{url}}\\">{{label}} <span class=\\"{{cssClasses.count}}\\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span></a>",
+      },
+      "templatesConfig": undefined,
+      "transformData": undefined,
+      "useCustomCompileOptions": Object {
+        "footer": false,
+        "header": false,
+        "item": false,
+      },
+    }
+  }
+  toggleRefinement={[Function]}
+  toggleShowMore={[Function]}
+/>
+`;
+
+exports[`menu render snapshot 1`] = `
 <HeaderFooter-AutoHide
   canToggleShowMore={false}
   collapsible={false}

src/widgets/menu/__tests__/menu-test.js

@@ -1,7 +1,5 @@
 import menu from '../menu';
 
-import sinon from 'sinon';
-
 describe('menu', () => {
   it('throws an exception when no attributeName', () => {
     const container = document.createElement('div');
@@ -13,26 +11,63 @@ describe('menu', () => {
     expect(menu.bind(null, { attributeName })).toThrow(/^Usage/);
   });
 
-  it('snapshot', () => {
-    const data = { data: [{ name: 'foo' }, { name: 'bar' }] };
-    const results = { getFacetValues: sinon.spy(() => data) };
-    const state = { toggleRefinement: sinon.spy() };
-    const helper = {
-      toggleRefinement: sinon.stub().returnsThis(),
-      search: sinon.spy(),
-      state,
-    };
-    const createURL = () => '#';
-    const ReactDOM = { render: sinon.spy() };
-    menu.__Rewire__('render', ReactDOM.render);
-    const widget = menu({
-      container: document.createElement('div'),
-      attributeName: 'test',
+  describe('render', () => {
+    let ReactDOM;
+    let data;
+    let results;
+    let state;
+    let helper;
+
+    beforeEach(() => {
+      ReactDOM = { render: jest.fn() };
+      menu.__Rewire__('render', ReactDOM.render);
+
+      data = { data: [{ name: 'foo' }, { name: 'bar' }] };
+      results = { getFacetValues: jest.fn(() => data) };
+      state = { toggleRefinement: jest.fn() };
+      helper = {
+        toggleRefinement: jest.fn().mockReturnThis(),
+        search: jest.fn(),
+        state,
+      };
+    });
+
+    it('snapshot', () => {
+      const widget = menu({
+        container: document.createElement('div'),
+        attributeName: 'test',
+      });
+
+      widget.init({
+        helper,
+        createURL: () => '#',
+        instantSearchInstance: { templatesConfig: undefined },
+      });
+      widget.render({ results, state });
+
+      expect(ReactDOM.render.mock.calls[0][0]).toMatchSnapshot();
+    });
+
+    it('renders transformed items', () => {
+      const widget = menu({
+        container: document.createElement('div'),
+        attributeName: 'test',
+        transformItems: items =>
+          items.map(item => ({ ...item, transformed: true })),
+      });
+
+      widget.init({
+        helper,
+        createURL: () => '#',
+        instantSearchInstance: { templatesConfig: undefined },
+      });
+      widget.render({ results, state });
+
+      expect(ReactDOM.render.mock.calls[0][0]).toMatchSnapshot();
+    });
+
+    afterEach(() => {
+      menu.__ResetDependency__('render');
     });
-    const instantSearchInstance = { templatesConfig: undefined };
-    widget.init({ helper, createURL, instantSearchInstance });
-    widget.render({ results, createURL, state });
-    expect(ReactDOM.render.firstCall.args[0]).toMatchSnapshot();
-    menu.__ResetDependency__('render');
   });
 });

src/widgets/menu/menu.js

@@ -82,7 +82,8 @@ menu({
   [ transformData.{item} ],
   [ autoHideContainer ],
   [ showMore.{templates: {active, inactive}, limit} ],
-  [ collapsible=false ]
+  [ collapsible=false ],
+  [ transformItems ]
 })`;
 
 /**
@@ -136,6 +137,7 @@ menu({
  * @property {boolean} [autoHideContainer=true] Hide the container when there are no items in the menu.
  * @property {MenuCSSClasses} [cssClasses] CSS classes to add to the wrapping elements.
  * @property {boolean|{collapsible: boolean}} [collapsible=false] Hide the widget body and footer when clicking on header.
+ * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
 /**
@@ -174,6 +176,7 @@ export default function menu({
   transformData,
   autoHideContainer = true,
   showMore = false,
+  transformItems,
 }) {
   if (!container) {
     throw new Error(usage);
@@ -220,7 +223,13 @@ export default function menu({
     const makeWidget = connectMenu(specializedRenderer, () =>
       unmountComponentAtNode(containerNode)
     );
-    return makeWidget({ attributeName, limit, sortBy, showMoreLimit });
+    return makeWidget({
+      attributeName,
+      limit,
+      sortBy,
+      showMoreLimit,
+      transformItems,
+    });
   } catch (e) {
     throw new Error(usage);
   }