mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
a6d953e145
This commit prepares the documentation directories for future tutorials organized by directory. Also, it moves the Angular Libraries topic from the Tutorials section to Developer Guides in TOC PR Close #48162
238 lines
9.1 KiB
Markdown
238 lines
9.1 KiB
Markdown
<a id="top"></a>
|
|
|
|
{@searchKeywords test testing karma jasmine coverage}
|
|
|
|
# Testing
|
|
|
|
Testing your Angular application helps you check that your application is working as you expect.
|
|
|
|
## Prerequisites
|
|
|
|
Before writing tests for your Angular application, you should have a basic understanding of the following concepts:
|
|
|
|
* [Angular fundamentals](guide/architecture)
|
|
* [JavaScript](https://javascript.info/)
|
|
* HTML
|
|
* CSS
|
|
* [Angular CLI](cli)
|
|
|
|
The testing documentation offers tips and techniques for unit and integration testing Angular applications through a sample application created with the [Angular CLI](cli).
|
|
This sample application is much like the one in the [*Tour of Heroes* tutorial](tutorial/tour-of-heroes).
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
If you'd like to experiment with the application that this guide describes, <live-example name="testing" noDownload>run it in your browser</live-example> or <live-example name="testing" downloadOnly>download and run it locally</live-example>.
|
|
|
|
</div>
|
|
|
|
<a id="setup"></a>
|
|
|
|
## Set up testing
|
|
|
|
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:
|
|
|
|
<code-example format="shell" language="shell">
|
|
|
|
ng test
|
|
|
|
</code-example>
|
|
|
|
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 the below:
|
|
|
|
<code-example format="shell" language="shell">
|
|
|
|
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 shows that Karma ran three tests that all passed.
|
|
|
|
The test output is displayed in the browser using [Karma Jasmine HTML Reporter](https://github.com/dfederm/karma-jasmine-html-reporter).
|
|
|
|
<div class="lightbox">
|
|
|
|
<img alt="Jasmine HTML Reporter in the browser" src="generated/images/guide/testing/initial-jasmine-html-reporter.png">
|
|
|
|
</div>
|
|
|
|
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.
|
|
|
|
To see this in action, make a small change to `app.component.ts` and save.
|
|
The tests run again, the browser refreshes, and the new test results appear.
|
|
|
|
## Configuration
|
|
|
|
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.
|
|
|
|
If you require to fine-tune Karma, follow the below steps:
|
|
|
|
1. Create a `karma.conf.js` in the root folder of the project.
|
|
|
|
<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.
|
|
|
|
### Test file name and location
|
|
|
|
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">
|
|
|
|
The test file extension **must be `.spec.ts`** so that tooling can identify it as a file with tests \(also known as a *spec* file\).
|
|
|
|
</div>
|
|
|
|
The `app.component.ts` and `app.component.spec.ts` files are siblings in the same folder.
|
|
The root file names \(`app.component`\) are the same for both files.
|
|
|
|
Adopt these two conventions in your own projects for *every kind* of test file.
|
|
|
|
<a id="q-spec-file-location"></a>
|
|
|
|
#### Place your spec file next to the file it tests
|
|
|
|
It's a good idea to put unit test spec files in the same folder
|
|
as the application source code files that they test:
|
|
|
|
* Such tests are painless to find
|
|
* You see at a glance if a part of your application lacks tests
|
|
* Nearby tests can reveal how a part works in context
|
|
* When you move the source \(inevitable\), you remember to move the test
|
|
* When you rename the source file \(inevitable\), you remember to rename the test file
|
|
|
|
<a id="q-specs-in-test-folder"></a>
|
|
|
|
#### Place your spec files in a test folder
|
|
|
|
Application integration specs can test the interactions of multiple parts
|
|
spread across folders and modules.
|
|
They don't really belong to any part in particular, so they don't have a
|
|
natural home next to any one file.
|
|
|
|
It's often better to create an appropriate folder for them in the `tests` directory.
|
|
|
|
Of course specs that test the test helpers belong in the `test` folder,
|
|
next to their corresponding helper files.
|
|
|
|
<a id="ci"></a>
|
|
|
|
## Testing in continuous integration
|
|
|
|
One of the best ways to keep your project bug-free is through a test suite, but you might forget to run tests all the time.
|
|
|
|
Continuous integration \(CI\) servers let you set up your project repository so that your tests run on every commit and pull request.
|
|
|
|
To test your Angular CLI application in Continuous integration \(CI\) run the following command:
|
|
|
|
<code-example format="shell" language="shell">
|
|
|
|
ng test --no-watch --no-progress
|
|
|
|
</code-example>
|
|
|
|
|
|
## More information on testing
|
|
|
|
After you've set up your application for testing, you might find the following testing guides useful.
|
|
|
|
| | Details |
|
|
|:--- |:--- |
|
|
| [Code coverage](guide/testing-code-coverage) | How much of your app your tests are covering and how to specify required amounts. |
|
|
| [Testing services](guide/testing-services) | How to test the services your application uses. |
|
|
| [Basics of testing components](guide/testing-components-basics) | Basics of testing Angular components. |
|
|
| [Component testing scenarios](guide/testing-components-scenarios) | Various kinds of component testing scenarios and use cases. |
|
|
| [Testing attribute directives](guide/testing-attribute-directives) | How to test your attribute directives. |
|
|
| [Testing pipes](guide/testing-pipes) | How to test pipes. |
|
|
| [Debugging tests](guide/test-debugging) | Common testing bugs. |
|
|
| [Testing utility APIs](guide/testing-utility-apis) | Angular testing features. |
|
|
|
|
<!-- links -->
|
|
|
|
<!-- external links -->
|
|
|
|
<!-- end links -->
|
|
|
|
@reviewed 2022-11-02
|