[email protected]: Add new prop f-restaurant card for review threshold

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

@@ -3,7 +3,15 @@
 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.1
+## v1.6.2
+
+_April 10, 2024_
+
+### Changed
+- Create new prop for f-restaurant-card
+- Use prop as the max review threshold to limit the actual number of reviews shown on restaurant card
+
+## v1.6.1
 
 _March 25, 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.1",
+  "version": "1.6.2",
   "main": "dist/f-restaurant-card.umd.min.js",
   "files": [
     "dist",

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

@@ -117,6 +117,13 @@ export default {
             type: Number,
             default: 0
         },
+        /**
+         * Max amount of ratings to be shown
+         */
+        maxDisplayedRatings: {
+            type: Number,
+            default: 200
+        },
         /**
          * The max value of the rating
          */
@@ -161,7 +168,7 @@ export default {
             return Number.parseFloat(this.mean).toFixed(1);
         },
         formattedCount () {
-            return this.count > 200 ? '200+' : this.count;
+            return this.count > this.maxDisplayedRatings ? `${this.maxDisplayedRatings}+` : this.count;
         }
     }
 };

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

@@ -158,6 +158,67 @@ describe('RestaurantRating component', () => {
         });
     });
 
+    describe('reviews count threshold', () => {
+        const maxDisplayedRatings = 200;
+        const rating = '[data-test-id="rating"]';
+
+        it('displays the count when count is less than threshold', () => {
+            // arrange
+            const propsData = {
+                mean: 5,
+                count: 150,
+                isOwnRating: false,
+                maxDisplayedRatings
+            };
+
+            // act
+            const wrapper = mount(RestaurantRating, { propsData });
+            const countMessage = wrapper.find(rating);
+
+            // assert
+            expect(countMessage.exists()).toBe(true);
+
+            expect(countMessage.text()).toStrictEqual('150');
+        });
+
+        it('displays threshold with + when count is higher than threshold', () => {
+            // arrange
+            const propsData = {
+                mean: 5,
+                count: 250,
+                isOwnRating: false,
+                maxDisplayedRatings
+            };
+
+            // act
+            const wrapper = mount(RestaurantRating, { propsData });
+            const countMessage = wrapper.find(rating);
+
+            // assert
+            expect(countMessage.exists()).toBe(true);
+
+            expect(countMessage.text()).toStrictEqual('200+');
+        });
+
+        it('displays threshold with + when count is higher than threshold with default threshold value', () => {
+            // arrange
+            const propsData = {
+                mean: 5,
+                count: 250,
+                isOwnRating: false
+            };
+
+            // act
+            const wrapper = mount(RestaurantRating, { propsData });
+            const countMessage = wrapper.find(rating);
+
+            // assert
+            expect(countMessage.exists()).toBe(true);
+
+            expect(countMessage.text()).toStrictEqual('200+');
+        });
+    });
+
     describe('isOwnRatingMessage is false', () => {
         const isOwnRating = false;