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