mirror of
https://github.com/docker/docs.git
synced 2026-10-28 07:15:09 +03:00
f23f120cd6
This PR introduces a comprehensive, language-specific guide for containerizing Angular applications using Docker, aimed at helping developers streamline development, testing, and deployment workflows. It includes practical steps and examples to set up CI/CD pipelines using GitHub Actions, aligning with modern DevOps best practices. **What’s Included** - Step-by-step instructions to containerize Angular apps using Docker - Configuration for a local development environment inside containers - Guidance on running unit tests (Karma/Jasmine) inside Docker containers - Full CI/CD pipeline setup using GitHub Actions for automated builds and deployments - Deployment instructions for a local Kubernetes cluster to validate production readiness **Credits** [Kristiyan Velkov](https://www.linkedin.com/in/kristiyan-velkov-763130b3/), Docker Captain and experienced Front-end Engineer
139 lines
4.5 KiB
Markdown
139 lines
4.5 KiB
Markdown
---
|
||
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, you’ll 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.
|