GitHub Actions

Clase 24 de 25 • Curso de Angular: Unit Testing para Servicios

Jorge Luis Silva Medina

student•

Para los que lo ven en el 2023, les recomiendo que revisen la versión de node y que revisen la version de los comandos de CI de github.

name: CI for Angular
on: push
jobs:
  unit-test:
    runs-on: ubuntu-latest
    steps:
      - name: Cone
        uses: actions/checkout@v3
      - name: Node Setup
        uses: actions/setup-node@v3
        with:
          node-version: 16.x
      - name: Install dependencies
        run: npm ci
      - name: Run tests
        run: npm run test -- --no-watch --code-coverage --browsers=ChromeHeadlessCI

Cesar Elías Armendariz Ruano

student•

Vamos a agregar todo el proceso de integración continua para correr pruebas desde un servidor que en este caso es el de Github Actions. Es de gran utilidad para poder hacer test de todos los test en cada commit que se haga trabajo grupal.

Configura el setap para cualquier framework de prueba continua en testingCI

Daniel Meza

student•

¿Alguien tuvo éxito?

Daniel Meza

student•

Aquí mi configuración:

ci.yml

name: CI for Angular
on: push
jobs:
  unit-test:
    runs-on: ubuntu-latest
    steps:
      - name: Clone
        uses: actions/checkout@v2
      - name: Node Setup
        uses: actions/setup-node@v2
        with:
          node-version: 14.x
      - name: Install
        run: npm ci
      - name: run tests
        run: npm run test -- --no-watch --code-coverage --browsers=ChromeHeadlessCI

karma.conf.js

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-mocha-reporter')
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
      },
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/ng-testing-services'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' }
      ],
      check: {
        global: {
          statements: 30,
          branches: 30,
          funtions: 30,
          lines: 30
        }
      }
    },
    reporters: ['mocha'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadless'],
    customLaunchers: {
      ChromeHeadlessCI: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox']
      }
    },
    singleRun: false,
    restartOnFileChange: true
  });
};

Daniel Meza

student•

Ya corrió. El detalle ahora, es que se queda colgado en el test...

Victor Alfredo Matzar Say

student•

Por mi parte, lo corrí con

run: npx ng test --no-watch --code-coverage --browsers=ChromeHeadlessCI

npm run test, no me funcionó :(

ANDRES FELIPE CANO PIEDRAHITA

student•

muchas gracias

Franklin Gil

student•

Hay un curso de Github Actions?

Elcira Ibarra

student•

Sí. Curso de Github Actions

Luis Jose Marquez Gonzalez

student•

Si en algún momento se queda colgado, es porque el ng run test tiene el watcher por defecto. He agregado un test:ci en el package.json, y es el comando a ejecutar en el ci.yml

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test --watch  --browsers ChromeHeadless",
    "test:ci": "ng test --no-watch --code-coverage --browsers=ChromeHeadlessCI",
    "test:coverage": "ng test --watch  --browsers ChromeHeadless --code-coverage",
    "serve:ssr:angular-unit-test": "node dist/angular-unit-test/server/server.mjs"
  },

name: CI for Angular
on: push
jobs:
  unit-test:
    runs-on: ubuntu-latest
    steps:
      - name: Clone
        uses: actions/checkout@v2
      - name: Node Setup
        uses: actions/setup-node@v4.0.2
        with:
          node-version: '20.x'
      - name: Install Dependencies
        run: npm ci
      - name: Run Tests
        run: npm run test:ci

den velez

student•

husky, libreria para comprobar que todo sea correcto en el local antes de hacer push,

https://www.mariokandut.com/how-to-add-husky-to-angular/

Diego Toro Cárdenas

student•

CI = continuous integration

For to learn more, please click My contribution

GitHub Actions

Introducción

Unit testing para servicios en Angular

Jest vs. Jasmine: entornos de testing para Angular

Fundamentos de unit testing en Angular

Tu primera prueba en Angular

Explorando matchers

Reporte de coverage

Mocha Report

Testing en servicios

Pruebas unitarias para servicios

Servicios con dependencias

Spies

Angular TestBed

TestBed + Spies

Proyecto

Setup y maquetación del proyecto

Product Service Http

Testing en consultas HTTP

HttpClientTestingModule

Generando Mocks

Pruebas para GET

Pruebas maliciosas para GET

Pruebas para POST

Pruebas para PUT y DELETE

Bonus

Pruebas a errores

Pruebas con interceptores

Pruebas al login

Pruebas a la API del navegador

GitHub Actions

Próximos pasos

Toma el Curso de Angular: Unit Testing para Componentes