Question

注意：我对Angular编程还很陌生！

我尝试编写用于路由的单元测试。

AppComponent在其未命名的单个路由器出口中呈现MasterLayoutComponent。

MasterLayoutComponent包含两个命名的路由器出口：

<kui-toolbar (contextmenu)="isDevMode">
    <router-outlet name="toolbar"></router-outlet>
</kui-toolbar>
<div class="content" (contextmenu)="isDevMode">
    <router-outlet name="main"></router-outlet>
</div>

这是AppListComponent的模板，应渲染到“主”路由器出口：

<p>app-list works!</p>

这是我的路线定义：

export const appRoutes: Route[] = [

  { path: "",   redirectTo: "appList", pathMatch: "full" },
  { path: "**", redirectTo: "appList", pathMatch: "full" },

  { path: "appList", component: MasterLayoutComponent, children: [{ path: "", component: AppListComponent, outlet: "main" }] }
];

这是我的测试代码：

describe("App Routing", () => {

  let location: Location;
  let router: Router;
  let fixture: ComponentFixture<MasterLayoutComponent>;
  let masterLayoutComponent: MasterLayoutComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        CommonModule,
        RouterTestingModule.withRoutes(appRoutes),
        NgxsModule.forRoot(),
        KuiCommonModule,
        KuiBaseComponentsModule,
        LocalizationModule,
        HttpClientModule,
      ],
      providers: [
        AppConfigurationService,
      ],
      declarations: [
        AppListComponent
      ],
    }).compileComponents();

    router = TestBed.get(Router);
    location = TestBed.get(Location);
    fixture = TestBed.createComponent(MasterLayoutComponent);
    masterLayoutComponent = fixture.componentInstance;

    router.initialNavigation();
  });


  it("should navigate to '' on path \"\"", fakeAsync(() => {
    // Trigger the router to navigate to path ""
    router.navigate([""]);
    // Wait for the router to do its work
    tick();

    fixture.detectChanges();

    expect(location.path()).toBe("");
  }));
});

测试成功。

当我打破期望并查看fixture.nativeElement.innerHTML的值时，我可以看到以下结果：

<kui-toolbar _ngcontent-c0="" _nghost-c1="">
   <kui-breadcrumb _ngcontent-c1="" _nghost-c2="" ng-reflect-navigation-items="[object Object]">
      <div _ngcontent-c2="" class="wrapper">
         <div _ngcontent-c2="" class="links">
            <!--bindings={
               "ng-reflect-ng-for-of": "[object Object]"
               }-->
            <div _ngcontent-c2="" class="link">
               <button _ngcontent-c2="" disabled="" title="Home">
                  <!--bindings={
                     "ng-reflect-ng-if": "true"
                     }-->
                  <div _ngcontent-c2="" class="icon" style="-webkit-mask-image: url(&quot;assets/svg/Icon.Home.svg&quot;);"></div>
               </button>
            </div>
         </div>
      </div>
   </kui-breadcrumb>
   <div _ngcontent-c1="" class="additional-content">
      <router-outlet _ngcontent-c0="" name="toolbar"></router-outlet>
   </div>
</kui-toolbar>
<div _ngcontent-c0="" class="content">
   <router-outlet _ngcontent-c0="" name="main"></router-outlet>
</div>

“主”路由器出口没有被AppListComponent的预期HTML替换。

我在做什么错？我想念什么？

Answer 1

RouterTestingModule可能会对路由进行监视，该路由实际上不会导航到该url，但会确保已经导航到该url。因此，不会呈现组件AppListComponent。

这对单元测试很好，因为您只专注于测试父组件（MasterLayoutComponent）。

相反，您可以按照以下方式验证路由器导航

expect(router.navigate).toHaveBeenCalledWith(['new-path'])

路由器出口未在单元测试中呈现

1 个答案: