update icon test command

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

@@ -82,6 +82,13 @@ 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,
+            name: 'banner-challenge-description-launch',
+            size: 18,
+          });
+        });
       },
     );
   });

src/components/results/BannerChallengeDescription.vue

@@ -112,7 +112,12 @@ export default defineComponent({
           <div data-cy="challenge-link">
             <a :href="challenge.link.url" target="_blank" class="flex gap-4">
               <span>
-                <q-icon name="launch" color="grey-10" size="18px" />
+                <q-icon
+                  name="launch"
+                  color="grey-10"
+                  size="18px"
+                  data-cy="challenge-link-icon"
+                />
               </span>
               <span>
                 {{ challenge.link.title }}

test/cypress/support/commands.js

@@ -112,18 +112,82 @@ Cypress.Commands.add('testImageSrcAlt', (dataCySelector, src, alt) => {
     .should('have.attr', 'alt', alt);
 });
 
+/**
+ * Custom setDPR command that allows setting the devicePixelRatio
+ * in the window object.
+ *
+ * @param {number} dpr - devicePixelRatio
+ */
+Cypress.Commands.add('setDPR', (dpr) => {
+  cy.window().then((win) => {
+    Object.defineProperty(win, 'devicePixelRatio', {
+      get: () => dpr,
+    });
+  });
+});
+
+/**
+ * Custom waitForFonts command that waits for all fonts to be loaded.
+ * Used in combination with `waitForStylesheets` in `testIcon` command.
+ */
+Cypress.Commands.add('waitForFonts', () => {
+  cy.document().then((document) => {
+    document.fonts.ready.then(() => {
+      cy.log('All fonts loaded');
+    });
+  });
+});
+
+/**
+ * Custom waitForStylesheets command that waits for all stylesheets to be loaded
+ * Used in combination with `waitForFonts` in `testIcon` command.
+ */
+Cypress.Commands.add('waitForStylesheets', () => {
+  cy.document().then((doc) => {
+    const stylesheets = Array.from(
+      doc.querySelectorAll('link[rel="stylesheet"]'),
+    );
+    const loadPromises = stylesheets.map((stylesheet) => {
+      return new Promise((resolve) => {
+        stylesheet.addEventListener('load', resolve);
+      });
+    });
+    return Promise.all(loadPromises);
+  });
+});
+
+/**
+ * Custom testIcon command that takes an HTML element (icon) and tests
+ * its size and snapshot.
+ *
+ * @param {object} element - HTML element (icon)
+ * @param {string} name - name of the snapshot
+ * @param {number} size - size of the icon
+ *
+ * @example cy.dataCy('icon').then((element) => {
+ *   testIcon({element, name: 'icon-name', size: 32})
+ * });
+ */
 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.waitForFonts();
+  cy.waitForStylesheets();
   // size
   cy.wrap(element[0]).invoke('width').should('eq', size);
   cy.wrap(element[0]).invoke('height').should('eq', size);
   // snapshot
-  cy.wrap(element[0]).should('be.visible').matchImageSnapshot(name, {
+  cy.wrap(element[0]).should('be.visible');
+  cy.wrap(element[0]).matchImageSnapshot(name, {
     failureThreshold: 0.1,
     failureThresholdType: 'percent',
+    timeout: 1000,
+    customDiffConfig: { threshold: 0.4 },
     screenshotsFolder: 'test/cypress/snapshots',
+    retries: 2,
   });
 });