From 15bd28fa5690bf21e9be4d8eab8c1ac2e9ecea8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=CC=8Cimon=20Macek?= <simon.macek@proficio.cz>
Date: Mon, 24 Jun 2024 08:32:46 +0200
Subject: [PATCH] slider progress icon test

---
 src/components/__tests__/SliderProgress.cy.js | 27 ++++++++++---------
 src/components/homepage/SliderProgress.vue    |  7 ++++-
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/__tests__/SliderProgress.cy.js b/src/components/__tests__/SliderProgress.cy.js
index e2ad8c1fc..bfe504c1b 100644
--- a/src/components/__tests__/SliderProgress.cy.js
+++ b/src/components/__tests__/SliderProgress.cy.js
@@ -7,7 +7,6 @@ import { i18n } from '../../boot/i18n';
 const { getPaletteColor } = colors;
 const black = getPaletteColor('black');
 const grey10 = getPaletteColor('grey-10');
-const blueGrey3 = getPaletteColor('blue-grey-3');
 
 // mocks
 import { progressStats, cardsProgress } from 'src/mocks/homepage';
@@ -61,12 +60,6 @@ describe('<SliderProgress>', () => {
             .should('have.css', 'font-size', '14px')
             .and('have.css', 'font-weight', '400')
             .and('have.color', grey10);
-          cy.wrap($item)
-            .find('.q-icon')
-            .should('contain', progressStats[index].icon)
-            .and('have.color', blueGrey3)
-            .and('have.css', 'width', '18px')
-            .and('have.css', 'height', '18px');
           cy.wrap($item)
             .find('span')
             .should('contain', progressStats[index].label)
@@ -77,6 +70,13 @@ describe('<SliderProgress>', () => {
             .and('have.color', grey10)
             .and('have.css', 'font-weight', '700');
         });
+        cy.dataCy('progress-slider-stats-icon').each((element, index) => {
+          cy.testIcon({
+            element,
+            name: `slider-progress-${progressStats[index].icon}`,
+            size: 18,
+          });
+        });
       });
     });
 
@@ -198,12 +198,6 @@ describe('<SliderProgress>', () => {
             .should('have.css', 'font-size', '14px')
             .and('have.css', 'font-weight', '400')
             .and('have.color', grey10);
-          cy.wrap($item)
-            .find('.q-icon')
-            .should('contain', progressStats[index].icon)
-            .and('have.color', blueGrey3)
-            .and('have.css', 'width', '18px')
-            .and('have.css', 'height', '18px');
           cy.wrap($item)
             .find('span')
             .should('contain', progressStats[index].label)
@@ -214,6 +208,13 @@ describe('<SliderProgress>', () => {
             .and('have.color', grey10)
             .and('have.css', 'font-weight', '700');
         });
+        cy.dataCy('progress-slider-stats-icon').each((element, index) => {
+          cy.testIcon({
+            element,
+            name: `slider-progress-${progressStats[index].icon}`,
+            size: 18,
+          });
+        });
       });
     });
 
diff --git a/src/components/homepage/SliderProgress.vue b/src/components/homepage/SliderProgress.vue
index 2f5de752b..99a33ddac 100644
--- a/src/components/homepage/SliderProgress.vue
+++ b/src/components/homepage/SliderProgress.vue
@@ -100,7 +100,12 @@ export default defineComponent({
           class="text-grey-10 q-p-none"
         >
           <!-- Icon -->
-          <q-icon :name="item.icon" color="blue-grey-3" size="18px" />&nbsp;
+          <q-icon
+            :name="item.icon"
+            color="blue-grey-3"
+            size="18px"
+            data-cy="progress-slider-stats-icon"
+          />&nbsp;
           <!-- Value -->
           <strong>{{ item.value }}</strong
           >&nbsp;