Add Visual Component Test to Ensure Flatmap Features Are Rendered Correctly

cypress/component/VisualTest.cy.js

@@ -0,0 +1,162 @@
+/* eslint-disable no-alert, no-console */
+const ERROR_TOLERANCE = 0.00384;
+// Ref: flatmap-viewer/src/layers/styling.ts
+const STROKE_INTERPOLATION = [
+  'interpolate',
+  ['exponential', 2],
+  ['zoom'],
+   2, ["*", ['var', 'width'], ["^", 2,  0.5]],
+   7, ["*", ['var', 'width'], ["^", 2,  1.5]],
+   9, ["*", ['var', 'width'], ["^", 2,  2.0]]
+];
+const LAYERS = [
+  {
+    id: 'simple-test_pathways_nerve-centreline-edge',
+    width: 2,
+    color: '#ccc',
+    opacity: 0
+  },
+  {
+    id: 'simple-test_pathways_nerve-centreline-track',
+    width: 2,
+    color: '#ccc',
+    opacity: 0.2
+  },
+];
+
+const modifyRenderedMap = (mapImp, layers, strokeInterpolation) => {
+  const map = mapImp.map;
+
+  mapImp.enablePath('centreline', true); // Enable centreline
+  mapImp.setPaint({ coloured: true, outlined: false }); // outline false
+
+  layers.forEach((layer) => {
+    const { id: layerId, width, color, opacity } = layer;
+    try {
+      map.setPaintProperty(layerId, 'line-width', [
+        'let',
+        'width',
+        width,
+        strokeInterpolation
+      ]);
+
+      map.setPaintProperty(layerId, 'line-color', color);
+      map.setPaintProperty(layerId, 'line-opacity', opacity);
+    } catch (error) {
+      console.log(`Layer ${layerId} not found or already updated`);
+    }
+  });
+};
+
+function is_high_resolution_screen() {
+  // retina display has a devicePixelRatio of 2
+  return window.devicePixelRatio > 1;
+}
+
+describe('MultiFlatmapVuer Screenshot Comparison', () => {
+
+  beforeEach(() => {
+    Cypress.env('visualRegressionBaseDirectory', 'cypress/screenshots/VisualTest.cy.js/base');
+    cy.viewport(500, 500);
+    cy.fixture('MultiFlatmapPropsDevel.json').then((props) => {
+      const modifiedProps = {
+        ...props,
+        displayMinimap: false,
+        disableUI: true,
+      };
+      cy.wrap(modifiedProps).as('develProps');
+    });
+
+    const testCanvasPath = is_high_resolution_screen() ? 'test-canvas_hr.png' : 'test-canvas_lr.png';
+    cy.fixture(testCanvasPath).then((baseImage) => {
+      // Save the base image to the screenshots folder for comparison
+      cy.writeFile('cypress/screenshots/VisualTest.cy.js/base/cypress/component/VisualTest.cy.js/test-canvas.png', baseImage, 'base64');
+    });
+  });
+
+  it('should render the same content as base map', () => {
+    cy.loadMultiFlatmap('@develProps', 'Test');
+
+    // Wait for MultiFlatmap to be ready
+    cy.get('@readySpy').should('have.been.called');
+
+    // Get the flatmap UUID and API from the loaded component
+    cy.window().then((win) => {
+      const flatmapVuer = win.Cypress.multiFlatmapVuer.getCurrentFlatmap();
+      const mapImp = flatmapVuer.mapImp;
+      const flatmapUUID = mapImp.uuid;
+
+      // Wait for the map canvas to appear
+      cy.get('.maplibregl-touch-zoom-rotate > .maplibregl-canvas:visible', { timeout: 30000 }).should('exist');
+
+      cy.wait(1000);
+      cy.get('.el-loading-mask', { timeout: 30000 }).should('not.exist');
+      // NOTE: disable style modifications for now
+      // modifyRenderedMap(mapImp, LAYERS, STROKE_INTERPOLATION); // modify centreline style
+      cy.wait(2000);
+
+      // Take screenshot of viewer canvas
+      cy.get('.maplibregl-touch-zoom-rotate > .maplibregl-canvas:visible').as('viewerCanvas');
+      // CLI
+      cy.get('@viewerCanvas').screenshot('base/cypress/component/VisualTest.cy.js/viewer-canvas', { overwrite: true })
+      // UI
+      cy.get('@viewerCanvas').screenshot('VisualTest.cy.js/base/cypress/component/VisualTest.cy.js/viewer-canvas', { overwrite: true })
+
+      // Test with saved screenshot from fixture
+      cy.get('@viewerCanvas').compareSnapshot('test-canvas').then(comparisonResults => {
+        expect(comparisonResults.percentage, 'Viewer map should match test-canvas.png exactly').to.equal(0);
+      });
+
+      // NOTE: disable base map comparison for now
+      // Currently, the base map's style are differnt from rendered map in viewer
+      // cy.get('@develProps').then((props) => {
+      //   const flatmapAPI = props.flatmapAPI;
+      //   const baseMapUrl = `${flatmapAPI}flatmap/${flatmapUUID}`;
+
+      //   // Create iframe in the same document to load base map
+      //   cy.document().then((doc) => {
+      //     doc.body.style.margin = '0';
+
+      //     const iframe = doc.createElement('iframe');
+      //     const iframeContainer = doc.createElement('div');
+
+      //     iframeContainer.style.position = 'fixed';
+      //     iframeContainer.style.top = '0';
+      //     iframeContainer.style.left = '0';
+      //     iframeContainer.style.width = '500px';
+      //     iframeContainer.style.height = '500px';
+      //     iframeContainer.style.zIndex = '9999';
+
+      //     iframe.src = baseMapUrl;
+      //     iframe.style.position = 'absolute';
+      //     iframe.style.top = '0';
+      //     iframe.style.left = '0';
+      //     iframe.style.width = '100%';
+      //     iframe.style.height = '100%';
+      //     iframe.style.border = 'none';
+      //     iframe.id = 'base-map-iframe';
+
+      //     iframeContainer.appendChild(iframe);
+      //     doc.body.appendChild(iframeContainer);
+
+      //     cy.get('.multi-container').invoke('css', 'z-index', '0');
+      //     cy.get('.multi-container').invoke('css', 'opacity', '0');
+
+      //     // Wait for iframe to load and render
+      //     cy.get('#base-map-iframe', { timeout: 30000 }).should('exist');
+      //     cy.wait(8000);
+
+      //     // Take screenshot of iframe
+      //     cy.get('#base-map-iframe').as('baseMapIframe');
+      //     cy.get('@baseMapIframe').screenshot('base-canvas', { overwrite: true });
+
+      //     // Compare screenshots
+      //     cy.get('@baseMapIframe').compareSnapshot('viewer-canvas').then(comparisonResults => {
+      //       expect(comparisonResults.percentage, 'Base map and viewer map should render identically').to.be.lessThan(ERROR_TOLERANCE);
+      //     });
+      //   });
+      // });
+    });
+  });
+
+});