src/components: select stats shown by SliderProgress and test count (#…

…656) * select stats to show in SliderProgress by ids * src/components/__tests__: fix getting statistics items count --------- Co-authored-by: Šimon Macek <simon.macek@proficio.cz> Co-authored-by: Tomas Zigo <tomas.zigo@slovanet.sk>
auto-mat · Nov 4, 2024 · 5f4f56d · 5f4f56d
1 parent c79a20f
commit 5f4f56d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git 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('<SliderProgress>', () => {
       });
       cy.viewport('iphone-6');
     });
-
     coreTests();
     mobileTests();
   });
@@ -89,16 +89,19 @@ describe('<SliderProgress>', () => {
 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
@@ -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<ItemStatistics[]>(() =>
-      getResultStatistics(memberResults.results),
+      getResultStatistics(memberResults.results, shownStatsIds),
     );
 
     const isLargeScreen = computed((): boolean => {