Pruebas Unitarias de Componentes en Angular con Jasmine

Clase 25 de 38 • Curso de Unit Testing para MEAN con Jasmine

Contenido del curso

Bienvenida e Introducción

Creando un framework de pruebas básico

Análisis estático de código

Trabajando con Jasmine en el frontend

Probando Nodejs apps con Jasmine

Probando Angular apps con Jasmine

Pruebas de integración de Angular apps con Jasmine

Tomar examen

Resumen

Vamos a crear algunas pruebas para nuestro componente principal en el frontend: un conjunto de archivos que encontramos en la carpeta src/app.

El archivo app.component.ts se encarga de definir la lógica de nuestra aplicación. Por ahora, no tenemos nada, solo la referencia a otros componentes con tareas muy concretas que vamos a ir probando en las siguientes clases:

app.component.html: Se encarga de renderizar el componente de navegación, router-outlet.
app.component.spec.ts: Tiene todas las pruebas del componente App. Algunas de las pruebas por defecto no son muy útiles en este momento y vamos a reemplazarlas por algunas pruebas en el archivo app.component.html para confirmar que se incluye el componente render-oulet y la navegación funciona correctamente.

Comentarios

Daniel Puerta

student•

Si al ejecutar ng test les sale el siguiente error:

Data path “.builders['app-shell']” should have required property 'class'

Lo que deben hacer es cambiar la versión de "@angular-devkit/build-angular" a la "0.13.4" en el package.json

Madeleine Marcano

student•

Gracias! Me ayudaste

David Behar

student•

Pues yo no puedo ejecutar ng :/

Carlos Enrique Ramírez Flores

student•

Para mi fue complicado este curso. Más que nada por iniciar con el proyecto. Tuve que instalar angular 9 y ahi copiar las carpetas del proyecto. Y me funciono sin problema esto de las pruebas.

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { By } from '@angular/platform-browser';
import { RouterOutlet } from '@angular/router';

describe('AppComponent', () =&gt; {
  let fixture: ComponentFixture&lt;AppComponent&gt;;
  let component: AppComponent;
  beforeEach(async(() =&gt; {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  beforeEach( () =&gt; {
    fixture =  TestBed.createComponent(AppComponent);
    component = fixture.debugElement.componentInstance;
  })
  ;
  it('Should have a router outler', () =&gt; {
    const de = fixture.debugElement.query(By.directive(RouterOutlet));
    expect(de).not.toBeNull();
  });
});

Jaume Parrot Altisent

student•

Buenas, he hecho un copy&paste del código de ejemplo, pero me aparece este error:

No se porque no encuentra la función 'debugElement'. Un saludo.

Madeleine Marcano

student•

Hola! Pudiste resolver este problema..?? Actualmente me sale el mismo problema.

Carlos Enrique Ramírez Flores

student•

Yo estoy trabajando con Angular 9 y las pruebas me las corre sin ningún problema!

Adrian Peralta

student•

Creo que las clases de acá en adelante pueden servir para cualquier frontEnd, incluyendo mobile, traduciendo cosas. Pero no sé nada de angular :D jaja, espero agregen contenido similar en otros cursos. Vuelvo cuando aprenda angular :p

Mario Alejandro Crespo Reyes

student•

Hola !, angular es el unico curso que me falta para copletar la carrera de** Arquitectura Frontend **, pienso que si bien primero haces el curso de Angular para enteder mejor los ejercicios, lo importantes es que prestes atencion en el comportamiento de los diferentes usos de Jasmine y podras avanzar sin saber angular.

Adrian Peralta

student•

Vi un poco de angular, más de react, si que estaba buscando el uso Jasmine para luego practicar BDD que es similar a TDD.

Tu comentario me ha hecho re-pensar y continuar el curso sin saber tanto angular :D, mil gracias!!, igual iré un poco en paralelo con el curso de angular para tenerlo de referencia.

Maximiliano Mendez

student•

hay alguna forma de tener el proyecto sin que este completo? simplemente hacer los archivos de test siguiendo los videos?

Edisson Cruz

student•

Tengo un problema al ejecutar ng test

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)
ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)
ERROR in ./src/app/components/pins/pins.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)
ERROR in ./src/app/components/layout/layout.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)
ERROR in ./src/app/components/menu/menu.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)
ERROR in ./src/app/components/actions/actions.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)
ERROR in ./src/app/components/form/form.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)

Héctor Eduardo López Carballo

student•

Hola!

Pudiste resolver el problema?

Edisson Cruz

student•

Si, tuve que copiar el proyecto del profesor y instalar la carpeta node_modules de nuevo

Jesús Alejandro Pérez Ramírez

student•

Si les aparece este error:

ng : No se puede cargar el archivo C:\Users\TECNOSOFT\AppData\Roaming\npm\ng.ps1 porque la ejecución de scripts está deshabilitada en   
este sistema. Para obtener más información, consulta el tema about_Execution_Policies en https:/go.microsoft.com/fwlink/?LinkID=135170. 
En línea: 1 Carácter: 1
+ ~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

Entren al siguiente link: (Se trata de un error de PowerShell, ahi les muestra los pasos para dicha solución.) https://www.cdmon.com/es/blog/la-ejecucion-de-scripts-esta-deshabilitada-en-este-sistema-te-contamos-como-actuar#:~:text=Para%20poder%20ejecutar%20los%20scripts,scripts%20maliciosos%20en%20el%20sistema.

Carlos Enrique Ramírez Flores

student•

Yo estoy trabajando con angular 9 y no necesite poner la f en la función describe.

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { By } from '@angular/platform-browser';
import { RouterOutlet } from '@angular/router';

describe('AppComponent', () =&gt; {
  let fixture: ComponentFixture&lt;AppComponent&gt;;
  let component: AppComponent;
  beforeEach(async(() =&gt; {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  beforeEach( () =&gt; {
    fixture =  TestBed.createComponent(AppComponent);
    component = fixture.debugElement.componentInstance;
  })
  ;
  it('Should have a router outler', () =&gt; {
    const de = fixture.debugElement.query(By.directive(RouterOutlet));
    expect(de).not.toBeNull();
  });
});

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)
ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)
ERROR in ./src/app/components/pins/pins.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)
ERROR in ./src/app/components/layout/layout.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)
ERROR in ./src/app/components/menu/menu.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)
ERROR in ./src/app/components/actions/actions.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)
ERROR in ./src/app/components/form/form.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\edicr\Desktop\web\Testing\unit-testing-jasmine\mean\node_modules\sass-loader\dist\index.js:25:24)

ng : No se puede cargar el archivo C:\Users\TECNOSOFT\AppData\Roaming\npm\ng.ps1 porque la ejecución de scripts está deshabilitada en   
este sistema. Para obtener más información, consulta el tema about_Execution_Policies en https:/go.microsoft.com/fwlink/?LinkID=135170. 
En línea: 1 Carácter: 1
+ ~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

Pruebas Unitarias de Componentes en Angular con Jasmine

Bienvenida e Introducción

Pruebas unitarias con Jasmine para JavaScript

Pruebas Unitarias: Mejora y Seguridad en Desarrollo de Software

Creando un framework de pruebas básico

Pruebas Unitarias Básicas en JavaScript: Creación y Ejecución

Refactorización de Pruebas en JavaScript con Funciones expect e it

Refactorización de Pruebas JavaScript con Framework Personalizado

Adaptación de Frameworks JavaScript para Node.js y Browser

Análisis estático de código

Herramientas para Mejorar la Calidad del Código en JavaScript

Configuración de ESLint en VS Code paso a paso

Configuración de Prettier en Proyectos JavaScript

Tipado Estricto en TypeScript para Aplicaciones Angular

Trabajando con Jasmine en el frontend

Pruebas Unitarias con Jasmine: Uso de spyOn para Simular Funciones

Configuración de Jasmine para Pruebas de Frontend

Configuración de Jasmine en Node.js para Pruebas Unitarias

Pruebas Unitarias en JavaScript con Jasmine: Uso de Funciones Básicas

Pruebas Unitarias con Jasmine: Matchers, Espías y Ciclos de Vida

Probando Nodejs apps con Jasmine

Pruebas Unitarias con Jasmine en Node.js y Angular

Configuración de Pruebas Unitarias en Node.js con Jasmine

Configuración avanzada de Jasmine y reportes en Node.js

Implementación de Cobertura de Código con InstaBoot.js y NGC

Pruebas Unitarias de Servidor Express con Método GET en Node.js

Pruebas Unitarias de Código 500 en Métodos GET

Pruebas del Método PAUSE en Desarrollo Web

Pruebas de Métodos POST, PUT y DELETE en JavaScript Asíncrono

Probando Angular apps con Jasmine

Pruebas Unitarias e Integración en Angular con Jasmine

Pruebas Unitarias de Componentes en Angular con Jasmine

Pruebas Unitarias en Angular: Rutas y Ciclos de Vida con Jasmine

Pruebas Unitarias en Angular: Simulación de Servicios y Componentes

Pruebas Unitarias en Formularios Reactivos con Angular

Pruebas Unitarias Avanzadas en Formularios Reactivos de Angular

Pruebas Unitarias en Angular: Navegación y Outputs HTML

Pruebas Unitarias en Angular: Testeo de Componentes y Servicios

Pruebas Unitarias en Jasmine: Espías y Stubs en Angular

Pruebas de Espionaje en Objetos Globales y Métodos en JavaScript

Pruebas de integración de Angular apps con Jasmine

Pruebas de integración con Jasmine y Angular

Pruebas de Navegación con Angular y RouterTestingModule

Pruebas HTTP en Angular con HTTP Client Testing Module

Pruebas Unitarias: Cobertura Completa de Métodos HTTP en API

Buenas prácticas de Unit Testing con Jasmine