Wait for marker_unique_id.html E2E test to render before taking a screenshot

[aloisklink]

📑 Summary

Sometimes, Cypress takes the screenshot for cypress/platform/marker_unique_id.html early, before mermaid has finished rendering the diagrams. This results in the following error when running pnpm run e2e:

  Running:  marker_unique_id.spec.js                                                        (1 of 1)


  Marker Unique IDs Per Diagram
    1) should render a blue arrow tip in second digram


  0 passing (4s)
  1 failing

  1) Marker Unique IDs Per Diagram
       should render a blue arrow tip in second digram:
     Error: Image size (1000x688) different than saved snapshot size (1000x854).
See diff for details: /mermaid/cypress/snapshots/marker_unique_id.spec.js/__diff_output__/Marker-Unique-IDs-Per-Diagram-should-render-a-blue-arrow-tip-in-second-digram.diff.png
      at Context.eval (webpack:///./node_modules/.pnpm/cypress-image-snapshot@4.0.1_cypress@12.10.0_jest@29.5.0/node_modules/cypress-image-snapshot/command.js:51:0)

Fixes: 924c9e9 and bceae92 (from PR #4825)

📏 Design Decision

Instead of taking a screenshot instantly, I've told Cypress to wait until it can see 4 SVGs on the given HTML page.

Because this is just a test change, I've labelled this PR as Skip changelog, since there's no point in putting it in the release notes.

Requesting a review from @sidharthv96, as they helped write these Cypress E2E tests a few days ago in #4825 😄.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🔖 targeted develop branch

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	335ba40
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/650738db66a4ec0008bfd21e
😎 Deploy Preview	https://deploy-preview-4847--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Merging #4847 (335ba40) into develop (4201e47) will decrease coverage by 0.84%.
The diff coverage is n/a.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #4847      +/-   ##
===========================================
- Coverage    80.55%   79.71%   -0.84%     
===========================================
  Files          148      148              
  Lines        13024    13024              
  Branches       612      612              
===========================================
- Hits         10491    10382     -109     
- Misses        2400     2509     +109     
  Partials       133      133              

Flag	Coverage Δ
e2e	84.75% <ø> (-1.04%)	⬇️
unit	43.67% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

see 11 files with indirect coverage changes

[sidharthv96]

<script type="module">
      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({ startOnLoad: true, logLevel: 0 });
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      await mermaid.run();
      if (window.Cypress) {
        window.rendered = true;
      }
</script>

Changing this in the HTML might be the better way, as the window.rendered exists to make sure the rendering has completed.

[aloisklink]

Changing this in the HTML might be the better way, as the window.rendered exists to make sure the rendering has completed.

Yep! That works just as well :)

I thought you might have had a reason for doing startOnLoad: true, so I didn't want to change it, but changing it is the easiest way of doing things.