ngx-bootstrap 引导菜单未在 Angular4+ 单元测试中打开

Question

下拉菜单在应用程序中打开正常，但在单元测试中不起作用。 我不确定我是否遗漏了什么，但我已经看了很长时间，我找不到任何用户错误。 我也在github上提交了一个问题。 https://github.com/valor-software/ngx-bootstrap/issues/4282

这是 stackblitz 链接： https ://stackblitz.com/edit/angular-euyvq4-khflez ? file = src%2Fmain.ts

运行应用程序

// bootstrap(); // to run karma
platformBrowserDynamic().bootstrapModule(AppModule); // to run the app

经营业力

bootstrap(); // to run karma
// platformBrowserDynamic().bootstrapModule(AppModule); // to run the app

任何人都可以确认它是错误还是用户错误？ 提前致谢

Answer 1

我认为您遇到了问题，因为事件循环如何在 DOM 节点上手动执行单击方法。

Jake Archibald（Google 的开发人员倡导者）在 JSConf Asia 2018 上发表了关于事件循环的精彩演讲。我强烈建议您观看整件事，但在29:57 他谈到了我相信您遇到的问题。 本质上，由于您是手动触发此单击事件，因此您需要在事件循环中将测试断言作为单独的任务执行。

您可以在测试中使用setTimeout(...) （并使用done方法）或在使用fixture.whenStable()方法的 Angular 测试中执行此操作的首选方法来完成此操作。 更改此设置将使您的测试通过：

fit('should open dropdown menu', () => {
  const h2: HTMLElement = fixture.nativeElement.querySelector('button#button-basic');
  h2.click();

  fixture.whenStable().then(() => {
    fixture.detectChanges();
    expect(fixture.nativeElement.querySelectorAll('li a.dropdown-item').length).toEqual(4);
  });
});

Answer 2

我无法让您的 Stackblitz 工作，但以防万一其他人遇到此问题，如果您动态生成列表项（使用 ngFor），那么您需要在 tick() 之后添加另一个 detectChanges()

 it('should show 8 items (fakeasync)', fakeAsync(() => {
    const h2: HTMLElement = fixture.nativeElement.querySelector('button#button-basic');
    h2.click();
    fixture.detectChanges();
    tick(); 
    fixture.detectChanges();
 expect(fixture.nativeElement.querySelector('[dropdown]').classList).toContain('open');
    expect(fixture.nativeElement.querySelectorAll('li a.dropdown-item').length).toEqual(8)
  }));