From 17959f648a7c72ceef6e23b6966c90fb8e3b89be Mon Sep 17 00:00:00 2001 From: ilyes-ced Date: Wed, 7 Feb 2024 00:21:33 +0000 Subject: [PATCH] various fixes + add unit tests for parsed styles --- .../rendering/quadrantChart.spec.js | 20 ++++---- .../quadrant-chart/parser/quadrant.jison | 4 +- .../parser/quadrant.jison.spec.ts | 46 +++++++++++++++---- .../quadrant-chart/quadrantDb.spec.ts | 28 +++++++++++ .../src/diagrams/quadrant-chart/quadrantDb.ts | 7 +-- 5 files changed, 79 insertions(+), 26 deletions(-) create mode 100644 packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.spec.ts diff --git a/cypress/integration/rendering/quadrantChart.spec.js b/cypress/integration/rendering/quadrantChart.spec.js index 4f9002c65..8a64638f3 100644 --- a/cypress/integration/rendering/quadrantChart.spec.js +++ b/cypress/integration/rendering/quadrantChart.spec.js @@ -240,11 +240,11 @@ describe('Quadrant Chart', () => { quadrant-4 May be improved Campaign A: [0.3, 0.6] radius: 20 Campaign B: [0.45, 0.23] color: #ff0000 - Campaign C: [0.57, 0.69] stroke_color: #ff00ff - Campaign D: [0.78, 0.34] stroke_width: 3px - Campaign E: [0.40, 0.34] radius: 20, color: #ff0000, stroke_color: #ff00ff, stroke_width: 3px - Campaign F: [0.35, 0.78] stroke_width: 3px, color: #ff0000, radius: 20, stroke_color: #ff00ff - Campaign G: [0.22, 0.22] stroke_width: 3px, color: #309708, radius: 20, stroke_color: #5060ff + Campaign C: [0.57, 0.69] stroke-color: #ff00ff + Campaign D: [0.78, 0.34] stroke-width: 3px + Campaign E: [0.40, 0.34] radius: 20, color: #ff0000, stroke-color: #ff00ff, stroke-width: 3px + Campaign F: [0.35, 0.78] stroke-width: 3px, color: #ff0000, radius: 20, stroke-color: #ff00ff + Campaign G: [0.22, 0.22] stroke-width: 3px, color: #309708, radius: 20, stroke-color: #5060ff Campaign H: [0.22, 0.44] `, {} @@ -265,15 +265,13 @@ describe('Quadrant Chart', () => { quadrant-4 May be improved Campaign A:::class1: [0.3, 0.6] radius: 20 Campaign B: [0.45, 0.23] color: #ff0000 - Campaign C: [0.57, 0.69] stroke_color: #ff00ff - Campaign D:::class2: [0.78, 0.34] stroke_width: 3px - Campaign E:::class2: [0.40, 0.34] radius: 20 color: #ff0000, stroke_color: #ff00ff, stroke_width: 3px + Campaign C: [0.57, 0.69] stroke-color: #ff00ff + Campaign D:::class2: [0.78, 0.34] stroke-width: 3px + Campaign E:::class2: [0.40, 0.34] radius: 20 color: #ff0000, stroke-color: #ff00ff, stroke-width: 3px Campaign F:::class1: [0.35, 0.78] classDef class1 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px classDef class2 color: #f00fff, radius : 10 - `, - {} + ` ); - cy.get('svg'); }); }); diff --git a/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison b/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison index dc2314fc3..85e82b6b5 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison +++ b/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison @@ -96,9 +96,9 @@ style: styleComponent ; stylesOpt: style - {$$ = [$style]} + {$$ = [$style.trim()]} | stylesOpt COMMA style - {$stylesOpt.push($style);$$ = $stylesOpt;} + {$stylesOpt.push($style.trim());$$ = $stylesOpt;} ; classDefStatement diff --git a/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts b/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts index dc63d40da..98185ba8a 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts @@ -203,20 +203,34 @@ describe('Testing quadrantChart jison file', () => { it('should be able to parse points', () => { let str = 'quadrantChart\npoint1: [0.1, 0.4]'; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.addPoint).toHaveBeenCalledWith({ text: 'point1', type: 'text' }, '0.1', '0.4'); + expect(mockDB.addPoint).toHaveBeenCalledWith( + { text: 'point1', type: 'text' }, + '', + '0.1', + '0.4', + [] + ); clearMocks(); str = 'QuadRantChart \n Point1 : [0.1, 0.4] '; expect(parserFnConstructor(str)).not.toThrow(); - expect(mockDB.addPoint).toHaveBeenCalledWith({ text: 'Point1', type: 'text' }, '0.1', '0.4'); + expect(mockDB.addPoint).toHaveBeenCalledWith( + { text: 'Point1', type: 'text' }, + '', + '0.1', + '0.4', + [] + ); clearMocks(); str = 'QuadRantChart \n "Point1 : (* +=[❤": [1, 0] '; expect(parserFnConstructor(str)).not.toThrow(); expect(mockDB.addPoint).toHaveBeenCalledWith( { text: 'Point1 : (* +=[❤', type: 'text' }, + '', '1', - '0' + '0', + [] ); clearMocks(); @@ -255,16 +269,32 @@ describe('Testing quadrantChart jison file', () => { expect(mockDB.setQuadrant4Text).toHaveBeenCalledWith({ text: 'Visionaries', type: 'text' }); expect(mockDB.addPoint).toHaveBeenCalledWith( { text: 'Microsoft', type: 'text' }, + '', '0.75', - '0.75' + '0.75', + [] ); expect(mockDB.addPoint).toHaveBeenCalledWith( { text: 'Salesforce', type: 'text' }, + '', '0.55', - '0.60' + '0.60', + [] + ); + expect(mockDB.addPoint).toHaveBeenCalledWith( + { text: 'IBM', type: 'text' }, + '', + '0.51', + '0.40', + [] + ); + expect(mockDB.addPoint).toHaveBeenCalledWith( + { text: 'Incorta', type: 'text' }, + '', + '0.20', + '0.30', + [] ); - expect(mockDB.addPoint).toHaveBeenCalledWith({ text: 'IBM', type: 'text' }, '0.51', '0.40'); - expect(mockDB.addPoint).toHaveBeenCalledWith({ text: 'Incorta', type: 'text' }, '0.20', '0.30'); }); it('should be able to parse the whole chart with point styling with all params or some params', () => { @@ -301,7 +331,7 @@ describe('Testing quadrantChart jison file', () => { '', '0.75', '0.75', - 'radius: 10' + ['radius: 10'] ); expect(mockDB.addPoint).toHaveBeenCalledWith( { text: 'Salesforce', type: 'text' }, diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.spec.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.spec.ts new file mode 100644 index 000000000..995a3e2d6 --- /dev/null +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.spec.ts @@ -0,0 +1,28 @@ +import quadrantDb from './quadrantDb.js'; + +describe('quadrant unit tests', () => { + it('should parse the styles array and return a StylesObject', () => { + const styles = ['radius: 10', 'color: #ff0000', 'stroke-color: #ff00ff', 'stroke-width: 10px']; + const result = quadrantDb.parseStyles(styles); + + expect(result).toEqual({ + radius: 10, + color: '#ff0000', + strokeColor: '#ff00ff', + strokeWidth: '10px', + }); + }); + + it('should throw an error for unacceptable style name', () => { + const styles: string[] = ['test_name: value']; + expect(() => quadrantDb.parseStyles(styles)).toThrowError( + 'stlye named test_name is unacceptable' + ); + }); + + it('should return an empty StylesObject for an empty input array', () => { + const styles: string[] = []; + const result = quadrantDb.parseStyles(styles); + expect(result).toEqual({}); + }); +}); diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts index 8c43eb9de..b4e9d38f9 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts @@ -92,11 +92,7 @@ function addPoint(textObj: LexTextObj, className: string, x: number, y: number, } function addClass(className: string, styles: string[]) { - const ss = parseStyles(styles); - if (Object.keys(ss).length === 0) { - throw new Error('class defintions require ss'); - } - quadrantBuilder.addClass(className, ss); + quadrantBuilder.addClass(className, parseStyles(styles)); } function setWidth(width: number) { @@ -150,6 +146,7 @@ export default { setXAxisRightText, setYAxisTopText, setYAxisBottomText, + parseStyles, addPoint, addClass, getQuadrantData,