# babmintot/bank architecture

> Architecture diagram of the GitHub repository babmintot/bank, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/babmintot/bank
- Repository: https://github.com/babmintot/bank

## Overview

1. **Repository purpose**
   - This is a QA-oriented repository for a web service that transfers money from a bank account to a card.
   - The repo does not contain the business backend; it contains the **test target build**, **manual QA artifacts**, **Selenium automation**, and **CI** around that target.

2. **Test target application**
   - The runnable application is a **static front-end build** in the root output files: `index.html` plus bundled `assets/*.js` and `assets/*.css`.
   - It is served locally as a static site with `python3 -m http.server 8000`.
   - The app behavior is parameterized through the URL, for example `/?balance=30000&reserved=20001`, which suggests the transfer logic is driven by query parameters rather than a separate API/backend in this repo.

3. **Main functional boundary**
   - The key boundary is between the **browser UI** and the **rendered transfer form/state logic** inside the static app.
   - Selenium tests interact only through the browser, so all validation, commission calculation, and defect reproduction happen at the UI level.

4. **Manual testing layer**
   - The `manual/` folder contains the QA documentation:
     - `test-design.md` for coverage strategy,
     - `test-cases.md` for manual test cases,
     - `bug-reports.md` for defect records,
     - images for evidence.
   - This layer captures requirements analysis and defect findings that directly informed the automated scenarios.

5. **Automated test layer**
   - `autotests/` is a Python test suite using **pytest + Selenium**.
   - `conftest.py` likely contains shared browser setup/teardown and fixture wiring.
   - Each test file maps to one scenario or defect category, making the suite easy to trace back to documented QA cases.

6. **Automated scenario coverage**
   - The suite includes both expected-pass and expected-fail cases:
     - success flow,
     - insufficient funds,
     - negative, empty, and short-card validation,
     - commission check,
     - known defect reproduction for boundary amount and oversized card number.
   - This means the test suite is not only regression-oriented, but also serves as a **defect-verification suite**.

7. **Data flow during test execution**
   - CI or a local developer starts the static app.
   - Selenium opens Chrome, navigates to `localhost:8000` with preset query parameters.
   - The browser UI computes or displays transfer outcomes.
   - Assertions in pytest verify success, validation messages, or known broken behavior.

8. **Environment and tooling**
   - The automation stack is **Python 3.11+, pytest, Selenium, Chrome, and ChromeDriver**.
   - `webdriver-manager` is used so the driver can be obtained automatically.
   - This makes the test environment mostly self-contained aside from the browser runtime.

9. **CI boundary**
   - `.github/workflows/test.yml` defines GitHub Actions execution on **push** and **pull request**.
   - The pipeline installs Python, Chrome/ChromeDriver, Python dependencies, starts the static service, and runs the Selenium suite.
   - CI therefore exercises the same browser-driven path as local execution.

10. **Expected CI outcome**
   - The workflow is intentionally **red/failed** because two automated tests reproduce known defects:
     - boundary amount issue,
     - invalid card-length handling.
   - That means the CI is being used as a defect detection gate, not a fully passing release pipeline.

11. **Architecture summary**
   - The repo is organized around three planes:
     - **test target**: static transfer UI,
     - **verification assets**: manual documentation and automated pytest/Selenium suite,
     - **execution infrastructure**: local static server and GitHub Actions.
   - The only external runtime dependency that materially matters is the browser stack, because all validation is performed through UI automation.

12. **What to draw in an architecture diagram**
   - Show the static web app as the central target.
   - Show two consumers of that target: manual QA artifacts and automated Selenium tests.
   - Show Selenium tests running in Chrome, driven by pytest.
   - Show GitHub Actions orchestrating environment setup and test execution.
   - Show the local HTTP server as the delivery mechanism for the static app.

Main entry points: [`autotests/tests`](https://github.com/babmintot/bank/tree/main/autotests/tests) (Pytest suite), [`.github/workflows/test.yml`](https://github.com/babmintot/bank/blob/main/.github/workflows/test.yml) (CI workflow), [`manual/test-cases.md`](https://github.com/babmintot/bank/blob/main/manual/test-cases.md) (Test cases), [`manual/bug-reports.md`](https://github.com/babmintot/bank/blob/main/manual/bug-reports.md) (Bug reports)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_target["Test target"]
  node_static_app["Transfer UI<br/>static front-end<br/>[index.html]"]
end

subgraph group_qa["QA assets"]
  node_test_design["Test design<br/>manual spec<br/>[test-design.md]"]
  node_test_cases["Test cases<br/>manual cases<br/>[test-cases.md]"]
  node_bug_reports["Bug reports<br/>defect log<br/>[bug-reports.md]"]
  node_evidence["Evidence<br/>screenshots"]
  node_pytest_suite["Pytest suite<br/>python tests"]
  node_conftest["Fixtures<br/>pytest setup<br/>[conftest.py]"]
  node_selenium_layer["Selenium<br/>browser automation"]
  node_chrome(("Chrome<br/>browser runtime"))
  node_driver_manager["Driver setup<br/>webdriver-manager<br/>[requirements.txt]"]
  node_success_flow["Success flow<br/>scenario<br/>[test_success.py]"]
  node_validation_checks["Validation checks<br/>scenario"]
  node_commission_check["Commission check<br/>scenario<br/>[test_commission.py]"]
  node_defect_checks["Defect repros<br/>scenario"]
end

subgraph group_infra["Execution infra"]
  node_local_server[("HTTP server<br/>static host")]
  node_gh_actions["CI workflow<br/>GitHub Actions<br/>[test.yml]"]
end

node_local_server -->|"serves"| node_static_app
node_gh_actions -->|"starts"| node_local_server
node_gh_actions -->|"runs"| node_pytest_suite
node_test_design -->|"guides"| node_test_cases
node_test_cases -->|"maps to"| node_pytest_suite
node_bug_reports -->|"informs"| node_defect_checks
node_evidence -->|"supports"| node_bug_reports
node_pytest_suite -->|"uses"| node_conftest
node_pytest_suite -->|"drives"| node_selenium_layer
node_selenium_layer -->|"controls"| node_chrome
node_driver_manager -->|"provisions"| node_chrome
node_pytest_suite -->|"includes"| node_success_flow
node_pytest_suite -->|"includes"| node_validation_checks
node_pytest_suite -->|"includes"| node_commission_check
node_pytest_suite -->|"includes"| node_defect_checks
node_chrome -->|"loads"| node_static_app

click node_static_app "https://github.com/babmintot/bank/blob/main/index.html"
click node_gh_actions "https://github.com/babmintot/bank/blob/main/.github/workflows/test.yml"
click node_test_design "https://github.com/babmintot/bank/blob/main/manual/test-design.md"
click node_test_cases "https://github.com/babmintot/bank/blob/main/manual/test-cases.md"
click node_bug_reports "https://github.com/babmintot/bank/blob/main/manual/bug-reports.md"
click node_evidence "https://github.com/babmintot/bank/tree/main/manual/images"
click node_pytest_suite "https://github.com/babmintot/bank/tree/main/autotests/tests"
click node_conftest "https://github.com/babmintot/bank/blob/main/autotests/conftest.py"
click node_driver_manager "https://github.com/babmintot/bank/blob/main/autotests/requirements.txt"
click node_success_flow "https://github.com/babmintot/bank/blob/main/autotests/tests/test_success.py"
click node_validation_checks "https://github.com/babmintot/bank/blob/main/autotests/tests/test_empty_amount.py"
click node_commission_check "https://github.com/babmintot/bank/blob/main/autotests/tests/test_commission.py"
click node_defect_checks "https://github.com/babmintot/bank/blob/main/autotests/tests/test_defect_boundary.py"

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_static_app toneBlue
class node_test_design,node_test_cases,node_bug_reports,node_evidence,node_pytest_suite,node_conftest,node_selenium_layer,node_chrome,node_driver_manager,node_success_flow,node_validation_checks,node_commission_check,node_defect_checks toneAmber
class node_local_server,node_gh_actions toneMint
```

## Components

### Test target

Static transfer UI delivered as files and served locally.

- [Transfer UI](https://github.com/babmintot/bank/blob/main/index.html): static front-end · Root HTML and bundled assets that render the bank-to-card transfer interface. · `index.html`

### QA assets

Manual documentation and browser automation used to verify the target UI.

- [Test design](https://github.com/babmintot/bank/blob/main/manual/test-design.md): manual spec · Coverage strategy and QA analysis for the transfer behavior. · `manual/test-design.md`
- [Test cases](https://github.com/babmintot/bank/blob/main/manual/test-cases.md): manual cases · Manual scenario catalog for expected behavior and edge cases. · `manual/test-cases.md`
- [Bug reports](https://github.com/babmintot/bank/blob/main/manual/bug-reports.md): defect log · Recorded defects and repro notes for known issues. · `manual/bug-reports.md`
- [Evidence](https://github.com/babmintot/bank/tree/main/manual/images): screenshots · Captured images used to support manual QA findings. · `manual/images`
- [Pytest suite](https://github.com/babmintot/bank/tree/main/autotests/tests): python tests · Automated browser test runner for UI verification and defect reproduction. · `autotests/tests`
- [Fixtures](https://github.com/babmintot/bank/blob/main/autotests/conftest.py): pytest setup · Shared browser setup, teardown, and test wiring. · `autotests/conftest.py`
- **Selenium**: browser automation · WebDriver-driven interaction layer used by the tests.
- **Chrome**: browser runtime · Browser used to execute the static app and surface UI validation results.
- [Driver setup](https://github.com/babmintot/bank/blob/main/autotests/requirements.txt): webdriver-manager · Resolves and provisions ChromeDriver for the automated runs. · `autotests/requirements.txt`
- [Success flow](https://github.com/babmintot/bank/blob/main/autotests/tests/test_success.py): scenario · Happy-path transfer scenario assertions. · `autotests/tests/test_success.py`
- [Validation checks](https://github.com/babmintot/bank/blob/main/autotests/tests/test_empty_amount.py): scenario · Empty, negative, short-card, and insufficient-funds UI validation coverage. · `autotests/tests/test_empty_amount.py`
- [Commission check](https://github.com/babmintot/bank/blob/main/autotests/tests/test_commission.py): scenario · Verifies commission calculation shown by the UI. · `autotests/tests/test_commission.py`
- [Defect repros](https://github.com/babmintot/bank/blob/main/autotests/tests/test_defect_boundary.py): scenario · Known-bug reproduction for boundary amount and oversized card-number behavior. · `autotests/tests/test_defect_boundary.py`

### Execution infra

Local serving and CI orchestration around the same browser-driven path.

- **HTTP server**: static host · Local Python server used to serve the built UI on localhost:8000.
- [CI workflow](https://github.com/babmintot/bank/blob/main/.github/workflows/test.yml): GitHub Actions · Workflow that installs dependencies, starts the server, and runs the Selenium suite on push and pull request. · `.github/workflows/test.yml`

## Connections

- HTTP server → Transfer UI: serves · Delivers the built front-end as a static site.
- CI workflow → HTTP server: starts · Boots the local HTTP server during CI.
- CI workflow → Pytest suite: runs · Executes the browser test suite in the workflow.
- Test design → Test cases: guides · Coverage strategy informs the scenario list.
- Test cases → Pytest suite: maps to · Manual scenarios are reflected in automated checks.
- Bug reports → Defect repros: informs · Known defects become automated reproduction tests.
- Evidence → Bug reports: supports · Screenshots and captured artifacts back defect records.
- Pytest suite → Fixtures: uses · Suite relies on shared fixtures and browser setup.
- Pytest suite → Selenium: drives · Pytest cases execute through Selenium WebDriver.
- Selenium → Chrome: controls · Browser automation runs inside Chrome.
- Driver setup → Chrome: provisions · Provides the ChromeDriver used by Selenium.
- Pytest suite → Success flow: includes · Happy-path coverage.
- Pytest suite → Validation checks: includes · Input validation and insufficient-funds coverage.
- Pytest suite → Commission check: includes · Commission behavior coverage.
- Pytest suite → Defect repros: includes · Reproduction of known boundary defects.
- Chrome → Transfer UI: loads · Browser opens the served UI and exercises it via query parameters.