update snapshot names

auto-mat · Jun 27, 2024 · d3df06d · d3df06d
1 parent 32569bb
commit d3df06d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 21 deletions.
diff --git a/src/components/__tests__/BannerRoutes.cy.js b/src/components/__tests__/BannerRoutes.cy.js
@@ -30,7 +30,20 @@ describe('<BannerRoutes>', () => {
       cy.viewport('macbook-16');
     });
 
-    coreTests();
+    it('renders button icon with correct spacing', () => {
+      // TODO: fix corrupted snapshot
+      cy.dataCy('banner-routes-button-icon')
+        .invoke('height')
+        .should('be.equal', 24);
+      cy.dataCy('banner-routes-button-icon')
+        .invoke('width')
+        .should('be.equal', 24);
+      // 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(() => {
@@ -99,7 +112,7 @@ describe('<BannerRoutes>', () => {
       cy.viewport('macbook-16');
     });
 
-    coreTests();
+    coreTests('start');
 
     it('renders title width the "start" message', () => {
       cy.window().then(() => {
@@ -171,7 +184,7 @@ describe('<BannerRoutes>', () => {
       cy.viewport('iphone-6');
     });
 
-    coreTests();
+    coreTests('mobile');
 
     it('renders title with the number of missing routes', () => {
       cy.window().then(() => {
@@ -227,11 +240,11 @@ describe('<BannerRoutes>', () => {
   });
 });
 
-function coreTests() {
+function coreTests(context) {
   it('renders button icon with correct spacing', () => {
     // icon core test
     cy.dataCy('banner-routes-button-icon').then((element) => {
-      cy.testIcon({ element, name: 'banner-routes-add', size: 24 });
+      cy.testIcon({ element, name: `banner-routes-add-${context}`, size: 24 });
     });
     // icon additional tests
     cy.dataCy('banner-routes-button-icon')

diff --git a/src/components/__tests__/NewsletterItem.cy.js b/src/components/__tests__/NewsletterItem.cy.js
@@ -27,7 +27,7 @@ describe('<NewsletterItem>', () => {
       cy.viewport('macbook-16');
     });
 
-    coreTests();
+    coreTests('desktop');
 
     it('has display flex column', () => {
       cy.window().then(() => {
@@ -77,7 +77,7 @@ describe('<NewsletterItem>', () => {
       cy.viewport('iphone-6');
     });
 
-    coreTests();
+    coreTests('mobile');
 
     it('renders title', () => {
       cy.window().then(() => {
@@ -163,13 +163,13 @@ describe('<NewsletterItem>', () => {
   });
 });
 
-function coreTests() {
+function coreTests(context) {
   it('renders icon', () => {
     cy.window().then(() => {
       cy.dataCy('newsletter-item-icon').then((element) => {
         cy.testIcon({
           element,
-          name: `newsletter-item-${icon}`,
+          name: `newsletter-item-${icon}-${context}`,
           size: 32,
         });
       });
@@ -186,13 +186,12 @@ function coreTests() {
         .and('have.css', 'border-radius', '28px')
         .and('have.color', grey10)
         .and('contain', i18n.global.t('index.newsletterFeature.following'));
-      cy.dataCy('newsletter-item-button-icon').then((element) => {
-        cy.testIcon({
-          element,
-          name: 'newsletter-item-check',
-          size: 18,
-        });
-      });
+      cy.dataCy('newsletter-item-button-icon')
+        .invoke('height')
+        .should('be.equal', 18);
+      cy.dataCy('newsletter-item-button-icon')
+        .invoke('width')
+        .should('be.equal', 18);
     });
   });
 }
diff --git a/src/components/__tests__/SliderProgress.cy.js b/src/components/__tests__/SliderProgress.cy.js
@@ -73,7 +73,7 @@ describe('<SliderProgress>', () => {
         cy.dataCy('progress-slider-stats-icon').each((element, index) => {
           cy.testIcon({
             element,
-            name: `slider-progress-${progressStats[index].icon}`,
+            name: `slider-progress-${progressStats[index].icon}-desktop`,
             size: 18,
           });
         });
@@ -211,7 +211,7 @@ describe('<SliderProgress>', () => {
         cy.dataCy('progress-slider-stats-icon').each((element, index) => {
           cy.testIcon({
             element,
-            name: `slider-progress-${progressStats[index].icon}`,
+            name: `slider-progress-${progressStats[index].icon}-mobile`,
             size: 18,
           });
         });

diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
@@ -161,10 +161,10 @@ Cypress.Commands.add('testIcon', ({ element, name, size }) => {
   // timestamp for matching see https://docs.cypress.io/guides/tooling/visual-testing#Timestamps
   const now = new Date(2024, 1, 1);
   cy.clock(now);
-  // set DPR and wait for resources (to avoid empty snapshot)
-  cy.setDPR(1);
-
   cy.document()
+    // set DPR and wait for resources (to avoid empty snapshot)
+    .then((document) => document.fonts.ready)
+    .then(() => cy.setDPR(1))
     .then(() => cy.waitForStylesheets())
     .then(() => {
       // size