diff --git a/src/components/__tests__/BannerRoutes.cy.js b/src/components/__tests__/BannerRoutes.cy.js index c80a7dfb7..b734f65e1 100644 --- a/src/components/__tests__/BannerRoutes.cy.js +++ b/src/components/__tests__/BannerRoutes.cy.js @@ -30,7 +30,20 @@ describe('', () => { 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('', () => { cy.viewport('macbook-16'); }); - coreTests(); + coreTests('start'); it('renders title width the "start" message', () => { cy.window().then(() => { @@ -171,7 +184,7 @@ describe('', () => { cy.viewport('iphone-6'); }); - coreTests(); + coreTests('mobile'); it('renders title with the number of missing routes', () => { cy.window().then(() => { @@ -227,11 +240,11 @@ describe('', () => { }); }); -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 index 6c7c074d1..c5f63f4bc 100644 --- a/src/components/__tests__/NewsletterItem.cy.js +++ b/src/components/__tests__/NewsletterItem.cy.js @@ -27,7 +27,7 @@ describe('', () => { cy.viewport('macbook-16'); }); - coreTests(); + coreTests('desktop'); it('has display flex column', () => { cy.window().then(() => { @@ -77,7 +77,7 @@ describe('', () => { cy.viewport('iphone-6'); }); - coreTests(); + coreTests('mobile'); it('renders title', () => { cy.window().then(() => { @@ -163,13 +163,13 @@ describe('', () => { }); }); -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 index bfe504c1b..2d06d1189 100644 --- a/src/components/__tests__/SliderProgress.cy.js +++ b/src/components/__tests__/SliderProgress.cy.js @@ -73,7 +73,7 @@ describe('', () => { 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('', () => { 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 index 880247a17..a22f9b6bb 100644 --- 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