feat(numeric-selector): implement InstantSearch.css

dev/app/builtin/stories/numeric-selector.stories.js

@@ -14,7 +14,7 @@ export default () => {
         instantsearch.widgets.numericSelector({
           container,
           operator: '>=',
-          attributeName: 'popularity',
+          attribute: 'popularity',
           options: [
             { label: 'Default', value: 0 },
             { label: 'Top 10', value: 21459 },
@@ -32,7 +32,7 @@ export default () => {
         instantsearch.widgets.numericSelector({
           container,
           operator: '=',
-          attributeName: 'rating',
+          attribute: 'rating',
           options: [
             { label: 'No rating selected', value: undefined },
             { label: 'Rating: 5', value: 5 },
@@ -52,7 +52,7 @@ export default () => {
         instantsearch.widgets.numericSelector({
           container,
           operator: '=',
-          attributeName: 'rating',
+          attribute: 'rating',
           options: [
             { label: 'No rating selected', value: undefined },
             { label: 'Rating: 5', value: 5 },

dev/app/jquery/stories/numeric-selector.stories.js

@@ -12,7 +12,7 @@ export default () => {
         widgets.numericSelector({
           containerNode,
           operator: '>=',
-          attributeName: 'popularity',
+          attribute: 'popularity',
           options: [
             { label: 'Default', value: 0 },
             { label: 'Top 10', value: 9991 },

src/components/Selector.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'preact-compat';
-import cx from 'classnames';
 
 class Selector extends Component {
   componentWillMount() {
@@ -16,13 +15,13 @@ class Selector extends Component {
 
     return (
       <select
-        className={cx(this.props.cssClasses.select)}
+        className={this.props.cssClasses.select}
         onChange={this.handleChange}
         value={`${currentValue}`}
       >
         {options.map(option => (
           <option
-            className={cx(this.props.cssClasses.option)}
+            className={this.props.cssClasses.option}
             key={option.label + option.value}
             value={`${option.value}`}
           >
@@ -36,19 +35,10 @@ class Selector extends Component {
 
 Selector.propTypes = {
   cssClasses: PropTypes.shape({
-    root: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string),
-    ]),
-    select: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string),
-    ]),
-    option: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string),
-    ]),
-  }),
+    root: PropTypes.string.isRequired,
+    select: PropTypes.string.isRequired,
+    option: PropTypes.string.isRequired,
+  }).isRequired,
   currentValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   options: PropTypes.arrayOf(
     PropTypes.shape({

src/components/__tests__/Selector-test.js

@@ -1,9 +1,9 @@
 import React from 'react';
+import { mount } from 'enzyme';
 import Selector from '../Selector';
-import renderer from 'react-test-renderer';
 
 describe('Selector', () => {
-  it('should render <Selector/> with strings', () => {
+  it('should render <Selector /> with strings', () => {
     const props = {
       currentValue: 'index-a',
       setValue: () => {},
@@ -17,11 +17,12 @@ describe('Selector', () => {
         { value: 'index-b', label: 'Index B' },
       ],
     };
-    const tree = renderer.create(<Selector {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
+    const wrapper = mount(<Selector {...props} />);
+
+    expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render <Selector/> with numbers', () => {
+  it('should render <Selector /> with numbers', () => {
     const props = {
       currentValue: 10,
       setValue: () => {},
@@ -35,7 +36,8 @@ describe('Selector', () => {
         { value: 20, label: '20 results per page' },
       ],
     };
-    const tree = renderer.create(<Selector {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
+    const wrapper = mount(<Selector {...props} />);
+
+    expect(wrapper).toMatchSnapshot();
   });
 });

src/components/__tests__/__snapshots__/Selector-test.js.snap

@@ -1,40 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Selector should render <Selector/> with numbers 1`] = `
+exports[`Selector should render <Selector /> with numbers 1`] = `
 <select
   className="custom-select"
   onChange={[Function]}
   value="10"
 >
   <option
     className="custom-option"
+    key="10 results per page10"
     value="10"
   >
     10 results per page
   </option>
   <option
     className="custom-option"
+    key="20 results per page20"
     value="20"
   >
     20 results per page
   </option>
 </select>
 `;
 
-exports[`Selector should render <Selector/> with strings 1`] = `
+exports[`Selector should render <Selector /> with strings 1`] = `
 <select
   className="custom-select"
   onChange={[Function]}
   value="index-a"
 >
   <option
     className="custom-option"
+    key="Index Aindex-a"
     value="index-a"
   >
     Index A
   </option>
   <option
     className="custom-option"
+    key="Index Bindex-b"
     value="index-b"
   >
     Index B

src/connectors/numeric-selector/__tests__/connectNumericSelector-test.js

@@ -17,7 +17,7 @@ describe('connectNumericSelector', () => {
       { name: '30', value: 30 },
     ];
     const widget = makeWidget({
-      attributeName: 'numerics',
+      attribute: 'numerics',
       options: listOptions,
     });
 
@@ -51,7 +51,7 @@ describe('connectNumericSelector', () => {
     const firstRenderingOptions = rendering.mock.calls[0][0];
     expect(firstRenderingOptions.currentRefinement).toBe(listOptions[0].value);
     expect(firstRenderingOptions.widgetParams).toEqual({
-      attributeName: 'numerics',
+      attribute: 'numerics',
       options: listOptions,
     });
 
@@ -69,7 +69,7 @@ describe('connectNumericSelector', () => {
     const secondRenderingOptions = rendering.mock.calls[1][0];
     expect(secondRenderingOptions.currentRefinement).toBe(listOptions[0].value);
     expect(secondRenderingOptions.widgetParams).toEqual({
-      attributeName: 'numerics',
+      attribute: 'numerics',
       options: listOptions,
     });
   });
@@ -83,7 +83,7 @@ describe('connectNumericSelector', () => {
       { name: '30', value: 30 },
     ];
     const widget = makeWidget({
-      attributeName: 'numerics',
+      attribute: 'numerics',
       options: listOptions,
       transformItems: items =>
         items.map(item => ({ ...item, label: 'transformed' })),
@@ -134,7 +134,7 @@ describe('connectNumericSelector', () => {
       { name: '30', value: 30 },
     ];
     const widget = makeWidget({
-      attributeName: 'numerics',
+      attribute: 'numerics',
       options: listOptions,
     });
 
@@ -175,7 +175,7 @@ describe('connectNumericSelector', () => {
       { name: '30', value: 30 },
     ];
     const widget = makeWidget({
-      attributeName: 'numerics',
+      attribute: 'numerics',
       options: listOptions,
     });
 
@@ -243,7 +243,7 @@ describe('connectNumericSelector', () => {
       { name: '30', value: 30 },
     ];
     const widget = makeWidget({
-      attributeName: 'numerics',
+      attribute: 'numerics',
       options: listOptions,
     });
 
@@ -293,7 +293,7 @@ describe('connectNumericSelector', () => {
       { name: '30', value: 30 },
     ];
     const widget = makeWidget({
-      attributeName: 'numerics',
+      attribute: 'numerics',
       options: listOptions,
     });
 
@@ -346,7 +346,7 @@ describe('connectNumericSelector', () => {
         { name: '30', value: 30 },
       ];
       const widget = makeWidget({
-        attributeName: 'numerics',
+        attribute: 'numerics',
         options: listOptions,
       });
 

src/connectors/numeric-selector/connectNumericSelector.js

@@ -13,7 +13,7 @@ var customNumericSelector = connectNumericSelector(function renderFn(params, isF
 });
 search.addWidget(
   customNumericSelector({
-    attributeName,
+    attribute,
     options,
     [ operator = '=' ],
     [ transformItems ]
@@ -31,7 +31,7 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v
 
 /**
  * @typedef {Object} CustomNumericSelectorWidgetOptions
- * @property {string} attributeName Name of the attribute for faceting (eg. "free_shipping").
+ * @property {string} attribute Name of the attribute for faceting (eg. "free_shipping").
  * @property {NumericSelectorOption[]} options Array of objects defining the different values and labels.
  * @property {string} [operator = '＝'] The operator to use to refine. Supports following operators: <, <=, =, >, >= and !=.
  * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
@@ -86,7 +86,7 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v
  *   customNumericSelector({
  *     containerNode: $('#custom-numeric-selector-container'),
  *     operator: '>=',
- *     attributeName: 'popularity',
+ *     attribute: 'popularity',
  *     options: [
  *       {label: 'Default', value: 0},
  *       {label: 'Top 10', value: 9991},
@@ -101,13 +101,13 @@ export default function connectNumericSelector(renderFn, unmountFn) {
 
   return (widgetParams = {}) => {
     const {
-      attributeName,
+      attribute,
       options,
       operator = '=',
       transformItems = items => items,
     } = widgetParams;
 
-    if (!attributeName || !options) {
+    if (!attribute || !options) {
       throw new Error(usage);
     }
 
@@ -117,7 +117,7 @@ export default function connectNumericSelector(renderFn, unmountFn) {
         if (value) {
           return {
             numericRefinements: {
-              [attributeName]: {
+              [attribute]: {
                 [operator]: [value],
               },
             },
@@ -128,9 +128,9 @@ export default function connectNumericSelector(renderFn, unmountFn) {
 
       init({ helper, instantSearchInstance }) {
         this._refine = value => {
-          helper.clearRefinements(attributeName);
+          helper.clearRefinements(attribute);
           if (value !== undefined && value !== 'undefined') {
-            helper.addNumericRefinement(attributeName, operator, value);
+            helper.addNumericRefinement(attribute, operator, value);
           }
           helper.search();
         };
@@ -164,15 +164,15 @@ export default function connectNumericSelector(renderFn, unmountFn) {
 
       dispose({ state }) {
         unmountFn();
-        return state.removeNumericRefinement(attributeName);
+        return state.removeNumericRefinement(attribute);
       },
 
       getWidgetState(uiState, { searchParameters }) {
         const currentRefinement = this._getRefinedValue(searchParameters);
         if (
           // Does the current state contain the current refinement?
           (uiState.numericSelector &&
-            currentRefinement === uiState.numericSelector[attributeName]) ||
+            currentRefinement === uiState.numericSelector[attribute]) ||
           // Is the current value the first option / default value?
           currentRefinement === options[0].value
         ) {
@@ -184,29 +184,29 @@ export default function connectNumericSelector(renderFn, unmountFn) {
             ...uiState,
             numericSelector: {
               ...uiState.numericSelector,
-              [attributeName]: currentRefinement,
+              [attribute]: currentRefinement,
             },
           };
         return uiState;
       },
 
       getWidgetSearchParameters(searchParameters, { uiState }) {
         const value =
-          uiState.numericSelector && uiState.numericSelector[attributeName];
+          uiState.numericSelector && uiState.numericSelector[attribute];
         const currentlyRefinedValue = this._getRefinedValue(searchParameters);
 
         if (value) {
           if (value === currentlyRefinedValue) return searchParameters;
           return searchParameters
-            .clearRefinements(attributeName)
-            .addNumericRefinement(attributeName, operator, value);
+            .clearRefinements(attribute)
+            .addNumericRefinement(attribute, operator, value);
         }
 
         const firstItemValue = options[0] && options[0].value;
         if (typeof firstItemValue === 'number') {
           return searchParameters
-            .clearRefinements(attributeName)
-            .addNumericRefinement(attributeName, operator, options[0].value);
+            .clearRefinements(attribute)
+            .addNumericRefinement(attribute, operator, options[0].value);
         }
 
         return searchParameters;
@@ -220,10 +220,10 @@ export default function connectNumericSelector(renderFn, unmountFn) {
         // to initialize a true partial state where only the refinements are present
         return state &&
           state.numericRefinements &&
-          state.numericRefinements[attributeName] !== undefined &&
-          state.numericRefinements[attributeName][operator] !== undefined &&
-          state.numericRefinements[attributeName][operator][0] !== undefined // could be 0
-          ? state.numericRefinements[attributeName][operator][0]
+          state.numericRefinements[attribute] !== undefined &&
+          state.numericRefinements[attribute][operator] !== undefined &&
+          state.numericRefinements[attribute][operator][0] !== undefined // could be 0
+          ? state.numericRefinements[attribute][operator][0]
           : options[0].value;
       },
     };