From 65e5ba02e03bcac961d58fc58f6235d0723d8209 Mon Sep 17 00:00:00 2001
From: Sylvain UTARD <sylvain.utard@gmail.com>
Date: Wed, 11 Nov 2015 17:25:39 -0800
Subject: [PATCH] fix(counts): missing formatNumber calls

Fix #560
---
 lib/InstantSearch.js                             |  6 +-----
 lib/helpers.js                                   |  7 +++++++
 widgets/hierarchical-menu/defaultTemplates.js    |  2 +-
 widgets/menu/defaultTemplates.js                 |  2 +-
 .../__tests__/refinement-list-test.js            | 16 ++++++++++++++++
 widgets/refinement-list/defaultTemplates.js      |  2 +-
 widgets/toggle/__tests__/toggle-test.js          | 13 +++++++++++++
 widgets/toggle/defaultTemplates.js               |  2 +-
 8 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 lib/helpers.js

diff --git a/lib/InstantSearch.js b/lib/InstantSearch.js
index 4b5ed946b6..134c442c51 100644
--- a/lib/InstantSearch.js
+++ b/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;
diff --git a/lib/helpers.js b/lib/helpers.js
new file mode 100644
index 0000000000..fbc9256aa5
--- /dev/null
+++ b/lib/helpers.js
@@ -0,0 +1,7 @@
+module.exports = function({numberLocale}) {
+  return {
+    formatNumber(number, render) {
+      return Number(render(number)).toLocaleString(numberLocale);
+    }
+  };
+};
diff --git a/widgets/hierarchical-menu/defaultTemplates.js b/widgets/hierarchical-menu/defaultTemplates.js
index 78e159c86e..46c884dd29 100644
--- a/widgets/hierarchical-menu/defaultTemplates.js
+++ b/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: ''
 };
 
diff --git a/widgets/menu/defaultTemplates.js b/widgets/menu/defaultTemplates.js
index f568676e93..8004875d8b 100644
--- a/widgets/menu/defaultTemplates.js
+++ b/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: ''
 };
diff --git a/widgets/refinement-list/__tests__/refinement-list-test.js b/widgets/refinement-list/__tests__/refinement-list-test.js
index 2634cbdfd2..aff2e77151 100644
--- a/widgets/refinement-list/__tests__/refinement-list-test.js
+++ b/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
diff --git a/widgets/refinement-list/defaultTemplates.js b/widgets/refinement-list/defaultTemplates.js
index 2801c7e434..9e8e03e074 100644
--- a/widgets/refinement-list/defaultTemplates.js
+++ b/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: ''
 };
diff --git a/widgets/toggle/__tests__/toggle-test.js b/widgets/toggle/__tests__/toggle-test.js
index 590dfb6526..d9ca28d2aa 100644
--- a/widgets/toggle/__tests__/toggle-test.js
+++ b/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!'}],
diff --git a/widgets/toggle/defaultTemplates.js b/widgets/toggle/defaultTemplates.js
index 2801c7e434..9e8e03e074 100644
--- a/widgets/toggle/defaultTemplates.js
+++ b/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: ''
 };