[email protected]: Add max displayed rating to restaurant card

packages/components/molecules/f-restaurant-card/CHANGELOG.md

@@ -3,6 +3,16 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## v1.6.4
+
+_May 2, 2024_
+
+### Changed
+
+- Add maxDisplayRating prop to restuant card component
+- Update logic for displaying restuarant rating
+- Update tests
+
 ## v1.6.3
 
 _April 29, 2024_

packages/components/molecules/f-restaurant-card/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-restaurant-card",
   "description": "Fozzie Restaurant Card -  Responsible for displaying restaurant data and linking to a restaurant",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "main": "dist/f-restaurant-card.umd.min.js",
   "files": [
     "dist",

packages/components/molecules/f-restaurant-card/src/components/RestaurantCard.vue

@@ -68,7 +68,8 @@
                     v-if="rating"
                     :tier="3">
                     <restaurant-rating
-                        v-bind="rating" />
+                        v-bind="rating"
+                        :max-displayed-ratings="maxDisplayedRatings" />
                 </component>
 
                 <!-- Premier Icon -->
@@ -322,6 +323,10 @@ export default {
         inlineTileData: {
             type: Boolean,
             default: false
+        },
+        maxDisplayedRatings: {
+            type: Number,
+            default: 0
         }
     },
     computed: {

packages/components/molecules/f-restaurant-card/src/components/subcomponents/RestaurantRating/RestaurantRating.vue

@@ -122,7 +122,7 @@ export default {
          */
         maxDisplayedRatings: {
             type: Number,
-            default: 200
+            default: 0
         },
         /**
          * The max value of the rating
@@ -168,7 +168,12 @@ export default {
             return Number.parseFloat(this.mean).toFixed(1);
         },
         formattedCount () {
-            return this.count > this.maxDisplayedRatings ? `${this.maxDisplayedRatings}+` : this.count;
+            if (this.maxDisplayedRatings === 0) {
+                return this.count;
+            } else if (this.count > this.maxDisplayedRatings) {
+                return `${this.maxDisplayedRatings}+`;
+            }
+            return this.count;
         }
     }
 };

packages/components/molecules/f-restaurant-card/src/components/subcomponents/RestaurantRating/_tests/RestaurantRating.test.js

@@ -200,7 +200,7 @@ describe('RestaurantRating component', () => {
             expect(countMessage.text()).toStrictEqual('200+');
         });
 
-        it('displays threshold with + when count is higher than threshold with default threshold value', () => {
+        it('displays count when threshold has default threshold value', () => {
             // arrange
             const propsData = {
                 mean: 5,
@@ -215,7 +215,7 @@ describe('RestaurantRating component', () => {
             // assert
             expect(countMessage.exists()).toBe(true);
 
-            expect(countMessage.text()).toStrictEqual('200+');
+            expect(countMessage.text()).toStrictEqual('250');
         });
     });
 
@@ -250,7 +250,7 @@ describe('RestaurantRating component', () => {
             expect(countMessage.exists()).toBe(true);
 
             expect(ratingsMeanElement.text()).toStrictEqual('5.0');
-            expect(countMessage.text()).toStrictEqual('200+');
+            expect(countMessage.text()).toStrictEqual('250');
         });
 
         it('shows an empty star and a no ratings message if `mean` is missing', () => {