fix(ClearAll): always display clearAll button, disabled when no filter (

#1545)

Fix #1530

packages/react-instantsearch/src/components/ClearAll.enzyme.test.js

@@ -0,0 +1,36 @@
+
+/* eslint-env jest, jasmine */
+
+// @TODO re-include this test in the normal .test.js
+// when React 15.4 is out: https://github.com/facebook/react/issues/7386
+
+import React from 'react';
+import {mount} from 'enzyme';
+
+import ClearAll from './ClearAll.js';
+
+describe('ClearAll', () => {
+  it('is disabled when there is no filters', () => {
+    const refine = jest.fn();
+    const wrapper = mount(
+      <ClearAll refine={refine} items={[]}/>
+    );
+
+    const btn = wrapper.find('button');
+    expect(refine.mock.calls.length).toBe(0);
+    btn.simulate('click');
+    expect(refine.mock.calls.length).toBe(0);
+  });
+
+  it('is not disabled when there are filters', () => {
+    const refine = jest.fn();
+    const wrapper = mount(
+      <ClearAll refine={refine} items={[{value: 'test', label: 'test: test'}]}/>
+    );
+
+    const btn = wrapper.find('button');
+    expect(refine.mock.calls.length).toBe(0);
+    btn.simulate('click');
+    expect(refine.mock.calls.length).toBe(1);
+  });
+});

packages/react-instantsearch/src/components/ClearAll.js

@@ -15,8 +15,14 @@ class ClearAll extends Component {
 
   render() {
     const {applyTheme, translate, items, refine} = this.props;
-    if (items.length === 0) {
-      return null;
+    const isDisabled = items.length === 0;
+
+    if (isDisabled) {
+      return (
+        <button {...applyTheme('root', 'root', 'clearAllDisabled')} disabled>
+          {translate('reset')}
+        </button>
+      );
     }
 
     return (

packages/react-instantsearch/src/connectors/connectCurrentRefinements.js

@@ -8,7 +8,7 @@ import createConnector from '../core/createConnector';
  * @kind connector
  * @category connector
  * @providedPropType {function} refine - a function to remove a single filter
- * @providedPropType {array.<{key: string, label: string}>} filters - all the filters, the key for calling the refine prop function, label is for the display.
+ * @providedPropType {array.<{key: string, label: string}>} items - all the filters, the key for calling the refine prop function, label is for the display.
  */
 export default createConnector({
   displayName: 'AlgoliaCurrentRefinements',