Angular RouterTestingModule 测试不在路由器插座中呈现组件

如何解决Angular RouterTestingModule 测试不在路由器插座中呈现组件

您好，我正在尝试编写一个集成测试来测试是否为给定路由呈现了正确的组件。

我正在使用英雄之旅应用程序进行此测试。这是完整应用程序的链接（不包括下面列出的我的规范文件）https://angular.io/generated/live-examples/testing/stackblitz.html

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule,Routes } from '@angular/router';

import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

export const routes: Routes = [
  { path: '',redirectTo: '/dashboard',pathMatch: 'full' },{ path: 'dashboard',component: DashboardComponent },{ path: 'detail/:id',component: HeroDetailComponent },{ path: 'heroes',component: HeroesComponent }
];

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

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}

app.component.spec.ts

import { ComponentFixture,Testbed,waitForAsync,fakeAsync,tick } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

import { AppComponent } from './app.component';
import { routes } from './app-routing.module';
import { Router } from '@angular/router';

describe('AppComponent Routing',() => {
    let component: AppComponent;
    let fixture: ComponentFixture<AppComponent>;
    let router: Router;
  
    beforeEach(waitForAsync(() => {
      Testbed.configureTestingModule({declarations: [AppComponent],imports: [RouterTestingModule.withRoutes(routes)]}).compileComponents();
    }));
  
    beforeEach(() => {
      fixture = Testbed.createComponent(AppComponent);
      router = Testbed.get(Router);
      component = fixture.componentInstance;
      router.initialNavigation();
      fixture.detectChanges();
    });
  
    it('should create',fakeAsync(() => {
      router.navigate(['']);
      tick();
      expect(component).tobedefined();
      console.log(fixture.debugElement.nativeElement.innerHTML);
      expect(router.url).toBe('/dashboard');
    }));
  });

浅层路由有效，因为 URL "/dashboard" 被正确路由到。虽然 console.log 的输出是

LOG: '<h1 _ngcontent-a-c16="">Tour of Heroes</h1><nav _ngcontent-a-c16=""><a _ngcontent-a-c16="" routerlink="/dashboard" ng-reflect-router-link="/dashboard" href="/dashboard">Dashboard</a><a _ngcontent-a-c16="" routerlink="/heroes" ng-reflect-router-link="/heroes" href="/heroes">Heroes</a></nav><router-outlet _ngcontent-a-c16=""></router-outlet><app-dashboard _nghost-a-c17=""><h3 _ngcontent-a-c17="">Top Heroes</h3><div _ngcontent-a-c17="" class="grid grid-pad"><!--container--></div></app-dashboard><!--container-->

导航到此 URL 时，我希望看到 dom 的其余部分呈现在 <router-outlet _ngcontent-a-c16=""></router-outlet>

中或下方

我如何对 AppComponent 的子组件进行集成测试，以便我可以进一步进行这些测试，并在子组件上执行单​​击操作等操作，并验证为给定 URL 呈现正确的组件？

解决方案

我将所有子组件添加到 Testbed.configureTestingModule 中的导入数组，并使用 HeroService 模拟提供程序 MockHeroService。我添加了第二个测试以确保导航到 /heroes 确实显示了我期望的英雄组件。

我还在 heros 中的每个 li 中添加了一个 data-test-id，这样我就可以确保数据是从 mockService 呈现的。

import { ComponentFixture,tick,waitForAsync } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { browserModule } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { routes } from './app-routing.module';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroService } from './hero.service';
import { HeroesComponent } from './heroes/heroes.component';
import { MessageService } from './message.service';
import { MessagesComponent } from './messages/messages.component';
import { Observable,of } from 'rxjs';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { By } from '@angular/platform-browser';

class MockHeroService {
  getHeroes(): Observable<Hero[]> {
    return of(HEROES);
  }

  getHero(id: number): Observable<Hero> {
    return of(HEROES.find(hero => hero.id === id));
  }
}
 
describe('AppComponent Routing',() => {
    let component: AppComponent;
    let fixture: ComponentFixture<AppComponent>;
    let router: Router;
  
    beforeEach(waitForAsync(() => {
      Testbed.configureTestingModule({
        declarations: [AppComponent,DashboardComponent,HeroDetailComponent,HeroesComponent,MessagesComponent],imports: [RouterTestingModule.withRoutes(routes),browserModule,FormsModule],providers: [
          { provide: HeroService,useClass: MockHeroService },{ provide: MessageService }
        ]
      }).compileComponents();
    }));
  
    beforeEach(() => {
      fixture = Testbed.createComponent(AppComponent);
      router = Testbed.inject(Router);
      component = fixture.componentInstance;
      router.initialNavigation();
      fixture.detectChanges();
    });
  
    it('should create',fakeAsync(() => {
      router.navigate(['']);
      tick();
      expect(component).tobedefined();
      expect(router.url).toBe('/dashboard');
    }));

    it('navigate to heroes',fakeAsync(() => {
      router.navigate(['heroes']);
      tick();
      fixture.detectChanges();
      const heroes = fixture.debugElement.queryAll(By.css('[data-test-id="hero-item"]'));
      console.log(heroes);
      expect(heroes.length).toBe(HEROES.length);
      expect(component).tobedefined();
      expect(router.url).toBe('/heroes');
    }));
  });

解决方法

您必须将要从路由定义呈现的每个组件（DashboardComponent、HeroDetailComponent、HeroesComponent）添加到 TestBed 的 declarations 数组中。

示例：

TestBed.configureTestingModule({
      declarations: [
        AppComponent,DashboardComponent,HeroDetailComponent,HeroesComponent 
      ],imports: [RouterTestingModule.withRoutes(routes)]
    }).compileComponents();

有时您会使用组件库，这些库会添加到 imports 数组中。

示例：

await TestBed.configureTestingModule({
  imports: [
    MatTableModule  // will render material table components 
  ],declarations: [ AppComponent]
})
.compileComponents();