feat(menu-select): implement transformItems

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`menuSelect render correctly 1`] = `
+exports[`menuSelect render renders correctly 1`] = `
 <HeaderFooter-AutoHide
   canRefine={true}
   cssClasses={
@@ -46,3 +46,52 @@ exports[`menuSelect render correctly 1`] = `
   }
 />
 `;
+
+exports[`menuSelect render renders transformed items correctly 1`] = `
+<HeaderFooter-AutoHide
+  canRefine={true}
+  cssClasses={
+    Object {
+      "footer": "ais-menu-select--footer",
+      "header": "ais-menu-select--header",
+      "option": "ais-menu-select--option",
+      "root": "ais-menu-select",
+      "select": "ais-menu-select--select",
+    }
+  }
+  items={
+    Array [
+      Object {
+        "label": "foo",
+        "transformed": true,
+        "value": undefined,
+      },
+      Object {
+        "label": "bar",
+        "transformed": true,
+        "value": undefined,
+      },
+    ]
+  }
+  refine={[Function]}
+  shouldAutoHideContainer={false}
+  templateProps={
+    Object {
+      "templates": Object {
+        "footer": "",
+        "header": "",
+        "item": "{{label}} ({{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}})",
+        "seeAllOption": "See all",
+      },
+      "templatesConfig": undefined,
+      "transformData": undefined,
+      "useCustomCompileOptions": Object {
+        "footer": false,
+        "header": false,
+        "item": false,
+        "seeAllOption": false,
+      },
+    }
+  }
+/>
+`;

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

@@ -1,5 +1,3 @@
-import sinon from 'sinon';
-
 import menuSelect from '../menu-select';
 
 describe('menuSelect', () => {
@@ -13,26 +11,55 @@ describe('menuSelect', () => {
     expect(menuSelect.bind(null, { attributeName })).toThrow(/^Usage/);
   });
 
-  it('render correctly', () => {
-    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() };
-    menuSelect.__Rewire__('render', ReactDOM.render);
-    const widget = menuSelect({
-      container: document.createElement('div'),
-      attributeName: 'test',
+  describe('render', () => {
+    let ReactDOM;
+    let data;
+    let results;
+    let state;
+    let helper;
+
+    beforeEach(() => {
+      ReactDOM = { render: jest.fn() };
+      menuSelect.__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('renders correctly', () => {
+      const widget = menuSelect({
+        container: document.createElement('div'),
+        attributeName: 'test',
+      });
+
+      widget.init({ helper, createURL: () => '#', instantSearchInstance: {} });
+      widget.render({ results, createURL: () => '#', state });
+
+      expect(ReactDOM.render.mock.calls[0][0]).toMatchSnapshot();
+    });
+
+    it('renders transformed items correctly', () => {
+      const widget = menuSelect({
+        container: document.createElement('div'),
+        attributeName: 'test',
+        transformItems: items =>
+          items.map(item => ({ ...item, transformed: true })),
+      });
+
+      widget.init({ helper, createURL: () => '#', instantSearchInstance: {} });
+      widget.render({ results, createURL: () => '#', state });
+
+      expect(ReactDOM.render.mock.calls[0][0]).toMatchSnapshot();
+    });
+
+    afterEach(() => {
+      menuSelect.__ResetDependency__('render');
     });
-    const instantSearchInstance = { templatesConfig: undefined };
-    widget.init({ helper, createURL, instantSearchInstance });
-    widget.render({ results, createURL, state });
-    expect(ReactDOM.render.firstCall.args[0]).toMatchSnapshot();
-    menuSelect.__ResetDependency__('render');
   });
 });

src/widgets/menu-select/menu-select.js

@@ -59,6 +59,7 @@ menuSelect({
   [ templates.{header,item,footer,seeAllOption} ],
   [ transformData.{item} ],
   [ autoHideContainer ]
+  [ transformItems ]
 })`;
 
 /**
@@ -95,6 +96,7 @@ menuSelect({
  * @property {MenuSelectTransforms} [transformData] Set of functions to update the data before passing them to the templates.
  * @property {boolean} [autoHideContainer=true] Hide the container when there are no items in the menu select.
  * @property {MenuSelectCSSClasses} [cssClasses] CSS classes to add to the wrapping elements.
+ * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
 /**
@@ -124,6 +126,7 @@ export default function menuSelect({
   templates = defaultTemplates,
   transformData,
   autoHideContainer = true,
+  transformItems,
 }) {
   if (!container || !attributeName) {
     throw new Error(usage);
@@ -149,7 +152,7 @@ export default function menuSelect({
 
   try {
     const makeWidget = connectMenu(specializedRenderer);
-    return makeWidget({ attributeName, limit, sortBy });
+    return makeWidget({ attributeName, limit, sortBy, transformItems });
   } catch (e) {
     throw new Error(usage);
   }