collab/mermaid/cypress/integration/rendering/conf-and-directives.spec.jsblame
View source
6dd74de1import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
6dd74de2
6dd74de3describe('Configuration and directives - nodes should be light blue', () => {
6dd74de4 it('No config - use default', () => {
6dd74de5 imgSnapshotTest(
6dd74de6 `
6dd74de7 graph TD
6dd74de8 A(Default) --> B[/Another/]
6dd74de9 A --> C[End]
6dd74de10 subgraph section
6dd74de11 B
6dd74de12 C
6dd74de13 end
6dd74de14 `,
6dd74de15 {}
6dd74de16 );
6dd74de17 });
6dd74de18 it('Settings from initialize - nodes should be green', () => {
6dd74de19 imgSnapshotTest(
6dd74de20 `
6dd74de21graph TD
6dd74de22 A(Forest) --> B[/Another/]
6dd74de23 A --> C[End]
6dd74de24 subgraph section
6dd74de25 B
6dd74de26 C
6dd74de27 end `,
6dd74de28 { theme: 'forest' }
6dd74de29 );
6dd74de30 });
6dd74de31 it('Settings from initialize overriding themeVariable - nodes should be red', () => {
6dd74de32 imgSnapshotTest(
6dd74de33 `
6dd74de34
6dd74de35
6dd74de36 %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
6dd74de37graph TD
6dd74de38 A(Start) --> B[/Another/]
6dd74de39 A[/Another/] --> C[End]
6dd74de40 subgraph section
6dd74de41 B
6dd74de42 C
6dd74de43 end
6dd74de44 `,
6dd74de45 { theme: 'base', themeVariables: { primaryColor: '#ff0000' }, logLevel: 0 }
6dd74de46 );
6dd74de47 });
6dd74de48 it('Settings from directive - nodes should be grey', () => {
6dd74de49 imgSnapshotTest(
6dd74de50 `
6dd74de51 %%{init: { 'logLevel': 0, 'theme': 'neutral'} }%%
6dd74de52graph TD
6dd74de53 A(Start) --> B[/Another/]
6dd74de54 A[/Another/] --> C[End]
6dd74de55 subgraph section
6dd74de56 B
6dd74de57 C
6dd74de58 end
6dd74de59 `,
6dd74de60 {}
6dd74de61 );
6dd74de62 });
6dd74de63 it('Settings from frontmatter - nodes should be grey', () => {
6dd74de64 imgSnapshotTest(
6dd74de65 `
6dd74de66---
6dd74de67config:
6dd74de68 theme: neutral
6dd74de69---
6dd74de70graph TD
6dd74de71 A(Start) --> B[/Another/]
6dd74de72 A[/Another/] --> C[End]
6dd74de73 subgraph section
6dd74de74 B
6dd74de75 C
6dd74de76 end
6dd74de77 `,
6dd74de78 {}
6dd74de79 );
6dd74de80 });
6dd74de81
6dd74de82 it('Settings from directive overriding theme variable - nodes should be red', () => {
6dd74de83 imgSnapshotTest(
6dd74de84 `
6dd74de85 %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
6dd74de86graph TD
6dd74de87 A(Start) --> B[/Another/]
6dd74de88 A[/Another/] --> C[End]
6dd74de89 subgraph section
6dd74de90 B
6dd74de91 C
6dd74de92 end
6dd74de93 `,
6dd74de94 {}
6dd74de95 );
6dd74de96 });
6dd74de97 it('Settings from initialize and directive - nodes should be grey', () => {
6dd74de98 imgSnapshotTest(
6dd74de99 `
6dd74de100 %%{init: { 'logLevel': 0, 'theme': 'neutral'} }%%
6dd74de101graph TD
6dd74de102 A(Start) --> B[/Another/]
6dd74de103 A[/Another/] --> C[End]
6dd74de104 subgraph section
6dd74de105 B
6dd74de106 C
6dd74de107 end
6dd74de108 `,
6dd74de109 { theme: 'forest' }
6dd74de110 );
6dd74de111 });
6dd74de112 it('Theme from initialize, directive overriding theme variable - nodes should be red', () => {
6dd74de113 imgSnapshotTest(
6dd74de114 `
6dd74de115 %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
6dd74de116graph TD
6dd74de117 A(Start) --> B[/Another/]
6dd74de118 A[/Another/] --> C[End]
6dd74de119 subgraph section
6dd74de120 B
6dd74de121 C
6dd74de122 end
6dd74de123 `,
6dd74de124 { theme: 'base' }
6dd74de125 );
6dd74de126 });
6dd74de127 it('Theme from initialize, frontmatter overriding theme variable - nodes should be red', () => {
6dd74de128 imgSnapshotTest(
6dd74de129 `
6dd74de130---
6dd74de131config:
6dd74de132 theme: base
6dd74de133 themeVariables:
6dd74de134 primaryColor: '#ff0000'
6dd74de135---
6dd74de136graph TD
6dd74de137 A(Start) --> B[/Another/]
6dd74de138 A[/Another/] --> C[End]
6dd74de139 subgraph section
6dd74de140 B
6dd74de141 C
6dd74de142 end
6dd74de143 `,
6dd74de144 { theme: 'forest' }
6dd74de145 );
6dd74de146 });
6dd74de147 it('Theme from initialize, frontmatter overriding theme variable, directive overriding primaryColor - nodes should be red', () => {
6dd74de148 imgSnapshotTest(
6dd74de149 `
6dd74de150---
6dd74de151config:
6dd74de152 theme: base
6dd74de153 themeVariables:
6dd74de154 primaryColor: '#00ff00'
6dd74de155---
6dd74de156%%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
6dd74de157graph TD
6dd74de158 A(Start) --> B[/Another/]
6dd74de159 A[/Another/] --> C[End]
6dd74de160 subgraph section
6dd74de161 B
6dd74de162 C
6dd74de163 end
6dd74de164 `,
6dd74de165 { theme: 'forest' }
6dd74de166 );
6dd74de167 });
6dd74de168
6dd74de169 it('should render if values are not quoted properly', () => {
6dd74de170 // #ff0000 is not quoted properly, and will evaluate to null.
6dd74de171 // This test ensures that the rendering still works.
6dd74de172 imgSnapshotTest(
6dd74de173 `---
6dd74de174config:
6dd74de175 theme: base
6dd74de176 themeVariables:
6dd74de177 primaryColor: #ff0000
6dd74de178---
6dd74de179graph TD
6dd74de180 A(Start) --> B[/Another/]
6dd74de181 A[/Another/] --> C[End]
6dd74de182 subgraph section
6dd74de183 B
6dd74de184 C
6dd74de185 end
6dd74de186 `,
6dd74de187 { theme: 'forest' }
6dd74de188 );
6dd74de189 });
6dd74de190
6dd74de191 it('Theme variable from initialize, theme from directive - nodes should be red', () => {
6dd74de192 imgSnapshotTest(
6dd74de193 `
6dd74de194 %%{init: { 'logLevel': 0, 'theme': 'base'} }%%
6dd74de195graph TD
6dd74de196 A(Start) --> B[/Another/]
6dd74de197 A[/Another/] --> C[End]
6dd74de198 subgraph section
6dd74de199 B
6dd74de200 C
6dd74de201 end
6dd74de202 `,
6dd74de203 { themeVariables: { primaryColor: '#ff0000' } }
6dd74de204 );
6dd74de205 });
6dd74de206 describe('when rendering several diagrams', () => {
6dd74de207 it('diagrams should not taint later diagrams', () => {
6dd74de208 const url = '/theme-directives.html';
6dd74de209 urlSnapshotTest(url, {});
6dd74de210 });
6dd74de211 });
6dd74de212});