diff --git a/packages/components/molecules/f-restaurant-card/CHANGELOG.md b/packages/components/molecules/f-restaurant-card/CHANGELOG.md index e1b7093037..ada0d651a6 100644 --- a/packages/components/molecules/f-restaurant-card/CHANGELOG.md +++ b/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_ diff --git a/packages/components/molecules/f-restaurant-card/package.json b/packages/components/molecules/f-restaurant-card/package.json index 1550dc4909..b2ad4c4162 100644 --- a/packages/components/molecules/f-restaurant-card/package.json +++ b/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", diff --git a/packages/components/molecules/f-restaurant-card/src/components/subcomponents/RestaurantRating/RestaurantRating.vue b/packages/components/molecules/f-restaurant-card/src/components/subcomponents/RestaurantRating/RestaurantRating.vue index 89046f26a4..6ff2d83ed6 100644 --- a/packages/components/molecules/f-restaurant-card/src/components/subcomponents/RestaurantRating/RestaurantRating.vue +++ b/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; } } }; diff --git a/packages/components/molecules/f-restaurant-card/src/components/subcomponents/RestaurantRating/_tests/RestaurantRating.test.js b/packages/components/molecules/f-restaurant-card/src/components/subcomponents/RestaurantRating/_tests/RestaurantRating.test.js index 814e15c6f8..c19ac60b9a 100644 --- a/packages/components/molecules/f-restaurant-card/src/components/subcomponents/RestaurantRating/_tests/RestaurantRating.test.js +++ b/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;