Skip to content

Commit 289714e

Browse files
ricardochlSplaktar
ricardochl
authored and
Splaktar
committed
translate: translations for Karma and migrating to Vitest guides
Fixes #84
1 parent 5005132 commit 289714e

7 files changed

Lines changed: 586 additions & 143 deletions

File tree

‎adev-es/src/app/routing/sub-navigation-data.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -602,12 +602,12 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
602602
contentPath: 'guide/testing/code-coverage',
603603
},
604604
{
605-
label: 'Testing utility APIs',
605+
label: 'APIs utilitarias de pruebas',
606606
path: 'guide/testing/utility-apis',
607607
contentPath: 'guide/testing/utility-apis',
608608
},
609609
{
610-
label: 'Zone.js Testing Utilities',
610+
label: 'Utilidades de pruebas de Zone.js',
611611
path: 'guide/testing/zone-js-testing-utilities',
612612
contentPath: 'guide/testing/zone-js-testing-utilities',
613613
},
@@ -632,12 +632,12 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
632632
contentPath: 'guide/testing/component-harnesses-testing-environments',
633633
},
634634
{
635-
label: 'Migrating from Karma to Vitest',
635+
label: 'Migrando de Karma a Vitest',
636636
path: 'guide/testing/migrating-to-vitest',
637637
contentPath: 'guide/testing/migrating-to-vitest',
638638
},
639639
{
640-
label: 'Testing with Karma and Jasmine',
640+
label: 'Pruebas con Karma y Jasmine',
641641
path: 'guide/testing/karma',
642642
contentPath: 'guide/testing/karma',
643643
},

‎adev-es/src/content/guide/testing/karma.en.md‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
# Testing with Karma and Jasmine
2+
3+
While [Vitest](https://vitest.dev) is the default test runner for new Angular projects, [Karma](https://karma-runner.github.io) is still a supported and widely used test runner. This guide provides instructions for testing your Angular application using the Karma test runner with the [Jasmine](https://jasmine.github.io) testing framework.
4+
5+
## Setting Up Karma and Jasmine
6+
7+
You can set up Karma and Jasmine for a new project or add it to an existing one.
8+
9+
### For New Projects
10+
11+
To create a new project with Karma and Jasmine pre-configured, run the `ng new` command with the `--test-runner=karma` option:
12+
13+
```shell
14+
ng new my-karma-app --test-runner=karma
15+
```
16+
17+
### For Existing Projects
18+
19+
To add Karma and Jasmine to an existing project, follow these steps:
20+
21+
1. **Install the necessary packages:**
22+
23+
<docs-code-multifile>
24+
<docs-code header="npm" language="shell">
25+
npm install --save-dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine
26+
</docs-code>
27+
<docs-code header="yarn" language="shell">
28+
yarn add --dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine
29+
</docs-code>
30+
<docs-code header="pnpm" language="shell">
31+
pnpm add -D karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine
32+
</docs-code>
33+
<docs-code header="bun" language="shell">
34+
bun add --dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine
35+
</docs-code>
36+
</docs-code-multifile>
37+
38+
2. **Configure the test runner in `angular.json`:**
39+
40+
In your `angular.json` file, find the `test` target and set the `runner` option to `karma`:
41+
42+
```json
43+
{
44+
// ...
45+
"projects": {
46+
"your-project-name": {
47+
// ...
48+
"architect": {
49+
"test": {
50+
"builder": "@angular/build:unit-test",
51+
"options": {
52+
"runner": "karma",
53+
// ... other options
54+
}
55+
}
56+
}
57+
}
58+
}
59+
}
60+
```
61+
62+
3. **Update `tsconfig.spec.json` for Jasmine types:**
63+
64+
To ensure TypeScript recognizes global testing functions like `describe` and `it`, add `"jasmine"` to the `types` array in your `tsconfig.spec.json`:
65+
66+
```json
67+
{
68+
// ...
69+
"compilerOptions": {
70+
// ...
71+
"types": [
72+
"jasmine"
73+
]
74+
},
75+
// ...
76+
}
77+
```
78+
79+
## Running Tests
80+
81+
Once your project is configured, run the tests using the [`ng test`](cli/test) command:
82+
83+
```shell
84+
ng test
85+
```
86+
87+
The `ng test` command builds the application in _watch mode_ and launches the [Karma test runner](https://karma-runner.github.io).
88+
89+
The console output looks like below:
90+
91+
```shell
92+
93+
02 11 2022 09:08:28.605:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
94+
02 11 2022 09:08:28.607:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
95+
02 11 2022 09:08:28.620:INFO [launcher]: Starting browser Chrome
96+
02 11 2022 09:08:31.312:INFO [Chrome]: Connected on socket -LaEYvD2R7MdcS0-AAAB with id 31534482
97+
Chrome: Executed 3 of 3 SUCCESS (0.193 secs / 0.172 secs)
98+
TOTAL: 3 SUCCESS
99+
100+
```
101+
102+
The test output is displayed in the browser using [Karma Jasmine HTML Reporter](https://github.com/dfederm/karma-jasmine-html-reporter).
103+
104+
<img alt="Jasmine HTML Reporter in the browser" src="assets/images/guide/testing/initial-jasmine-html-reporter.png">
105+
106+
Click on a test row to re-run just that test or click on a description to re-run the tests in the selected test group ("test suite").
107+
108+
Meanwhile, the `ng test` command is watching for changes. To see this in action, make a small change to a source file and save. The tests run again, the browser refreshes, and the new test results appear.
109+
110+
## Configuration
111+
112+
The Angular CLI takes care of Jasmine and Karma configuration for you. It constructs the full configuration in memory, based on options specified in the `angular.json` file.
113+
114+
### Customizing Karma Configuration
115+
116+
If you want to customize Karma, you can create a `karma.conf.js` by running the following command:
117+
118+
```shell
119+
ng generate config karma
120+
```
121+
122+
HELPFUL: Read more about Karma configuration in the [Karma configuration guide](http://karma-runner.github.io/6.4/config/configuration-file.html).
123+
124+
### Setting the Test Runner in `angular.json`
125+
126+
To explicitly set Karma as the test runner for your project, locate the `test` target in your `angular.json` file and set the `runner` option to `karma`:
127+
128+
```json
129+
{
130+
// ...
131+
"projects": {
132+
"your-project-name": {
133+
// ...
134+
"architect": {
135+
"test": {
136+
"builder": "@angular/build:unit-test",
137+
"options": {
138+
"runner": "karma",
139+
// ... other options
140+
}
141+
}
142+
}
143+
}
144+
}
145+
}
146+
```
147+
148+
## Code coverage enforcement
149+
150+
To enforce a minimum code coverage level, you can use the `check` property in the `coverageReporter` section of your `karma.conf.js` file.
151+
152+
For example, to require a minimum of 80% coverage:
153+
154+
```javascript
155+
coverageReporter: {
156+
dir: require('path').join(__dirname, './coverage/<project-name>'),
157+
subdir: '.',
158+
reporters: [
159+
{ type: 'html' },
160+
{ type: 'text-summary' }
161+
],
162+
check: {
163+
global: {
164+
statements: 80,
165+
branches: 80,
166+
functions: 80,
167+
lines: 80
168+
}
169+
}
170+
}
171+
```
172+
173+
This will cause the test run to fail if the specified coverage thresholds are not met.
174+
175+
## Testing in continuous integration
176+
177+
To run your Karma tests in a CI environment, use the following command:
178+
179+
```shell
180+
ng test --no-watch --no-progress --browsers=ChromeHeadless
181+
```
182+
183+
NOTE: The `--no-watch` and `--no-progress` flags are crucial for Karma in CI environments to ensure tests run once and exit cleanly. The `--browsers=ChromeHeadless` flag is also essential for running tests in a browser environment without a graphical interface.
184+
185+
## Debugging tests
186+
187+
If your tests aren't working as you expect, you can inspect and debug them in the browser.
188+
189+
To debug an application with the Karma test runner:
190+
191+
1. Reveal the Karma browser window. See [Set up for testing](guide/testing/overview#configurar-pruebas) if you need help with this step.
192+
2. Click the **DEBUG** button to open a new browser tab and re-run the tests.
193+
3. Open the browser's **Developer Tools**. On Windows, press `Ctrl-Shift-I`. On macOS, press `Command-Option-I`.
194+
4. Pick the **Sources** section.
195+
5. Press `Control/Command-P`, and then start typing the name of your test file to open it.
196+
6. Set a breakpoint in the test.
197+
7. Refresh the browser, and notice how it stops at the breakpoint.
198+
199+
<img alt="Karma debugging" src="assets/images/guide/testing/karma-1st-spec-debug.png">

0 commit comments

Comments
 (0)