Add tests

cypress/integration/rendering/erDiagram-v3.spec.js

@@ -0,0 +1,680 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+
+describe('Entity Relationship Diagram', () => {
+  it('should render a simple ER diagram', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        CUSTOMER ||--o{ ORDER : places
+        ORDER ||--|{ LINE-ITEM : contains
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render a simple ER diagram without htmlLabels', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        CUSTOMER ||--o{ ORDER : places
+        ORDER ||--|{ LINE-ITEM : contains
+      `,
+      { logLevel: 1, htmlLabels: false }
+    );
+  });
+
+  it('should render an ER diagram with a recursive relationship', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        CUSTOMER ||..o{ CUSTOMER : refers
+        CUSTOMER ||--o{ ORDER : places
+        ORDER ||--|{ LINE-ITEM : contains
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render an ER diagram with multiple relationships between the same two entities', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        CUSTOMER ||--|{ ADDRESS : "invoiced at"
+        CUSTOMER ||--|{ ADDRESS : "receives goods at"
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render a cyclical ER diagram', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        A ||--|{ B : likes
+        B ||--|{ C : likes
+        C ||--|{ A : likes
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render a not-so-simple ER diagram', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+        CUSTOMER ||--o{ ORDER : places
+        CUSTOMER ||--o{ INVOICE : "liable for"
+        DELIVERY-ADDRESS ||--o{ ORDER : receives
+        INVOICE ||--|{ ORDER : covers
+        ORDER ||--|{ ORDER-ITEM : includes
+        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render a not-so-simple ER diagram without htmlLabels', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+        CUSTOMER ||--o{ ORDER : places
+        CUSTOMER ||--o{ INVOICE : "liable for"
+        DELIVERY-ADDRESS ||--o{ ORDER : receives
+        INVOICE ||--|{ ORDER : covers
+        ORDER ||--|{ ORDER-ITEM : includes
+        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+      `,
+      { logLevel: 1, htmlLabels: false }
+    );
+  });
+
+  it('should render multiple ER diagrams', () => {
+    imgSnapshotTest(
+      [
+        `
+    erDiagram
+        CUSTOMER ||--o{ ORDER : places
+        ORDER ||--|{ LINE-ITEM : contains
+      `,
+        `
+    erDiagram
+        CUSTOMER ||--o{ ORDER : places
+        ORDER ||--|{ LINE-ITEM : contains
+      `,
+      ],
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render an ER diagram with blank or empty labels', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        BOOK }|..|{ AUTHOR : ""
+        BOOK }|..|{ GENRE : " "
+        AUTHOR }|..|{ GENRE : "  "
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render entities that have no relationships', () => {
+    renderGraph(
+      `
+    erDiagram
+        DEAD_PARROT
+        HERMIT
+        RECLUSE
+        SOCIALITE }o--o{ SOCIALITE : "interacts with"
+        RECLUSE }o--o{ SOCIALITE : avoids
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render entities with and without attributes', () => {
+    renderGraph(
+      `
+    erDiagram
+        BOOK { string title }
+        AUTHOR }|..|{ BOOK : writes
+        BOOK { float price }
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render entities with generic and array attributes', () => {
+    renderGraph(
+      `
+    erDiagram
+        BOOK {
+          string title
+          string[] authors
+          type~T~ type
+        }
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render entities with generic and array attributes without htmlLabels', () => {
+    renderGraph(
+      `
+    erDiagram
+        BOOK {
+          string title
+          string[] authors
+          type~T~ type
+        }
+      `,
+      { logLevel: 1, htmlLabels: false }
+    );
+  });
+
+  it('should render entities with length in attributes type', () => {
+    renderGraph(
+      `
+    erDiagram
+        CLUSTER {
+          varchar(99) name
+          string(255) description
+        }
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render entities with length in attributes type without htmlLabels', () => {
+    renderGraph(
+      `
+    erDiagram
+        CLUSTER {
+          varchar(99) name
+          string(255) description
+        }
+      `,
+      { logLevel: 1, htmlLabels: false }
+    );
+  });
+
+  it('should render entities and attributes with big and small entity names', () => {
+    renderGraph(
+      `
+    erDiagram
+        PRIVATE_FINANCIAL_INSTITUTION {
+          string name
+          int    turnover
+        }
+        PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
+        EMPLOYEE { bool officer_of_firm }
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render entities and attributes with big and small entity names without htmlLabels', () => {
+    renderGraph(
+      `
+    erDiagram
+        PRIVATE_FINANCIAL_INSTITUTION {
+          string name
+          int    turnover
+        }
+        PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
+        EMPLOYEE { bool officer_of_firm }
+      `,
+      { logLevel: 1, htmlLabels: false }
+    );
+  });
+
+  it('should render entities with attributes that begin with asterisk', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        BOOK {
+          int         *id
+          string      name
+          varchar(99) summary
+        }
+        BOOK }o..o{ STORE : soldBy
+        STORE {
+          int         *id
+          string      name
+          varchar(50) address
+        }
+        `,
+      { loglevel: 1 }
+    );
+  });
+
+  it('should render entities with attributes that begin with asterisk without htmlLabels', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        BOOK {
+          int         *id
+          string      name
+          varchar(99) summary
+        }
+        BOOK }o..o{ STORE : soldBy
+        STORE {
+          int         *id
+          string      name
+          varchar(50) address
+        }
+        `,
+      { loglevel: 1, htmlLabels: false }
+    );
+  });
+
+  it('should render entities with keys', () => {
+    renderGraph(
+      `
+    erDiagram
+      AUTHOR_WITH_LONG_ENTITY_NAME {
+        string name PK
+      }
+      AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+      BOOK {
+          float price
+          string author FK
+          string title PK
+        }
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render entities with keys without htmlLabels', () => {
+    renderGraph(
+      `
+    erDiagram
+      AUTHOR_WITH_LONG_ENTITY_NAME {
+        string name PK
+      }
+      AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+      BOOK {
+          float price
+          string author FK
+          string title PK
+        }
+      `,
+      { logLevel: 1, htmlLabels: false }
+    );
+  });
+
+  it('should render entities with comments', () => {
+    renderGraph(
+      `
+    erDiagram
+      AUTHOR_WITH_LONG_ENTITY_NAME {
+        string name "comment"
+      }
+      AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+      BOOK {
+          string author
+          string title "author comment"
+          float price "price comment"
+        }
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render entities with comments without htmlLabels', () => {
+    renderGraph(
+      `
+    erDiagram
+      AUTHOR_WITH_LONG_ENTITY_NAME {
+        string name "comment"
+      }
+      AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+      BOOK {
+          string author
+          string title "author comment"
+          float price "price comment"
+        }
+      `,
+      { logLevel: 1, htmlLabels: false }
+    );
+  });
+
+  it('should render entities with keys and comments', () => {
+    renderGraph(
+      `
+    erDiagram
+      AUTHOR_WITH_LONG_ENTITY_NAME {
+        string name PK "comment"
+      }
+      AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+      BOOK {
+          string description
+          float price "price comment"
+          string title PK "title comment"
+          string author FK
+        }
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render entities with keys and comments without htmlLabels', () => {
+    renderGraph(
+      `
+    erDiagram
+      AUTHOR_WITH_LONG_ENTITY_NAME {
+        string name PK "comment"
+      }
+      AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+      BOOK {
+          string description
+          float price "price comment"
+          string title PK "title comment"
+          string author FK
+        }
+      `,
+      { logLevel: 1, htmlLabels: false }
+    );
+  });
+
+  it('should render entities with aliases', () => {
+    renderGraph(
+      `
+    erDiagram
+      T1 one or zero to one or more T2 : test
+      T2 one or many optionally to zero or one T3 : test
+      T3 zero or more to zero or many T4 : test
+      T4 many(0) to many(1) T5 : test
+      T5 many optionally to one T6 : test
+      T6 only one optionally to only one T1 : test
+      T4 0+ to 1+ T6 : test
+      T1 1 to 1 T3 : test
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('1433: should render a simple ER diagram with a title', () => {
+    imgSnapshotTest(
+      `---
+title: simple ER diagram
+---
+erDiagram
+CUSTOMER ||--o{ ORDER : places
+ORDER ||--|{ LINE-ITEM : contains
+`,
+      {}
+    );
+  });
+
+  it('should render entities with entity name aliases', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+      p[Person] {
+        varchar(64) firstName
+        varchar(64) lastName
+      }
+      c["Customer Account"] {
+        varchar(128) email
+      }
+      p ||--o| c : has
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render relationship labels with line breaks', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+      p[Person] {
+          string firstName
+          string lastName
+      }
+      a["Customer Account"] {
+          string email
+      }
+
+      b["Customer Account Secondary"] {
+        string email
+      }
+      
+      c["Customer Account Tertiary"] {
+        string email
+      }
+      
+      d["Customer Account Nth"] {
+        string email
+      }
+
+      p ||--o| a : "has<br />one"
+      p ||--o| b : "has<br />one<br />two"
+      p ||--o| c : "has<br />one<br/>two<br />three"
+      p ||--o| d : "has<br />one<br />two<br/>three<br />...<br/>Nth"
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render an ER diagram with unicode text', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        _**testẽζ➕Ø😀㌕ぼ**_ {
+            *__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
+            *string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
+            string last*Name*
+            string __phone__ UK
+            int _age_
+        }
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render an ER diagram with unicode text without htmlLabels', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        _**testẽζ➕Ø😀㌕ぼ**_ {
+            *__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
+            *string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
+            string last*Name*
+            string __phone__ UK
+            int _age_
+        }
+      `,
+      { logLevel: 1, htmlLabels: false }
+    );
+  });
+
+  it('should render an ER diagram with relationships with unicode text', () => {
+    imgSnapshotTest(
+      `
+        erDiagram
+          person[😀] {
+              string *first*Name
+              string _**last**Name_
+          }
+          a["*Customer Account*"] {
+              **string** ema*i*l
+          }
+          person ||--o| a : __hẽ😀__
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render an ER diagram with relationships with unicode text without htmlLabels', () => {
+    imgSnapshotTest(
+      `
+        erDiagram
+          person[😀] {
+              string *first*Name
+              string _**last**Name_
+          }
+          a["*Customer Account*"] {
+              **string** ema*i*l
+          }
+          person ||--o| a : __hẽ😀__
+      `,
+      { logLevel: 1, htmlLabels: false }
+    );
+  });
+
+  it('should render an ER diagram with TB direction', () => {
+    imgSnapshotTest(
+      `
+        erDiagram
+        direction TB
+        CAR ||--|{ NAMED-DRIVER : allows
+        PERSON ||..o{ NAMED-DRIVER : is
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render an ER diagram with BT direction', () => {
+    imgSnapshotTest(
+      `
+        erDiagram
+        direction BT
+        CAR ||--|{ NAMED-DRIVER : allows
+        PERSON ||..o{ NAMED-DRIVER : is
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render an ER diagram with LR direction', () => {
+    imgSnapshotTest(
+      `
+        erDiagram
+        direction LR
+        CAR ||--|{ NAMED-DRIVER : allows
+        PERSON ||..o{ NAMED-DRIVER : is
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render an ER diagram with RL direction', () => {
+    imgSnapshotTest(
+      `
+        erDiagram
+        direction RL
+        CAR ||--|{ NAMED-DRIVER : allows
+        PERSON ||..o{ NAMED-DRIVER : is
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render entities with styles applied from style statement', () => {
+    imgSnapshotTest(
+      `
+          erDiagram
+            c[CUSTOMER]
+            p[PERSON]
+            style c,p fill:#f9f,stroke:blue, color:grey, font-size:24px,font-weight:bold
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render entities with styles applied from style statement without htmlLabels', () => {
+    imgSnapshotTest(
+      `
+          erDiagram
+            c[CUSTOMER]
+            p[PERSON]
+            style c,p fill:#f9f,stroke:blue, color:grey, font-size:24px,font-weight:bold
+      `,
+      { logLevel: 1, htmlLabels: false }
+    );
+  });
+
+  it('should render entities with styles applied from class statement', () => {
+    imgSnapshotTest(
+      `
+          erDiagram
+            c[CUSTOMER]
+            p[PERSON]:::blue
+            classDef bold font-size:24px, font-weight: bold
+            classDef blue stroke:lightblue, color: #0000FF
+            class c,p bold
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render entities with styles applied from class statement without htmlLabels', () => {
+    imgSnapshotTest(
+      `
+          erDiagram
+            c[CUSTOMER]
+            p[PERSON]:::blue
+            classDef bold font-size:24px, font-weight: bold
+            classDef blue stroke:lightblue, color: #0000FF
+            class c,p bold
+      `,
+      { logLevel: 1, htmlLabels: false }
+    );
+  });
+
+  it('should render entities with the handDrawn look', () => {
+    imgSnapshotTest(
+      `
+          erDiagram
+            c[CUSTOMER]
+            p[PERSON]
+      `,
+      { logLevel: 1, look: 'handDrawn' }
+    );
+  });
+
+  it('should render entities with the handDrawn look without htmlLabels', () => {
+    imgSnapshotTest(
+      `
+          erDiagram
+            c[CUSTOMER]
+            p[PERSON]
+      `,
+      { logLevel: 1, look: 'handDrawn', htmlLabels: false }
+    );
+  });
+
+  it('should render entities with the handDrawn look and styles applied', () => {
+    imgSnapshotTest(
+      `
+          erDiagram
+            c[CUSTOMER]
+            p[PERSON]:::blue
+            classDef bold font-size:24px, font-weight: bold
+            classDef blue stroke:black, fill:lightblue, color: #0000FF
+            class c,p bold
+      `,
+      { logLevel: 1, look: 'handDrawn' }
+    );
+  });
+
+  it('should render entities with the handDrawn look and styles applied without htmlLabels', () => {
+    imgSnapshotTest(
+      `
+          erDiagram
+            c[CUSTOMER]
+            p[PERSON]:::blue
+            classDef bold font-size:24px, font-weight: bold
+            classDef blue stroke:black, fill:lightblue, color: #0000FF
+            class c,p bold
+      `,
+      { logLevel: 1, look: 'handDrawn', htmlLabels: false }
+    );
+  });
+});

packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js

@@ -143,32 +143,32 @@ describe('when parsing ER diagram it...', function () {
       expect(entities.get(entity).alias).toBe(alias);
     });
 
-    it('can have an alias even if the relationship is defined before class', function () {
+    it('can have an alias even if the relationship is defined before buzz', function () {
       const firstEntity = 'foo';
       const secondEntity = 'bar';
       const alias = 'batman';
       erDiagram.parser.parse(
-        `erDiagram\n${firstEntity} ||--o| ${secondEntity} : rel\nclass ${firstEntity}["${alias}"]\n`
+        `erDiagram\n${firstEntity} ||--o| ${secondEntity} : rel\nbuzz ${firstEntity}["${alias}"]\n`
       );
       const entities = erDb.getEntities();
       expect(entities.has(firstEntity)).toBe(true);
       expect(entities.has(secondEntity)).toBe(true);
       expect(entities.get(firstEntity).alias).toBe(alias);
-      expect(entities.get(secondEntity).alias).toBeUndefined();
+      expect(entities.get(secondEntity).alias).toBe('');
     });
 
-    it('can have an alias even if the relationship is defined after class', function () {
+    it('can have an alias even if the relationship is defined after buzz', function () {
       const firstEntity = 'foo';
       const secondEntity = 'bar';
       const alias = 'batman';
       erDiagram.parser.parse(
-        `erDiagram\nclass ${firstEntity}["${alias}"]\n${firstEntity} ||--o| ${secondEntity} : rel\n`
+        `erDiagram\nbuzz ${firstEntity}["${alias}"]\n${firstEntity} ||--o| ${secondEntity} : rel\n`
       );
       const entities = erDb.getEntities();
       expect(entities.has(firstEntity)).toBe(true);
       expect(entities.has(secondEntity)).toBe(true);
       expect(entities.get(firstEntity).alias).toBe(alias);
-      expect(entities.get(secondEntity).alias).toBeUndefined();
+      expect(entities.get(secondEntity).alias).toBe('');
     });
 
     it('can start with an underscore', function () {
@@ -193,9 +193,9 @@ describe('when parsing ER diagram it...', function () {
 
       expect(entities.size).toBe(1);
       expect(entities.get(entity).attributes.length).toBe(3);
-      expect(entities.get(entity).attributes[0].attributeName).toBe('myBookTitle');
+      expect(entities.get(entity).attributes[0].name).toBe('myBookTitle');
-      expect(entities.get(entity).attributes[1].attributeName).toBe('MYBOOKSUBTITLE_1');
+      expect(entities.get(entity).attributes[1].name).toBe('MYBOOKSUBTITLE_1');
-      expect(entities.get(entity).attributes[2].attributeName).toBe('author-ref[name](1)');
+      expect(entities.get(entity).attributes[2].name).toBe('author-ref[name](1)');
     });
 
     it('should allow asterisk at the start of attribute name', function () {
@@ -258,7 +258,7 @@ describe('when parsing ER diagram it...', function () {
     const entities = erDb.getEntities();
     expect(entities.size).toBe(1);
     expect(entities.get(entity).attributes.length).toBe(1);
-    expect(entities.get(entity).attributes[0].attributeComment).toBe('comment');
+    expect(entities.get(entity).attributes[0].comment).toBe('comment');
   });
 
   it('should allow an entity with a single attribute to be defined with a key and a comment', function () {
@@ -297,14 +297,14 @@ describe('when parsing ER diagram it...', function () {
       `erDiagram\n${entity} {\n${attribute1}\n${attribute2}\n${attribute3}\n${attribute4}\n${attribute5}\n}`
     );
     const entities = erDb.getEntities();
-    expect(entities.get(entity).attributes[0].attributeKeyTypeList).toEqual(['PK', 'FK']);
+    expect(entities.get(entity).attributes[0].keys).toEqual(['PK', 'FK']);
-    expect(entities.get(entity).attributes[0].attributeComment).toBe('comment1');
+    expect(entities.get(entity).attributes[0].comment).toBe('comment1');
-    expect(entities.get(entity).attributes[1].attributeKeyTypeList).toEqual(['PK', 'UK', 'FK']);
+    expect(entities.get(entity).attributes[1].keys).toEqual(['PK', 'UK', 'FK']);
-    expect(entities.get(entity).attributes[2].attributeKeyTypeList).toEqual(['PK', 'UK']);
+    expect(entities.get(entity).attributes[2].keys).toEqual(['PK', 'UK']);
-    expect(entities.get(entity).attributes[2].attributeComment).toBe('comment3');
+    expect(entities.get(entity).attributes[2].comment).toBe('comment3');
-    expect(entities.get(entity).attributes[3].attributeKeyTypeList).toBeUndefined();
+    expect(entities.get(entity).attributes[3].keys).toEqual([]);
-    expect(entities.get(entity).attributes[4].attributeKeyTypeList).toBeUndefined();
+    expect(entities.get(entity).attributes[4].keys).toEqual([]);
-    expect(entities.get(entity).attributes[4].attributeComment).toBe('comment5');
+    expect(entities.get(entity).attributes[4].comment).toBe('comment5');
   });
 
   it('should allow an entity with attribute that has a generic type', function () {
@@ -341,8 +341,8 @@ describe('when parsing ER diagram it...', function () {
     const entities = erDb.getEntities();
     expect(entities.size).toBe(1);
     expect(entities.get(entity).attributes.length).toBe(2);
-    expect(entities.get(entity).attributes[0].attributeType).toBe('character(10)');
+    expect(entities.get(entity).attributes[0].type).toBe('character(10)');
-    expect(entities.get(entity).attributes[1].attributeType).toBe('varchar(5)');
+    expect(entities.get(entity).attributes[1].type).toBe('varchar(5)');
   });
 
   it('should allow an entity with multiple attributes to be defined', function () {
@@ -764,6 +764,186 @@ describe('when parsing ER diagram it...', function () {
     }).toThrowError();
   });
 
+  it('should be possible to apply a style to an entity', function () {
+    const entityName = 'CUSTOMER';
+    erDiagram.parser.parse(`erDiagram\n${entityName}\nstyle ${entityName} color:red`);
+
+    expect(erDb.getEntity(entityName).cssStyles).toEqual(['color:red']);
+  });
+
+  it('should be possible to apply multiple styles to an entity at the same time', function () {
+    const entityName = 'CUSTOMER';
+    erDiagram.parser.parse(
+      `erDiagram\n${entityName}\nstyle ${entityName} color:red,stroke:blue,fill:#f9f`
+    );
+
+    expect(erDb.getEntity(entityName).cssStyles).toEqual(['color:red', 'stroke:blue', 'fill:#f9f']);
+  });
+
+  it('should be possible to apply multiple separately defined styles', function () {
+    const entityName = 'CUSTOMER';
+    erDiagram.parser.parse(
+      `erDiagram\n${entityName}\nstyle ${entityName} color:red\nstyle ${entityName} fill:#f9f`
+    );
+
+    expect(erDb.getEntity(entityName).cssStyles).toEqual(['color:red', 'fill:#f9f']);
+  });
+
+  it('should be possible to assign a class to an entity', function () {
+    const entityName = 'CUSTOMER';
+    erDiagram.parser.parse(`erDiagram\n${entityName}\nclass ${entityName} myClass`);
+
+    expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'myClass']);
+  });
+
+  it('should be possible to assign multiple classes to an entity at the same time', function () {
+    const entityName = 'CUSTOMER';
+    erDiagram.parser.parse(
+      `erDiagram\n${entityName}\nclass ${entityName} firstClass, secondClass, thirdClass`
+    );
+
+    expect(erDb.getEntity(entityName).cssClasses).toEqual([
+      'default',
+      'firstClass',
+      'secondClass',
+      'thirdClass',
+    ]);
+  });
+
+  it('should be possible to assign multiple separately defined classes to an entity', function () {
+    const entityName = 'CUSTOMER';
+    erDiagram.parser.parse(
+      `erDiagram\n${entityName}\nclass ${entityName} firstClass\nclass ${entityName} secondClass`
+    );
+
+    expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'firstClass', 'secondClass']);
+  });
+
+  it('should be possible to configure the default class and have it apply to each entity', function () {
+    const firstEntity = 'ENTITY1';
+    const secondEntity = 'ENTITY2';
+    erDiagram.parser.parse(
+      `erDiagram\n${firstEntity}\n${secondEntity}\nclassDef default fill:#f9f`
+    );
+
+    const expectedOutput = new Map([
+      [
+        'default',
+        {
+          id: 'default',
+          styles: ['fill:#f9f'],
+          textStyles: [],
+        },
+      ],
+    ]);
+
+    expect(erDb.getEntity(firstEntity).cssClasses).toEqual(['default']);
+    expect(erDb.getEntity(secondEntity).cssClasses).toEqual(['default']);
+    expect(erDb.getClasses()).toEqual(expectedOutput);
+  });
+
+  it('should be possible to define a class with styles', function () {
+    const className = 'myClass';
+    const styles = 'fill:#f9f, stroke: red, color: pink';
+    erDiagram.parser.parse(`erDiagram\nclassDef ${className} ${styles}`);
+
+    const expectedOutput = new Map([
+      [
+        className,
+        {
+          id: className,
+          styles: ['fill:#f9f', 'stroke:red', 'color:pink'],
+          textStyles: ['color:pink'],
+        },
+      ],
+    ]);
+
+    expect(erDb.getClasses()).toEqual(expectedOutput);
+  });
+
+  it('should be possible to define multiple class with styles at the same time', function () {
+    const firstClass = 'firstClass';
+    const secondClass = 'secondClass';
+    const styles = 'fill:#f9f, stroke: red, color: pink';
+    erDiagram.parser.parse(`erDiagram\nclassDef ${firstClass},${secondClass} ${styles}`);
+
+    const expectedOutput = new Map([
+      [
+        firstClass,
+        {
+          id: firstClass,
+          styles: ['fill:#f9f', 'stroke:red', 'color:pink'],
+          textStyles: ['color:pink'],
+        },
+      ],
+      [
+        secondClass,
+        {
+          id: secondClass,
+          styles: ['fill:#f9f', 'stroke:red', 'color:pink'],
+          textStyles: ['color:pink'],
+        },
+      ],
+    ]);
+
+    expect(erDb.getClasses()).toEqual(expectedOutput);
+  });
+
+  it('should be possible to assign a class using the shorthand syntax just by itself', function () {
+    const entityName = 'CUSTOMER';
+    const className = 'myClass';
+    erDiagram.parser.parse(`erDiagram\n${entityName}:::${className}`);
+
+    expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'myClass']);
+  });
+
+  it('should be possible to assign a class using the shorthand syntax with empty block', function () {
+    const entityName = 'CUSTOMER';
+    const className = 'myClass';
+    erDiagram.parser.parse(`erDiagram\n${entityName}:::${className} {}`);
+
+    expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'myClass']);
+  });
+
+  it('should be possible to assign a class using the shorthand syntax with block of attributes', function () {
+    const entityName = 'CUSTOMER';
+    const className = 'myClass';
+    erDiagram.parser.parse(`erDiagram\n${entityName}:::${className} {\nstring name\n}`);
+
+    expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'myClass']);
+  });
+
+  it('should be possible to assign multiple classes using the shorthand syntax', function () {
+    const entityName = 'CUSTOMER';
+    const firstClass = 'firstClass';
+    const secondClass = 'secondClass';
+    erDiagram.parser.parse(`erDiagram\n${entityName}:::${firstClass},${secondClass}`);
+
+    expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'firstClass', 'secondClass']);
+  });
+
+  it('should be possible to assign classes using the shorthand syntax after defining an alias', function () {
+    const entityName = 'c';
+    const entityAlias = 'CUSTOMER';
+    const myClass = 'myClass';
+    erDiagram.parser.parse(`erDiagram\n${entityName}[${entityAlias}]:::${myClass}`);
+
+    expect(erDb.getEntity(entityName).alias).toBe(entityAlias);
+    expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'myClass']);
+  });
+
+  it('should be possible to assign classes using the shorthand syntax while defining a relationship', function () {
+    const entityName = 'CUSTOMER';
+    const otherEntity = 'PERSON';
+    const myClass = 'myClass';
+    erDiagram.parser.parse(
+      `erDiagram\n${entityName}:::${myClass} ||--o{ ${otherEntity}:::${myClass} : allows`
+    );
+
+    expect(erDb.getEntity(entityName).cssClasses).toEqual(['default', 'myClass']);
+    expect(erDb.getEntity(otherEntity).cssClasses).toEqual(['default', 'myClass']);
+  });
+
   describe('relationship labels', function () {
     it('should allow an empty quoted label', function () {
       erDiagram.parser.parse('erDiagram\nCUSTOMER ||--|{ ORDER : ""');