Skip to content

Commit 9443d50

Browse files
[feat] Added section for Angular testing
1 parent e7ac8d3 commit 9443d50

File tree

1 file changed

+20
-62
lines changed

1 file changed

+20
-62
lines changed

content/guides/angular/run-tests.md

Lines changed: 20 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Run Angular tests in a container
33
linkTitle: Run your tests
44
weight: 40
5-
keywords: angular, angular, test, vitest
5+
keywords: angular, test, jasmine
66
description: Learn how to run your Angular tests in a container.
77

88
---
@@ -15,10 +15,12 @@ Complete all the previous sections of this guide, starting with [Containerize An
1515

1616
Testing is a critical part of the development process. In this section, you'll learn how to:
1717

18-
- Run unit tests using Vitest inside a Docker container.
19-
- Use Docker Compose to run tests in an isolated, reproducible environment.
18+
- Run Jasmine unit tests using the Angular CLI inside a Docker container.
19+
- Use Docker Compose to isolate your test environment.
20+
- Ensure consistency between local and container-based testing.
2021

21-
You’ll use [Vitest](https://vitest.dev) — a blazing fast test runner designed for Vite — along with [Testing Library](https://testing-library.com/) for assertions.
22+
23+
`docker-angular-sample` project comes pre-configured with Jasmine, so you can get started quickly without extra setup.
2224

2325
---
2426

@@ -27,64 +29,12 @@ You’ll use [Vitest](https://vitest.dev) — a blazing fast test runner designe
2729
`docker-angular-sample` application includes a sample test file at location:
2830

2931
```console
30-
$ src/App.test.tsx
31-
```
32-
33-
This file uses Vitest and React Testing Library to verify the behavior of `App` component.
34-
35-
### Step 1: Install Vitest and React Testing Library
36-
37-
If you haven’t already added the necessary testing tools, install them by running:
38-
39-
```console
40-
$ npm install --save-dev vitest @testing-library/angular @testing-library/jest-dom jsdom
32+
$ src/app/app.component.spec.ts
4133
```
4234

43-
Then, update the scripts section of your `package.json` file to include the following:
35+
This test uses Jasmine to validate the AppComponent logic.
4436

45-
```json
46-
"scripts": {
47-
"test": "vitest run"
48-
}
49-
```
50-
51-
---
52-
53-
### Step 2: Configure Vitest
54-
55-
Update `vitest.config.ts` file in your project root with the following configuration:
56-
57-
```ts {hl_lines="14-18",linenos=true}
58-
/// <reference types="vitest" />
59-
60-
import { defineConfig } from "vite";
61-
import angular from "@vitejs/plugin-angular";
62-
63-
export default defineConfig({
64-
base: "/",
65-
plugins: [angular()],
66-
server: {
67-
host: true,
68-
port: 5173,
69-
strictPort: true,
70-
},
71-
test: {
72-
environment: "jsdom",
73-
setupFiles: "./src/setupTests.ts",
74-
globals: true,
75-
},
76-
});
77-
```
78-
79-
> [!NOTE]
80-
> The `test` options in `vitest.config.ts` are essential for reliable testing inside Docker:
81-
> - `environment: "jsdom"` simulates a browser-like environment for rendering and DOM interactions.
82-
> - `setupFiles: "./src/setupTests.ts"` loads global configuration or mocks before each test file (optional but recommended).
83-
> - `globals: true` enables global test functions like `describe`, `it`, and `expect` without importing them.
84-
>
85-
> For more details, see the official [Vitest configuration docs](https://vitest.dev/config/).
86-
87-
### Step 3: Update compose.yaml
37+
### Step 1: Update compose.yaml
8838

8939
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.
9040

@@ -133,7 +83,7 @@ After completing the previous steps, your project directory should contain the f
13383
│ └── README.Docker.md
13484
```
13585

136-
### Step 4: Run the tests
86+
### Step 2: Run the tests
13787

13888
To execute your test suite inside the container, run the following command from your project root:
13989

@@ -146,6 +96,15 @@ This command will:
14696
- Execute the `npm run test` script using the same environment as development.
14797
- Automatically remove the container after the tests complete [`docker compose run --rm`](/engine/reference/commandline/compose_run) command.
14898

99+
The output should look something like this:
100+
101+
```text
102+
Test Suites: 1 passed, 1 total
103+
Tests: 3 passed, 3 total
104+
Snapshots: 0 total
105+
Time: 1.529 s
106+
```
107+
149108
> [!NOTE]
150109
> For more information about Compose commands, see the [Compose CLI
151110
> reference](/reference/cli/docker/compose/_index.md).
@@ -154,10 +113,9 @@ This command will:
154113

155114
## Summary
156115

157-
In this section, you learned how to run unit tests for your Angular application inside a Docker container using Vitest and Docker Compose.
116+
In this section, you learned how to run unit tests for your Angular application inside a Docker container using Jasmine and Docker Compose.
158117

159118
What you accomplished:
160-
- Installed and configured Vitest and React Testing Library for testing React components.
161119
- Created a `angular-test` service in `compose.yaml` to isolate test execution.
162120
- Reused the development `Dockerfile.dev` to ensure consistency between dev and test environments.
163121
- Ran tests inside the container using `docker compose run --rm angular-test`.

0 commit comments

Comments
 (0)