slider progress icon test

auto-mat · Jun 27, 2024 · 15bd28f · 15bd28f
1 parent 86ff277
commit 15bd28f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git 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
@@ -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;