Angular21

This project was generated using Angular CLI version 21.2.2.

Development server

To start a local development server, run:

ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the project run:

ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running unit tests

To execute unit tests with the Vitest test runner, use the following command:

ng test

Running coverage (100% minimum)

This project includes a strict coverage command that enforces 100% minimum coverage for statements, branches, functions, and lines.

npm run test:coverage

If the coverage drops below 100% in any metric, the command exits with an error.

Coverage reports are written to:

coverage/angular-21/index.html

To browse the HTML report locally, run:

npm run coverage:open

Then open http://localhost:4201 in your browser.

Continuous integration

GitHub Actions runs CI on every push and pull request using:

1. Build verification via npm run build
2. Strict coverage verification via npm run test:coverage

The workflow is defined in .github/workflows/ci.yml.

Running end-to-end tests

End-to-end tests are written with Playwright and live in the e2e/ folder.

Start the Angular dev server in one terminal first:

npm run start

Then run e2e commands from a second terminal.

Run all e2e tests headlessly:

npm run e2e

Open the interactive Playwright UI (useful for debugging):

npm run e2e:ui

View the last HTML report in your browser:

npm run e2e:report

The e2e tests expect the app to be available at http://localhost:4200. If the dev server is not running, Playwright will fail with connection errors.

Running Storybook

This project includes Storybook for isolated UI development and documentation.

Start Storybook locally:

npm run storybook

npm run storybook refreshes reports first by running:

npm run reports:refresh

This regenerates both coverage and Playwright HTML reports before launching Storybook.

By default, Storybook is served at http://localhost:6006.

Build a static Storybook site:

npm run build-storybook

npm run build-storybook also runs npm run reports:refresh first.

Static output is written to:

storybook-static/

Storybook Reports section

Storybook includes a Reports section with embedded HTML reports:

• Coverage → coverage/angular-21/index.html
• Playwright → playwright-report/index.html

To regenerate both reports manually without launching/building Storybook:

npm run reports:refresh

Generated test IDs

This project uses a shared test-id generator to avoid hardcoded data-testid strings.

• Generator implementation: src/app/shared/testing/test-id-generator.ts
• Per-component ID maps: colocated *.test-ids.ts files beside each component/page

Create component/page IDs with the generator:

import { generateTestIds } from '../../../../shared/testing/test-id-generator';

const { scopeTestId, titleInputTestId, submitButtonTestId } = generateTestIds({
  scopeName: 'addForm',
}).add('titleInput', 'submitButton');

export const todoAddFormTestIds = {
  root: scopeTestId,
  titleInput: titleInputTestId,
  submitButton: submitButtonTestId,
} as const;

Use IDs in templates through bindings:

<input [attr.data-testid]="testIds.titleInput" />

Use the same IDs in Playwright selectors:

page.getByTestId(TestId.addForm.titleInput);

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.