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().
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',() =>{ beforeAll(()=> { console.log('beforeAll'); }); beforeEach(()=> { console.log('beforeEach'); }); afterAll(()=> { console.log('afterAll'); }); afterEach(()=> { console.log('afterEach'); }); it('Should have app as path', () =>{ expect(routes[0].path).toBe('app'); expect(routes[0].children).toContain({ path:'pins', component: PinsComponent }) }) it('Should match the childrens', () =>{ expect(routes[0].children).toContain({ path:'pins', component: PinsComponent }) }) })
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
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
¿Estás agregando la letra ' f ' al inicio de tus describe? Es decir, tienen que lucir así:
fdescribe('...',()=>{})
Yilmer Ramiro Guativa Rincón
me sale el siguiente error
has no exported member 'routes'
Luis Abdel Rangel Castro
Ariel Ayala
Alguien sabe como para el hot reload en el terminal de los test ? Control + C no me funciona
Esteban Casallas
Hola, prueba con CTRL + Z o con ESC + SHIFT + Z
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 {}
