Component

C4 models allow us to visualize software architecture by decomposition in containers and components. Viewpoints are organized in hierarchical levels: Context Diagrams (Level 1) Container Diagrams (Level 2) Component Diagrams (Level 3) Code Diagrams (Level 4) C4-PlantUML offers a variety of macros and stereotypes that make modeling fun. An example in PlantUML: sample.puml @startuml !include <c4/C4_Context.puml> !include <c4/C4_Container.puml> left to right direction Person(user, "User") System_Ext(auth, "AuthService", "Provides authentication and authorization via OIDC") System_Boundary(zone1, "Some system boundary") { System(lb, "Load Balancer") System_Boundary(az, "App Cluster") { System(app, "App Servers") { Container(app1, "App1", "Docker", "Does stuff") Container(app2, "App1", "Docker", "Does stuff") ContainerDb(dbSess, "Session DB", "Redis") ContainerDb(db1, "RBMS 1", "AWS RDS Postgres") ContainerDb(db2, "RBMS 2", "AWS RDS Postgres") ' both app servers sync sessions via redis Rel(app1, dbSess, "Uses", "Sync Session") Rel(app2, dbSess, "Uses", "Sync Session") ' both app servers persist data in RDBMS Rel(app1, db1, "Uses", "Persist/query relational data") Rel(app2, db2, "Uses", "Persist/query relational data") } } } Rel(user, lb, "call") Rel(lb, app1, "delegate") Rel(lb, app2, "delegate") Rel(app1, auth, "Verify", "User auth") Rel(app2, auth, "Verify", "User auth") SHOW_FLOATING_LEGEND() @enduml ...

Goals render a React component in a test mock HTTP/REST calls to the backend verify results achieve the above using typescript, jest and testing-library Application under Test This is our application’s shortened package.json, generated by create-react-app, adding dependencies for …​ jest testing-library typescript react dom implementations (jest-dom/react-dom) axios (for the HTTP/REST call) package.json { [..] "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "typescript": "^4.1.2", "web-vitals": "^1.0.1", "axios": "^0.19.0" }, [..] "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, [..] } ...

Animations add some spice to our Android applications and the offered animation framework makes it easy to create custom animations and tweens. So lets dance around and create some animations ;) .. About There are two ways to create animations – via XML declaration or in a Java class. We’re going to focus on XML declaration – if you’re interested in java based declaration – take a look at the Android JavaDocs and the subclasses of android.view.animation.Animation. ...