fix(Rating): use a sensible default instead of max rating (#607)

* fix(Rating): use a sensible default instead of max rating

* fix(Rating): adjust default to avoid breaking change

adjust default for min rating so that 0 displays as before

src/components/rating/rating.jsx

@@ -6,35 +6,39 @@ import { Icon as UiKitIcon } from '../..';
 import styles from './rating.styles';
 
 /* eslint-disable react/no-array-index-key */
-const Rating = ({ icon: Icon = UiKitIcon.Star, size, rating, maxRating, classes }) => (
+const Rating = ({ icon: Icon = UiKitIcon.Star, size, rating, maxRating, minRating, classes }) => (
   <div className={classes.rating}>
-    {[...Array(maxRating)].map((_, index) => {
-      const classNames = cn({
-        [classes.active]: index < rating,
-        [classes.inactive]: index >= rating,
-        [classes.ratingIcon]: true,
-      });
-      return (
-        <Icon
-          key={index}
-          className={classNames}
-          fill="currentColor"
-          stroke="currentColor"
-          width={size}
-          height={size}
-        />
-      );
-    })}
+    {Number.isInteger(rating) && rating >= minRating
+      ? [...Array(maxRating)].map((_, index) => {
+          const classNames = cn({
+            [classes.active]: index < rating,
+            [classes.inactive]: index >= rating,
+            [classes.ratingIcon]: true,
+          });
+          return (
+            <Icon
+              key={index}
+              className={classNames}
+              fill="currentColor"
+              stroke="currentColor"
+              width={size}
+              height={size}
+            />
+          );
+        })
+      : '–'}
   </div>
 );
 
 Rating.defaultProps = {
   maxRating: 5,
+  minRating: 0,
   size: 16,
 };
 Rating.propTypes = {
   rating: PropTypes.number.isRequired,
   maxRating: PropTypes.number,
+  minRating: PropTypes.number,
   icon: PropTypes.func,
   size: PropTypes.number,
   classes: PropTypes.shape().isRequired,

src/components/rating/rating.md

@@ -1,7 +1,11 @@
     import { Icon } from 'nordnet-ui-kit';
     <div>
-    <Rating rating={3} />
-    <Rating rating={4} maxRating={10} />
-    <Rating rating={7} maxRating={10} icon={Icon.Car} />
-    <Rating rating={7} maxRating={10} icon={Icon.Globe} size={64} />
+      <Rating rating={3} />
+      <Rating rating={4} maxRating={10} />
+      <Rating rating={7} maxRating={10} icon={Icon.Car} />
+      <Rating rating={7} maxRating={10} icon={Icon.Globe} size={64} />
+
+      Default for missing rating data: <Rating />
+      Default for zero rating: <Rating rating={0} />
+      Show zero rating as no rating: <Rating rating={0} minRating={1} />
     </div>

src/components/rating/rating.test.js

@@ -30,3 +30,27 @@ test('Should have same number active stars as rating says', () => {
   expect(active).toHaveLength(4);
   expect(inactive).toHaveLength(2);
 });
+
+test('Should display a sensible default if rating is invalid', () => {
+  const invalidRatings = [undefined, null, NaN, -1, 'foo'];
+  invalidRatings.forEach(rating => {
+    const component = renderComponent({ rating });
+    expect(component.text()).toBe('–');
+  });
+});
+
+test('Should display default for rating = 0 if minRating = 1', () => {
+  const rating = 0;
+  const minRating = 1;
+  const component = renderComponent({ rating, minRating });
+  expect(component.text()).toBe('–');
+});
+
+test('Should default to 0 active stars for rating = 0', () => {
+  const rating = 0;
+  const component = renderComponent({ rating });
+  const active = component.find('.active');
+  const inactive = component.find('.inactive');
+  expect(active).toHaveLength(0);
+  expect(inactive).toHaveLength(6);
+});