@@ -102,7 +102,24 @@ The next chapters presents some requirements related to your unit tests (using K
To be able to launch unit tests with Angular CLI, the Angular template requires a headless browser within the Docker
image `NG_CLI_IMAGE` (it is the case with the default image, [docker-ng-cli-karma](https://github.com/trion-development/docker-ng-cli-karma)).
#### 1. Using Karma
The following chapters detail the required configuration (depending on the unit testing framework you're using) in
order to integrate your [unit tests reports](https://docs.gitlab.com/ee/ci/testing/unit_test_reports.html) and [code coverage reports](https://docs.gitlab.com/ee/ci/testing/test_coverage_visualization.html) to GitLab.
Additionally, if also using SonarQube, you'll have to enable some extra reporters.
#### Unit testing with Karma
:information_source: At least up to Angular 16, Karma was the default unit testing framework.
Here is the required configuration if you're using [Karma](https://karma-runner.github.io/) as unit testing framework.
@@ -131,6 +148,7 @@ the Angular template expects the following in your `karma.conf.js`:
```
:warning: in case of multiple angular projects in the workspace, each project shall produce its coverage report in `reports/ng-coverage-<projectName>.cobertura.xml` (it can be in sub-folders but must follow the file name pattern).
3. Additionally, if using SonarQube, you may also want to generate [LCOV report](https://docs.sonarqube.org/latest/analysis/test-coverage/javascript-typescript-test-coverage/):
```js
@@ -150,7 +168,7 @@ the Angular template expects the following in your `karma.conf.js`:
##### Unit Tests reports
In order to be able to [integrate your test reports to GitLab](https://docs.gitlab.com/ee/ci/yaml/artifacts_reports.html#artifactsreportsjunit):
In order to be able to [integrate your test reports to GitLab](https://docs.gitlab.com/ee/ci/testing/unit_test_reports.html):
1. Add the [karma-junit-reporter](https://github.com/karma-runner/karma-junit-reporter) package as dev dependency:
@@ -211,25 +229,36 @@ Additionally, if using **SonarQube**, you may also want to generate [SonarQube g
| istanbul [text](https://istanbul.js.org/docs/advanced/alternative-reporters/#text) | No | N/A _(stdout)_ | [GitLab MR test coverage results](https://docs.gitlab.com/ee/ci/testing/code_coverage.html#view-code-coverage-results-in-the-mr)_(GitLab grabs coverage from stdout)_ |
| istanbul [cobertura](https://istanbul.js.org/docs/advanced/alternative-reporters/#cobertura) | No | `reports/ng-coverage.cobertura.xml` | [GitLab code coverage integration](https://docs.gitlab.com/ee/ci/testing/test_coverage_visualization.html)_(Cobertura format)_ |
| istanbul [lcovonly](https://istanbul.js.org/docs/advanced/alternative-reporters/#lcovonly) | No | `reports/ng-coverage.lcov.info` | [SonarQube code coverage integration](https://docs.sonarqube.org/latest/analysis/test-coverage/javascript-typescript-test-coverage/)_(JS/TS LCOV format)_ |
1. Add[jest](https://www.npmjs.com/package/jest), [jest-junit](https://github.com/jest-community/jest-junit#readme), [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular), [@types/jest](https://www.npmjs.com/package/@types/jest) and [@angular-builders/jest](https://www.npmjs.com/package/@angular-builders/jest) to your project as a dev dependency:
The following packages will have to be installed to your project as a dev dependencies:[jest](https://www.npmjs.com/package/jest), [jest-junit](https://github.com/jest-community/jest-junit#readme), [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular), [@types/jest](https://www.npmjs.com/package/@types/jest) and [@angular-builders/jest](https://www.npmjs.com/package/@angular-builders/jest)
```shell
npm install jest jest-preset-angular jest-junit @types/jest @angular-builders/jest --save-dev
```
2. Create the file `jest.config.js`, and add the following lines:
Then edit your `jest.config.js` configuration file with all the above reporters configured as expected:
```js
module.exports={
preset:"jest-preset-angular",
globalSetup:"jest-preset-angular/global-setup",
reporters:[
"default",
// 'jest-junit' to enable GitLab unit test report integration
[
"jest-junit",
{
@@ -237,89 +266,27 @@ Then you have to create a dedicated jest config file, and to modify your angular
outputName:"ng-test.xunit.xml",
},
],
// [OPTIONAL] only if using SonarQube
// 'jest-sonar' to enable SonarQube unit test report integration
[
"jest-sonar",
{
outputDirectory:"reports",
outputName:"ng-test.sonar.xml",
},
],
],
preset:"jest-preset-angular",
globalSetup:"jest-preset-angular/global-setup",
};
```
3. Open the `angular.json` file. Replace the test builder with jest, and convert "inlineStyleLanguage" option to array instead string:
4. Open the `tsconfig.spec.json`file and replace the following line:
```js
"types":[
// REPLACE: "jasmine"
// With:
"jest"
]
```
##### Code Coverage reports
1. Modify the file `jest.config.js`, and add the following lines into the module.exports:
```js
coverageDirectory:"reports",
coverageReporters:[
// 'text' to let GitLab grab coverage from stdout
"text",
// 'cobertura' to enable GitLab test coverage visualization
["cobertura",{file:'ng-coverage.cobertura.xml'}],
["cobertura",{file:"ng-coverage.cobertura.xml"}],
// [OPTIONAL] only if using SonarQube
// 'lcovonly' to enable SonarQube test coverage reporting
"lcovonly",
["lcovonly",{file:"ng-coverage.lcov.info"}],
],
```
2. Open the `angular.json` file and add the following line to the test options:
```js
"ci":true,
"coverage":true,
```
3. Finally, override the NG_TEST_ARGS from your `gitlab-ci.yml` variables:
```yaml
NG_TEST_ARGS:test --coverage
```
Additionally, if using **SonarQube**, you may also want to generate [SonarQube generic test report](https://docs.sonarqube.org/latest/analysis/generic-test/):
1. Add [jest-sonar-reporter](https://www.npmjs.com/package/jest-sonar-reporter) to your project as a dev dependency:
```shell
npm install--save-dev jest-sonar-reporter
```
2. In your `jest.config.js`, add this config line to the exports:
```js
testResultsProcessor:"jest-sonar-reporter",
```
3. In your `jest.config.js`, add a jestSonar section to configure the name of the jest report.
```js
"devDependencies":{
...
},
"jestSonar":{
"reportPath":"reports",
"reportFile":"ng-test.sonar.xml"
}
};
```
### `ng-e2e` job
@@ -461,12 +428,10 @@ sonar.tests=app
sonar.test.inclusions=**/*.spec.ts
# tests report: generic format
# set the path configured with karma-sonarqube-execution-reporter
