Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • to-be-continuous/angular
1 result
Show changes
Commits on Source (40)
......@@ -9,10 +9,10 @@ include:
ref: 'master'
file: '/templates/validation.yml'
- project: 'to-be-continuous/bash'
ref: '3.1.0'
ref: '3.2'
file: '/templates/gitlab-ci-bash.yml'
- project: 'to-be-continuous/semantic-release'
ref: '3.2.0'
ref: '3.4'
file: '/templates/gitlab-ci-semrel.yml'
stages:
......
# [4.5.0](https://gitlab.com/to-be-continuous/angular/compare/4.4.0...4.5.0) (2023-05-28)
### Features
* **publish:** auto publish on release tag ([304ee1b](https://gitlab.com/to-be-continuous/angular/commit/304ee1b4d3a10d5cb0990a96c50ae2934e99c0ac))
# [4.4.0](https://gitlab.com/to-be-continuous/angular/compare/4.3.2...4.4.0) (2023-05-27)
### Features
* **workflow:** extend (skip ci) feature ([fbaad0c](https://gitlab.com/to-be-continuous/angular/commit/fbaad0cebf4cab7d674d3c2f2e6c4f59c15c187b))
## [4.3.2](https://gitlab.com/to-be-continuous/angular/compare/4.3.1...4.3.2) (2023-03-28)
### Bug Fixes
* **sbom:** add CycloneDX report ([25ee763](https://gitlab.com/to-be-continuous/angular/commit/25ee763452c26587c280f42db376db5a183d0f52))
## [4.3.1](https://gitlab.com/to-be-continuous/angular/compare/4.3.0...4.3.1) (2023-03-26)
### Bug Fixes
* **doc:** Update NG_TEST_ARGS documentation ([bf65061](https://gitlab.com/to-be-continuous/angular/commit/bf65061a4e1d781da3f327c05fad8db3152a54ee))
# [4.3.0](https://gitlab.com/to-be-continuous/angular/compare/4.2.3...4.3.0) (2023-02-28)
### Features
* add support for NPM scoped registries authentication ([7e4ca31](https://gitlab.com/to-be-continuous/angular/commit/7e4ca313e24c93c3296038a87b9be137ec4c6dee))
## [4.2.3](https://gitlab.com/to-be-continuous/angular/compare/4.2.2...4.2.3) (2023-02-19)
### Bug Fixes
* **test:** place test CLI options in the configurable variable to give the possibility of using Jest instead Karma ([db6665d](https://gitlab.com/to-be-continuous/angular/commit/db6665d47171fee763ab31b3d96c7265fe1970c5))
## [4.2.2](https://gitlab.com/to-be-continuous/angular/compare/4.2.1...4.2.2) (2023-01-27)
......
......@@ -5,6 +5,8 @@ We try to make it easy, and all contributions, even the smaller ones, are more t
This includes bug reports, fixes, documentation, examples...
But first, read this page (including the small print at the end).
Contributions are available on https://gitlab.com/to-be-continuous/angular
## Legal
All original contributions to _to be continuous_ are licensed under the
......
# GitLab CI template for Angular
This project implements a GitLab CI/CD template to build, test and analyse your
[Angular](https://angular.io/) projects.
This project implements a GitLab CI/CD template to build, test and analyse your [Angular](https://angular.io/) projects.
## Usage
......@@ -10,7 +9,7 @@ In order to include this template in your project, add the following to your `gi
```yaml
include:
- project: 'to-be-continuous/angular'
ref: '4.2.2'
ref: '4.5.0'
file: '/templates/gitlab-ci-angular.yml'
```
......@@ -26,6 +25,23 @@ The Angular template uses some global configuration used throughout all jobs.
| `NG_WORKSPACE_DIR` | Angular workspace directory | `.` |
| `NG_INSTALL_EXTRA_OPTS`| Extra options to install project dependencies (with [`npm ci`](https://docs.npmjs.com/cli/ci.html/)) | _none_ |
### Configuring scoped registries
You may configure [scoped registries](https://docs.npmjs.com/cli/v8/using-npm/scope#associating-a-scope-with-a-registry) with the `$NPM_CONFIG_SCOPED_REGISTRIES` variable.
The value is expected as a (whitespace-separated) list of `@registry_scope:registry_url`.
The Angular template also supports authentication tokens for each, simply by defining `NPM_REGISTRY_<SCOPE>_AUTH` (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).
Example: declare the GitLab chart repository from another GitLab project
```yml
variables:
NPM_CONFIG_SCOPED_REGISTRIES: "@public-repo:https://public.npm.registry/some/repo @priv-repo:https://private.npm.registry/another/repo"
# NPM_REGISTRY_PRIV_REPO_AUTH set as a project secret variables
```
## Jobs
### `ng-lint` job
......@@ -49,7 +65,7 @@ Those stage are bound to the `build` stage, and uses the following variable:
| Name | description | default value |
|-----------------|------------------------------------------------------------|---------------------------------------------------|
| `NG_TEST_ARGS` | Angular [ng test](https://angular.io/cli/test) arguments | `test --code-coverage --reporters progress,junit` |
| `NG_TEST_ARGS` | Angular [ng test](https://angular.io/cli/test) arguments | `test --code-coverage --reporters progress,junit --watch=false --no-progress` |
| `NG_BUILD_ARGS` | Angular [ng build](https://angular.io/cli/build) arguments | `build` |
The next chapters presents some requirements related to your unit tests (using Karma).
......@@ -59,17 +75,18 @@ 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)).
#### Code Coverage reports
#### 1. Using Karma
##### 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`:
1. Add the [karma-coverage](https://www.npmjs.com/package/karma-coverage) package:
```js
```js
require('karma-coverage'),
```
```
2. Configure the 2 reporters withing this config section:
```js
```js
coverageReporter: {
dir: 'reports',
subdir: '.',
......@@ -80,11 +97,10 @@ the Angular template expects the following in your `karma.conf.js`:
{type: 'cobertura', file: 'ng-coverage.cobertura.xml'}
],
},
```
: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).
```
: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
```js
coverageReporter: {
dir: 'reports',
subdir: '.',
......@@ -97,23 +113,23 @@ the Angular template expects the following in your `karma.conf.js`:
{type: 'lcovonly', file: 'ng-coverage.lcov.info'}
],
},
```
```
#### Unit Tests reports
##### 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):
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
```
```shell
npm install --save-dev karma-junit-reporter
```
2. In your `karma.conf.js`, add the plugin:
```js
```js
// 'karma-junit-reporter' to enable GitLab unit test report integration
require('karma-junit-reporter'),
```
```
3. Add the config section:
```js
```js
// 'karma-junit-reporter' to enable GitLab unit test report integration
junitReporter: {
outputDir: 'reports',
......@@ -121,34 +137,126 @@ In order to be able to [integrate your test reports to GitLab](https://docs.gitl
useBrowserName: false,
...
}
```
: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:
```shell
npm install --save-dev karma-sonarqube-execution-reporter
```
```shell
npm install --save-dev karma-sonarqube-execution-reporter
```
2. In your `karma.conf.js`, add the plugin:
```js
```js
// 'karma-sonarqube-execution-reporter' to enable SonarQube unit test report integration
require('karma-sonarqube-execution-reporter')
```
```
3. Add the config section:
```js
```js
// 'karma-sonarqube-execution-reporter' to enable SonarQube unit test report integration
sonarQubeExecutionReporter: {
outputDir: 'reports',
outputFile: 'ng-test.sonar.xml',
...
}
```
```
4. Finally add the `sonarqubeUnit` reporter in the reporters parameter of the `NG_TEST_ARGS` variable :
```yaml
NG_TEST_ARGS: test --reporters junit,sonarqubeUnit`
```
```yaml
NG_TEST_ARGS: test --reporters junit,sonarqubeUnit`
```
#### 2. Using Jest
##### Unit Tests reports
To be able to use Jest instead Karma, you first have to install some jest packages.
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",
{
outputDirectory: "reports",
outputName: "ng-test.xunit.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:
```js
"test": {
// REPLACE: "builder": "@angular-devkit/build-angular:karma",
// With:
"builder": "@angular-builders/jest:run",
...
// REPLACE: "inlineStyleLanguage": "scss",
// With:
"inlineStyleLanguage": ["scss"],
```
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'}],
// [OPTIONAL] only if using SonarQube
// 'lcovonly' to enable SonarQube test coverage reporting
"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
```
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
......@@ -194,17 +302,20 @@ It is bound to the `test` stage, and uses the following variables:
### `ng-publish` job
The Angular template features a `ng-publish` job to publish the built project.
This job [publishes](https://docs.npmjs.com/cli/v6/commands/npm-publish) the project packages to a npm registry.
This job is bound to the `publish` stage and is disabled by default.
When enabled, it is executed on a Git tag with a semantic version pattern (`v?[0-9]+\.[0-9]+\.[0-9]+`, _configurable_).
This job is bound to the `publish` stage, and uses the following variable:
It uses the following variables:
| Name | description | default value |
|----------------------------|-----------------------------------------------------------------------------|------------------------------------------------------------------|
| `NG_PUBLISH_ENABLED` | Set variable to `true` to enable the publish job | none (disabled) |
| `NG_PUBLISH_PROJECTS` | Space separated list of projects to publish | If no project is specified, all workspace projects are published |
| `NG_PUBLISH_ARGS` | NPM [publish](https://docs.npmjs.com/cli/v6/commands/npm-publish) arguments | `--verbose` |
| `NPM_PUBLISH_REGISTRY` | NPM registry to publish to | uses GitLab project npm packages registry | |
| :lock: `NPM_PUBLISH_TOKEN` | NPM publication registry authentication token | none |
| `NG_PUBLISH_ENABLED` | Set variable to `true` to enable the publish job | _none_ (disabled) |
| `NG_PUBLISH_PROJECTS` | Space separated list of projects to publish | _none_ (all workspace projects are published) |
| `NG_PUBLISH_ARGS` | NPM [publish](https://docs.npmjs.com/cli/v6/commands/npm-publish) arguments | _none_ |
| `NPM_PUBLISH_REGISTRY` | npm registry to publish to | uses GitLab project npm packages registry | _none_ |
| :lock: `NPM_PUBLISH_TOKEN` | NPM publication registry authentication token | _none_ |
:warning: When using the gitlab registry (which is the default behavior), your NPM package name must be in the format of `@scope/package-name`:
......
# Security Policy
## Supported Versions
Security fixes and updates are only applied to the latest released version. So always try to be up to date.
## Reporting a Vulnerability
In order to minimize risks of attack while investigating and fixing the issue, any vulnerability shall be reported by
opening a [**confidential** issue on gitlab.com](https://gitlab.com/to-be-continuous/angular/-/issues/new?issue[confidential]=true&issue[description]=%28type+in+the+vulnerability+details+here%29%0A%0A%2Flabel%20~%22kind%3A%3Avulnerability%22).
Follow-up and fixing will be made on a _best effort_ basis.
If you have doubts about a potential vulnerability, please reach out one of the maintainers on Discord.
files:
template: ./templates/gitlab-ci-angular.yml
documentation: ./README.md
changelog: ./CHANGELOG.md
data:
description: "Build, test and analyse your Angular projects"
public: true
labels:
- to be continuous
- Npm
- Build
license: LGPL v3
deprecated: false
\ No newline at end of file
......@@ -40,7 +40,7 @@
{
"name": "NG_TEST_ARGS",
"description": "Angular [ng test](https://angular.io/cli/test) arguments",
"default": "test --code-coverage --reporters progress,junit",
"default": "test --code-coverage --reporters progress,junit --watch=false --no-progress",
"advanced": true
}
],
......@@ -62,13 +62,12 @@
{
"id": "publish",
"name": "Publish",
"description": "NPM [publish](https://docs.npmjs.com/cli/v6/commands/npm-publish) your angular project",
"description": "[publishes](https://docs.npmjs.com/cli/v6/commands/npm-publish) the project packages to a npm registry",
"enable_with": "NG_PUBLISH_ENABLED",
"variables": [
{
"name": "NG_PUBLISH_ARGS",
"description": "npm [publish](https://docs.npmjs.com/cli/v6/commands/npm-publish) arguments",
"default": "--verbose",
"advanced": true
},
{
......@@ -78,7 +77,7 @@
},
{
"name": "NPM_PUBLISH_REGISTRY",
"description": "NPM registry to publish to. If none is specified, uses GitLab project npm packages registry",
"description": "npm registry to publish to. If none is specified, uses GitLab project npm packages registry",
"secret": true
},
{
......
......@@ -3,5 +3,13 @@
"extends": [
"config:base",
":disableDependencyDashboard"
],
"packageRules": [
{
"matchDatasources": [
"gitlab-tags"
],
"versioning": "docker"
}
]
}
......@@ -19,6 +19,20 @@ workflow:
# prevent branch pipeline when an MR is open (prefer MR pipeline)
- if: '$CI_COMMIT_BRANCH && $CI_OPEN_MERGE_REQUESTS'
when: never
- if: '$CI_COMMIT_MESSAGE =~ "/\[(ci skip|skip ci) on ([^],]*,)*tag(,[^],]*)*\]/" && $CI_COMMIT_TAG'
when: never
- if: '$CI_COMMIT_MESSAGE =~ "/\[(ci skip|skip ci) on ([^],]*,)*branch(,[^],]*)*\]/" && $CI_COMMIT_BRANCH'
when: never
- if: '$CI_COMMIT_MESSAGE =~ "/\[(ci skip|skip ci) on ([^],]*,)*mr(,[^],]*)*\]/" && $CI_MERGE_REQUEST_ID'
when: never
- if: '$CI_COMMIT_MESSAGE =~ "/\[(ci skip|skip ci) on ([^],]*,)*default(,[^],]*)*\]/" && $CI_COMMIT_REF_NAME =~ $CI_DEFAULT_BRANCH'
when: never
- if: '$CI_COMMIT_MESSAGE =~ "/\[(ci skip|skip ci) on ([^],]*,)*prod(,[^],]*)*\]/" && $CI_COMMIT_REF_NAME =~ $PROD_REF'
when: never
- if: '$CI_COMMIT_MESSAGE =~ "/\[(ci skip|skip ci) on ([^],]*,)*integ(,[^],]*)*\]/" && $CI_COMMIT_REF_NAME =~ $INTEG_REF'
when: never
- if: '$CI_COMMIT_MESSAGE =~ "/\[(ci skip|skip ci) on ([^],]*,)*dev(,[^],]*)*\]/" && $CI_COMMIT_REF_NAME !~ $PROD_REF && $CI_COMMIT_REF_NAME !~ $INTEG_REF'
when: never
- when: always
# test job prototype: implement adaptive pipeline rules
......@@ -58,6 +72,8 @@ variables:
test
--code-coverage
--reporters progress,junit
--watch=false
--no-progress
NG_E2E_ARGS: >-
e2e
......@@ -71,6 +87,8 @@ variables:
PROD_REF: '/^(master|main)$/'
# default integration ref name (pattern)
INTEG_REF: '/^develop$/'
# default release tag name (pattern)
RELEASE_REF: '/^v?[0-9]+\.[0-9]+\.[0-9]+$/'
# ==================================================
# Variables for publication
......@@ -84,7 +102,6 @@ variables:
# Set some args of `npm publish` command
# ex: NG_PUBLISH_ARGS: "--dry-run"
NG_PUBLISH_ARGS: '--verbose'
# ==================================================
# Stages definition
......@@ -298,7 +315,7 @@ stages:
function run_tests() {
# shellcheck disable=SC2086
ng $NG_TEST_ARGS --watch=false --no-progress
ng $NG_TEST_ARGS
}
function merge_coverage() {
......@@ -344,7 +361,6 @@ stages:
npm config set "@${CI_PROJECT_ROOT_NAMESPACE}:registry" "https://${CI_SERVER_HOST}/api/v4/packages/npm/"
npm config set "//${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken" "${CI_JOB_TOKEN}"
fi
}
function npm_publish() {
......@@ -410,9 +426,8 @@ stages:
fi
log_info "Publishing project '${project}' from ${projectOutputDir}"
npm publish "${projectOutputDir}" "${NG_PUBLISH_ARGS}"
npm publish ${TRACE+--verbose} "${projectOutputDir}" "${NG_PUBLISH_ARGS}"
done
}
unscope_variables
......@@ -426,7 +441,7 @@ stages:
image: $NG_CLI_IMAGE
services:
- name: "$TBC_TRACKING_IMAGE"
command: ["--service", "angular", "4.2.2"]
command: ["--service", "angular", "4.5.0"]
# cache configuration
cache:
key: "$CI_COMMIT_REF_SLUG-angular"
......@@ -443,7 +458,16 @@ stages:
then
for scoped_registry in $NPM_CONFIG_SCOPED_REGISTRIES
do
npm config set "${scoped_registry%%:*}":registry "${scoped_registry#*:}";
reg_scope=${scoped_registry%%:*}
reg_url=${scoped_registry#*:}
npm config set "${reg_scope}:registry" "${reg_url}"
reg_scope_ssc=$(echo "$reg_scope" | tr '[:lower:]' '[:upper:]' | tr -d '@' | tr '[:punct:]' '_')
reg_auth=$(eval echo "\$NPM_REGISTRY_${reg_scope_ssc}_AUTH")
if [[ "${reg_auth}" ]]
then
reg_url_no_proto=${reg_url#*:}
npm config set "${reg_url_no_proto}:_authToken" "${reg_auth}"
fi
done
fi
- configure_gitlab_instance_level_npm_registry_auth
......@@ -533,17 +557,20 @@ ng-sbom:
- mkdir -p -m 777 reports
- npx -y @cyclonedx/cyclonedx-npm${NG_SBOM_VERSION:+@$NG_SBOM_VERSION} --output-format JSON --output-file reports/ng-sbom.cyclonedx.json $NG_SBOM_OPTS
- chmod a+r reports/ng-sbom.cyclonedx.json
rules:
# exclude if disabled
- if: '$NG_SBOM_DISABLED == "true"'
when: never
- !reference [.test-policy, rules]
artifacts:
name: "SBOM for Angular from $CI_PROJECT_NAME on $CI_COMMIT_REF_SLUG"
when: always
expire_in: 1 week
paths:
- $NG_WORKSPACE_DIR/reports/ng-sbom.cyclonedx.json
reports:
cyclonedx:
- $NG_WORKSPACE_DIR/reports/ng-sbom.cyclonedx.json
rules:
# exclude if disabled
- if: '$NG_SBOM_DISABLED == "true"'
when: never
- !reference [.test-policy, rules]
###############################################################################################
# publish stage: #
......@@ -562,6 +589,8 @@ ng-publish:
script:
- npm_publish
rules:
# on production branche: manual
- if: '$NG_PUBLISH_ENABLED == "true" && $CI_COMMIT_REF_NAME =~ $PROD_REF'
when: manual
# exclude if $NG_PUBLISH_ENABLED not set
- if: '$NG_PUBLISH_ENABLED != "true"'
when: never
# on tag with release pattern: auto
- if: '$CI_COMMIT_TAG =~ $RELEASE_REF'