From 0f354ff9747dbab1bca8e3021355a4e19c20b58c Mon Sep 17 00:00:00 2001 From: Subhash Halder Date: Sat, 13 May 2023 19:45:45 +0530 Subject: [PATCH] Added e2e test cases with some fixes --- .../rendering/quadrantChart.spec.js | 163 ++++++++++++++++++ .../quadrant-chart/quadrantBuilder.ts | 20 ++- .../quadrant-chart/quadrantRenderer.ts | 2 +- 3 files changed, 180 insertions(+), 5 deletions(-) create mode 100644 cypress/integration/rendering/quadrantChart.spec.js diff --git a/cypress/integration/rendering/quadrantChart.spec.js b/cypress/integration/rendering/quadrantChart.spec.js new file mode 100644 index 000000000..4bcf58b60 --- /dev/null +++ b/cypress/integration/rendering/quadrantChart.spec.js @@ -0,0 +1,163 @@ +import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; + +describe('Quadrant Chart', () => { + it('should render if only chart type is provided', () => { + imgSnapshotTest( + ` + quadrantChart + `, + {} + ); + cy.get('svg'); + }); + it('should render a complete quadrant chart', () => { + imgSnapshotTest( + ` + quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + Campaign A: [0.3, 0.6] + Campaign B: [0.45, 0.23] + Campaign C: [0.57, 0.69] + Campaign D: [0.78, 0.34] + Campaign E: [0.40, 0.34] + Campaign F: [0.35, 0.78] + `, + {} + ); + cy.get('svg'); + }); + it('should render without points', () => { + imgSnapshotTest( + ` + quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + `, + {} + ); + cy.get('svg'); + }); + it('should able to render y-axix on right side', () => { + imgSnapshotTest( + ` + %%{init: {"quadrantChart": {"yAxisPosition": "right"}}}%% + quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + `, + {} + ); + cy.get('svg'); + }); + it('should able to render x-axix on bottom', () => { + imgSnapshotTest( + ` + %%{init: {"quadrantChart": {"xAxisPosition": "bottom"}}}%% + quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + `, + {} + ); + cy.get('svg'); + }); + it('should able to render x-axix on bottom and y-axis on right', () => { + imgSnapshotTest( + ` + %%{init: {"quadrantChart": {"xAxisPosition": "bottom", "yAxisPosition": "right"}}}%% + quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + `, + {} + ); + cy.get('svg'); + }); + it('should render without title', () => { + imgSnapshotTest( + ` + quadrantChart + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + `, + {} + ); + cy.get('svg'); + }); + it('should use all the config', () => { + imgSnapshotTest( + ` + %%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600, "titlePadding": 20, "titleFontSize": 10, "quadrantPadding": 20, "quadrantTextTopPadding": 40, "quadrantLabelFontSize": 20, "quadrantInternalBorderStrokeWidth": 3, "quadrantExternalBorderStrokeWidth": 5, "xAxisLabelPadding": 20, "xAxisLabelFontSize": 20, "yAxisLabelPadding": 20, "yAxisLabelFontSize": 20, "pointTextPadding": 20, "pointLabelFontSize": 20, "pointRadius": 10 }}}%% + quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + Campaign A: [0.3, 0.6] + Campaign B: [0.45, 0.23] + Campaign C: [0.57, 0.69] + Campaign D: [0.78, 0.34] + Campaign E: [0.40, 0.34] + Campaign F: [0.35, 0.78] + `, + {} + ); + cy.get('svg'); + }); + it('should use all the theme variable', () => { + imgSnapshotTest( + ` + %%{init: {"themeVariables": {"quadrant1Fill": "#b4dcff","quadrant2Fill": "#fef0ff", "quadrant3Fill": "#fffaf0", "quadrant4Fill": "#f0fff2", "quadrant1TextFill": "#ff0000", "quadrant2TextFill": "#2d00df", "quadrant3TextFill": "#00ffda", "quadrant4TextFill": "#e68300", "quadrantPointFill": "#0149ff", "quadrantPointTextFill": "#dc00ff", "quadrantXAxisTextFill": "#ffb500", "quadrantYAxisTextFill": "#fae604", "quadrantInternalBorderStrokeFill": "#3636f2", "quadrantExternalBorderStrokeFill": "#ff1010", "quadrantTitleFill": "#00ea19"} }}%% + quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + Campaign A: [0.3, 0.6] + Campaign B: [0.45, 0.23] + Campaign C: [0.57, 0.69] + Campaign D: [0.78, 0.34] + Campaign E: [0.40, 0.34] + Campaign F: [0.35, 0.78] + `, + {} + ); + cy.get('svg'); + }); +}); diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts index dc23a55c2..8168551ad 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts @@ -297,7 +297,10 @@ export class QuadrantBuilder { y: xAxisPosition === 'top' ? this.config.xAxisLabelPadding + titleSpace.top - : this.config.xAxisLabelPadding + quadrantTop + quadrantHeight, + : this.config.xAxisLabelPadding + + quadrantTop + + quadrantHeight + + this.config.quadrantPadding, fontSize: this.config.xAxisLabelFontSize, verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', horizontalPos: 'top', @@ -312,7 +315,10 @@ export class QuadrantBuilder { y: xAxisPosition === 'top' ? this.config.xAxisLabelPadding + titleSpace.top - : this.config.xAxisLabelPadding + quadrantTop + quadrantHeight, + : this.config.xAxisLabelPadding + + quadrantTop + + quadrantHeight + + this.config.quadrantPadding, fontSize: this.config.xAxisLabelFontSize, verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', horizontalPos: 'top', @@ -327,7 +333,10 @@ export class QuadrantBuilder { x: this.config.yAxisPosition === 'left' ? this.config.yAxisLabelPadding - : this.config.yAxisLabelPadding + quadrantLeft + quadrantWidth, + : this.config.yAxisLabelPadding + + quadrantLeft + + quadrantWidth + + this.config.quadrantPadding, y: quadrantTop + quadrantHeight - (drawAxisLabelInMiddle ? quadrantHalfHeight / 2 : 0), fontSize: this.config.yAxisLabelFontSize, verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', @@ -342,7 +351,10 @@ export class QuadrantBuilder { x: this.config.yAxisPosition === 'left' ? this.config.yAxisLabelPadding - : this.config.yAxisLabelPadding + quadrantLeft + quadrantWidth, + : this.config.yAxisLabelPadding + + quadrantLeft + + quadrantWidth + + this.config.quadrantPadding, y: quadrantTop + quadrantHalfHeight - (drawAxisLabelInMiddle ? quadrantHalfHeight / 2 : 0), fontSize: this.config.yAxisLabelFontSize, verticalPos: drawAxisLabelInMiddle ? 'center' : 'left', diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts index 955f77f54..46d3f773b 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts @@ -16,7 +16,7 @@ import { export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => { function getDominantBaseLine(horizontalPos: TextHorizontalPos) { - return horizontalPos === 'top' ? 'text-before-edge' : 'middle'; + return horizontalPos === 'top' ? 'hanging' : 'middle'; } function getTextAnchor(verticalPos: TextVerticalPos) {