docs/content/guides/angular/run-tests.md

139 lines
4.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Run Angular tests in a container
linkTitle: Run your tests
weight: 40
keywords: angular, test, jasmine
description: Learn how to run your Angular tests in a container.
---
## Prerequisites
Complete all the previous sections of this guide, starting with [Containerize Angular application](containerize.md).
## Overview
Testing is a critical part of the development process. In this section, you'll learn how to:
- Run Jasmine unit tests using the Angular CLI inside a Docker container.
- Use Docker Compose to isolate your test environment.
- Ensure consistency between local and container-based testing.
The `docker-angular-sample` project comes pre-configured with Jasmine, so you can get started quickly without extra setup.
---
## Run tests during development
The `docker-angular-sample` application includes a sample test file at the following location:
```console
$ src/app/app.component.spec.ts
```
This test uses Jasmine to validate the AppComponent logic.
### Step 1: Update compose.yaml
Add a new service named `angular-test` to your `compose.yaml` file. This service allows you to run your test suite in an isolated, containerized environment.
```yaml {hl_lines="22-26",linenos=true}
services:
angular-dev:
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "5173:5173"
develop:
watch:
- action: sync
path: .
target: /app
angular-prod:
build:
context: .
dockerfile: Dockerfile
image: docker-angular-sample
ports:
- "8080:8080"
angular-test:
build:
context: .
dockerfile: Dockerfile.dev
command: ["npm", "run", "test"]
```
The angular-test service reuses the same `Dockerfile.dev` used for [development](develop.md) and overrides the default command to run tests with `npm run test`. This setup ensures a consistent test environment that matches your local development configuration.
After completing the previous steps, your project directory should contain the following files:
```text
├── docker-angular-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ ├── nginx.conf
│ └── README.Docker.md
```
### Step 2: Run the tests
To execute your test suite inside the container, run the following command from your project root:
```console
$ docker compose run --rm angular-test
```
This command will:
- Start the `angular-test` service defined in your `compose.yaml` file.
- Execute the `npm run test` script using the same environment as development.
- Automatically removes the container after tests complete, using the [`docker compose run --rm`](/engine/reference/commandline/compose_run) command.
You should see output similar to the following:
```shell
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 1.529 s
```
> [!NOTE]
> For more information about Compose commands, see the [Compose CLI
> reference](/reference/cli/docker/compose/_index.md).
---
## Summary
In this section, you learned how to run unit tests for your Angular application inside a Docker container using Jasmine and Docker Compose.
What you accomplished:
- Created a `angular-test` service in `compose.yaml` to isolate test execution.
- Reused the development `Dockerfile.dev` to ensure consistency between dev and test environments.
- Ran tests inside the container using `docker compose run --rm angular-test`.
- Ensured reliable, repeatable testing across environments without depending on your local machine setup.
---
## Related resources
Explore official references and best practices to sharpen your Docker testing workflow:
- [Dockerfile reference](/reference/dockerfile/) Understand all Dockerfile instructions and syntax.
- [Best practices for writing Dockerfiles](/develop/develop-images/dockerfile_best-practices/) Write efficient, maintainable, and secure Dockerfiles.
- [Compose file reference](/compose/compose-file/) Learn the full syntax and options available for configuring services in `compose.yaml`.
- [`docker compose run` CLI reference](/reference/cli/docker/compose/run/) Run one-off commands in a service container.
---
## Next steps
Next, youll learn how to set up a CI/CD pipeline using GitHub Actions to automatically build and test your Angular application in a containerized environment. This ensures your code is validated on every push or pull request, maintaining consistency and reliability across your development workflow.