marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-17 14:29:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

e2e tests added

Browse Source
This commit is contained in:
Axel Müller
2024-01-08 16:41:53 +01:00
parent e1d085925e
commit 1273f440a8
1 changed files with 149 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
cypress/integration/rendering/xyChart.spec.js
View File

@@ -1,19 +1,20 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('XY Chart', () => { describe('XY Chart', () => {
it('should render the simplest possible chart', () => { describe('single dataset', () => {
imgSnapshotTest( it('should render the simplest possible chart', () => {
` imgSnapshotTest(
`
xychart-beta xychart-beta
line [10, 30, 20] line [10, 30, 20]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Should render a complete chart', () => { it('Should render a complete chart', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -21,62 +22,62 @@ describe('XY Chart', () => {
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
}); });
it('Should render a chart without title', () => { it('Should render a chart without title', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('y-axis title not required', () => { it('y-axis title not required', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis 4000 --> 11000 y-axis 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Should render a chart without y-axis with different range', () => { it('Should render a chart without y-axis with different range', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('x axis title not required', () => { it('x axis title not required', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Multiple plots can be rendered', () => { it('Multiple plots can be rendered', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
line [23, 46, 77, 34] line [23, 46, 77, 34]
line [45, 32, 33, 12] line [45, 32, 33, 12]
@@ -85,24 +86,24 @@ describe('XY Chart', () => {
line [22, 29, 75, 33] line [22, 29, 75, 33]
bar [52, 96, 35, 10] bar [52, 96, 35, 10]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Decimals and negative numbers are supported', () => { it('Decimals and negative numbers are supported', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
y-axis -2.4 --> 3.5 y-axis -2.4 --> 3.5
line [+1.3, .6, 2.4, -.34] line [+1.3, .6, 2.4, -.34]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Render spark line with "plotReservedSpacePercent"', () => { it('Render spark line with "plotReservedSpacePercent"', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
theme: dark theme: dark
@@ -114,13 +115,13 @@ describe('XY Chart', () => {
xychart-beta xychart-beta
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Render spark bar without displaying other property', () => { it('Render spark bar without displaying other property', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
theme: dark theme: dark
@@ -141,13 +142,13 @@ describe('XY Chart', () => {
xychart-beta xychart-beta
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Should use all the config from directive', () => { it('Should use all the config from directive', () => {
imgSnapshotTest( imgSnapshotTest(
` `
%%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%%
xychart-beta xychart-beta
title "Sales Revenue" title "Sales Revenue"
@@ -156,13 +157,13 @@ describe('XY Chart', () => {
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Should use all the config from yaml', () => { it('Should use all the config from yaml', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
theme: forest theme: forest
@@ -197,13 +198,13 @@ describe('XY Chart', () => {
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Render with show axis title false', () => { it('Render with show axis title false', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
xyChart: xyChart:
@@ -219,13 +220,13 @@ describe('XY Chart', () => {
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Render with show axis label false', () => { it('Render with show axis label false', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
xyChart: xyChart:
@@ -241,13 +242,13 @@ describe('XY Chart', () => {
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Render with show axis tick false', () => { it('Render with show axis tick false', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
xyChart: xyChart:
@@ -263,13 +264,13 @@ describe('XY Chart', () => {
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Render with show axis line false', () => { it('Render with show axis line false', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
xyChart: xyChart:
@@ -285,13 +286,13 @@ describe('XY Chart', () => {
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Render all the theme color', () => { it('Render all the theme color', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
themeVariables: themeVariables:
@@ -315,8 +316,39 @@ describe('XY Chart', () => {
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
});
});
describe('multiple datasets', () => {
it('should render 3 datasets', () => {
imgSnapshotTest(
`
xychart-beta
title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160
bar [["dogs" [40, 20, 40, 30]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
`,
{}
);
cy.get('svg');
});
it('should render 3 datasets in horizontal orientation', () => {
imgSnapshotTest(
`
xychart-beta horizontal
title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160
bar [["dogs" [40, 20, 40, 30]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
`,
{}
);
cy.get('svg');
});
}); });
}); });