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

chore(test): Finish refactoring of jsdomit tests

Browse Source
This commit is contained in:
quilicicf
2025-06-24 14:49:45 +02:00
parent 627ee1f34d
commit 34e91f8b65
3 changed files with 19 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -196,53 +196,45 @@ describe('mermaidAPI', () => {
describe('appendDivSvgG', () => { describe('appendDivSvgG', () => {
// cspell:ignore dthe // cspell:ignore dthe
jsdomIt('appends a div node', () => { jsdomIt('appends a div node', ({ body }) => {
const body = select<HTMLBodyElement, never>('body');
appendDivSvgG(body, 'theId', 'dtheId'); appendDivSvgG(body, 'theId', 'dtheId');
const divNode = ensureNodeFromSelector('div'); const divNode = ensureNodeFromSelector('div');
const svgNode = ensureNodeFromSelector('svg', divNode); const svgNode = ensureNodeFromSelector('svg', divNode);
ensureNodeFromSelector('g', svgNode); ensureNodeFromSelector('g', svgNode);
}); });
jsdomIt('the id for the div is "d" with the id appended', () => { jsdomIt('the id for the div is "d" with the id appended', ({ body }) => {
const body = select<HTMLBodyElement, never>('body');
appendDivSvgG(body, 'theId', 'dtheId'); appendDivSvgG(body, 'theId', 'dtheId');
const divNode = ensureNodeFromSelector('div'); const divNode = ensureNodeFromSelector('div');
expect(divNode?.getAttribute('id')).toBe('dtheId'); expect(divNode?.getAttribute('id')).toBe('dtheId');
}); });
jsdomIt('sets the style for the div if one is given', () => { jsdomIt('sets the style for the div if one is given', ({ body }) => {
const body = select<HTMLBodyElement, never>('body');
appendDivSvgG(body, 'theId', 'dtheId', 'given div style', 'given x link'); appendDivSvgG(body, 'theId', 'dtheId', 'given div style', 'given x link');
const divNode = ensureNodeFromSelector('div'); const divNode = ensureNodeFromSelector('div');
expect(divNode?.getAttribute('style')).toBe('given div style'); expect(divNode?.getAttribute('style')).toBe('given div style');
}); });
jsdomIt('sets the svg width to 100%', () => { jsdomIt('sets the svg width to 100%', ({ body }) => {
const body = select<HTMLBodyElement, never>('body');
appendDivSvgG(body, 'theId', 'dtheId'); appendDivSvgG(body, 'theId', 'dtheId');
const svgNode = ensureNodeFromSelector('div > svg'); const svgNode = ensureNodeFromSelector('div > svg');
expect(svgNode.getAttribute('width')).toBe('100%'); expect(svgNode.getAttribute('width')).toBe('100%');
}); });
jsdomIt('the svg id is the id', () => { jsdomIt('the svg id is the id', ({ body }) => {
const body = select<HTMLBodyElement, never>('body');
appendDivSvgG(body, 'theId', 'dtheId'); appendDivSvgG(body, 'theId', 'dtheId');
const svgNode = ensureNodeFromSelector('div > svg'); const svgNode = ensureNodeFromSelector('div > svg');
expect(svgNode.getAttribute('id')).toBe('theId'); expect(svgNode.getAttribute('id')).toBe('theId');
}); });
jsdomIt('the svg xml namespace is the 2000 standard', () => { jsdomIt('the svg xml namespace is the 2000 standard', ({ body }) => {
const body = select<HTMLBodyElement, never>('body');
appendDivSvgG(body, 'theId', 'dtheId'); appendDivSvgG(body, 'theId', 'dtheId');
const svgNode = ensureNodeFromSelector('div > svg'); const svgNode = ensureNodeFromSelector('div > svg');
expect(svgNode.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg'); expect(svgNode.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg');
}); });
jsdomIt('sets the svg xlink if one is given', () => { jsdomIt('sets the svg xlink if one is given', ({ body }) => {
const body = select<HTMLBodyElement, never>('body');
appendDivSvgG(body, 'theId', 'dtheId', 'div style', 'given x link'); appendDivSvgG(body, 'theId', 'dtheId', 'div style', 'given x link');
const svgNode = ensureNodeFromSelector('div > svg'); const svgNode = ensureNodeFromSelector('div > svg');
expect(svgNode.getAttribute('xmlns:xlink')).toBe('given x link'); expect(svgNode.getAttribute('xmlns:xlink')).toBe('given x link');
}); });
jsdomIt('returns the given parentRoot d3 nodes', () => { jsdomIt('returns the given parentRoot d3 nodes', ({ body }) => {
const body = select<HTMLBodyElement, never>('body');
expect(appendDivSvgG(body, 'theId', 'dtheId')).toEqual(body); expect(appendDivSvgG(body, 'theId', 'dtheId')).toEqual(body);
}); });
}); });

9
packages/mermaid/src/tests/util.ts
View File

@@ -63,7 +63,9 @@ export const MOCKED_BBOX = {
}; };
interface JsdomItInput { interface JsdomItInput {
// eslint-disable-next-line // eslint-disable-next-line @typescript-eslint/no-explicit-any
body: Selection<HTMLBodyElement, never, HTMLElement, any>; // The `any` here comes from D3'as API.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
svg: Selection<SVGSVGElement, never, HTMLElement, any>; // The `any` here comes from D3'as API. svg: Selection<SVGSVGElement, never, HTMLElement, any>; // The `any` here comes from D3'as API.
} }
@@ -105,8 +107,9 @@ export function jsdomIt(message: string, run: (input: JsdomItInput) => void | Pr
setOnProtectedConstant(global, 'document', dom.window.document); // Fool D3 into thinking it's in a browser setOnProtectedConstant(global, 'document', dom.window.document); // Fool D3 into thinking it's in a browser
setOnProtectedConstant(global, 'MutationObserver', undefined); // JSDOM doesn't like cytoscape elements setOnProtectedConstant(global, 'MutationObserver', undefined); // JSDOM doesn't like cytoscape elements
const svgSelection = select<SVGSVGElement, never>('svg'); const body = select<HTMLBodyElement, never>('body');
await run({ svg: svgSelection }); const svg = select<SVGSVGElement, never>('svg');
await run({ body, svg });
} finally { } finally {
setOnProtectedConstant(global, 'window', oldWindow); setOnProtectedConstant(global, 'window', oldWindow);
setOnProtectedConstant(global, 'document', oldDocument); setOnProtectedConstant(global, 'document', oldDocument);

16
packages/mermaid/src/utils.spec.ts
View File

@@ -6,7 +6,6 @@ import { addDiagrams } from './diagram-api/diagram-orchestration.js';
import memoize from 'lodash-es/memoize.js'; import memoize from 'lodash-es/memoize.js';
import { preprocessDiagram } from './preprocess.js'; import { preprocessDiagram } from './preprocess.js';
import { MOCKED_BBOX, ensureNodeFromSelector, jsdomIt } from './tests/util.js'; import { MOCKED_BBOX, ensureNodeFromSelector, jsdomIt } from './tests/util.js';
import { select } from 'd3';
addDiagrams(); addDiagrams();
@@ -370,36 +369,31 @@ describe('when initializing the id generator', function () {
}); });
describe('when inserting titles', function () { describe('when inserting titles', function () {
jsdomIt('does nothing if the title is empty', function () { jsdomIt('does nothing if the title is empty', function ({ svg }) {
const svg = select<SVGSVGElement, never>('svg');
utils.insertTitle(svg, 'testClass', 0, ''); utils.insertTitle(svg, 'testClass', 0, '');
const titleNode = document.querySelector('svg > text'); const titleNode = document.querySelector('svg > text');
expect(titleNode).toBeNull(); expect(titleNode).toBeNull();
}); });
jsdomIt('appends the title as a text item with the given title text', function () { jsdomIt('appends the title as a text item with the given title text', function ({ svg }) {
const svg = select<SVGSVGElement, never>('svg');
utils.insertTitle(svg, 'testClass', 5, 'test title'); utils.insertTitle(svg, 'testClass', 5, 'test title');
const titleNode = ensureNodeFromSelector('svg > text'); const titleNode = ensureNodeFromSelector('svg > text');
expect(titleNode.innerHTML).toBe('test title'); expect(titleNode.innerHTML).toBe('test title');
}); });
jsdomIt('x value is the bounds x position + half of the bounds width', () => { jsdomIt('x value is the bounds x position + half of the bounds width', ({ svg }) => {
const svg = select<SVGSVGElement, never>('svg');
utils.insertTitle(svg, 'testClass', 5, 'test title'); utils.insertTitle(svg, 'testClass', 5, 'test title');
const titleNode = ensureNodeFromSelector('svg > text'); const titleNode = ensureNodeFromSelector('svg > text');
expect(titleNode.getAttribute('x')).toBe(`${MOCKED_BBOX.x + MOCKED_BBOX.width / 2}`); expect(titleNode.getAttribute('x')).toBe(`${MOCKED_BBOX.x + MOCKED_BBOX.width / 2}`);
}); });
jsdomIt('y value is the negative of given title top margin', () => { jsdomIt('y value is the negative of given title top margin', ({ svg }) => {
const svg = select<SVGSVGElement, never>('svg');
utils.insertTitle(svg, 'testClass', 5, 'test title'); utils.insertTitle(svg, 'testClass', 5, 'test title');
const titleNode = ensureNodeFromSelector('svg > text'); const titleNode = ensureNodeFromSelector('svg > text');
expect(titleNode.getAttribute('y')).toBe(`${MOCKED_BBOX.y - 5}`); expect(titleNode.getAttribute('y')).toBe(`${MOCKED_BBOX.y - 5}`);
}); });
jsdomIt('class is the given css class', () => { jsdomIt('class is the given css class', ({ svg }) => {
const svg = select<SVGSVGElement, never>('svg');
utils.insertTitle(svg, 'testClass', 5, 'test title'); utils.insertTitle(svg, 'testClass', 5, 'test title');
const titleNode = ensureNodeFromSelector('svg > text'); const titleNode = ensureNodeFromSelector('svg > text');
expect(titleNode.getAttribute('class')).toBe('testClass'); expect(titleNode.getAttribute('class')).toBe('testClass');