SequenceDiagram/scripts/sequence/SequenceDiagram_spec.mjs

import {VirtualDocument, textSizerFactory} from '../../spec/stubs/TestDOM.mjs';
import Exporter from './exporter/Exporter.mjs';
import Generator from './generator/Generator.mjs';
import Parser from './parser/Parser.mjs';
import Renderer from './renderer/Renderer.mjs';
import SequenceDiagram from './SequenceDiagram.mjs';
import {nodejs} from '../core/browser.mjs';

describe('SequenceDiagram', () => {
	function getSimplifiedContent(d) {
		return (d.dom().outerHTML
			.replace(/<g><\/g>/g, '')
			.replace(/<defs><\/defs>/g, '')
			.replace(' xmlns="http://www.w3.org/2000/svg" version="1.1"', '')
		);
	}

	let diagram = null;

	beforeEach(() => {
		diagram = new SequenceDiagram({
			document: new VirtualDocument(),
			namespace: '',
			textSizerFactory,
		});
	});

	it('contains references to core objects', () => {
		expect(SequenceDiagram.Parser).toBe(Parser);
		expect(SequenceDiagram.Generator).toBe(Generator);
		expect(SequenceDiagram.Renderer).toBe(Renderer);
		expect(SequenceDiagram.Exporter).toBe(Exporter);
	});

	it('provides default themes', () => {
		expect(SequenceDiagram.themes.length).toBeGreaterThan(1);
	});

	it('renders empty diagrams without error', () => {
		diagram.set('');

		expect(getSimplifiedContent(diagram)).toEqual(
			'<svg viewBox="-5 -5 10 10">' +
			'<metadata></metadata>' +
			'<defs>' +
			'<mask id="FullMask" maskUnits="userSpaceOnUse">' +
			'<rect fill="#FFFFFF" height="10" width="10" x="-5" y="-5">' +
			'</rect>' +
			'</mask>' +
			'<mask id="LineMask" maskUnits="userSpaceOnUse">' +
			'<rect fill="#FFFFFF" height="10" width="10" x="-5" y="-5">' +
			'</rect>' +
			'</mask>' +
			'</defs>' +
			'<g mask="url(#FullMask)">' +
			'<g mask="url(#LineMask)"></g>' +
			'</g>' +
			'</svg>'
		);
	});

	it('renders simple metadata', () => {
		diagram.set('title My title here');

		expect(getSimplifiedContent(diagram)).toEqual(
			'<svg viewBox="-11.5 -16 23 21">' +
			'<metadata>title My title here</metadata>' +
			'<defs>' +
			'<mask id="FullMask" maskUnits="userSpaceOnUse">' +
			'<rect fill="#FFFFFF" height="21" width="23" x="-11.5" y="-16">' +
			'</rect>' +
			'</mask>' +
			'<mask id="LineMask" maskUnits="userSpaceOnUse">' +
			'<rect fill="#FFFFFF" height="21" width="23" x="-11.5" y="-16">' +
			'</rect>' +
			'</mask>' +
			'</defs>' +
			'<g mask="url(#FullMask)">' +
			'<g mask="url(#LineMask)"></g>' +
			'</g>' +
			'<g>' +
			'<text' +
			' x="0"' +
			' font-family="sans-serif"' +
			' font-size="20"' +
			' line-height="1.3"' +
			' text-anchor="middle"' +
			' class="title"' +
			' y="-10">My title here</text>' +
			'</g>' +
			'</svg>'
		);
	});

	it('renders simple components', () => {
		diagram.set('A -> B');

		const content = getSimplifiedContent(diagram);

		expect(content).toContain(
			'<svg viewBox="-5 -5 82 56">'
		);

		// Agent 1
		expect(content).toContain(
			'<line fill="none" stroke="#000000" stroke-width="1"' +
			' x1="20.5" x2="20.5" y1="11" y2="46" class="agent-1-line"'
		);

		expect(content).toContain(
			'<rect class="outline" fill="transparent"' +
			' height="11" width="21" x="10" y="0"'
		);

		expect(content).toContain(
			'<text x="20.5"'
		);

		// Agent 2
		expect(content).toContain(
			'<line fill="none" stroke="#000000" stroke-width="1"' +
			' x1="51.5" x2="51.5" y1="11" y2="46" class="agent-2-line"'
		);

		expect(content).toContain(
			'<rect class="outline" fill="transparent"' +
			' height="11" width="21" x="41" y="0"'
		);

		expect(content).toContain(
			'<text x="51.5"'
		);

		// Arrow
		expect(content).toContain(
			'<path d="M20.5 26L48.5 26"'
		);

		expect(content).toContain(
			'<polygon points="46 31 51 26 46 21"'
		);
	});

	it('renders collapsed blocks', () => {
		diagram.set('if\nA -> B\nend');
		diagram.setCollapsed(0, true);

		const content = getSimplifiedContent(diagram);

		expect(content).toContain('<svg viewBox="-5 -5 60 39">');

		expect(content).toContain(
			'<line fill="none" stroke="#000000" stroke-width="1"' +
			' x1="20" x2="20" y1="7" y2="29"'
		);

		expect(content).toContain(
			'<line fill="none" stroke="#000000" stroke-width="1"' +
			' x1="30" x2="30" y1="7" y2="29"'
		);

		expect(content).toContain(
			'<rect fill="none" stroke="#000000" stroke-width="1.5"' +
			' rx="2" ry="2"' +
			' height="9" width="30" x="10" y="0"'
		);

		expect(content).toContain('<g class="region collapsed"');
	});

	it('measures OS fonts correctly on the first render', (done) => {
		if(nodejs) {
			pending('NodeJS font rendering not implemented yet');
			return;
		}

		const code = 'title message';
		const sd = new SequenceDiagram(code);
		const widthImmediate = sd.getSize().width;

		expect(widthImmediate).toBeGreaterThan(40);

		sd.set(code);

		expect(sd.getSize().width).toEqual(widthImmediate);

		setTimeout(() => {
			sd.set(code);

			expect(sd.getSize().width).toEqual(widthImmediate);

			done();
		}, 500);
	});

	it('measures embedded fonts correctly on the first render', (done) => {
		if(nodejs) {
			pending('NodeJS font rendering not implemented yet');
			return;
		}

		const code = 'theme sketch\ntitle message';
		const sd = new SequenceDiagram(code);
		const widthImmediate = sd.getSize().width;

		expect(widthImmediate).toBeGreaterThan(40);

		sd.set(code);

		expect(sd.getSize().width).toEqual(widthImmediate);

		setTimeout(() => {
			sd.set(code);

			expect(sd.getSize().width).toEqual(widthImmediate);

			done();
		}, 500);
	});
});