Angular 正在测试路由器。以角度导航以调用ngOnInit

我们有一个Angular应用程序，像往常一样，我们在组件的

ngOnInit

中有服务调用。我们正在编写单元测试，其中一个测试是：

if（“导航到“/”时应获得年数”）

问题是ngOnInit不会被

路由器调用。navigate

我一直在阅读，组件的实例似乎仍然处于活动状态，并且以前调用过

ngOnInit

，但是如果我调用

fixture.detectChanges（）

它会工作。那么为什么它不能与路由器一起工作呢

这是我们的测试：

  it("should get years only once when navigating to '/'", fakeAsync(() => {
    // Act
    router.navigate([""]);

    tick();

    // Assert
    expect(getAvailableYearsSpy).toHaveBeenCalledTimes(1);
  }));

以下是我们正在测试的组件：

@Component({
  selector: "app-component-under-test",
  templateUrl: "./app-component-under-test.html",
  styleUrls: ["./app-component-under-test.scss"]
})
export class ComponentUnderTest implements OnInit {
  public years: Array<number> = [];
  public selectedYear: number;

  constructor(
    private componentUnderTestService: ComponentUnderTestService,
    private router: Router,
    private activatedRoute: ActivatedRoute) {
  }

  public ngOnInit(): void {
    let year = Number(this.activatedRoute.snapshot.params.year) || undefined;

    this.getYears(1, year);
  }

  private getYears(contractId: number, defaultYear?: number): Promise<number> {
    return this.componentUnderTestService.getAvailableYears(contractId).then((years) => {
      this.selectedYear =  defaultYear || years[0];
      this.years = years;

      return this.selectedYear;
    });
  }
}

@组件({
选择器：“正在测试的应用程序组件”，
templateUrl:“./test.html下的应用程序组件”，
styleUrls:[“/app-component-under-test.scss”]
})
导出类ComponentUnderTest实现OnInit{
公共年：数组=[]；
公共选择年份：编号；
建造师(
私有componentUnderTestService:componentUnderTestService，
专用路由器：路由器，
专用activatedRoute:activatedRoute）{
}
public ngOnInit（）：void{
let year=编号（this.activatedRoute.snapshot.params.year）| |未定义；
本年（1年）；
}
private getYears（缩写：number，defaultYear？：number）：承诺{
返回此.componentUnderTestService.getAvailableYears（收缩）。然后（（年）=>{
this.selectedYear=defaultYear | | years[0]；
本年=年；
返回此。选择的年份；
});
}
}

这就是我们的规格：

describe("ComponentUnderTest", () => {
  let component: ComponentUnderTest;
  let fixture: ComponentFixture<ComponentUnderTest>;
  let service: ComponentUnderTestService;

  let getAvailableYearsSpy;

  let router: Router;
  let location: Location;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        ComponentUnderTestModule,
        RouterTestingModule.withRoutes(componentUnderTestRoutes)
      ]
    });

    fixture = TestBed.createComponent(ComponentUnderTest);

    service = fixture.debugElement.injector.get(ComponentUnderTestService);

    getAvailableYearsSpy = spyOn(service, "getAvailableYears").and.returnValue(Promise.resolve([2017, 2018, 2019]));

    router = TestBed.get(Router);
    location = TestBed.get(Location);

    component = fixture.componentInstance;
  });

  it("should get years and PrognoseMeldung only once when navigating to '/'", fakeAsync(() => {
    // Act
    router.navigate([""]);

    tick();

    // Assert
    expect(getAvailableYearsSpy).toHaveBeenCalledTimes(1);
  }));
});

description（“被测组件”），（）=>{
let组件：被测组件；
let夹具：组件夹具；
let服务：测试服务下的组件；
让我们有机会成为间谍；
让路由器：路由器；
让位置：位置；
在每个之前（（）=>{
TestBed.configureTestingModule({
进口：[
测试模块下的组件，
RouterTestingModule.withRoutes（测试路由下的组件）
]
});
fixture=TestBed.createComponent（测试中的组件）；
服务=fixture.debugElement.injector.get（ComponentUnderTestService）；
getAvailableYearsSpy=spyOn（服务，“getAvailableYears”）。和.returnValue（承诺.解决（[2017、2018、2019]）；
路由器=测试台.get（路由器）；
location=TestBed.get（位置）；
组件=fixture.componentInstance；
});
它（“当导航到“/”时，应该只获得一次年份和预测”，fakeAsync（（）=>{
//表演
路由器。导航（[“”]）；
勾选（）；
//断言
期望（GetAvailableEyearsSpy）.已被调用的时间（1）；
}));
});

请提供一个，包括测试设置和正在测试的组件。@jornsharpe我用测试和组件更新了我的帖子，因为

ComponentUnderTest

有一个外部模板，您至少缺少了一个

compileComponents

——正如我所理解的那样，当您使用异步时应该调用compileComponents，这不是我的情况，尽管如此，我添加了compileComponents，但它仍然给出了方法被调用0次的消息：“spy getAvailableYears被调用过一次。它被调用了0次。”我假设问题是我使用的是同步的，它应该是异步的？我会给它一个测试，请提供一个，包括测试设置和测试中的组件。@jornsharpe我用测试和组件更新了我的帖子，因为

ComponentUnderTest

有一个外部模板，您至少缺少了一个

compileComponents

——正如我所理解的那样，当您使用异步时应该调用compileComponents，这不是我的情况，尽管如此，我添加了compileComponents，但它仍然给出了方法被调用0次的消息：“spy getAvailableYears被调用过一次。它被调用了0次。”我假设问题是我使用的是同步的，它应该是异步的？我试试看