diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts index 249e268f2..a61edaaba 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -196,53 +196,45 @@ describe('mermaidAPI', () => { describe('appendDivSvgG', () => { // cspell:ignore dthe - jsdomIt('appends a div node', () => { - const body = select('body'); + jsdomIt('appends a div node', ({ body }) => { appendDivSvgG(body, 'theId', 'dtheId'); const divNode = ensureNodeFromSelector('div'); const svgNode = ensureNodeFromSelector('svg', divNode); ensureNodeFromSelector('g', svgNode); }); - jsdomIt('the id for the div is "d" with the id appended', () => { - const body = select('body'); + jsdomIt('the id for the div is "d" with the id appended', ({ body }) => { appendDivSvgG(body, 'theId', 'dtheId'); const divNode = ensureNodeFromSelector('div'); expect(divNode?.getAttribute('id')).toBe('dtheId'); }); - jsdomIt('sets the style for the div if one is given', () => { - const body = select('body'); + jsdomIt('sets the style for the div if one is given', ({ body }) => { appendDivSvgG(body, 'theId', 'dtheId', 'given div style', 'given x link'); const divNode = ensureNodeFromSelector('div'); expect(divNode?.getAttribute('style')).toBe('given div style'); }); - jsdomIt('sets the svg width to 100%', () => { - const body = select('body'); + jsdomIt('sets the svg width to 100%', ({ body }) => { appendDivSvgG(body, 'theId', 'dtheId'); const svgNode = ensureNodeFromSelector('div > svg'); expect(svgNode.getAttribute('width')).toBe('100%'); }); - jsdomIt('the svg id is the id', () => { - const body = select('body'); + jsdomIt('the svg id is the id', ({ body }) => { appendDivSvgG(body, 'theId', 'dtheId'); const svgNode = ensureNodeFromSelector('div > svg'); expect(svgNode.getAttribute('id')).toBe('theId'); }); - jsdomIt('the svg xml namespace is the 2000 standard', () => { - const body = select('body'); + jsdomIt('the svg xml namespace is the 2000 standard', ({ body }) => { appendDivSvgG(body, 'theId', 'dtheId'); const svgNode = ensureNodeFromSelector('div > svg'); expect(svgNode.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg'); }); - jsdomIt('sets the svg xlink if one is given', () => { - const body = select('body'); + jsdomIt('sets the svg xlink if one is given', ({ body }) => { appendDivSvgG(body, 'theId', 'dtheId', 'div style', 'given x link'); const svgNode = ensureNodeFromSelector('div > svg'); expect(svgNode.getAttribute('xmlns:xlink')).toBe('given x link'); }); - jsdomIt('returns the given parentRoot d3 nodes', () => { - const body = select('body'); + jsdomIt('returns the given parentRoot d3 nodes', ({ body }) => { expect(appendDivSvgG(body, 'theId', 'dtheId')).toEqual(body); }); }); diff --git a/packages/mermaid/src/tests/util.ts b/packages/mermaid/src/tests/util.ts index 09f7da2d4..c5ac9c149 100644 --- a/packages/mermaid/src/tests/util.ts +++ b/packages/mermaid/src/tests/util.ts @@ -63,7 +63,9 @@ export const MOCKED_BBOX = { }; interface JsdomItInput { - // eslint-disable-next-line + // eslint-disable-next-line @typescript-eslint/no-explicit-any + body: Selection; // The `any` here comes from D3'as API. + // eslint-disable-next-line @typescript-eslint/no-explicit-any svg: Selection; // 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, 'MutationObserver', undefined); // JSDOM doesn't like cytoscape elements - const svgSelection = select('svg'); - await run({ svg: svgSelection }); + const body = select('body'); + const svg = select('svg'); + await run({ body, svg }); } finally { setOnProtectedConstant(global, 'window', oldWindow); setOnProtectedConstant(global, 'document', oldDocument); diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts index f683fe146..35a2dfdd3 100644 --- a/packages/mermaid/src/utils.spec.ts +++ b/packages/mermaid/src/utils.spec.ts @@ -6,7 +6,6 @@ import { addDiagrams } from './diagram-api/diagram-orchestration.js'; import memoize from 'lodash-es/memoize.js'; import { preprocessDiagram } from './preprocess.js'; import { MOCKED_BBOX, ensureNodeFromSelector, jsdomIt } from './tests/util.js'; -import { select } from 'd3'; addDiagrams(); @@ -370,36 +369,31 @@ describe('when initializing the id generator', function () { }); describe('when inserting titles', function () { - jsdomIt('does nothing if the title is empty', function () { - const svg = select('svg'); + jsdomIt('does nothing if the title is empty', function ({ svg }) { utils.insertTitle(svg, 'testClass', 0, ''); const titleNode = document.querySelector('svg > text'); expect(titleNode).toBeNull(); }); - jsdomIt('appends the title as a text item with the given title text', function () { - const svg = select('svg'); + jsdomIt('appends the title as a text item with the given title text', function ({ svg }) { utils.insertTitle(svg, 'testClass', 5, 'test title'); const titleNode = ensureNodeFromSelector('svg > text'); expect(titleNode.innerHTML).toBe('test title'); }); - jsdomIt('x value is the bounds x position + half of the bounds width', () => { - const svg = select('svg'); + jsdomIt('x value is the bounds x position + half of the bounds width', ({ svg }) => { utils.insertTitle(svg, 'testClass', 5, 'test title'); const titleNode = ensureNodeFromSelector('svg > text'); expect(titleNode.getAttribute('x')).toBe(`${MOCKED_BBOX.x + MOCKED_BBOX.width / 2}`); }); - jsdomIt('y value is the negative of given title top margin', () => { - const svg = select('svg'); + jsdomIt('y value is the negative of given title top margin', ({ svg }) => { utils.insertTitle(svg, 'testClass', 5, 'test title'); const titleNode = ensureNodeFromSelector('svg > text'); expect(titleNode.getAttribute('y')).toBe(`${MOCKED_BBOX.y - 5}`); }); - jsdomIt('class is the given css class', () => { - const svg = select('svg'); + jsdomIt('class is the given css class', ({ svg }) => { utils.insertTitle(svg, 'testClass', 5, 'test title'); const titleNode = ensureNodeFromSelector('svg > text'); expect(titleNode.getAttribute('class')).toBe('testClass');