From 062e17b65d5bf87c67ab386f3e56d81b4e09e619 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Wed, 2 Nov 2022 10:18:07 +0000 Subject: [PATCH] docs: update testing document to include karma config (#47940) 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 --- aio/content/guide/testing.md | 146 ++++++++++++++++++++++++----------- 1 file changed, 100 insertions(+), 46 deletions(-) diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md index 8766e9702ec..eea8ad79182 100644 --- a/aio/content/guide/testing.md +++ b/aio/content/guide/testing.md @@ -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, -10% building modules 1/1 modules 0 active -…INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/ -…INFO [launcher]: Launching browser Chrome … -…INFO [launcher]: Starting browser Chrome -…INFO [Chrome …]: Connected on socket … -Chrome …: 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 -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).
@@ -65,7 +64,6 @@ A Chrome browser also opens and displays the test output in the "Jasmine HTML Re
-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. + + + 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/'), + 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 + }); + }; + + + +1. In the `angular.json`, use the [`karmaConfig`](cli/test) option to configure the Karma builder to use the created configuration file. + + + + "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"] + } + } + + + + +
+ +Read more about Karma configuration in the [Karma configuration guide](http://karma-runner.github.io/6.4/config/configuration-file.html). + +
### 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`.
@@ -162,16 +221,16 @@ This article explains how to configure your project to run Circle CI and Travis build: working_directory: ~/my-project docker: - ‐ image: circleci/node:10-browsers + ‐ image: cimg/node:18.12.0-browsers steps: ‐ checkout ‐ restore_cache: - key: my-project-{{ .Branch }}-{{ checksum "package-lock.json" }} - ‐ run: npm install + key: my-project-{{ checksum "package-lock.json"}} + ‐ run: npm ci ‐ save_cache: - key: my-project-{{ .Branch }}-{{ checksum "package-lock.json" }} + key: my-project-{{ checksum "package-lock.json" }} paths: - ‐ "node_modules" + ‐ $HOME/.npm ‐ run: npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI @@ -193,7 +252,7 @@ This article explains how to configure your project to run Circle CI and Travis language: node_js node_js: - ‐ "10" + ‐ "18" addons: chrome: stable @@ -224,7 +283,7 @@ This article explains how to configure your project to run Circle CI and Travis - 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: ‐ uses: actions/checkout@v2 - ‐ name: Use Node.js 14.x + ‐ name: Use Node.js 18.x uses: actions/setup-node@v1 with: - node-version: 14.x + node-version: 18.x ‐ 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: @@ -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 -
- -**NOTE**:
-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). - -
## More information on testing @@ -364,4 +418,4 @@ After you've set up your application for testing, you might find the following t -@reviewed 2022-02-28 +@reviewed 2022-11-02