diff --git a/cypress/integration/rendering/architecture.spec.ts b/cypress/integration/rendering/architecture.spec.ts index 25326ff80..ec74a5dd5 100644 --- a/cypress/integration/rendering/architecture.spec.ts +++ b/cypress/integration/rendering/architecture.spec.ts @@ -19,6 +19,25 @@ describe.skip('architecture diagram', () => { ` ); }); + it('should render a simple architecture diagram with titleAndAccessabilities', () => { + imgSnapshotTest( + `architecture-beta + title Simple Architecture Diagram + accTitle: Accessibility Title + accDescr: Accessibility Description + group api(cloud)[API] + + service db(database)[Database] in api + service disk1(disk)[Storage] in api + service disk2(disk)[Storage] in api + service server(server)[Server] in api + + db:L -- R:server + disk1:T -- B:server + disk2:T -- B:db + ` + ); + }); it('should render an architecture diagram with groups within groups', () => { imgSnapshotTest( `architecture-beta @@ -172,7 +191,7 @@ describe.skip('architecture diagram', () => { ); }); - it('should render an architecture diagram with a resonable height', () => { + it('should render an architecture diagram with a reasonable height', () => { imgSnapshotTest( `architecture-beta group federated(cloud)[Federated Environment] diff --git a/packages/mermaid/src/diagrams/architecture/architecture.spec.ts b/packages/mermaid/src/diagrams/architecture/architecture.spec.ts new file mode 100644 index 000000000..45c19e23e --- /dev/null +++ b/packages/mermaid/src/diagrams/architecture/architecture.spec.ts @@ -0,0 +1,70 @@ +import { it, describe, expect } from 'vitest'; +import { db } from './architectureDb.js'; +import { parser } from './architectureParser.js'; + +const { + clear, + getDiagramTitle, + getAccTitle, + getAccDescription, + getServices, + getGroups, + getEdges, + getJunctions, +} = db; + +describe('architecture diagrams', () => { + beforeEach(() => { + clear(); + }); + + describe('architecture diagram definitions', () => { + it('should handle the architecture keyword', async () => { + const str = `architecture-beta`; + await expect(parser.parse(str)).resolves.not.toThrow(); + }); + + it('should handle an simple radar definition', async () => { + const str = `architecture-beta + service db + `; + await expect(parser.parse(str)).resolves.not.toThrow(); + }); + }); + + describe('should handle TitleAndAccessibilities', () => { + it('should handle title on the first line', async () => { + const str = `architecture-beta title Simple Architecture Diagram`; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getDiagramTitle()).toBe('Simple Architecture Diagram'); + }); + + it('should handle title on another line', async () => { + const str = `architecture-beta + title Simple Architecture Diagram + `; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getDiagramTitle()).toBe('Simple Architecture Diagram'); + }); + + it('should handle accessibility title and description', async () => { + const str = `architecture-beta + accTitle: Accessibility Title + accDescr: Accessibility Description + `; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getAccTitle()).toBe('Accessibility Title'); + expect(getAccDescription()).toBe('Accessibility Description'); + }); + + it('should handle multiline accessibility description', async () => { + const str = `architecture-beta + accDescr { + Accessibility Description + } + `; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getAccDescription()).toBe('Accessibility Description'); + }); + }); +}); diff --git a/packages/mermaid/src/diagrams/architecture/architectureDb.ts b/packages/mermaid/src/diagrams/architecture/architectureDb.ts index 2174ebe19..c7bd64e21 100644 --- a/packages/mermaid/src/diagrams/architecture/architectureDb.ts +++ b/packages/mermaid/src/diagrams/architecture/architectureDb.ts @@ -1,6 +1,6 @@ import type { ArchitectureDiagramConfig } from '../../config.type.js'; import DEFAULT_CONFIG from '../../defaultConfig.js'; -import { getConfig } from '../../diagram-api/diagramAPI.js'; +import { getConfig as commonGetConfig } from '../../config.js'; import type { D3Element } from '../../types.js'; import { ImperativeState } from '../../utils/imperativeState.js'; import { @@ -33,6 +33,7 @@ import { isArchitectureService, shiftPositionByArchitectureDirectionPair, } from './architectureTypes.js'; +import { cleanAndMerge } from '../../utils.js'; const DEFAULT_ARCHITECTURE_CONFIG: Required = DEFAULT_CONFIG.architecture; @@ -316,6 +317,14 @@ const setElementForId = (id: string, element: D3Element) => { }; const getElementById = (id: string) => state.records.elements[id]; +const getConfig = (): Required => { + const config = cleanAndMerge({ + ...DEFAULT_ARCHITECTURE_CONFIG, + ...commonGetConfig().architecture, + }); + return config; +}; + export const db: ArchitectureDB = { clear, setDiagramTitle, @@ -324,6 +333,7 @@ export const db: ArchitectureDB = { getAccTitle, setAccDescription, getAccDescription, + getConfig, addService, getServices, @@ -348,9 +358,5 @@ export const db: ArchitectureDB = { export function getConfigField( field: T ): Required[T] { - const arch = getConfig().architecture; - if (arch?.[field]) { - return arch[field] as Required[T]; - } - return DEFAULT_ARCHITECTURE_CONFIG[field]; + return getConfig()[field]; } diff --git a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts index a7af33ca7..c61df11ff 100644 --- a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts +++ b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts @@ -1,4 +1,4 @@ -import type { DiagramDB } from '../../diagram-api/types.js'; +import type { DiagramDBBase } from '../../diagram-api/types.js'; import type { ArchitectureDiagramConfig } from '../../config.type.js'; import type { D3Element } from '../../types.js'; import type cytoscape from 'cytoscape'; @@ -242,7 +242,7 @@ export interface ArchitectureEdge
{ title?: string; } -export interface ArchitectureDB extends DiagramDB { +export interface ArchitectureDB extends DiagramDBBase { clear: () => void; addService: (service: Omit) => void; getServices: () => ArchitectureService[]; diff --git a/packages/mermaid/src/diagrams/radar/radar.spec.ts b/packages/mermaid/src/diagrams/radar/radar.spec.ts index 5e5f444c6..3a506c69e 100644 --- a/packages/mermaid/src/diagrams/radar/radar.spec.ts +++ b/packages/mermaid/src/diagrams/radar/radar.spec.ts @@ -1,11 +1,9 @@ import { it, describe, expect } from 'vitest'; import { db } from './db.js'; import { parser } from './parser.js'; -import { renderer, relativeRadius, closedRoundCurve } from './renderer.js'; +import { relativeRadius, closedRoundCurve } from './renderer.js'; import { Diagram } from '../../Diagram.js'; import mermaidAPI from '../../mermaidAPI.js'; -import { a } from 'vitest/dist/chunks/suite.qtkXWc6R.js'; -import { buildRadarStyleOptions } from './styles.js'; const { clear, diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts index 64f4b8d60..6b112b90e 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -31,6 +31,7 @@ vi.mock('./diagrams/xychart/xychartRenderer.js'); vi.mock('./diagrams/requirement/requirementRenderer.js'); vi.mock('./diagrams/sequence/sequenceRenderer.js'); vi.mock('./diagrams/radar/renderer.js'); +vi.mock('./diagrams/architecture/architectureRenderer.js'); // ------------------------------------- @@ -799,6 +800,7 @@ graph TD;A--x|text including URL space|B;`) { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' }, { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' }, { textDiagramType: 'radar-beta', expectedType: 'radar' }, + { textDiagramType: 'architecture-beta', expectedType: 'architecture' }, ]; describe('accessibility', () => {