# test.build/core/formatters/diagram.formatter.test.ts

> 17 lines of code and 0 definitions.

Tree: Codebase Testing
Language: typescript
Canonical: https://banes-lab.com/anatomy/testing#file-testing-test-build-core-formatters-diagram-formatter-test-ts
Source text: https://banes-lab.com/source/testing/test.build/core/formatters/diagram.formatter.test.ts.txt

Listed in [test.build/core/formatters](https://banes-lab.com/api/source/testing/test.build/core/formatters.md), after [test.build/core/formatters/company.formatter.test.ts](https://banes-lab.com/source/testing/test.build/core/formatters/company.formatter.test.ts.md) and before [test.build/core/formatters/graph.formatter.test.ts](https://banes-lab.com/source/testing/test.build/core/formatters/graph.formatter.test.ts.md).

## Contained in

- [test.build/core/formatters](https://banes-lab.com/anatomy/testing/folder-testing-test-build-core-formatters.md)

## Source

```typescript
import { describe, expect, it } from "vitest";
import { THEME_TOKENS } from "@banes-lab/build-scripts/configuration/constants/diagram.constants.ts";
import { stageMarkup } from "@banes-lab/build-scripts/core/formatters/diagram.formatter.ts";

describe("stageMarkup", () => {
    it("writes a stage page that loads the layout engine, the fonts and the site theme before it renders", () => {
        const tokens = new Map([
            ...THEME_TOKENS.map(([, token]): readonly [string, string] => [token, "#123456"]),
            ["--font-family-base", "Mono"],
        ]);
        const markup = stageMarkup(tokens);
        expect(markup).toContain("mermaid.registerLayoutLoaders(elk);");
        expect(markup).toContain("@font-face");
        expect(markup).toContain('"fontFamily":"Mono"');
        expect(markup).toContain("#123456");
        expect(markup).toContain("window.diagramsReady = true;");
    });
});
```
