TDD with React Testing Library - component testing

<figure><img src="https://res.cloudinary.com/dar0q4nt3/image/upload/v1643906378/Blogs/c4%20model/hero_akbp5t.jpg" alt="Tile mural - Poznań" width="100%" /><figcaption align = "center">Tile mural - Poznań, Poland</figcaption>
</figure>
C4 model provides a structured approach to visualise the software architecture. It helps development teams to create architecture diagrams and communicate effectively to product teams or external teams. It also encourages collaboration within agile teams to create the architecture diagrams in iterations.
<h2>🤔 What are the 4C's?</h2>
<ul>
<li>Context</li>
<li>Container</li>
<li>Component</li>
<li>Code</li>
</ul>
<div class="note">
Fictional use case 
 ⚡ EG is an energy provider who allows their customers to access the service using web browsers and also from mobile devices. The online service will allow users to login to the system and submit the electricity and gas meter readings. EG will notify users on successful submission of meter readings also sends the bill amount based on the calculation.
We will apply the C4 model to EG system and sketch different architecture diagrams to get better idea.
</div>
<h3>1️⃣ Context diagram</h3>
As the name suggests it provides the overall system context. It represents the system as a box surrounded by the user/actor and other systems that interact with it. It helps to take a step back to see the context.
👥 Intended audience: Tech and non-tech people inside and outside of the team.
This is an example System Context diagram for EG application. It clearly explains the relationship between the customer and the EG application. Customers can use the system to access their account and submit the meter readings. EG application uses its internal services like <code>EG backend</code>, <code>Payment system</code> and <code>Notifications system</code> to help their customers.
<figure style="text-align:center;margin:2px">
<picture>
 <source media="(max-width:415px)" srcset="https://res.cloudinary.com/dar0q4nt3/image/upload/c_scale,w_320/v1643814233/Blogs/c4%20model/c4model-context_tfpx8b.png">
 <source media="(min-width:500px)" srcset="https://res.cloudinary.com/dar0q4nt3/image/upload/v1643814233/Blogs/c4%20model/c4model-context_tfpx8b.png">
 <img src="https://res.cloudinary.com/dar0q4nt3/image/upload/v1643814233/Blogs/c4%20model/c4model-context_tfpx8b.png" style="width:auto;" alt="C4 model Context diagram">
</picture>
 <figcaption align = "center">Fig.1 - System Context Diagram</figcaption>
</figure>
<h3>2️⃣ Container diagram</h3>
Container diagram represents the individual service or application. The application should be separately runnable or deployable unit. It provides high-level technology focussed diagrams.
👥 Intended audience: Developers, software-architects inside and outside of the team.
This is an example <code>Container</code> diagram. It shows the EG user account management (the dashed box) is made up of five containers: <code>Backend API, a single page app, a web app, mobile app and a database</code>. The web app is built using Node.js that serves HTML pages along with a single page app. The React.js based single page app that renders in the customer's browser, provides all necessary features. Customers can also access the service from the Android mobile app.
The mobile app and single page app uses JSON/HTTPS API, which is powered by a Backend API app using Node.js. The Backend API reads from and writes the information to a Database. The Backend API also uses JSON/HTTPS format to communicate with other components like <code>Payments</code> and <code>Notifications</code>
<figure style="text-align:center;margin:2px">
<picture>
 <source media="(max-width:415px)" srcset="https://res.cloudinary.com/dar0q4nt3/image/upload/c_scale,w_320/v1643812854/Blogs/c4%20model/c4model-container_tyrr3g.png">
 <source media="(min-width:500px)" srcset="https://res.cloudinary.com/dar0q4nt3/image/upload/v1643812854/Blogs/c4%20model/c4model-container_tyrr3g.png">
 <img src="https://res.cloudinary.com/dar0q4nt3/image/upload/v1643812854/Blogs/c4%20model/c4model-container_tyrr3g.png" style="width:auto;" alt="C4 model Container diagram">
</picture>
<figcaption align = "center">Fig.2 - Container Diagram</figcaption>
</figure>
<h3>3️⃣ Component diagram</h3>
Component diagram shows how a container is made up of a number of components. Provides more details about the responsibilities and the technology/implementation details of components.
👥 Intended audience: Developers and software architects.
This is an example Component diagram.It provides in-depth details about Backend API app container. It uses <code>Login, Reset password and Auth controllers</code> to manage user login workflow. It also explains the data flow, format (JSON/HTTPS) and it's interaction with other components.
<figure style="text-align:center;margin:2px">
<picture>
 <source media="(max-width:415px)" srcset="https://res.cloudinary.com/dar0q4nt3/image/upload/c_scale,w_320/v1643815967/Blogs/c4%20model/c4model-component_yp0seb.png">
 <source media="(min-width:500px)" srcset="https://res.cloudinary.com/dar0q4nt3/image/upload/v1643815967/Blogs/c4%20model/c4model-component_yp0seb.png">
 <img src="https://res.cloudinary.com/dar0q4nt3/image/upload/v1643815967/Blogs/c4%20model/c4model-component_yp0seb.png" style="width:auto;" alt="C4 model Component diagram">
</picture>
<figcaption align = "center">Fig.3 - Component Diagram</figcaption>
</figure>
<h3>4️⃣ Code</h3>
Provides detailed information about how each component is implemented. We can use UML, Entity relationship diagrams to represent the state of the code.
<div class="idea">In my opinion, maintaining the UML diagrams will be challenging for code base that evolves or changes frequently in bigger teams.</div>
👥 Intended audience: Developers and software architects.
 References:
<ul>
<li>C4 model official website - <a href="https://c4model.com/">https://c4model.com/</a></li>
<li>Visualising software architecture by Simon Brown, Agile on the Beach 2019 - <a href="https://www.youtube.com/watch?v=x2-rSnhpw0g">https://www.youtube.com/watch?v=x2-rSnhpw0g</a></li>
</ul>