fix(counts): missing formatNumber calls

Fix #560

Author: redox

lib/InstantSearch.js

@@ -39,11 +39,7 @@ Usage: instantsearch({
     this.searchParameters = searchParameters || {};
     this.widgets = [];
     this.templatesConfig = {
-      helpers: {
-        formatNumber(number, render) {
-          return Number(render(number)).toLocaleString(numberLocale);
-        }
-      },
+      helpers: require('./helpers.js')({numberLocale}),
       compileOptions: {}
     };
     this.urlSync = urlSync;

lib/helpers.js

@@ -0,0 +1,7 @@
+module.exports = function({numberLocale}) {
+  return {
+    formatNumber(number, render) {
+      return Number(render(number)).toLocaleString(numberLocale);
+    }
+  };
+};

widgets/hierarchical-menu/defaultTemplates.js

@@ -1,6 +1,6 @@
 module.exports = {
   header: '',
-  item: `<a class="{{cssClasses.link}}" href="{{url}}">{{name}} <span class="{{cssClasses.count}}">{{count}}</span></a>`,
+  item: `<a class="{{cssClasses.link}}" href="{{url}}">{{name}} <span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span></a>`,
   footer: ''
 };
 

widgets/menu/defaultTemplates.js

@@ -1,5 +1,5 @@
 module.exports = {
   header: '',
-  item: `<a class="{{cssClasses.link}}" href="{{url}}">{{name}} <span class="{{cssClasses.count}}">{{count}}</span></a>`,
+  item: `<a class="{{cssClasses.link}}" href="{{url}}">{{name}} <span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span></a>`,
   footer: ''
 };

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

@@ -1,13 +1,18 @@
 /* eslint-env mocha */
 
+import React from 'react';
 import expect from 'expect';
 import sinon from 'sinon';
 import jsdom from 'mocha-jsdom';
+import {createRenderer} from 'react-addons-test-utils';
 
 import expectJSX from 'expect-jsx';
 expect.extend(expectJSX);
 
 import refinementList from '../refinement-list';
+import Template from '../../../components/Template.js';
+
+const helpers = require('../../../lib/helpers.js')('en-US');
 
 describe('refinementList()', () => {
   let autoHideContainer;
@@ -16,6 +21,7 @@ describe('refinementList()', () => {
   let options;
   let widget;
   let ReactDOM;
+  let renderer = createRenderer();
 
   jsdom({useEach: true});
 
@@ -181,6 +187,16 @@ describe('refinementList()', () => {
       createURL = sinon.spy();
     });
 
+    it('formats counts', () => {
+      const props = {
+        templatesConfig: {helpers},
+        templates: require('../defaultTemplates')
+      };
+      renderer.render(<Template data={{count: 1000}} {...props} templateKey="item" />);
+      let out = renderer.getRenderOutput();
+      expect(out).toEqualJSX(<div className={undefined} dangerouslySetInnerHTML={{__html: '<label class="">\n <input type="checkbox" class="" value="" />\n <span class="">1,000</span>\n</label>'}} />);
+    });
+
     context('cssClasses', () => {
       it('should call the component with the correct classes', () => {
         // Given

widgets/refinement-list/defaultTemplates.js

@@ -2,7 +2,7 @@ module.exports = {
   header: '',
   item: `<label class="{{cssClasses.label}}">
   <input type="checkbox" class="{{cssClasses.checkbox}}" value="{{name}}" {{#isRefined}}checked{{/isRefined}} />{{name}}
-  <span class="{{cssClasses.count}}">{{count}}</span>
+  <span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>
 </label>`,
   footer: ''
 };

widgets/toggle/__tests__/toggle-test.js

@@ -4,16 +4,22 @@ import React from 'react';
 import expect from 'expect';
 import sinon from 'sinon';
 import jsdom from 'mocha-jsdom';
+import {createRenderer} from 'react-addons-test-utils';
 
 import toggle from '../toggle';
 import RefinementList from '../../../components/RefinementList/RefinementList.js';
+import Template from '../../../components/Template.js';
 
 import expectJSX from 'expect-jsx';
 expect.extend(expectJSX);
 
+const helpers = require('../../../lib/helpers.js')('en-US');
+
 describe('toggle()', () => {
   jsdom({useEach: true});
 
+  let renderer = createRenderer();
+
   context('bad usage', () => {
     it('throws when no container', () => {
       expect(() => {
@@ -123,6 +129,13 @@ describe('toggle()', () => {
         expect(ReactDOM.render.secondCall.args[1]).toEqual(container);
       });
 
+      it('formats counts', () => {
+        templateProps.templatesConfig = {helpers};
+        renderer.render(<Template data={{count: 1000}} {...templateProps} templateKey="item" />);
+        let out = renderer.getRenderOutput();
+        expect(out).toEqualJSX(<div className={undefined} dangerouslySetInnerHTML={{__html: '<label class="">\n <input type="checkbox" class="" value="" />\n <span class="">1,000</span>\n</label>'}} />);
+      });
+
       it('with facet values', () => {
         results = {
           hits: [{Hello: ', world!'}],

widgets/toggle/defaultTemplates.js

@@ -2,7 +2,7 @@ module.exports = {
   header: '',
   item: `<label class="{{cssClasses.label}}">
   <input type="checkbox" class="{{cssClasses.checkbox}}" value="{{name}}" {{#isRefined}}checked{{/isRefined}} />{{name}}
-  <span class="{{cssClasses.count}}">{{count}}</span>
+  <span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>
 </label>`,
   footer: ''
 };