classLabel tests

cypress/integration/rendering/classDiagram-v2.spec.js

@@ -13,7 +13,6 @@ describe('Class diagram V2', () => {
         `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('1: should render a simple class diagram', () => {
@@ -47,7 +46,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('2: should render a simple class diagrams with cardinality', () => {
@@ -76,7 +74,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('should render a simple class diagram with different visibilities', () => {
@@ -94,7 +91,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('should render multiple class diagrams', () => {
@@ -147,7 +143,6 @@ describe('Class diagram V2', () => {
       ],
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('4: should render a simple class diagram with comments', () => {
@@ -177,7 +172,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('5: should render a simple class diagram with abstract method', () => {
@@ -189,7 +183,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('6: should render a simple class diagram with static method', () => {
@@ -201,7 +194,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('7: should render a simple class diagram with Generic class', () => {
@@ -221,7 +213,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('8: should render a simple class diagram with Generic class and relations', () => {
@@ -242,7 +233,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('9: should render a simple class diagram with clickable link', () => {
@@ -264,7 +254,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('10: should render a simple class diagram with clickable callback', () => {
@@ -286,7 +275,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('11: should render a simple class diagram with return type on method', () => {
@@ -301,7 +289,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('12: should render a simple class diagram with generic types', () => {
@@ -317,7 +304,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('13: should render a simple class diagram with css classes applied', () => {
@@ -335,7 +321,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('14: should render a simple class diagram with css classes applied directly', () => {
@@ -351,7 +336,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
@@ -365,7 +349,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('16a: should render a simple class diagram with static field', () => {
@@ -378,7 +361,6 @@ describe('Class diagram V2', () => {
             `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('16b: should handle the direction statement with TB', () => {
@@ -403,7 +385,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('18: should handle the direction statement with LR', () => {
@@ -428,7 +409,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
   it('17a: should handle the direction statement with BT', () => {
     imgSnapshotTest(
@@ -452,7 +432,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
   it('17b: should handle the direction statement with RL', () => {
     imgSnapshotTest(
@@ -476,7 +455,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('18: should render a simple class diagram with notes', () => {
@@ -493,7 +471,6 @@ describe('Class diagram V2', () => {
         `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-    cy.get('svg');
   });
 
   it('1433: should render a simple class with a title', () => {
@@ -503,8 +480,63 @@ title: simple class diagram
 ---
 classDiagram-v2
 class Class10
-`,
+`
-      {}
+    );
+  });
+
+  it('should render a class with text label', () => {
+    imgSnapshotTest(
+      `classDiagram
+  class C1["Class 1 with text label"]
+  C1 -->  C2`
+    );
+  });
+
+  it('should render two classes with text labels', () => {
+    imgSnapshotTest(
+      `classDiagram
+  class C1["Class 1 with text label"]
+  class C2["Class 2 with chars @?"]
+  C1 -->  C2`
+    );
+  });
+  it('should render a class with a text label, members and annotation', () => {
+    imgSnapshotTest(
+      `classDiagram
+  class C1["Class 1 with text label"] {
+    <<interface>>
+    +member1
+  }
+  C1 -->  C2`
+    );
+  });
+  it('should render multiple classes with same text labels', () => {
+    imgSnapshotTest(
+      `classDiagram
+class C1["Class with text label"]
+class C2["Class with text label"]
+class C3["Class with text label"]
+C1 --> C2
+C3 ..> C2
+  `
+    );
+  });
+  it('should render classes with different text labels', () => {
+    imgSnapshotTest(
+      `classDiagram
+class C1["OneWord"]
+class C2["With, Comma"]
+class C3["With (Brackets)"]
+class C4["With [Brackets]"]
+class C5["With {Brackets}"]
+class C7["With 1 number"]
+class C8["With . period..."]
+class C9["With - dash"]
+class C10["With _ underscore"]
+class C11["With ' single quote"]
+class C12["With ~!@#$%^&*()_+=-/?"]
+class C13["With Città foreign language"]
+  `
     );
   });
 });

cypress/platform/class.html

@@ -12,7 +12,6 @@
     <style>
       body {
         background: rgb(221, 208, 208);
-        /*background:#333;*/
         font-family: 'Arial';
       }
       h1 {
@@ -120,17 +119,9 @@ classE o-- classF : aggregation
       };
       mermaid.initialize({
         theme: 'default',
-        // arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
         flowchart: { curve: 'linear', htmlLabels: true },
-        // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-        // fontFamily: '"arial", sans-serif',
-        // themeVariables: {
-        //   fontFamily: '"arial", sans-serif',
-        // },
         curve: 'linear',
         securityLevel: 'loose',
       });

packages/mermaid/src/diagrams/class/classDiagram.spec.ts

@@ -1,10 +1,11 @@
+// @ts-expect-error Jison doesn't export types
 import { parser } from './parser/classDiagram';
 import classDb from './classDb';
-import { vi } from 'vitest';
+import { vi, describe, it, expect } from 'vitest';
 const spyOn = vi.spyOn;
 
 describe('class diagram, ', function () {
-  describe('when parsing an info graph it', function () {
+  describe('when parsing a class diagram', function () {
     beforeEach(function () {
       parser.yy = classDb;
     });
@@ -541,7 +542,7 @@ foo()
     });
   });
 
-  describe('when fetching data from a classDiagram graph it', function () {
+  describe('when fetching data from a classDiagram it', function () {
     beforeEach(function () {
       parser.yy = classDb;
       parser.yy.clear();
@@ -946,4 +947,191 @@ foo()
       expect(classDb.setTooltip).toHaveBeenCalledWith('Class1', 'A tooltip');
     });
   });
+
+  describe('when parsing classDiagram with text labels', () => {
+    beforeEach(function () {
+      parser.yy = classDb;
+      parser.yy.clear();
+    });
+
+    it('should parse a class with a text label', () => {
+      parser.parse(`classDiagram
+  class C1["Class 1 with text label"]
+  C1 -->  C2
+      `);
+      const c1 = classDb.getClass('C1');
+      expect(c1.label).toBe('Class 1 with text label');
+      const c2 = classDb.getClass('C2');
+      expect(c2.label).toBe('C2');
+    });
+
+    it('should parse two classes with text labels', () => {
+      parser.parse(`classDiagram
+  class C1["Class 1 with text label"]
+  class C2["Class 2 with chars @?"]
+  C1 -->  C2
+      `);
+      const c1 = classDb.getClass('C1');
+      expect(c1.label).toBe('Class 1 with text label');
+      const c2 = classDb.getClass('C2');
+      expect(c2.label).toBe('Class 2 with chars @?');
+    });
+
+    it('should parse a class with a text label and members', () => {
+      parser.parse(`classDiagram
+  class C1["Class 1 with text label"] {
+    +member1
+  }
+  C1 -->  C2
+      `);
+      const c1 = classDb.getClass('C1');
+      expect(c1.label).toBe('Class 1 with text label');
+      expect(c1.members.length).toBe(1);
+      expect(c1.members[0]).toBe('+member1');
+
+      const c2 = classDb.getClass('C2');
+      expect(c2.label).toBe('C2');
+    });
+
+    it('should parse a class with a text label, members and annotation', () => {
+      parser.parse(`classDiagram
+  class C1["Class 1 with text label"] {
+    <<interface>>
+    +member1
+  }
+  C1 -->  C2
+      `);
+      const c1 = classDb.getClass('C1');
+      expect(c1.label).toBe('Class 1 with text label');
+      expect(c1.members.length).toBe(1);
+      expect(c1.members[0]).toBe('+member1');
+      expect(c1.annotations.length).toBe(1);
+      expect(c1.annotations[0]).toBe('interface');
+
+      const c2 = classDb.getClass('C2');
+      expect(c2.label).toBe('C2');
+    });
+
+    it('should parse a class with text label and css class shorthand', () => {
+      parser.parse(`classDiagram
+class C1["Class 1 with text label"]:::styleClass {
+  +member1
+}
+C1 -->  C2
+  `);
+
+      const c1 = classDb.getClass('C1');
+      expect(c1.label).toBe('Class 1 with text label');
+      expect(c1.cssClasses.length).toBe(1);
+      expect(c1.cssClasses[0]).toBe('styleClass');
+
+    });
+
+    it('should parse a class with text label and css class', () => {
+      parser.parse(`classDiagram
+class C1["Class 1 with text label"] {
+  +member1
+}
+C1 --> C2
+cssClass "C1" styleClass
+  `);
+
+      const c1 = classDb.getClass('C1');
+      expect(c1.label).toBe('Class 1 with text label');
+      expect(c1.cssClasses.length).toBe(1);
+      expect(c1.cssClasses[0]).toBe('styleClass');
+
+    });
+
+    it('should parse two classes with text labels and css classes', () => {
+      parser.parse(`classDiagram
+class C1["Class 1 with text label"] {
+  +member1
+}
+class C2["Long long long long long long long long long long label"]
+C1 --> C2
+cssClass "C1,C2" styleClass
+  `);
+
+      const c1 = classDb.getClass('C1');
+      expect(c1.label).toBe('Class 1 with text label');
+      expect(c1.cssClasses.length).toBe(1);
+      expect(c1.cssClasses[0]).toBe('styleClass');
+
+      const c2 = classDb.getClass('C2');
+      expect(c2.label).toBe('Long long long long long long long long long long label');
+      expect(c2.cssClasses.length).toBe(1);
+      expect(c2.cssClasses[0]).toBe('styleClass');
+    });
+
+    it('should parse two classes with text labels and css class shorthands', () => {
+      parser.parse(`classDiagram
+class C1["Class 1 with text label"]:::styleClass1 {
+  +member1
+}
+class C2["Class 2 !@#$%^&*() label"]:::styleClass2
+C1 --> C2
+  `);
+
+      const c1 = classDb.getClass('C1');
+      expect(c1.label).toBe('Class 1 with text label');
+      expect(c1.cssClasses.length).toBe(1);
+      expect(c1.cssClasses[0]).toBe('styleClass1');
+
+      const c2 = classDb.getClass('C2');
+      expect(c2.label).toBe('Class 2 !@#$%^&*() label');
+      expect(c2.cssClasses.length).toBe(1);
+      expect(c2.cssClasses[0]).toBe('styleClass2');
+    });
+
+    it('should parse multiple classes with same text labels', () => {
+      parser.parse(`classDiagram
+class C1["Class with text label"]
+class C2["Class with text label"]
+class C3["Class with text label"]
+C1 --> C2
+C3 ..> C2
+  `);
+
+      const c1 = classDb.getClass('C1');
+      expect(c1.label).toBe('Class with text label');
+
+      const c2 = classDb.getClass('C2');
+      expect(c2.label).toBe('Class with text label');
+
+      const c3 = classDb.getClass('C3');
+      expect(c3.label).toBe('Class with text label');
+    });
+
+    it('should parse classes with different text labels', () => {
+      parser.parse(`classDiagram
+class C1["OneWord"]
+class C2["With, Comma"]
+class C3["With (Brackets)"]
+class C4["With [Brackets]"]
+class C5["With {Brackets}"]
+class C6[" "]
+class C7["With 1 number"]
+class C8["With . period..."]
+class C9["With - dash"]
+class C10["With _ underscore"]
+class C11["With ' single quote"]
+class C12["With ~!@#$%^&*()_+=-/?"]
+class C13["With Città foreign language"]
+`);
+      expect(classDb.getClass('C1').label).toBe('OneWord');
+      expect(classDb.getClass('C2').label).toBe('With, Comma');
+      expect(classDb.getClass('C3').label).toBe('With (Brackets)');
+      expect(classDb.getClass('C4').label).toBe('With [Brackets]');
+      expect(classDb.getClass('C5').label).toBe('With {Brackets}');
+      expect(classDb.getClass('C6').label).toBe(' ');
+      expect(classDb.getClass('C7').label).toBe('With 1 number');
+      expect(classDb.getClass('C8').label).toBe('With . period...');
+      expect(classDb.getClass('C9').label).toBe('With - dash');
+      expect(classDb.getClass('C10').label).toBe('With _ underscore');
+      expect(classDb.getClass('C11').label).toBe("With ' single quote");
+      expect(classDb.getClass('C12').label).toBe("With ~!@#$%^&*()_+=-/?");
+      expect(classDb.getClass('C13').label).toBe('With Città foreign language');
+    });
+  });
 });