Fix flaky Map and PDF snapshots (#2469)

* make sure map tiles are not faded before taking snapshot * make map and pdf snapshots more consistent
Altinn · Sep 19, 2024 · 5c18708 · 5c18708
1 parent 170f8bf
commit 5c18708
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 21 deletions.
diff --git a/test/e2e/integration/frontend-test/components.ts b/test/e2e/integration/frontend-test/components.ts
@@ -739,12 +739,22 @@ describe('UI Components', () => {
   });
 
   it('Map component with simpleBinding', () => {
-    cy.intercept('GET', 'https://cache.kartverket.no/**/*.png', { fixture: 'map-tile.png' });
-    cy.intercept('GET', 'https://tile.openstreetmap.org/**/*.png', { fixture: 'map-tile.png' });
-    cy.interceptLayout('changename', (comp) => {
-      if (comp.id === 'map' && comp.type === 'Map') {
-        delete comp.dataModelBindings.geometries;
-      }
+    cy.fixture('map-tile.png', 'base64').then((data) => {
+      cy.interceptLayout('changename', (component) => {
+        if (component.type === 'Map' && component.id === 'map') {
+          component.layers = [
+            {
+              url: `data:image/png;base64,${data}`,
+              attribution: '&copy; <a href="about:blank">Team Apps</a>',
+            },
+          ];
+          delete component.dataModelBindings.geometries;
+        }
+
+        if (component.type === 'Input' && component.id === 'map-location') {
+          component.hidden = false;
+        }
+      });
     });
 
     cy.gotoHiddenPage('map');
@@ -768,20 +778,34 @@ describe('UI Components', () => {
       .findByText(/59(\.\d{1,6})?, 10(\.\d{1,6})?/)
       .should('be.visible');
 
+    // Set exact location so snapshot is consistent
+    cy.findByRole('textbox', { name: /eksakt lokasjon/i }).clear();
+    cy.findByRole('textbox', { name: /eksakt lokasjon/i }).type('59.930803,10.801246');
+    cy.waitUntilSaved();
+
     // Force the map component to remount to skip the zoom animation
     cy.gotoNavPage('form');
     cy.gotoNavPage('map');
 
+    // Make sure tiles are not faded before taking the snapshot
+    cy.get('.leaflet-layer img').each((layer) => cy.wrap(layer).should('have.css', 'opacity', '1'));
+
     cy.snapshot('components:map-simpleBinding');
   });
 
   it('Map component with geometries should center the map around the geometries', () => {
-    cy.intercept('GET', 'https://cache.kartverket.no/**/*.png', { fixture: 'map-tile.png' });
-    cy.intercept('GET', 'https://tile.openstreetmap.org/**/*.png', { fixture: 'map-tile.png' });
-    cy.interceptLayout('changename', (comp) => {
-      if (comp.id === 'map' && comp.type === 'Map') {
-        delete comp.dataModelBindings.simpleBinding;
-      }
+    cy.fixture('map-tile.png', 'base64').then((data) => {
+      cy.interceptLayout('changename', (component) => {
+        if (component.type === 'Map' && component.id === 'map') {
+          component.layers = [
+            {
+              url: `data:image/png;base64,${data}`,
+              attribution: '&copy; <a href="about:blank">Team Apps</a>',
+            },
+          ];
+          delete component.dataModelBindings.simpleBinding;
+        }
+      });
     });
 
     cy.gotoHiddenPage('map');

diff --git a/test/e2e/integration/frontend-test/pdf.ts b/test/e2e/integration/frontend-test/pdf.ts
@@ -1,4 +1,4 @@
-import { AppFrontend, component } from 'test/e2e/pageobjects/app-frontend';
+import { AppFrontend } from 'test/e2e/pageobjects/app-frontend';
 import { Likert } from 'test/e2e/pageobjects/likert';
 
 const appFrontend = new AppFrontend();
@@ -17,6 +17,30 @@ describe('PDF', () => {
   });
 
   it('should generate PDF for changename step', () => {
+    cy.interceptLayout(
+      'changename',
+      (component) => {
+        if (component.type === 'Map' && component.id === 'map') {
+          component.layers = [
+            {
+              // Since we are only doing a direct snapshot and not a 'real' percy snapshot we can get away with using a fake intercepted url
+              url: '/map-tile/{z}/{y}/{x}',
+              attribution: '&copy; <a href="about:blank">Team Apps</a>',
+            },
+          ];
+        }
+
+        if (component.type === 'Input' && component.id === 'map-location') {
+          component.hidden = false;
+        }
+      },
+      undefined,
+      {}, // intercept this every time
+    );
+
+    // Add a delay to simulate slow loading map tiles
+    cy.intercept('GET', '/map-tile/**', { delay: 50, fixture: 'map-tile.png' });
+
     cy.goto('changename');
 
     cy.findByRole('textbox', { name: /nytt fornavn/i }).type('Ola');
@@ -72,13 +96,11 @@ describe('PDF', () => {
     cy.dsSelect(appFrontend.changeOfName.reference, 'Ola Nordmann');
     cy.dsSelect(appFrontend.changeOfName.reference2, 'Ole');
 
-    // Add a delay to simulate slow loading map tiles
-    cy.intercept('GET', 'https://cache.kartverket.no/**/*.png', { fixture: 'map-tile.png', delay: 50 });
-    cy.intercept('GET', 'https://tile.openstreetmap.org/**/*.png', { fixture: 'map-tile.png', delay: 50 });
     cy.get('#choose-extra').findByText('Kart').click();
     cy.gotoNavPage('map');
-    cy.findByTestId(/^map-container/).click();
-    cy.get(component('map')).should('contain.text', 'Valgt lokasjon:');
+    // Set exact location so snapshot is consistent
+    cy.findByRole('textbox', { name: /eksakt lokasjon/i }).type('67.140824,16.101665');
+    cy.waitUntilSaved();
     cy.gotoNavPage('form'); // Go back to form to avoid waiting for map to load while zoom animation is happending
 
     cy.testPdf('changeName 2', () => {

diff --git a/test/e2e/support/custom.ts b/test/e2e/support/custom.ts
@@ -450,8 +450,9 @@ Cypress.Commands.add('moveProcessNext', () => {
   });
 });
 
-Cypress.Commands.add('interceptLayout', (taskName, mutator, wholeLayoutMutator) => {
-  cy.intercept({ method: 'GET', url: `**/api/layouts/${taskName}`, times: 1 }, (req) => {
+Cypress.Commands.add('interceptLayout', (taskName, mutator, wholeLayoutMutator, _options) => {
+  const options = _options ?? { times: 1 };
+  cy.intercept({ method: 'GET', url: `**/api/layouts/${taskName}`, ...options }, (req) => {
     req.reply((res) => {
       const set = JSON.parse(res.body);
       if (mutator) {
@@ -528,11 +529,21 @@ Cypress.Commands.add('directSnapshot', (snapshotName, { width, minHeight }, rese
 
   cy.viewport(width, minHeight);
 
+  // cy.screenshot's blackout property does not ensure that text is monospace which causes unecessary visual changes, so using our own percy css instead
+  cy.readFile('test/percy.css').then((percyCSS) => {
+    cy.document().then((doc) => {
+      const style = doc.createElement('style');
+      style.id = 'percy-css';
+      style.appendChild(doc.createTextNode(percyCSS));
+      doc.head.appendChild(style);
+    });
+  });
+  cy.get('#percy-css').should('exist');
+
   // Take screenshot
   const imageData = { path: '', dataUrl: '' };
   cy.screenshot(snapshotName, {
     overwrite: true,
-    blackout: ['.no-visual-testing'],
     onAfterScreenshot: (_, { path }) => {
       imageData.path = path;
     },

diff --git a/test/e2e/support/global.ts b/test/e2e/support/global.ts
@@ -127,6 +127,7 @@ declare global {
         taskName: FrontendTestTask | string,
         mutator?: (component: CompExternal) => void,
         wholeLayoutMutator?: (layoutSet: ILayoutCollection) => void,
+        options?: { times?: number },
       ): Chainable<null>;
 
       /**