various fixes + add unit tests for parsed styles

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 C: [0.57, 0.69] stroke-color: #ff00ff
-    Campaign D: [0.78, 0.34] stroke_width: 3px
+    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 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 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 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 C: [0.57, 0.69] stroke-color: #ff00ff
-    Campaign D:::class2: [0.78, 0.34] stroke_width: 3px
+    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 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');
   });
 });

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

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' },

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({});
+  });
+});

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);
+  quadrantBuilder.addClass(className, parseStyles(styles));
-  if (Object.keys(ss).length === 0) {
-    throw new Error('class defintions require ss');
-  }
-  quadrantBuilder.addClass(className, ss);
 }
 
 function setWidth(width: number) {
@@ -150,6 +146,7 @@ export default {
   setXAxisRightText,
   setYAxisTopText,
   setYAxisBottomText,
+  parseStyles,
   addPoint,
   addClass,
   getQuadrantData,