Jenkins Front

En este apartado vamos a crear una nueva tarea para la construcción y ejecución de pruebas de un proyecto Angular 6.

• En el menu principal de Jenkis cree una nueva tarea o job. Asigne un nombre y seleccione la opción Free Style Project.
• En la sección "Source Code Management" seleccione Git e ingrese los datos del repositorio del front en Angular 6. Para este caso realizaremos la configuración con el repositorio https://github.com/jhonatan89/front-angular-ci

Figura 1: Git Configuration

• En la sección entorno de ejecución seleccione "Provide Node & npm bin/ folder to PATH" y seleccionamos la instalación de NodeJs previamente configurada en Jenkins en el guía de instalación del ambiente de integración Continua.

Figura 2: Node Configuration

• En la sección de Ejecutar seleccione Añadir un nuevo paso y luego Ejecutar consola de windows. Aparecerá un recuadro para adicionar líneas de comandos. Agregue las siguiente línea de comandos: npm i -s & npm run cibuild. Esto realizará una instalación de los paquetes o dependencias del proyecto Angular y luego ejecutará la tarea de ejecución de pruebas y construcción del proyecto.

Figura 3: Ejecutar comandos windows - node install y cibuild

• En el archivo package.json del proyecto Angular usted debe agregar el siguiente script cibuid, tal como se muestra a continuación:

 "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build --prod",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "compodoc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json -w -s",
        "cibuild": "ng test --code-coverage  && ng build --prod --no-progress"
    },

Observe que el script cibuild se divide en dos fases. La primera ejecuta las pruebas generando el archivo de cobertura de pruebas "el cual será leído por SonarQube" y finalmente realizará la construcción para comprobar la sintaxis del proyecto. Esta configuración debe estar en el repositporio del proyecto a ejecutar

• Ahora vamos añadir otro paso haciendo click en Añadir nuevo paso y luego Ejecutar SonarQube Scaner. Aparecerá un recuadro donde adicionaremos las siguientes propiedades

sonar.projectKey=sampleproj:sonartest
sonar.projectName=front-Book
sonar.projectVersion=1.0
sonar.sources=src/app
sonar.test=src/app
sonar.test.inclusions=**/*.spec.ts
sonar.exclusions=**/*.module.ts
sonar.ts.tslint.configPath=tslint.json
sonar.typescript.lcov.reportPaths=coverage/lcov.info

Las anteriores propiedades establecen la información descriptiva del proyecto en SonarQube junto con la configuración del directorio a analizar, el directorio de los test y el archivo de cubrimiento de pruebas.

Figura 4: Configuración de SonarQube

Guarde la tarea y ejecutela. Observará en la consola como primero Jenkins hace fetch del proyecto de Github, luego ejecuta los comandos de instalación y ejecución de pruebas, y finalmente ejecuta SonarQube.

Figura 5: Resultado de la consola

y los resultados en SonarQube

Figura 6: Resultado SonarQube