From e9fb2c8a54ac80b90c95c46ac6db45935ed514e9 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 17:17:08 +0200
Subject: [PATCH 01/18] Fix test and variable names that were copied from
 flowchart

---
 .../{flow.spec.js => c4Diagram.spec.js}       | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)
 rename src/diagrams/c4/parser/{flow.spec.js => c4Diagram.spec.js} (82%)

diff --git a/src/diagrams/c4/parser/flow.spec.js b/src/diagrams/c4/parser/c4Diagram.spec.js
similarity index 82%
rename from src/diagrams/c4/parser/flow.spec.js
rename to src/diagrams/c4/parser/c4Diagram.spec.js
index c01d99e40..08ad3fcea 100644
--- a/src/diagrams/c4/parser/flow.spec.js
+++ b/src/diagrams/c4/parser/c4Diagram.spec.js
@@ -1,23 +1,23 @@
-import flowDb from '../c4Db';
-import flow from './c4Diagram.jison';
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
 import { setConfig } from '../../../config';
 
 setConfig({
   securityLevel: 'strict',
 });
 
-describe('parsing a flow chart', function () {
+describe('parsing a C4 diagram', function () {
   beforeEach(function () {
-    flow.parser.yy = flowDb;
-    flow.parser.yy.clear();
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
   });
 
   it('should parse a C4 diagram with one Person correctly', function () {
-    flow.parser.parse(`C4Context
+    c4.parser.parse(`C4Context
 title System Context diagram for Internet Banking System
 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")`);
 
-    const yy = flow.parser.yy;
+    const yy = c4.parser.yy;
     expect(yy.getC4Type()).toBe('C4Context');
     expect(yy.getTitle()).toBe('System Context diagram for Internet Banking System');
 
@@ -43,7 +43,7 @@ Person(customerA, "Banking Customer A", "A customer of the bank, with personal b
 
   it('should handle a trailing whitespaces after statements', function () {
     const whitespace = ' ';
-    const rendered = flow.parser.parse(`C4Context${whitespace}
+    const rendered = c4.parser.parse(`C4Context${whitespace}
 title System Context diagram for Internet Banking System${whitespace}
 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")${whitespace}`);
 
@@ -51,11 +51,11 @@ Person(customerA, "Banking Customer A", "A customer of the bank, with personal b
   });
 
   it('should handle parameter names that are keywords', function () {
-    flow.parser.parse(`C4Context
+    c4.parser.parse(`C4Context
 title title
 Person(Person, "Person", "Person")`);
 
-    const yy = flow.parser.yy;
+    const yy = c4.parser.yy;
     expect(yy.getTitle()).toBe('title');
 
     const shapes = yy.getC4ShapeArray();
@@ -68,10 +68,10 @@ Person(Person, "Person", "Person")`);
   });
 
   it('should allow default in the parameters', function () {
-    flow.parser.parse(`C4Context
+    c4.parser.parse(`C4Context
 Person(default, "default", "default")`);
 
-    const yy = flow.parser.yy;
+    const yy = c4.parser.yy;
 
     const shapes = yy.getC4ShapeArray();
     expect(shapes.length).toBe(1);

From aee1a87347da0b04dd555000cccb76a4730002f5 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:22:50 +0200
Subject: [PATCH 02/18] Move test for basic Person to separate file

---
 src/diagrams/c4/parser/c4Diagram.spec.js | 29 -----------------
 src/diagrams/c4/parser/c4Person.spec.js  | 41 ++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 29 deletions(-)
 create mode 100644 src/diagrams/c4/parser/c4Person.spec.js

diff --git a/src/diagrams/c4/parser/c4Diagram.spec.js b/src/diagrams/c4/parser/c4Diagram.spec.js
index 08ad3fcea..b79934b84 100644
--- a/src/diagrams/c4/parser/c4Diagram.spec.js
+++ b/src/diagrams/c4/parser/c4Diagram.spec.js
@@ -12,35 +12,6 @@ describe('parsing a C4 diagram', function () {
     c4.parser.yy.clear();
   });
 
-  it('should parse a C4 diagram with one Person correctly', function () {
-    c4.parser.parse(`C4Context
-title System Context diagram for Internet Banking System
-Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")`);
-
-    const yy = c4.parser.yy;
-    expect(yy.getC4Type()).toBe('C4Context');
-    expect(yy.getTitle()).toBe('System Context diagram for Internet Banking System');
-
-    const shapes = yy.getC4ShapeArray();
-    expect(shapes.length).toBe(1);
-    const onlyShape = shapes[0];
-
-    expect(onlyShape).toEqual({
-      alias: 'customerA',
-      descr: {
-        text: 'A customer of the bank, with personal bank accounts.',
-      },
-      label: {
-        text: 'Banking Customer A',
-      },
-      parentBoundary: 'global',
-      typeC4Shape: {
-        text: 'person',
-      },
-      wrap: false,
-    });
-  });
-
   it('should handle a trailing whitespaces after statements', function () {
     const whitespace = ' ';
     const rendered = c4.parser.parse(`C4Context${whitespace}
diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
new file mode 100644
index 000000000..44294b97e
--- /dev/null
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -0,0 +1,41 @@
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe('parsing a C4 diagram', function () {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Person correctly', function () {
+    c4.parser.parse(`C4Context
+title System Context diagram for Internet Banking System
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toEqual({
+      alias: 'customerA',
+      descr: {
+        text: 'A customer of the bank, with personal bank accounts.',
+      },
+      label: {
+        text: 'Banking Customer A',
+      },
+      parentBoundary: 'global',
+      typeC4Shape: {
+        text: 'person',
+      },
+      wrap: false,
+    });
+  });
+});

From 8ee534f7fbb5eaef7a5c78833a8a3303abe134bc Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:31:52 +0200
Subject: [PATCH 03/18] Add test for $sprite

---
 src/diagrams/c4/parser/c4Person.spec.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index 44294b97e..5f620baf9 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -38,4 +38,17 @@ Person(customerA, "Banking Customer A", "A customer of the bank, with personal b
       wrap: false,
     });
   });
+
+  it('should parse a sprite', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, $sprite="users")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          sprite: 'users',
+        },
+      },
+    });
+  });
 });

From 5378316cc3a0fa0577c69b087656da23f907d01f Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:36:14 +0200
Subject: [PATCH 04/18] Add test for $link

---
 src/diagrams/c4/parser/c4Person.spec.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index 5f620baf9..1e1b11163 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -51,4 +51,17 @@ Person(customerA, $sprite="users")`);
       },
     });
   });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, $link="https://github.com/mermaidjs")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
 });

From 90d472042ba6820a3463b7e42e3b3fa6a863eb81 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:38:55 +0200
Subject: [PATCH 05/18] Add test for $tags

---
 src/diagrams/c4/parser/c4Person.spec.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index 1e1b11163..bf91d74c4 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -64,4 +64,17 @@ Person(customerA, $link="https://github.com/mermaidjs")`);
       },
     });
   });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, $tags="tag1,tag2")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
 });

From be5b8012bd17b5d8b32c69059f4eebc419681f39 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:44:29 +0200
Subject: [PATCH 06/18] Add test for description

---
 src/diagrams/c4/parser/c4Person.spec.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index bf91d74c4..7d3b92c44 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -39,6 +39,17 @@ Person(customerA, "Banking Customer A", "A customer of the bank, with personal b
     });
   });
 
+  it('should parse the description', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, "", "A customer of the bank, with personal bank accounts.")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      descr: {
+        text: 'A customer of the bank, with personal bank accounts.',
+      },
+    });
+  });
+
   it('should parse a sprite', function () {
     c4.parser.parse(`C4Context
 Person(customerA, $sprite="users")`);

From 6f7ae17fc6e7959b6900ac45ccd6a271077f7c17 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:46:42 +0200
Subject: [PATCH 07/18] Add test for label

---
 src/diagrams/c4/parser/c4Person.spec.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index 7d3b92c44..49d52bbea 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -39,6 +39,17 @@ Person(customerA, "Banking Customer A", "A customer of the bank, with personal b
     });
   });
 
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, "Banking Customer A")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: 'Banking Customer A',
+      },
+    });
+  });
+
   it('should parse the description', function () {
     c4.parser.parse(`C4Context
 Person(customerA, "", "A customer of the bank, with personal bank accounts.")`);

From 3bc5cfa554b548a44fbd8ec64bae20738571407c Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Wed, 24 Aug 2022 23:47:41 +0200
Subject: [PATCH 08/18] Add test for alias

---
 src/diagrams/c4/parser/c4Person.spec.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index 49d52bbea..f4ea9bc23 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -39,6 +39,15 @@ Person(customerA, "Banking Customer A", "A customer of the bank, with personal b
     });
   });
 
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, "Banking Customer A")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      alias: 'customerA',
+    });
+  });
+
   it('should parse the label', function () {
     c4.parser.parse(`C4Context
 Person(customerA, "Banking Customer A")`);

From 92f0c8f8b14407b2c3e0064f2b22bf7dcf55eca6 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:29:23 +0200
Subject: [PATCH 09/18] Add test for structure of Person_Ext

---
 src/diagrams/c4/parser/c4PersonExt.spec.js | 44 ++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/diagrams/c4/parser/c4PersonExt.spec.js

diff --git a/src/diagrams/c4/parser/c4PersonExt.spec.js b/src/diagrams/c4/parser/c4PersonExt.spec.js
new file mode 100644
index 000000000..71faabdc3
--- /dev/null
+++ b/src/diagrams/c4/parser/c4PersonExt.spec.js
@@ -0,0 +1,44 @@
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe('parsing a C4 diagram', function () {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Person_Ext correctly', function () {
+    c4.parser.parse(`C4Context
+title System Context diagram for Internet Banking System
+Person_Ext(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toEqual({
+      alias: 'customerA',
+      descr: {
+        text: 'A customer of the bank, with personal bank accounts.',
+      },
+      label: {
+        text: 'Banking Customer A',
+      },
+      link: undefined,
+      sprite: undefined,
+      tags: undefined,
+      parentBoundary: 'global',
+      typeC4Shape: {
+        text: 'external_person',
+      },
+      wrap: false,
+    });
+  });
+});

From a196aeb29b1c45a30987098929b9fd3e311acbf2 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:32:57 +0200
Subject: [PATCH 10/18] Add question on Person_Ext

---
 src/diagrams/c4/parser/c4PersonExt.spec.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/diagrams/c4/parser/c4PersonExt.spec.js b/src/diagrams/c4/parser/c4PersonExt.spec.js
index 71faabdc3..9841fff35 100644
--- a/src/diagrams/c4/parser/c4PersonExt.spec.js
+++ b/src/diagrams/c4/parser/c4PersonExt.spec.js
@@ -31,6 +31,8 @@ Person_Ext(customerA, "Banking Customer A", "A customer of the bank, with person
       label: {
         text: 'Banking Customer A',
       },
+      // TODO: Why are link, sprite, and tags undefined instead of not appearing at all?
+      //       Compare to Person where they don't show up.
       link: undefined,
       sprite: undefined,
       tags: undefined,

From db0d6075cab3e1a3d65c6e4a8ce88c023c4d0678 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:34:20 +0200
Subject: [PATCH 11/18] Add test for link to Person_Ext

---
 src/diagrams/c4/parser/c4PersonExt.spec.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/diagrams/c4/parser/c4PersonExt.spec.js b/src/diagrams/c4/parser/c4PersonExt.spec.js
index 9841fff35..38d8777be 100644
--- a/src/diagrams/c4/parser/c4PersonExt.spec.js
+++ b/src/diagrams/c4/parser/c4PersonExt.spec.js
@@ -43,4 +43,17 @@ Person_Ext(customerA, "Banking Customer A", "A customer of the bank, with person
       wrap: false,
     });
   });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, $link="https://github.com/mermaidjs")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
 });

From 700e25382bf51a9fa8b3609d3e69d1c9198b6355 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:38:10 +0200
Subject: [PATCH 12/18] Copy tests from Person to PersonExt

---
 src/diagrams/c4/parser/c4PersonExt.spec.js | 57 ++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/src/diagrams/c4/parser/c4PersonExt.spec.js b/src/diagrams/c4/parser/c4PersonExt.spec.js
index 38d8777be..b9c0e1d7a 100644
--- a/src/diagrams/c4/parser/c4PersonExt.spec.js
+++ b/src/diagrams/c4/parser/c4PersonExt.spec.js
@@ -44,6 +44,50 @@ Person_Ext(customerA, "Banking Customer A", "A customer of the bank, with person
     });
   });
 
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, "Banking Customer A")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      alias: 'customerA',
+    });
+  });
+
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, "Banking Customer A")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: 'Banking Customer A',
+      },
+    });
+  });
+
+  it('should parse the description', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, "", "A customer of the bank, with personal bank accounts.")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      descr: {
+        text: 'A customer of the bank, with personal bank accounts.',
+      },
+    });
+  });
+
+  it('should parse a sprite', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, $sprite="users")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          sprite: 'users',
+        },
+      },
+    });
+  });
+
   it('should parse a link', function () {
     c4.parser.parse(`C4Context
 Person_Ext(customerA, $link="https://github.com/mermaidjs")`);
@@ -56,4 +100,17 @@ Person_Ext(customerA, $link="https://github.com/mermaidjs")`);
       },
     });
   });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, $tags="tag1,tag2")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
 });

From 2afcd54184a5355ca39353fae3040f4a07ed8f4d Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:42:48 +0200
Subject: [PATCH 13/18] Make test grouping more explicit

---
 src/diagrams/c4/parser/c4Person.spec.js    | 2 +-
 src/diagrams/c4/parser/c4PersonExt.spec.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/diagrams/c4/parser/c4Person.spec.js b/src/diagrams/c4/parser/c4Person.spec.js
index f4ea9bc23..b504c0384 100644
--- a/src/diagrams/c4/parser/c4Person.spec.js
+++ b/src/diagrams/c4/parser/c4Person.spec.js
@@ -6,7 +6,7 @@ setConfig({
   securityLevel: 'strict',
 });
 
-describe('parsing a C4 diagram', function () {
+describe('parsing a C4 Person', function () {
   beforeEach(function () {
     c4.parser.yy = c4Db;
     c4.parser.yy.clear();
diff --git a/src/diagrams/c4/parser/c4PersonExt.spec.js b/src/diagrams/c4/parser/c4PersonExt.spec.js
index b9c0e1d7a..76547600a 100644
--- a/src/diagrams/c4/parser/c4PersonExt.spec.js
+++ b/src/diagrams/c4/parser/c4PersonExt.spec.js
@@ -6,7 +6,7 @@ setConfig({
   securityLevel: 'strict',
 });
 
-describe('parsing a C4 diagram', function () {
+describe('parsing a C4 Person_Ext', function () {
   beforeEach(function () {
     c4.parser.yy = c4Db;
     c4.parser.yy.clear();

From 2414435641a1c9b45e677cd3469dd73813e35715 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:51:49 +0200
Subject: [PATCH 14/18] Add tests for C4 System

---
 src/diagrams/c4/parser/c4System.spec.js | 116 ++++++++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 src/diagrams/c4/parser/c4System.spec.js

diff --git a/src/diagrams/c4/parser/c4System.spec.js b/src/diagrams/c4/parser/c4System.spec.js
new file mode 100644
index 000000000..fb8a2aaa4
--- /dev/null
+++ b/src/diagrams/c4/parser/c4System.spec.js
@@ -0,0 +1,116 @@
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe('parsing a C4 System', function () {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one System correctly', function () {
+    c4.parser.parse(`C4Context
+title System Context diagram for Internet Banking System
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toEqual({
+      alias: 'SystemAA',
+      descr: {
+        text: 'Allows customers to view information about their bank accounts, and make payments.',
+      },
+      label: {
+        text: 'Internet Banking System',
+      },
+      // TODO: Why are link, sprite, and tags undefined instead of not appearing at all?
+      //       Compare to Person where they don't show up.
+      link: undefined,
+      sprite: undefined,
+      tags: undefined,
+      parentBoundary: 'global',
+      typeC4Shape: {
+        text: 'system',
+      },
+      wrap: false,
+    });
+  });
+
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+System(SystemAA, "Internet Banking System")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      alias: 'SystemAA',
+    });
+  });
+
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+System(SystemAA, "Internet Banking System")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: 'Internet Banking System',
+      },
+    });
+  });
+
+  it('should parse the description', function () {
+    c4.parser.parse(`C4Context
+System(SystemAA, "", "Allows customers to view information about their bank accounts, and make payments.")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      descr: {
+        text: 'Allows customers to view information about their bank accounts, and make payments.',
+      },
+    });
+  });
+
+  it('should parse a sprite', function () {
+    c4.parser.parse(`C4Context
+System(SystemAA, $sprite="users")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          sprite: 'users',
+        },
+      },
+    });
+  });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+System(SystemAA, $link="https://github.com/mermaidjs")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+System(SystemAA, $tags="tag1,tag2")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
+});

From 65c73f2eec22b91f6ceb6b91749cbacbd8dc2f1a Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sat, 27 Aug 2022 15:54:32 +0200
Subject: [PATCH 15/18] Introduce shape list in test

---
 src/diagrams/c4/parser/c4System.spec.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/diagrams/c4/parser/c4System.spec.js b/src/diagrams/c4/parser/c4System.spec.js
index fb8a2aaa4..fa0a4b089 100644
--- a/src/diagrams/c4/parser/c4System.spec.js
+++ b/src/diagrams/c4/parser/c4System.spec.js
@@ -6,7 +6,7 @@ setConfig({
   securityLevel: 'strict',
 });
 
-describe('parsing a C4 System', function () {
+describe.each([['System', 'system']])('parsing a C4 %s', function (macroName, elementName) {
   beforeEach(function () {
     c4.parser.yy = c4Db;
     c4.parser.yy.clear();
@@ -15,7 +15,7 @@ describe('parsing a C4 System', function () {
   it('should parse a C4 diagram with one System correctly', function () {
     c4.parser.parse(`C4Context
 title System Context diagram for Internet Banking System
-System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")`);
+${macroName}(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")`);
 
     const yy = c4.parser.yy;
 
@@ -38,7 +38,7 @@ System(SystemAA, "Internet Banking System", "Allows customers to view informatio
       tags: undefined,
       parentBoundary: 'global',
       typeC4Shape: {
-        text: 'system',
+        text: elementName,
       },
       wrap: false,
     });
@@ -46,7 +46,7 @@ System(SystemAA, "Internet Banking System", "Allows customers to view informatio
 
   it('should parse the alias', function () {
     c4.parser.parse(`C4Context
-System(SystemAA, "Internet Banking System")`);
+${macroName}(SystemAA, "Internet Banking System")`);
 
     expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
       alias: 'SystemAA',
@@ -55,7 +55,7 @@ System(SystemAA, "Internet Banking System")`);
 
   it('should parse the label', function () {
     c4.parser.parse(`C4Context
-System(SystemAA, "Internet Banking System")`);
+${macroName}(SystemAA, "Internet Banking System")`);
 
     expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
       label: {
@@ -66,7 +66,7 @@ System(SystemAA, "Internet Banking System")`);
 
   it('should parse the description', function () {
     c4.parser.parse(`C4Context
-System(SystemAA, "", "Allows customers to view information about their bank accounts, and make payments.")`);
+${macroName}(SystemAA, "", "Allows customers to view information about their bank accounts, and make payments.")`);
 
     expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
       descr: {
@@ -77,7 +77,7 @@ System(SystemAA, "", "Allows customers to view information about their bank acco
 
   it('should parse a sprite', function () {
     c4.parser.parse(`C4Context
-System(SystemAA, $sprite="users")`);
+${macroName}(SystemAA, $sprite="users")`);
 
     expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
       label: {
@@ -90,7 +90,7 @@ System(SystemAA, $sprite="users")`);
 
   it('should parse a link', function () {
     c4.parser.parse(`C4Context
-System(SystemAA, $link="https://github.com/mermaidjs")`);
+${macroName}(SystemAA, $link="https://github.com/mermaidjs")`);
 
     expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
       label: {
@@ -103,7 +103,7 @@ System(SystemAA, $link="https://github.com/mermaidjs")`);
 
   it('should parse tags', function () {
     c4.parser.parse(`C4Context
-System(SystemAA, $tags="tag1,tag2")`);
+${macroName}(SystemAA, $tags="tag1,tag2")`);
 
     expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
       label: {

From 092c15a37c16a1b4997f862917118b4b70f653f1 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sun, 28 Aug 2022 17:01:39 +0200
Subject: [PATCH 16/18] Test all different types of systems

---
 src/diagrams/c4/parser/c4System.spec.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/diagrams/c4/parser/c4System.spec.js b/src/diagrams/c4/parser/c4System.spec.js
index fa0a4b089..6d81c7379 100644
--- a/src/diagrams/c4/parser/c4System.spec.js
+++ b/src/diagrams/c4/parser/c4System.spec.js
@@ -6,7 +6,14 @@ setConfig({
   securityLevel: 'strict',
 });
 
-describe.each([['System', 'system']])('parsing a C4 %s', function (macroName, elementName) {
+describe.each([
+  ['System', 'system'],
+  ['SystemDb', 'system_db'],
+  ['SystemQueue', 'system_queue'],
+  ['System_Ext', 'external_system'],
+  ['SystemDb_Ext', 'external_system_db'],
+  ['SystemQueue_Ext', 'external_system_queue'],
+])('parsing a C4 %s', function (macroName, elementName) {
   beforeEach(function () {
     c4.parser.yy = c4Db;
     c4.parser.yy.clear();

From b86476331fe74f4332f9ccd7de45be8fb82351b8 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sun, 28 Aug 2022 17:14:19 +0200
Subject: [PATCH 17/18] Add first test for Boundary

---
 src/diagrams/c4/parser/c4Boundary.spec.js | 45 +++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/diagrams/c4/parser/c4Boundary.spec.js

diff --git a/src/diagrams/c4/parser/c4Boundary.spec.js b/src/diagrams/c4/parser/c4Boundary.spec.js
new file mode 100644
index 000000000..b531b5bd5
--- /dev/null
+++ b/src/diagrams/c4/parser/c4Boundary.spec.js
@@ -0,0 +1,45 @@
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe.each(['Boundary'])('parsing a C4 %s', function (macroName) {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Boundary correctly', function () {
+    c4.parser.parse(`C4Context
+title System Context diagram for Internet Banking System
+${macroName}(b1, "BankBoundary") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    const yy = c4.parser.yy;
+
+    const boundaries = yy.getBoundarys();
+    expect(boundaries.length).toBe(2);
+    const onlyShape = boundaries[1];
+
+    expect(onlyShape).toEqual({
+      alias: 'b1',
+      label: {
+        text: 'BankBoundary',
+      },
+      // TODO: Why are link, and tags undefined instead of not appearing at all?
+      //       Compare to Person where they don't show up.
+      link: undefined,
+      tags: undefined,
+      parentBoundary: 'global',
+      type: {
+        // TODO: Why is this `system` instead of `boundary`?
+        text: 'system',
+      },
+      wrap: false,
+    });
+  });
+});

From 1a6305c0796780745d6c36edd496c80d02f7de37 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Sun, 28 Aug 2022 17:22:22 +0200
Subject: [PATCH 18/18] Add tests for other boundary properties

---
 src/diagrams/c4/parser/c4Boundary.spec.js | 69 ++++++++++++++++++++++-
 1 file changed, 67 insertions(+), 2 deletions(-)

diff --git a/src/diagrams/c4/parser/c4Boundary.spec.js b/src/diagrams/c4/parser/c4Boundary.spec.js
index b531b5bd5..c7130f557 100644
--- a/src/diagrams/c4/parser/c4Boundary.spec.js
+++ b/src/diagrams/c4/parser/c4Boundary.spec.js
@@ -23,9 +23,9 @@ System(SystemAA, "Internet Banking System")
 
     const boundaries = yy.getBoundarys();
     expect(boundaries.length).toBe(2);
-    const onlyShape = boundaries[1];
+    const boundary = boundaries[1];
 
-    expect(onlyShape).toEqual({
+    expect(boundary).toEqual({
       alias: 'b1',
       label: {
         text: 'BankBoundary',
@@ -42,4 +42,69 @@ System(SystemAA, "Internet Banking System")
       wrap: false,
     });
   });
+
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, "BankBoundary") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      alias: 'b1',
+    });
+  });
+
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, "BankBoundary") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      label: {
+        text: 'BankBoundary',
+      },
+    });
+  });
+
+  it('should parse the type', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, "", "company") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      type: { text: 'company' },
+    });
+  });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, $link="https://github.com/mermaidjs") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, $tags="tag1,tag2") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
 });