fix(starRatings): click on selected range doesn't unselect it (#1766)

algolia · Dec 19, 2016 · beacc72 · beacc72
1 parent 08c5bca
commit beacc72
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/packages/react-instantsearch/src/components/StarRating.js b/packages/react-instantsearch/src/components/StarRating.js
@@ -25,7 +25,7 @@ class StarRating extends Component {
     e.preventDefault();
     e.stopPropagation();
     if (min === this.props.currentRefinement.min && max === this.props.currentRefinement.max) {
-      this.props.refine('');
+      this.props.refine({min: this.props.min, max: this.props.max});
     } else {
       this.props.refine({min, max});
     }
@@ -64,9 +64,9 @@ class StarRating extends Component {
         'ratingLink',
         selected && 'ratingLinkSelected',
         disabled && 'ratingLinkDisabled')}
-         disabled={disabled}
-         key={lowerBound}
-         {...onClickHandler}
+                    disabled={disabled}
+                    key={lowerBound}
+                    {...onClickHandler}
       >
         {icons}
         <span {...cx(

diff --git a/packages/react-instantsearch/src/components/StarRating.test.js b/packages/react-instantsearch/src/components/StarRating.test.js
@@ -60,28 +60,26 @@ describe('StarRating', () => {
       {value: '4', count: 3},
       {value: '5', count: 0}]}
   />;
-  const wrapper = mount(starRating);
 
   beforeEach(() => {
     refine.mockClear();
     createURL.mockClear();
   });
 
-  afterAll(() => {
-    wrapper.unmount();
-  });
-
   it('should create an URL for each row except for the largest: the default selected one', () => {
-    mount(starRating);
+    const wrapper = mount(starRating);
 
     expect(createURL.mock.calls.length).toBe(4);
     expect(createURL.mock.calls[0][0]).toEqual({min: 5, max: 5});
     expect(createURL.mock.calls[1][0]).toEqual({min: 4, max: 5});
     expect(createURL.mock.calls[2][0]).toEqual({min: 3, max: 5});
     expect(createURL.mock.calls[3][0]).toEqual({min: 2, max: 5});
+
+    wrapper.unmount();
   });
 
   it('refines its value on change', () => {
+    const wrapper = mount(starRating);
     const links = wrapper.find('.ais-StarRating__ratingLink');
     expect(links.length).toBe(5);
 
@@ -104,9 +102,11 @@ describe('StarRating', () => {
       .find('.ais-StarRating__ratingIcon');
 
     expect(disabledLink.length).toBe(5);
+    wrapper.unmount();
   });
 
   it('should display the right number of stars', () => {
+    const wrapper = mount(starRating);
     wrapper
       .find('.ais-StarRating__ratingLink')
       .last()
@@ -122,5 +122,18 @@ describe('StarRating', () => {
 
     expect(fullIcon.length).toBe(1);
     expect(emptyIcon.length).toBe(4);
+    wrapper.unmount();
+  });
+
+  it('clicking on the selected refinement should select the largest range', () => {
+    const wrapper = mount(starRating);
+    wrapper.setProps({currentRefinement: {min: 5, max: 5}});
+
+    const links = wrapper.find('.ais-StarRating__ratingLink');
+    links.first().simulate('click');
+
+    expect(refine.mock.calls.length).toBe(1);
+    expect(refine.mock.calls[0][0]).toEqual({min: 1, max: 5});
+    wrapper.unmount();
   });
 });