Wait for theme-directives.html E2E test to render before taking a screenshot

[aloisklink]

📑 Summary

The theme-directives.html test currently sometimes takes a screenshot before all of the Mermaid diagrams have completed rendering.

This can result in the following error message when running pnpm run e2e:

1) Configuration and directives - nodes should be light blue
when rendering several diagrams
  diagrams should not taint later diagrams:
Error: Image was 23.384242424242423% different from saved snapshot with 154336 different pixels.
See diff for details: /mermaid/cypress/snapshots/rendering/conf-and-directives.spec.js/__diff_output__/conf-and-directives.spec-when-rendering-several-diagrams-diagram-1.diff.png
at Context.eval (webpack:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/cypress-image-snapshot/command.js:51:0)

Notes to reviewer

I'm not sure why we're only detecting this issue now in our E2E tests. Maybe #4759 changed some performance parameters, and that made the race-condition occur on my PC. Who knows, it could also just be because one of our dependencies updated, or now my PC is overheating and is running slightly slower 😆

Also, 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.

📋 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	17f5052
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/65073e00eb846900085b9b92
😎 Deploy Preview	https://deploy-preview-4846--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 #4846 (17f5052) into develop (4201e47) will decrease coverage by 0.85%.
The diff coverage is n/a.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #4846      +/-   ##
===========================================
- Coverage    80.55%   79.70%   -0.85%     
===========================================
  Files          148      148              
  Lines        13024    13024              
  Branches       612      612              
===========================================
- Hits         10491    10381     -110     
- Misses        2400     2510     +110     
  Partials       133      133              

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

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

see 12 files with indirect coverage changes

[sidharthv96]

#4847 (review)

[aloisklink]

#4847 (review)

Fixed by 17f5052 to use the urlSnapshotTest() helper function! I've also removed some of the unused code in the theme-directives.html file, since I was making modifications to it anyway.

The only difference is that the snapshot now has a different ID, it's now located at cypress/snapshots/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-when-rendering-several-diagrams-diagrams-should-not-taint-later-diagrams.snap.png and looks like: