Merge branch 'feature/cobertura-support' into 'master'

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)).

#### Code Coverage

#### Code Coverage reports

In order to be able to compute and enable [GitLab code coverage integration](https://docs.gitlab.com/ee/user/project/merge_requests/test_coverage_visualization.html),

the Angular template expects the following in your `karma.conf.js` (this is done by default if your project was generated with [`ng new`](https://angular.io/cli/new) command).

Add the [karma-coverage](https://www.npmjs.com/package/karma-coverage) package:

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'),

  ```

Add the config section:

2. Configure the 2 reporters withing this config section:

  ```js

  // [to be continuous]: karma-coverage configuration (needs 'text-summary' to let GitLab grab coverage from stdout)

    coverageReporter: {

      dir: 'reports',

      subdir: '.',

    file: 'ng-coverage.lcov.info',

    reporters: [{ type: "lcovonly" }, { type: "text-summary" }],

      reporters: [

        // 'text-summary' to let GitLab grab coverage from stdout

        {type: "text-summary"},

        // 'cobertura' to enable GitLab test coverage visualization

        {type: 'cobertura', file: 'ng-coverage.cobertura.xml'}

      ],

    },

  ```

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',

      subdir: '.',

      reporters: [

        // 'text-summary' to let GitLab grab coverage from stdout

        {type: "text-summary"},

        // 'cobertura' to enable GitLab test coverage visualization

        {type: 'cobertura', file: 'ng-coverage.cobertura.xml'},

        // 'lcovonly' to enable SonarQube test coverage reporting

        {type: 'lcovonly', file: 'ng-coverage.lcov.info'}

      ],

    },

  ```

#### JUnit report

In order to be able to [integrate your test reports to GitLab](https://docs.gitlab.com/ee/ci/yaml/artifacts_reports.html#artifactsreportsjunit),

the Angular template expects the following in your `karma.conf.js`.

#### Unit Tests reports

Add the [karma-junit-reporter](https://github.com/karma-runner/karma-junit-reporter) package as dev dependency:

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

  ```

In your `karma.conf.js`, add the plugin:

2. In your `karma.conf.js`, add the plugin:

  ```js

    // 'karma-junit-reporter' to enable GitLab unit test report integration

    require('karma-junit-reporter'),

  ```

Add the config section:

3. Add the config section:

  ```js

  // [to be continuous]: karma-junit-reporter configuration (report needs to be in 'reports/ng-test.xunit.xml')

    // 'karma-junit-reporter' to enable GitLab unit test report integration

    junitReporter: {

      outputDir: 'reports',

      outputFile: 'ng-test.xunit.xml',

    }

  ```

#### SonarQube report

If you're using SonarQube and if you want to generate a test report [compatible with SonarQube](https://docs.sonarqube.org/latest/analysis/generic-test/),

the Angular template expects the following.

By default Angular CLI do not allow to generate test report compatible with Sonar to do so, you need to add [karma-sonarqube-execution-reporter](https://github.com/lisrec/karma-sonarqube-execution-reporter) to your project as a dev dependency:

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:

  ```shell

  npm install --save-dev karma-sonarqube-execution-reporter

  ```

In your `karma.conf.js`, add the plugin:

2. In your `karma.conf.js`, add the plugin:

  ```js

    // 'karma-sonarqube-execution-reporter' to enable SonarQube unit test report integration

    require('karma-sonarqube-execution-reporter')

  ```

Add the config section:

3. Add the config section:

  ```js

  // [to be continuous]: karma-sonarqube-execution-reporter configuration (report needs to be in 'reports/ng-test.sonar.xml')

    // 'karma-sonarqube-execution-reporter' to enable SonarQube unit test report integration

    sonarQubeExecutionReporter: {

      outputDir: 'reports',

      outputFile: 'ng-test.sonar.xml',

      ...

    }

  ```

Finally add the `sonarqubeUnit` reporter in the reporters parameter of the `NG_TEST_ARGS` variable :

4. Finally add the `sonarqubeUnit` reporter in the reporters parameter of the `NG_TEST_ARGS` variable :

  ```yaml

  NG_TEST_ARGS:  test --reporters junit,sonarqubeUnit`

  ```

  coverage: '/^Statements\s*:\s*([^%]+)/'

  artifacts:

    reports:

      coverage_report:

        coverage_format: cobertura

        path: "$NG_WORKSPACE_DIR/reports/ng-coverage.cobertura.xml"

      junit:

        - "$NG_WORKSPACE_DIR/reports/ng-test.xunit.xml"

    when: always # save artifact even if test failed

    name: "$CI_JOB_NAME artifacts from $CI_PROJECT_NAME on $CI_COMMIT_REF_SLUG"

    paths:

      - $NG_WORKSPACE_DIR/dist

      - $NG_WORKSPACE_DIR/reports/ng-*"

      - $NG_WORKSPACE_DIR/reports/ng-test-*"

      - $NG_WORKSPACE_DIR/reports/ng-coverage-*"

    expire_in: 1 day

###############################################################################################