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