5.7 KB142 lines
Blame
1import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
2
3describe('C4 diagram', () => {
4 it('C4.1 should render a simple C4Context diagram', () => {
5 imgSnapshotTest(
6 `
7 C4Context
8 accTitle: C4 context demo
9 accDescr: Many large C4 diagrams
10
11 title System Context diagram for Internet Banking System
12
13 Enterprise_Boundary(b0, "BankBoundary0") {
14 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
15
16 System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
17
18 Enterprise_Boundary(b1, "BankBoundary") {
19 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
20 }
21 }
22
23 BiRel(customerA, SystemAA, "Uses")
24 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
25 Rel(SystemC, customerA, "Sends e-mails to")
26
27 UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
28 UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
29 UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
30 `,
31 {}
32 );
33 });
34 it('C4.2 should render a simple C4Container diagram', () => {
35 imgSnapshotTest(
36 `
37 C4Container
38 title Container diagram for Internet Banking System
39
40 System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
41 Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
42
43 Container_Boundary(c1, "Internet Banking") {
44 Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
45 }
46
47 Rel(customer, spa, "Uses", "HTTPS")
48 Rel(email_system, customer, "Sends e-mails to")
49 `,
50 {}
51 );
52 });
53 it('C4.3 should render a simple C4Component diagram', () => {
54 imgSnapshotTest(
55 `
56 C4Component
57 title Component diagram for Internet Banking System - API Application
58
59 Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
60
61 Container_Boundary(api, "API Application") {
62 Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
63 }
64
65 Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
66 UpdateRelStyle(spa, sign, $offsetY="-40")
67 `,
68 {}
69 );
70 });
71 it('C4.4 should render a simple C4Dynamic diagram', () => {
72 imgSnapshotTest(
73 `
74 C4Dynamic
75 title Dynamic diagram for Internet Banking System - API Application
76
77 ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
78 Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
79 Container_Boundary(b, "API Application") {
80 Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
81 Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
82 }
83 Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
84 Rel(c2, c3, "Calls isAuthenticated() on")
85 Rel(c3, c4, "select * from users where username = ?", "JDBC")
86
87 UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
88 UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
89 UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
90 `,
91 {}
92 );
93 });
94 it('C4.5 should render a simple C4Deployment diagram', () => {
95 imgSnapshotTest(
96 `
97 C4Deployment
98 title Deployment Diagram for Internet Banking System - Live
99
100 Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
101 Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
102 }
103
104 Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
105 Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
106 Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
107 Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
108 }
109 }
110 }
111
112 Rel(mobile, api, "Makes API calls to", "json/HTTPS")
113 `,
114 {}
115 );
116 });
117 it('C4.6 should render C4Context diagram with ComponentQueue_Ext', () => {
118 imgSnapshotTest(
119 `
120 C4Context
121 title System Context diagram with ComponentQueue_Ext
122
123 Enterprise_Boundary(b0, "BankBoundary0") {
124 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
125
126 System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
127
128 Enterprise_Boundary(b1, "BankBoundary") {
129 ComponentQueue_Ext(msgQueue, "Message Queue", "RabbitMQ", "External message queue system for processing banking transactions")
130 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
131 }
132 }
133
134 BiRel(customerA, SystemAA, "Uses")
135 Rel(SystemAA, msgQueue, "Sends messages to")
136 Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
137 `,
138 {}
139 );
140 });
141});
142