marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-20 15:59:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

test: mock SVGElement.getBBox using jsdomit for DOM tests

Browse Source 
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This commit is contained in:
darshanr0107
2025-08-29 11:31:12 +05:30
parent 310fcd2292
commit 01e47333d5
1 changed files with 112 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
packages/mermaid/src/mermaidAPI.spec.ts
View File

@@ -1,4 +1,4 @@
import { assert, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
import { assert, beforeEach, describe, expect, it, vi } from 'vitest';
import assignWithDepth from './assignWithDepth.js';
import type { MermaidConfig } from './config.type.js';
@@ -41,7 +41,6 @@ import { decodeEntities, encodeEntities } from './utils.js';
import { toBase64 } from './utils/base64.js';
import { StateDB } from './diagrams/state/stateDb.js';
import { ensureNodeFromSelector, jsdomIt } from './tests/util.js';
import { select } from 'd3';
import { JSDOM } from 'jsdom';
/**
@@ -50,28 +49,6 @@ import { JSDOM } from 'jsdom';
*/
// -------------------------------------------------------------------------------------
declare global {
interface SVGElement {
getBBox?: () => {
x: number;
y: number;
width: number;
height: number;
top: number;
left: number;
right: number;
bottom: number;
};
}
}
beforeAll(() => {
SVGElement.prototype.getBBox ??= function () {
return { x: 0, y: 0, width: 100, height: 20, top: 0, left: 0, right: 100, bottom: 20 };
};
});
describe('mermaidAPI', () => {
describe('encodeEntities', () => {
it('removes the ending ; from style [text1]:[optional word]#[text2]; with ', () => {
@@ -941,7 +918,8 @@ graph TD;A--x|text including URL space|B;`)
beforeEach(() => {
mermaidAPI.globalReset();
});
it('renders with YAML config taking precedence over initialize config', async () => {
jsdomIt('renders with YAML config taking precedence over initialize config', async () => {
mermaid.initialize({
theme: 'forest',
fontFamily: 'Arial',
@@ -971,9 +949,14 @@ flowchart TD
expect(config.themeVariables.fontFamily).toBe('Courier New');
expect(config.themeVariables.fontSize).toBe('20px');
expect(config.flowchart?.htmlLabels).toBe(true);
const svgNode = ensureNodeFromSelector('svg', new JSDOM(svg).window.document);
expect(svgNode).not.toBeNull();
});
it('renders with YAML themeVariables fully overriding initialize themeVariables', async () => {
jsdomIt(
'renders with YAML themeVariables fully overriding initialize themeVariables',
async () => {
mermaid.initialize({
themeVariables: { fontFamily: 'Arial', fontSize: '16px' },
});
@@ -995,10 +978,15 @@ flowchart TD
expect(config.themeVariables.fontSize).toBe('20px');
expect(config.themeVariables.fontFamily).not.toBe('Arial');
expect(config.themeVariables.fontSize).not.toBe('16px');
expect(svg).toContain('<svg');
});
it('renders with YAML themeVariables overriding only provided keys and keeping others from initialize', async () => {
const svgNode = ensureNodeFromSelector('svg', new JSDOM(svg).window.document);
expect(svgNode).not.toBeNull();
}
);
jsdomIt(
'renders with YAML themeVariables overriding only provided keys and keeping others from initialize',
async () => {
mermaid.initialize({
theme: 'forest',
fontFamily: 'Arial',
@@ -1020,9 +1008,15 @@ flowchart TD
expect(config.themeVariables.fontFamily).toBe('Courier New');
expect(config.themeVariables.fontSize).toBe('16px');
expect(config.themeVariables.colorPrimary).toBe('#ff0000');
});
it('renders with YAML config (no themeVariables) and falls back to initialize themeVariables', async () => {
const svgNode = ensureNodeFromSelector('svg', new JSDOM(svg).window.document);
expect(svgNode).not.toBeNull();
}
);
jsdomIt(
'renders with YAML config (no themeVariables) and falls back to initialize themeVariables',
async () => {
mermaid.initialize({
themeVariables: { fontFamily: 'Arial', fontSize: '16px' },
});
@@ -1041,9 +1035,15 @@ flowchart TD
expect(config.themeVariables.fontFamily).toBe('Arial');
expect(config.themeVariables.fontSize).toBe('16px');
expect(config.theme).toBe('base');
});
it('renders with full YAML config block taking full precedence over initialize config', async () => {
const svgNode = ensureNodeFromSelector('svg', new JSDOM(svg).window.document);
expect(svgNode).not.toBeNull();
}
);
jsdomIt(
'renders with full YAML config block taking full precedence over initialize config',
async () => {
mermaid.initialize({
theme: 'forest',
fontFamily: 'Arial',
@@ -1073,10 +1073,15 @@ flowchart TD
expect(config.themeVariables.fontFamily).toBe('Courier New');
expect(config.themeVariables.fontSize).toBe('20px');
expect(config.flowchart?.htmlLabels).toBe(true);
expect(svg).toContain('<svg');
});
it('renders with YAML config (no themeVariables) and falls back to initialize themeVariables (duplicate scenario)', async () => {
const svgNode = ensureNodeFromSelector('svg', new JSDOM(svg).window.document);
expect(svgNode).not.toBeNull();
}
);
jsdomIt(
'renders with YAML config (no themeVariables) and falls back to initialize themeVariables (duplicate scenario)',
async () => {
mermaid.initialize({
themeVariables: { fontFamily: 'Arial', fontSize: '16px' },
});
@@ -1095,9 +1100,10 @@ flowchart TD
expect(config.themeVariables.fontFamily).toBe('Arial');
expect(config.themeVariables.fontSize).toBe('16px');
expect(config.theme).toBe('base');
});
}
);
it('renders with no YAML config so initialize config is fully applied', async () => {
jsdomIt('renders with no YAML config so initialize config is fully applied', async () => {
mermaid.initialize({
theme: 'forest',
fontFamily: 'Arial',
@@ -1118,7 +1124,9 @@ flowchart TD
expect(config.themeVariables.fontSize).toBe('16px');
});
it('renders with empty YAML config block and falls back to initialize config', async () => {
jsdomIt(
'renders with empty YAML config block and falls back to initialize config',
async () => {
mermaid.initialize({
theme: 'dark',
themeVariables: { fontFamily: 'Times', fontSize: '14px' },
@@ -1137,6 +1145,7 @@ flowchart TD
expect(config.theme).toBe('dark');
expect(config.themeVariables.fontFamily).toBe('Times');
expect(config.themeVariables.fontSize).toBe('14px');
});
}
);
});
});