Skip to content

Commit afe6501

Browse files
committed
fixup! docs: overhaul unit testing overview guide
1 parent 06a37fe commit afe6501

File tree

1 file changed

+19
-21
lines changed

1 file changed

+19
-21
lines changed

adev/src/content/guide/testing/overview.md

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ NOTE: This guide covers the default testing setup for new Angular CLI projects,
88

99
The Angular CLI downloads and installs everything you need to test an Angular application with the [Vitest testing framework](https://vitest.dev). New projects include `vitest` and `jsdom` by default.
1010

11-
Vitest runs your unit tests in a Node.js environment. To simulate the browser's DOM, Vitest uses a library called `jsdom`. This allows for faster test execution by avoiding the overhead of launching a browser. You can swap `jsdom` for an alternative like `happy-dom` by installing it and uninstalling `jsdom`.
11+
Vitest runs your unit tests in a Node.js environment. To simulate the browser's DOM, Vitest uses a library called `jsdom`. This allows for faster test execution by avoiding the overhead of launching a browser. You can swap `jsdom` for an alternative like `happy-dom` by installing it and uninstalling `jsdom`. Currently, `jsdom` and `happy-dom` are the supported DOM emulation libraries.
1212

1313
The project you create with the CLI is immediately ready to test. Run the [`ng test`](cli/test) command:
1414

@@ -52,7 +52,7 @@ The `setupFiles` and `providersFile` options are particularly useful for managin
5252

5353
For example, you could create a `src/test-providers.ts` file to provide `provideHttpClientTesting` to all your tests:
5454

55-
```typescript
55+
```typescript {header: "src/test-providers.ts"}
5656
// src/test-providers.ts
5757
import { Provider } from '@angular/core';
5858
import { provideHttpClient } from '@angular/common/http';
@@ -132,9 +132,23 @@ For more detailed information, see the [Code coverage guide](guide/testing/code-
132132

133133
While the default Node.js environment is faster for most unit tests, you can also run your tests in a real browser. This is useful for tests that rely on browser-specific APIs (like rendering) or for debugging.
134134

135-
To run tests in a browser, you must first install a browser provider. Beyond installing the provider and specifying the `browsers` option in `angular.json` or as a CLI flag, no further configuration is required.
135+
To run tests in a browser, you must first install a browser provider. Read more about Vitest's browser mode in the [official documentation](https://vitest.dev/guide/browser).
136136

137-
Read more about Vitest's browser mode in the [official documentation](https://vitest.dev/guide/browser).
137+
Once the provider is installed, you can run your tests in the browser by configuring the `browsers` option in `angular.json` or by using the `--browsers` CLI flag. Tests run in a headed browser by default. If the `CI` environment variable is set, headless mode is used instead. To explicitly control headless mode, you can suffix the browser name with `Headless` (e.g., `chromiumHeadless`).
138+
139+
```bash
140+
# Example for Playwright (headed)
141+
ng test --browsers=chromium
142+
143+
# Example for Playwright (headless)
144+
ng test --browsers=chromiumHeadless
145+
146+
# Example for WebdriverIO (headed)
147+
ng test --browsers=chrome
148+
149+
# Example for WebdriverIO (headless)
150+
ng test --browsers=chromeHeadless
151+
```
138152

139153
Choose one of the following browser providers based on your needs:
140154

@@ -195,23 +209,7 @@ The `@vitest/browser-preview` provider is designed for Webcontainer environments
195209
</docs-code>
196210
</docs-code-multifile>
197211

198-
Once the provider is installed, you can run your tests in the browser using the `--browsers` flag. Tests run in a headed browser by default. If the `CI` environment variable is set, headless mode is used instead. To explicitly control headless mode, you can suffix the browser name with `Headless` (e.g., `chromiumHeadless`).
199-
200-
```bash
201-
# Example for Playwright (headed)
202-
ng test --browsers=chromium
203-
204-
# Example for Playwright (headless)
205-
ng test --browsers=chromiumHeadless
206-
207-
# Example for WebdriverIO (headed)
208-
ng test --browsers=chrome
209-
210-
# Example for WebdriverIO (headless)
211-
ng test --browsers=chromeHeadless
212-
```
213-
214-
For more advanced browser-specific configuration, see the [Advanced Vitest configuration](#advanced-vitest-configuration) section.
212+
HELPFUL: For more advanced browser-specific configuration, see the [Advanced Vitest configuration](#advanced-vitest-configuration) section.
215213

216214
## Other test frameworks
217215

0 commit comments

Comments
 (0)