WIP: src/components/__tests__: use snapshot test for testing icon rendering

src/components/__tests__/BadgeAchievement.cy.js

@@ -24,7 +24,7 @@ describe('<BadgeAchievement>', () => {
           badge,
         },
       });
-      cy.viewport('macbook-16', { deviceScaleFactor: 1 });
+      cy.viewport('macbook-16');
     });
 
     it('renders title', () => {
@@ -80,7 +80,7 @@ describe('<BadgeAchievement>', () => {
           badge: badgeDark,
         },
       });
-      cy.viewport('iphone-6', { deviceScaleFactor: 1 });
+      cy.viewport('iphone-6');
     });
 
     it('has dark background', () => {

src/components/__tests__/BannerChallengeDescription.cy.js

@@ -38,6 +38,7 @@ describe('<BannerChallengeDescription>', () => {
 });
 
 function coreTests() {
+  const iconSize = 18;
   it('renders component', () => {
     cy.fixture('bannerChallengeDescription').then(
       (bannerChallengeDescription) => {
@@ -53,9 +54,21 @@ function coreTests() {
           .and(
             'contain',
             i18n.global.t('bannerChallengeDescription.transportType'),
-          )
-          .and('contain', getRouteIcon('bike'))
-          .and('contain', getRouteIcon('walk'));
+          );
+        // loop over icons
+        bannerChallengeDescription.transportTypes.forEach((type) => {
+          cy.dataCy(`challenge-transport-icon-${getRouteIcon(type)}`).then(
+            (element) => {
+              // test icon
+              cy.testIcon({
+                element: element,
+                name: `${Cypress.currentTest.titlePath}-banner-challenge-description-${getRouteIcon(type)}`,
+                size: iconSize,
+                click: false,
+              });
+            },
+          );
+        });
         cy.dataCy('challenge-description')
           .should('be.visible')
           // test v-html content
@@ -71,6 +84,14 @@ function coreTests() {
         cy.dataCy('challenge-link')
           .find('a')
           .should('have.attr', 'href', bannerChallengeDescription.link.url);
+        cy.dataCy('challenge-link-icon').then((element) => {
+          cy.testIcon({
+            element: element,
+            name: `${Cypress.currentTest.titlePath}-banner-challenge-description-launch`,
+            size: iconSize,
+            click: false,
+          });
+        });
       },
     );
   });

src/components/__tests__/BannerRoutes.cy.js

@@ -30,6 +30,16 @@ describe('<BannerRoutes>', () => {
       cy.viewport('macbook-16');
     });
 
+    coreTests();
+
+    it('renders button icon with correct spacing', () => {
+      // icon additional tests
+      cy.dataCy('banner-routes-button-icon')
+        .should('be.visible')
+        .and('have.color', white)
+        .and('have.css', 'margin-right', '8px');
+    });
+
     it('renders title with the number of missing routes', () => {
       cy.window().then(() => {
         cy.dataCy('banner-routes-title').should('contain', routesCount);
@@ -58,20 +68,6 @@ describe('<BannerRoutes>', () => {
         .and('contain', i18n.global.t('index.bannerRoutes.addRoutes'));
     });
 
-    it('renders button icon with correct spacing', () => {
-      cy.dataCy('banner-routes-button-icon')
-        .should('be.visible')
-        .and('have.color', white)
-        .and('have.css', 'margin-right', '8px')
-        .and('contain', 'add');
-      cy.dataCy('banner-routes-button-icon')
-        .invoke('height')
-        .should('equal', 24);
-      cy.dataCy('banner-routes-button-icon')
-        .invoke('width')
-        .should('equal', 24);
-    });
-
     it('has gray background', () => {
       cy.window().then(() => {
         cy.dataCy('banner-routes-card')
@@ -111,6 +107,8 @@ describe('<BannerRoutes>', () => {
       cy.viewport('macbook-16');
     });
 
+    coreTests();
+
     it('renders title width the "start" message', () => {
       cy.window().then(() => {
         cy.dataCy('banner-routes-title').should(
@@ -142,20 +140,6 @@ describe('<BannerRoutes>', () => {
         .and('contain', i18n.global.t('index.bannerRoutes.addFirstRoutes'));
     });
 
-    it('renders button icon with correct spacing', () => {
-      cy.dataCy('banner-routes-button-icon')
-        .should('be.visible')
-        .and('have.color', white)
-        .and('have.css', 'margin-right', '8px')
-        .and('contain', 'add');
-      cy.dataCy('banner-routes-button-icon')
-        .invoke('height')
-        .should('equal', 24);
-      cy.dataCy('banner-routes-button-icon')
-        .invoke('width')
-        .should('equal', 24);
-    });
-
     it('has gray background', () => {
       cy.window().then(() => {
         cy.dataCy('banner-routes-card')
@@ -195,6 +179,8 @@ describe('<BannerRoutes>', () => {
       cy.viewport('iphone-6');
     });
 
+    coreTests();
+
     it('renders title with the number of missing routes', () => {
       cy.window().then(() => {
         cy.dataCy('banner-routes-title')
@@ -220,20 +206,6 @@ describe('<BannerRoutes>', () => {
         .and('contain', i18n.global.t('index.bannerRoutes.addRoutes'));
     });
 
-    it('renders button icon with correct spacing', () => {
-      cy.dataCy('banner-routes-button-icon')
-        .should('be.visible')
-        .and('have.color', white)
-        .and('have.css', 'margin-right', '8px')
-        .and('contain', 'add');
-      cy.dataCy('banner-routes-button-icon')
-        .invoke('height')
-        .should('equal', 24);
-      cy.dataCy('banner-routes-button-icon')
-        .invoke('width')
-        .should('equal', 24);
-    });
-
     it('has gray background', () => {
       cy.window().then(() => {
         cy.dataCy('banner-routes-card')
@@ -262,3 +234,25 @@ describe('<BannerRoutes>', () => {
     });
   });
 });
+
+function coreTests() {
+  it('renders button icon with correct spacing', () => {
+    cy.viewport(1280, 800).then(() => {
+      cy.window().then(() => {
+        // icon core test
+        cy.dataCy('banner-routes-button-icon').then((element) => {
+          cy.testIcon({
+            element,
+            name: `${Cypress.currentTest.titlePath}-add`,
+            size: 24,
+          });
+        });
+      });
+    });
+    // icon additional tests
+    cy.dataCy('banner-routes-button-icon')
+      .should('be.visible')
+      .and('have.color', white)
+      .and('have.css', 'margin-right', '8px');
+  });
+}

src/components/__tests__/BannerRoutesApp.cy.js

@@ -115,9 +115,13 @@ function coreTests() {
         .and('have.css', 'font-weight', '400')
         .and('have.color', black);
       // Icon (should be visible when app is linked)
-      cy.dataCy('banner-routes-app-icon')
-        .should('be.visible')
-        .and('have.css', 'font-size', '18px');
+      cy.dataCy('banner-routes-app-icon').then((element) => {
+        cy.testIcon({
+          element: element,
+          name: 'banner-routes-app-check',
+          size: 18,
+        });
+      });
       // Status (linked)
       cy.dataCy('banner-routes-app-status')
         .should('be.visible')

src/components/__tests__/CardChallenge.cy.js

@@ -45,10 +45,15 @@ describe('<CardChallenge>', () => {
         .should('be.visible')
         .and('have.backgroundColor', 'rgba(0, 0, 0, 0.47)')
         .and('contain', title);
-      cy.dataCy('card-title')
-        .find('i')
-        .should('be.visible')
-        .and('contain', 'person');
+      cy.dataCy('card-challenge-title-icon', { timeout: 5000 }).then(
+        (element) => {
+          cy.testIcon({
+            element,
+            name: 'card-challenge-title-person',
+            size: 18,
+          });
+        },
+      );
       cy.dataCy('card-title')
         .find('a')
         .should('have.css', 'font-size', '16px')

src/components/__tests__/CardEvent.cy.js

@@ -5,7 +5,7 @@ import { i18n } from '../../boot/i18n';
 import { rideToWorkByBikeConfig } from 'src/boot/global_vars';
 
 const { getPaletteColor } = colors;
-const black = getPaletteColor('black');
+const grey10 = getPaletteColor('grey-10');
 const white = getPaletteColor('white');
 const blueGrey2 = getPaletteColor('blue-grey-2');
 const blueGrey3 = getPaletteColor('blue-grey-3');
@@ -14,6 +14,8 @@ const blueGrey7 = getPaletteColor('blue-grey-7');
 const { borderRadiusCard } = rideToWorkByBikeConfig;
 
 describe('<CardEvent>', () => {
+  const iconSize24 = 24;
+  const iconSize18 = 18;
   context('desktop', () => {
     beforeEach(() => {
       cy.fixture('cardEvent').then((cardEvent) => {
@@ -90,11 +92,15 @@ describe('<CardEvent>', () => {
             .and('contain', date)
             .and('contain', year)
             .and('contain', hour);
-          cy.dataCy('card-dates')
-            .find('i')
-            .should('be.visible')
-            .and('have.color', blueGrey2)
-            .and('contain', 'event');
+          cy.dataCy('card-event-date-icon')
+            .should('have.color', blueGrey2)
+            .then((element) => {
+              cy.testIcon({
+                element: element,
+                name: 'card-event-event',
+                size: iconSize24,
+              });
+            });
         });
       });
     });
@@ -107,25 +113,42 @@ describe('<CardEvent>', () => {
             .and('have.css', 'font-size', '14px')
             .and('have.css', 'font-weight', '400')
             .and('contain', cardEvent.location);
-          cy.dataCy('card-location')
-            .find('i')
-            .should('be.visible')
-            .and('have.color', blueGrey2)
-            .and('contain', 'place');
+          cy.dataCy('card-event-location-icon')
+            .should('have.color', blueGrey2)
+            .then((element) => {
+              cy.testIcon({
+                element: element,
+                name: 'card-event-location',
+                size: iconSize24,
+              });
+            });
         });
       });
     });
 
     it('renders calendar button with an icon', () => {
       cy.window().then(() => {
+        // button
         cy.dataCy('calendar-button')
           .should('be.visible')
           .and('have.css', 'height', '42px')
           .and('have.css', 'width', '42px');
-        cy.dataCy('calendar-button')
-          .find('i')
-          .should('be.visible')
-          .and('have.color', black);
+        // icon
+        /*
+         * Change viewport fix: `The "target" argument must be an instance
+         * of Buffer or Uint8Array. Received null` error
+         */
+        cy.viewport(500, 500).then(() => {
+          cy.dataCy('card-event-calendar-icon')
+            .and('have.color', grey10)
+            .then((element) => {
+              cy.testIcon({
+                element: element,
+                name: 'card-event-calendar',
+                size: iconSize18,
+              });
+            });
+        });
       });
     });
 
@@ -168,27 +191,29 @@ describe('<CardEvent>', () => {
                   .should('contain', '1.')
                   .and('contain', '2023')
                   .and('contain', '12:00');
-                const $icon = $el.find('i');
-                if ($icon.length) {
-                  cy.wrap($icon)
-                    .should('be.visible')
-                    .and('have.color', blueGrey3)
-                    .and('have.css', 'width', '18px')
-                    .and('have.css', 'height', '18px');
-                }
               }
               if (index === 1) {
                 cy.wrap($el).should('contain', cardEvent.location);
-                const $icon = $el.find('i');
-                if ($icon.length) {
-                  cy.wrap($icon)
-                    .should('be.visible')
-                    .and('have.color', blueGrey3)
-                    .and('have.css', 'width', '18px')
-                    .and('have.css', 'height', '18px');
-                }
               }
             });
+          cy.dataCy('dialog-event-date-icon')
+            .should('have.color', blueGrey3)
+            .then((element) => {
+              cy.testIcon({
+                element: element,
+                name: 'card-event-dialog-event',
+                size: iconSize18,
+              });
+            });
+          cy.dataCy('dialog-event-location-icon')
+            .should('have.color', blueGrey3)
+            .then((element) => {
+              cy.testIcon({
+                element: element,
+                name: 'card-event-dialog-location',
+                size: iconSize18,
+              });
+            });
         });
       });
     });

src/components/__tests__/CardOffer.cy.js

@@ -112,12 +112,10 @@ function coreTests() {
   it('renders icon', () => {
     cy.window().then(() => {
       cy.get('@card').then((card) => {
-        cy.dataCy('card-icon')
-          .should('be.visible')
-          .and('have.class', card.icon)
-          .and('have.css', 'height', '48px')
-          .and('have.css', 'width', '48px')
-          .and('have.color', 'rgb(176, 190, 197)');
+        cy.dataCy('card-icon').then((element) => {
+          cy.testIcon({ element, name: `card-offer-${card.icon}`, size: 48 });
+        });
+        cy.dataCy('card-icon').should('have.class', card.icon);
       });
     });
   });