| `cli-image` / `NG_CLI_IMAGE` | The Docker image used to run Angular-CLI (ng) <br/>:warning: **set the version required by your project** | `registry.hub.docker.com/trion/ng-cli-karma:latest` |
| `npm-config-scoped-registries` / `NPM_CONFIG_SCOPED_REGISTRIES` | Space separated list of NPM [scoped registries](https://docs.npmjs.com/cli/v8/using-npm/scope#associating-a-scope-with-a-registry)(formatted as `@somescope:https://some.npm.registry/some/repo @anotherscope:https://another.npm.registry/another/repo`) | _none_ |
@@ -56,8 +56,8 @@ The value is expected as a (whitespace-separated) list of `@registry_scope:regis
The Angular template also supports authentication for each, simply by defining the appropriate variable (as project or group secret variables)
:warning: The `<SCOPE>` part is the `registry_scope` transformed in [SCREAMING_SNAKE_CASE](https://en.wikipedia.org/wiki/Snake_case)(uppercase words separated by underscores).
@@ -78,7 +78,7 @@ The Angular template features a job `ng-lint` that performs Angular source code
It is bound to the `build` stage, and uses the following variable:
| Input / Variable | Description | Default value |
@@ -103,16 +103,20 @@ To be able to launch unit tests with Angular CLI, the Angular template requires
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
##### Code Coverage reports
In order to be able to compute and enable [GitLab code coverage integration](https://docs.gitlab.com/ee/ci/testing/test_coverage_visualization.html),
the Angular template expects the following in your `karma.conf.js`:
1. Add the [karma-coverage](https://www.npmjs.com/package/karma-coverage) package:
```js
require('karma-coverage'),
```
2. Configure the 2 reporters withing this config section:
```js
coverageReporter:{
dir:'reports',
@@ -125,8 +129,10 @@ 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
coverageReporter:{
dir:'reports',
@@ -147,15 +153,20 @@ the Angular template expects the following in your `karma.conf.js`:
In order to be able to [integrate your test reports to GitLab](https://docs.gitlab.com/ee/ci/yaml/artifacts_reports.html#artifactsreportsjunit):
1. Add the [karma-junit-reporter](https://github.com/karma-runner/karma-junit-reporter) package as dev dependency:
```shell
npm install--save-dev karma-junit-reporter
```
2. In your `karma.conf.js`, add the plugin:
```js
// 'karma-junit-reporter' to enable GitLab unit test report integration
require('karma-junit-reporter'),
```
3. Add the config section:
```js
// 'karma-junit-reporter' to enable GitLab unit test report integration
junitReporter:{
@@ -165,21 +176,26 @@ In order to be able to [integrate your test reports to GitLab](https://docs.gitl
...
}
```
:warning: in case of multiple Angular projects in the workspace, each project shall produce its JUnit report either in `reports/ng-test-<projectName>.xunit.xml` or `reports/<projectName>/ng-test.xunit.xml`.
:warning: in case of multiple Angular projects in the workspace, each project shall produce its JUnit report either in `reports/ng-test-<projectName>.xunit.xml` or `reports/<projectName>/ng-test.xunit.xml`.
Additionally, if using **SonarQube**, you may also want to generate [SonarQube generic test report](https://docs.sonarqube.org/latest/analysis/generic-test/):
1. Add [karma-sonarqube-execution-reporter](https://github.com/lisrec/karma-sonarqube-execution-reporter) to your project as a dev dependency:
@@ -201,25 +219,32 @@ To be able to use Jest instead Karma, you first have to install some jest packag
Then you have to create a dedicated jest config file, and to modify your angular.json and tsconfig.spec.json files to set Jest as test builder.
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:
```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:
```js
module.exports={
reporters:[
'default',
["jest-junit",
"default",
[
"jest-junit",
{
outputDirectory:"reports",
outputName:"ng-test.xunit.xml"
}],
outputName:"ng-test.xunit.xml",
},
],
],
preset:'jest-preset-angular',
globalSetup:'jest-preset-angular/global-setup',
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:
@@ -230,7 +255,9 @@ Then you have to create a dedicated jest config file, and to modify your angular
// With:
"inlineStyleLanguage":["scss"],
```
4. Open the `tsconfig.spec.json`file and replace the following line:
```js
"types":[
// REPLACE: "jasmine"
@@ -242,6 +269,7 @@ Then you have to create a dedicated jest config file, and to modify your angular
##### Code Coverage reports
1. Modify the file `jest.config.js`, and add the following lines into the module.exports:
```js
coverageDirectory:"reports",
coverageReporters:[
@@ -254,12 +282,16 @@ Then you have to create a dedicated jest config file, and to modify your angular
"lcovonly",
],
```
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
```
@@ -267,14 +299,19 @@ Then you have to create a dedicated jest config file, and to modify your angular
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":{
...
@@ -291,9 +328,9 @@ The Angular template features a job `ng-e2e` that performs **protractor tests**
This stage is bound to the `test` stage and uses the following variables :
| Input / Variable | Description | Default value |
| `$NG_WORKSPACE_DIR/reports/ng-audit.native.json` | [JSON](https://docs.npmjs.com/cli/v9/commands/npm-audit#json) | [DefectDojo integration](https://documentation.defectdojo.com/integrations/parsers/#npm-audit)<br/> _This report is generated only if DefectDojo template is detected, if needed, you can force it with `$DEFECTDOJO_NPMAUDIT_REPORTS`_ |
@@ -378,8 +415,8 @@ It uses the following variables:
:warning: When using the gitlab registry (which is the default behavior), your NPM package name must be in the format of `@scope/package-name`:
* The `@scope` is the root namespace of the GitLab project. It must match exactly, including the case.
* The `package-name` can be whatever you want.
- The `@scope` is the root namespace of the GitLab project. It must match exactly, including the case.
- The `package-name` can be whatever you want.
For example, if your project is `https://gitlab.example.com/my-org/engineering-group/team-amazing/analytics`, the root namespace is `my-org`. When you publish a package, it must have `my-org` as the scope.
For more details see [Package naming convention](https://docs.gitlab.com/ee/user/packages/npm_registry/#package-naming-convention).
@@ -405,8 +442,8 @@ For more details see [Package naming convention](https://docs.gitlab.com/ee/user
:information_source: When using the GitLab registry, the registry publication url looks like `https://<gitlab-host>/api/v4/projects/<your_project_id>/packages/npm/`, with:
*`<gitlab-host>` is your GitLab host domain name.
*`<your_project_id>` is your project ID, **found on the project’s home page**.
-`<gitlab-host>` is your GitLab host domain name.
-`<your_project_id>` is your project ID, **found on the project’s home page**.
