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

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

Resumen

Vamos a probar el objeto de configuración de las rutas de nuestra aplicación, el archivo app.routing.module.ts. Debemos exportar la variable routes con la palabra reservada export const routes ... para probarla desde nuestro nuevo archivo de pruebas: app.routing.module.spec.ts.

Recuerda que podemos reemplazar la función describe por fdescribe para solo ejecutar y probar esta parte de nuestra aplicación. Además, tenemos disponibles 4 nuevos módulos para configurar variables o código especial antes y después de la ejecución de cada prueba o de la totalidad de ellas: las funciones beforeAll(), beforeEach, afterAll() y afterEach().

Carlos Enrique Ramírez Flores

student•

Termine agregando la f a describe. porque en esta clase salieron muchos errores de otras pruebas.

import { routes } from './app-routing.module';
import { PinsComponent } from './components/pins/pins.component';

fdescribe('App Routing',() =&gt;{
    beforeAll(()=&gt; {
        console.log('beforeAll');
    });
    beforeEach(()=&gt; {
        console.log('beforeEach');
    });
    afterAll(()=&gt; {
        console.log('afterAll');
    });
    afterEach(()=&gt; {
        console.log('afterEach');
    });
    
    it('Should have app as path', () =&gt;{
        expect(routes[0].path).toBe('app');
        expect(routes[0].children).toContain({
            path:'pins',
            component: PinsComponent
        })
    })
    it('Should match the childrens', () =&gt;{
        expect(routes[0].children).toContain({
            path:'pins',
            component: PinsComponent
        })
    })
})

Carlos Enrique Ramírez Flores

student•

Para que funcione con la version de material 9 la forma de importacion de los modulos es la siguiente:

https://gist.github.com/pimatco/d5b1891feb90b60ca4681011b6513873

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


//Angular Material Components
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@angular/cdk/layout';
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatButtonModule} from '@angular/material/button';
import {MatInputModule} from '@angular/material/input';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatSliderModule} from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatMenuModule} from '@angular/material/menu';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatListModule} from '@angular/material/list';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatCardModule} from '@angular/material/card';
import {MatStepperModule} from '@angular/material/stepper';
import {MatTabsModule} from '@angular/material/tabs';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatChipsModule} from '@angular/material/chips';
import {MatIconModule} from '@angular/material/icon';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatDialogModule} from '@angular/material/dialog';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatTableModule} from '@angular/material/table';
import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator';


import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { PinsComponent } from './components/pins/pins.component';
import { LayoutComponent } from './components/layout/layout.component';
import { MenuComponent } from './components/menu/menu.component';
import { ActionsComponent } from './components/actions/actions.component';
import { FormComponent } from './components/form/form.component';
import { ApiService } from './services/api.service';
import { RepositoryService } from './services/repository.service';
import { NavigationService } from './services/navigation.service';
import { PinsService } from './components/pins/pins.service';

@NgModule({
  declarations: [AppComponent, PinsComponent, LayoutComponent, MenuComponent, ActionsComponent, FormComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatBottomSheetModule
  ],
  entryComponents: [ActionsComponent],
  providers: [ApiService, RepositoryService, NavigationService, PinsService],
  bootstrap: [AppComponent]
})
export class AppModule {}

Edgar Moises Valdez Faria

student•

Buenas. Estaría necesitando ayuda con el code-coverage El code-coverage solo me muestra el app.component No me muestra los demás archivos. ¿ Alguna idea ?

Ángel Alberto Rivas Álvarez

student•

¿Estás agregando la letra ' f ' al inicio de tus describe? Es decir, tienen que lucir así:

fdescribe('...',()=>{})

Nicolas Ticona Valdivia

student•

like it :)

Yilmer Ramiro Guativa Rincón

student•

me sale el siguiente error

has no exported member 'routes'

Luis Abdel Rangel Castro

student•

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './components/layout/layout.component';
import { PinsComponent } from './components/pins/pins.component';
import { FormComponent } from './components/form/form.component';

export const routes: Routes = [
  {
    path: 'app',
    component: LayoutComponent,
    children: [
      {
        path: 'pins',
        component: PinsComponent,
      },
      {
        path: 'add',
        component: FormComponent,
      },
    ],
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'app/pins',
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Ariel Ayala

student•

Alguien sabe como para el hot reload en el terminal de los test ? Control + C no me funciona

Esteban Casallas

student•

Hola, prueba con CTRL + Z o con ESC + SHIFT + Z

Pruebas Unitarias en Angular: Rutas y Ciclos de Vida 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