skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: update testing document to include karma config (#47940)

Browse Source 
In version 15, the Angular CLI will no longer generate a `karma.conf.js` by default.

This commit updates the testing document to include an example of how to include a custom `karma.conf.js`.  Also, we update several parts of the documentation which were outdated.

PR Close #47940
This commit is contained in:
Alan Agius
2022-11-02 10:18:07 +00:00
committed by Andrew Kushnir
parent ec43991665
commit 062e17b65d
1 changed files with 100 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aio/content/guide/testing.md
+100 -46
View File
@@ -2,14 +2,14 @@
# Testing
Testing your Angular application helps you check that your app is working as you expect.
Testing your Angular application helps you check that your application is working as you expect.
## Prerequisites
Before writing tests for your Angular app, you should have a basic understanding of the following concepts:
Before writing tests for your Angular application, you should have a basic understanding of the following concepts:
* Angular fundamentals
* JavaScript
* [Angular fundamentals](guide/architecture)
* [JavaScript](https://javascript.info/)
* HTML
* CSS
* [Angular CLI](cli)
@@ -27,7 +27,7 @@ If you'd like to experiment with the application that this guide describes, <liv
## Set up testing
The Angular CLI downloads and installs everything you need to test an Angular application with the [Jasmine test framework](https://jasmine.github.io).
The Angular CLI downloads and installs everything you need to test an Angular application with [Jasmine testing framework](https://jasmine.github.io).
The project you create with the CLI is immediately ready to test.
Just run the [`ng test`](cli/test) CLI command:
@@ -41,23 +41,22 @@ ng test
The `ng test` command builds the application in *watch mode*,
and launches the [Karma test runner](https://karma-runner.github.io).
The console output looks a bit like this:
The console output looks the below:
<code-example format="shell" language="shell">
10% building modules 1/1 modules 0 active
&hellip;INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
&hellip;INFO [launcher]: Launching browser Chrome &hellip;
&hellip;INFO [launcher]: Starting browser Chrome
&hellip;INFO [Chrome &hellip;]: Connected on socket &hellip;
Chrome &hellip;: Executed 3 of 3 SUCCESS (0.135 secs / 0.205 secs)
02 11 2022 09:08:28.605:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
02 11 2022 09:08:28.607:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
02 11 2022 09:08:28.620:INFO [launcher]: Starting browser Chrome
02 11 2022 09:08:31.312:INFO [Chrome]: Connected on socket -LaEYvD2R7MdcS0-AAAB with id 31534482
Chrome: Executed 3 of 3 SUCCESS (0.193 secs / 0.172 secs)
TOTAL: 3 SUCCESS
</code-example>
The last line of the log is the most important.
It shows that Karma ran three tests that all passed.
The last line of the log shows that Karma ran three tests that all passed.
A Chrome browser also opens and displays the test output in the "Jasmine HTML Reporter" like this.
The test output is displayed in the browser using [Karma Jasmine HTML Reporter](https://github.com/dfederm/karma-jasmine-html-reporter).
<div class="lightbox">
@@ -65,7 +64,6 @@ A Chrome browser also opens and displays the test output in the "Jasmine HTML Re
</div>
Most people find this browser output easier to read than the console log.
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"\).
Meanwhile, the `ng test` command is watching for changes.
@@ -75,28 +73,89 @@ The tests run again, the browser refreshes, and the new test results appear.
## Configuration
The CLI takes care of Jasmine and Karma configuration for you.
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.
Fine-tune many options by editing the `karma.conf.js` in the root folder of the project and
the `test.ts` files in the `src/` folder.
If you require to fine-tune Karma, follow the below steps:
The `karma.conf.js` file is a partial Karma configuration file.
The CLI constructs the full runtime configuration in memory, based on application structure specified in the `angular.json` file, supplemented by `karma.conf.js`.
1. Create a `karma.conf.js` in the root folder of the project.
Search the web for more details about Jasmine and Karma configuration.
<code-example format="javascript" language="javascript" header="karma.conf.js">
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
jasmine: {
// you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321`
},
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
jasmineHtmlReporter: {
suppressAll: true // removes the duplicated traces
},
coverageReporter: {
dir: require('path').join(__dirname, './coverage/<project-name>'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' }
]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
</code-example>
1. In the `angular.json`, use the [`karmaConfig`](cli/test) option to configure the Karma builder to use the created configuration file.
<code-example format="jsonc" language="jsonc">
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"karmaConfig": "karma.conf.js",
"polyfills": ["zone.js", "zone.js/testing"],
"tsConfig": "src/tsconfig.spec.json",
"styles": ["src/styles.css"]
}
}
</code-example>
<div class="alert is-helpful">
Read more about Karma configuration in the [Karma configuration guide](http://karma-runner.github.io/6.4/config/configuration-file.html).
</div>
### Other test frameworks
You can also unit test an Angular application with other testing libraries and test runners.
Each library and runner has its own distinctive installation procedures, configuration, and syntax.
Search the web to learn more.
### Test file name and location
Look inside the `src/app` folder.
The CLI generated a test file for the `AppComponent` named `app.component.spec.ts`.
Inside the `src/app` folder the Angular CLI generated a test file for the `AppComponent` named `app.component.spec.ts`.
<div class="alert is-important">
@@ -162,16 +221,16 @@ This article explains how to configure your project to run Circle CI and Travis
build:
working_directory: ~/my-project
docker:
&hyphen; image: circleci/node:10-browsers
&hyphen; image: cimg/node:18.12.0-browsers
steps:
&hyphen; checkout
&hyphen; restore_cache:
key: my-project-{{ .Branch }}-{{ checksum "package-lock.json" }}
&hyphen; run: npm install
key: my-project-{{ checksum "package-lock.json"}}
&hyphen; run: npm ci
&hyphen; save_cache:
key: my-project-{{ .Branch }}-{{ checksum "package-lock.json" }}
key: my-project-{{ checksum "package-lock.json" }}
paths:
&hyphen; "node_modules"
&hyphen; $HOME/.npm
&hyphen; run: npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
</code-example>
@@ -193,7 +252,7 @@ This article explains how to configure your project to run Circle CI and Travis
language: node_js
node_js:
&hyphen; "10"
&hyphen; "18"
addons:
chrome: stable
@@ -224,7 +283,7 @@ This article explains how to configure your project to run Circle CI and Travis
<code-example format="yaml" language="yaml">
image: node:14.15-stretch
image: node:18.12-stretch
variables:
FF_USE_FASTZIP: "true"
@@ -285,10 +344,10 @@ This article explains how to configure your project to run Circle CI and Travis
runs-on: ubuntu-latest
steps:
&hyphen; uses: actions/checkout&commat;v2
&hyphen; name: Use Node.js 14.x
&hyphen; name: Use Node.js 18.x
uses: actions/setup-node&commat;v1
with:
node-version: 14.x
node-version: 18.x
&hyphen; name: Setup
run: npm ci
@@ -313,7 +372,7 @@ There is a configuration file for the [Karma JavaScript test runner](https://kar
We'll be using [Headless Chrome](https://developers.google.com/web/updates/2017/04/headless-chrome#cli) in these examples.
* In the Karma configuration file, `karma.conf.js`, add a custom launcher called ChromeHeadlessCI below browsers:
* In the Karma configuration file, `karma.conf.js`, add a custom launcher called `ChromeHeadlessCI` below browsers:
<code-example format="javascript" language="javascript">
@@ -321,7 +380,9 @@ We'll be using [Headless Chrome](https://developers.google.com/web/updates/2017/
customLaunchers: {
ChromeHeadlessCI: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
flags: [
'--no-sandbox'
]
}
},
@@ -335,13 +396,6 @@ ng test --no-watch --no-progress --browsers=ChromeHeadlessCI
</code-example>
<div class="alert is-helpful">
**NOTE**: <br />
Right now, you'll also want to include the `--disable-gpu` flag if you're running on Windows.
See [crbug.com/737678](https://crbug.com/737678).
</div>
## More information on testing
@@ -364,4 +418,4 @@ After you've set up your application for testing, you might find the following t
<!-- end links -->
@reviewed 2022-02-28
@reviewed 2022-11-02