# drmoreira/angular-unit-tests architecture

> Architecture diagram of the GitHub repository drmoreira/angular-unit-tests, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/drmoreira/angular-unit-tests
- Repository: https://github.com/drmoreira/angular-unit-tests

## Overview

This is an Angular 20 demo for practical unit-testing patterns, with a small runtime that renders a property-driven component and an asynchronous mock commit list. The graph shows the runtime flow and the documented component/service testing focus; test files are present, but their contents were not excerpted, so their specific setups and dependency-mocking relationships are not inferred.

Main entry points: [`src/app/child-b/services/child-b-api.ts`](https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/child-b/services/child-b-api.ts) (Mock commit API), [`src/main.ts`](https://github.com/drmoreira/angular-unit-tests/blob/main/src/main.ts) (Bootstrap), [`src/app/app.ts`](https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/app.ts) (Demo shell), [`src/app/child-b/child-b.ts`](https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/child-b/child-b.ts) (Commit display)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Application entry"]
  node_bootstrap["Bootstrap<br/>[main.ts]"]
  node_appconfig["App configuration<br/>[app.config.ts]"]
  node_translations["English translations<br/>[en.json]"]
end

subgraph group_demo["UI demonstrations"]
  node_root["Demo shell<br/>[app.ts]"]
  node_childa["Profile display<br/>[child-a.ts]"]
  node_childb["Commit display<br/>[child-b.ts]"]
end

subgraph group_domain["Request data"]
  node_api["Mock commit API<br/>[child-b-api.ts]"]
  node_request["Request model<br/>[request-model.ts]"]
  node_commit["Commit model<br/>[commit-model.ts]"]
  node_state["Request states"]
end

subgraph group_testing["Testing examples"]
  node_componenttests["Component tests<br/>[child-a.spec.ts]"]
  node_servicetests["Service tests"]
end

node_browser(("Browser"))

node_browser -->|"starts app"| node_bootstrap
node_bootstrap -->|"provides config"| node_appconfig
node_bootstrap -->|"bootstraps"| node_root
node_root -->|"renders"| node_childa
node_root -->|"renders"| node_childb
node_childb -->|"requests commits"| node_api
node_api -->|"returns request"| node_request
node_api -->|"returns commits"| node_commit
node_api -->|"sets state"| node_state
node_childb -->|"renders by state"| node_state
node_appconfig -.->|"loads language file"| node_translations

click node_bootstrap "https://github.com/drmoreira/angular-unit-tests/blob/main/src/main.ts"
click node_appconfig "https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/app.config.ts"
click node_root "https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/app.ts"
click node_childa "https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/child-a/child-a.ts"
click node_childb "https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/child-b/child-b.ts"
click node_api "https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/child-b/services/child-b-api.ts"
click node_request "https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/shared/models/request-model.ts"
click node_commit "https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/shared/models/commit-model.ts"
click node_state "https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/shared/enums/request-state-enum.ts"
click node_translations "https://github.com/drmoreira/angular-unit-tests/blob/main/public/i18n/en.json"
click node_componenttests "https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/child-a/child-a.spec.ts"
click node_servicetests "https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/child-b/services/child-b-api.spec.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_bootstrap,node_appconfig,node_translations,node_browser toneBlue
class node_root,node_childa,node_childb toneAmber
class node_api,node_request,node_commit,node_state toneMint
class node_componenttests,node_servicetests toneRose
```

## Components

### Application entry

- [Bootstrap](https://github.com/drmoreira/angular-unit-tests/blob/main/src/main.ts): `src/main.ts`
- [App configuration](https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/app.config.ts): `src/app/app.config.ts`
- [English translations](https://github.com/drmoreira/angular-unit-tests/blob/main/public/i18n/en.json): `public/i18n/en.json`

### UI demonstrations

- [Demo shell](https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/app.ts): `src/app/app.ts`
- [Profile display](https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/child-a/child-a.ts): `src/app/child-a/child-a.ts`
- [Commit display](https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/child-b/child-b.ts): `src/app/child-b/child-b.ts`

### Request data

- [Mock commit API](https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/child-b/services/child-b-api.ts): `src/app/child-b/services/child-b-api.ts`
- [Request model](https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/shared/models/request-model.ts): `src/app/shared/models/request-model.ts`
- [Commit model](https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/shared/models/commit-model.ts): `src/app/shared/models/commit-model.ts`
- [Request states](https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/shared/enums/request-state-enum.ts): `src/app/shared/enums/request-state-enum.ts`

### Testing examples

- [Component tests](https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/child-a/child-a.spec.ts): `src/app/child-a/child-a.spec.ts`
- [Service tests](https://github.com/drmoreira/angular-unit-tests/blob/main/src/app/child-b/services/child-b-api.spec.ts): `src/app/child-b/services/child-b-api.spec.ts`

### Other components

- **Browser**

## Connections

- Browser → Bootstrap: starts app (evidence: `src/main.ts`)
- Bootstrap → App configuration: provides config (evidence: `src/main.ts`)
- Bootstrap → Demo shell: bootstraps (evidence: `src/main.ts`)
- Demo shell → Profile display: renders (evidence: `src/app/app.ts`)
- Demo shell → Commit display: renders (evidence: `src/app/app.ts`)
- Commit display → Mock commit API: requests commits (evidence: `src/app/child-b/child-b.ts`)
- Mock commit API → Request model: returns request (evidence: `src/app/child-b/services/child-b-api.ts`)
- Mock commit API → Commit model: returns commits (evidence: `src/app/child-b/services/child-b-api.ts`)
- Mock commit API → Request states: sets state (evidence: `src/app/child-b/services/child-b-api.ts`)
- Commit display → Request states: renders by state (evidence: `src/app/child-b/child-b.ts`)
- App configuration → English translations: loads language file (evidence: `src/app/app.config.ts`)