diff --git a/src/components/__tests__/SliderProgress.cy.js b/src/components/__tests__/SliderProgress.cy.js index f8086c745..f3dc3090b 100644 --- a/src/components/__tests__/SliderProgress.cy.js +++ b/src/components/__tests__/SliderProgress.cy.js @@ -17,6 +17,7 @@ const selectorProgressSliderSectionTitle = 'progress-slider-section-title'; const selectorProgressSliderSectionStats = 'progress-slider-section-stats'; const selectorProgressSliderStats = 'progress-slider-stats'; const selectorSectionHeadingTitle = 'section-heading-title'; +const selectorStatsBarItem = 'stats-bar-item'; const selectorSwiperContainer = 'swiper-container'; // variables @@ -80,7 +81,6 @@ describe('', () => { }); cy.viewport('iphone-6'); }); - coreTests(); mobileTests(); }); @@ -89,16 +89,19 @@ describe('', () => { function coreTests() { it('renders component', () => { cy.window().then(() => { - // title - cy.dataCy(selectorSectionHeadingTitle) - .and('contain', i18n.global.t('index.progressSlider.title')) - .then(($title) => { - expect($title.text()).to.equal( - i18n.global.t('index.progressSlider.title'), - ); - }); - // stats - cy.dataCy(selectorProgressSliderStats).should('be.visible'); + cy.fixture('statsBar').then((statsData) => { + // title + cy.dataCy(selectorSectionHeadingTitle) + .and('contain', i18n.global.t('index.progressSlider.title')) + .then(($title) => { + expect($title.text()).to.equal( + i18n.global.t('index.progressSlider.title'), + ); + }); + // stats + cy.dataCy(selectorProgressSliderStats).should('be.visible'); + cy.dataCy(selectorStatsBarItem).should('have.length', statsData.length); + }); }); }); diff --git a/src/components/homepage/SliderProgress.vue b/src/components/homepage/SliderProgress.vue index 01ec07bf5..9cd617279 100644 --- a/src/components/homepage/SliderProgress.vue +++ b/src/components/homepage/SliderProgress.vue @@ -44,6 +44,9 @@ import StatsBar from '../global/StatsBar.vue'; // composables import { useStats } from '../../composables/useStats'; +// enums +import { StatisticsId } from '../types/Statistics'; + // fixtures import memberResultsFixture from '../../../test/cypress/fixtures/memberResults.json'; @@ -75,9 +78,16 @@ export default defineComponent({ }, setup() { const memberResults = memberResultsFixture as MemberResponse; + const { getResultStatistics } = useStats(); + // define which stats are shown + const shownStatsIds = [ + StatisticsId.routes, + StatisticsId.distance, + StatisticsId.co2, + ]; const stats = computed(() => - getResultStatistics(memberResults.results), + getResultStatistics(memberResults.results, shownStatsIds), ); const isLargeScreen = computed((): boolean => {