test(refactor): Use real-ish rendering instead of heavy mocking in unit tests

* Creates a utility method `jsdomIt` that overrides `it` from `vitest` and fakes a browser environment by :
  * Creating a DOM with `jsdom` (and `canvas`)
  * Adding (for the duration of the test) that DOM's `window` and `document` on `global`
  * Monkey-patching DOM methods that require a rendering engine (`Element.getBBox` & `Element.getComputedLength`)
* Removes all d3 mocking since it can now work normally in `jsdomIt` tests
* Re-writes existing rendering tests to :
  * Use `jsdomIt`
  * Get rid of most of the involved mocking
  * Run `expect` calls on the generated SVG instead

Inspired by d3's own test code mocking : https://github.com/d3/d3-selection/blob/v3.0.0/test/jsdom.js
This commit is contained in:
quilicicf
2025-05-28 15:20:08 +02:00
parent f76e27db70
commit 4145879003
12 changed files with 1655 additions and 711 deletions

View File

@@ -16,7 +16,6 @@ export default defineConfig({
environment: 'jsdom',
globals: true,
// TODO: should we move this to a mermaid-core package?
setupFiles: ['packages/mermaid/src/tests/setup.ts'],
coverage: {
provider: 'v8',
reporter: ['text', 'json', 'html', 'lcov'],