{
  "stats": {
    "suites": 1,
    "tests": 1,
    "passes": 1,
    "pending": 0,
    "failures": 0,
    "start": "2025-11-06T05:40:02.431Z",
    "end": "2025-11-06T05:40:16.950Z",
    "duration": 14519,
    "testsRegistered": 1,
    "passPercent": 100,
    "pendingPercent": 0,
    "other": 0,
    "hasOther": false,
    "skipped": 0,
    "hasSkipped": false
  },
  "results": [
    {
      "uuid": "9e19d765-7343-425f-acc8-5e04bad38768",
      "title": "",
      "fullFile": "cypress/component/VisualTest.cy.js",
      "file": "cypress/component/VisualTest.cy.js",
      "beforeHooks": [],
      "afterHooks": [],
      "tests": [],
      "suites": [
        {
          "uuid": "51d6b3d0-a67a-419a-88c0-528a05d68327",
          "title": "MultiFlatmapVuer Screenshot Comparison",
          "fullFile": "",
          "file": "",
          "beforeHooks": [],
          "afterHooks": [],
          "tests": [
            {
              "title": "should render the same content as base map",
              "fullTitle": "MultiFlatmapVuer Screenshot Comparison should render the same content as base map",
              "timedOut": null,
              "duration": 14287,
              "state": "passed",
              "speed": "slow",
              "pass": true,
              "fail": false,
              "pending": false,
              "context": null,
              "code": "cy.loadMultiFlatmap('@develProps', 'Test');\n// Wait for MultiFlatmap to be ready\ncy.get('@readySpy').should('have.been.called');\n// Get the flatmap UUID and API from the loaded component\ncy.window().then((win) => {\n  const flatmapVuer = win.Cypress.multiFlatmapVuer.getCurrentFlatmap();\n  const mapImp = flatmapVuer.mapImp;\n  const flatmapUUID = mapImp.uuid;\n  // Wait for the map canvas to appear\n  cy.get('.maplibregl-touch-zoom-rotate > .maplibregl-canvas:visible', { timeout: 30000 }).should('exist');\n  cy.wait(1000);\n  cy.get('.el-loading-mask', { timeout: 30000 }).should('not.exist');\n  // NOTE: disable style modifications for now\n  // modifyRenderedMap(mapImp, LAYERS, STROKE_INTERPOLATION); // modify centreline style\n  cy.wait(2000);\n  // Take screenshot of viewer canvas\n  cy.get('.maplibregl-touch-zoom-rotate > .maplibregl-canvas:visible').as('viewerCanvas');\n  // CLI\n  cy.get('@viewerCanvas').screenshot('base/cypress/component/VisualTest.cy.js/viewer-canvas', { overwrite: true })\n  // UI\n  cy.get('@viewerCanvas').screenshot('VisualTest.cy.js/base/cypress/component/VisualTest.cy.js/viewer-canvas', { overwrite: true })\n  // Test with saved screenshot from fixture\n  cy.get('@viewerCanvas').compareSnapshot('test-canvas').then(comparisonResults => {\n    expect(comparisonResults.percentage, 'Viewer map should match test-canvas.png exactly').to.equal(0);\n  });\n  // NOTE: disable base map comparison for now\n  // Currently, the base map's style are differnt from rendered map in viewer\n  // cy.get('@develProps').then((props) => {\n  //   const flatmapAPI = props.flatmapAPI;\n  //   const baseMapUrl = `${flatmapAPI}flatmap/${flatmapUUID}`;\n  //   // Create iframe in the same document to load base map\n  //   cy.document().then((doc) => {\n  //     doc.body.style.margin = '0';\n  //     const iframe = doc.createElement('iframe');\n  //     const iframeContainer = doc.createElement('div');\n  //     iframeContainer.style.position = 'fixed';\n  //     iframeContainer.style.top = '0';\n  //     iframeContainer.style.left = '0';\n  //     iframeContainer.style.width = '500px';\n  //     iframeContainer.style.height = '500px';\n  //     iframeContainer.style.zIndex = '9999';\n  //     iframe.src = baseMapUrl;\n  //     iframe.style.position = 'absolute';\n  //     iframe.style.top = '0';\n  //     iframe.style.left = '0';\n  //     iframe.style.width = '100%';\n  //     iframe.style.height = '100%';\n  //     iframe.style.border = 'none';\n  //     iframe.id = 'base-map-iframe';\n  //     iframeContainer.appendChild(iframe);\n  //     doc.body.appendChild(iframeContainer);\n  //     cy.get('.multi-container').invoke('css', 'z-index', '0');\n  //     cy.get('.multi-container').invoke('css', 'opacity', '0');\n  //     // Wait for iframe to load and render\n  //     cy.get('#base-map-iframe', { timeout: 30000 }).should('exist');\n  //     cy.wait(8000);\n  //     // Take screenshot of iframe\n  //     cy.get('#base-map-iframe').as('baseMapIframe');\n  //     cy.get('@baseMapIframe').screenshot('base-canvas', { overwrite: true });\n  //     // Compare screenshots\n  //     cy.get('@baseMapIframe').compareSnapshot('viewer-canvas').then(comparisonResults => {\n  //       expect(comparisonResults.percentage, 'Base map and viewer map should render identically').to.be.lessThan(ERROR_TOLERANCE);\n  //     });\n  //   });\n  // });\n});",
              "err": {},
              "uuid": "8d936bc1-d2cd-45c9-9f82-e2748a9a6fb1",
              "parentUUID": "51d6b3d0-a67a-419a-88c0-528a05d68327",
              "isHook": false,
              "skipped": false
            }
          ],
          "suites": [],
          "passes": [
            "8d936bc1-d2cd-45c9-9f82-e2748a9a6fb1"
          ],
          "failures": [],
          "pending": [],
          "skipped": [],
          "duration": 14287,
          "root": false,
          "rootEmpty": false,
          "_timeout": 2000
        }
      ],
      "passes": [],
      "failures": [],
      "pending": [],
      "skipped": [],
      "duration": 0,
      "root": true,
      "rootEmpty": true,
      "_timeout": 2000
    }
  ],
  "meta": {
    "mocha": {
      "version": "7.0.1"
    },
    "mochawesome": {
      "options": {
        "quiet": true,
        "reportFilename": "mochawesome",
        "saveHtml": true,
        "saveJson": true,
        "consoleReporter": "spec",
        "useInlineDiffs": false,
        "code": true
      },
      "version": "7.1.4"
    },
    "marge": {
      "options": {
        "id": "default",
        "reportDir": "cypress/reports/mocha",
        "quiet": true,
        "overwrite": false,
        "html": true,
        "json": true
      },
      "version": "6.3.0"
    }
  }
}