javascript - Angular 2 和 karma-jasmine 单元测试用例在单击链接时打开模式

Question

我想测试点击链接时，模式应该打开。

我在 spec.ts 文件中编写了以下测试

describe('NavbarComponent', () => {
  let comp:    NavbarComponent;
  let fixture: ComponentFixture<NavbarComponent>;
  let de:      DebugElement;
  let el:      HTMLElement;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        NavbarComponent
      ],
        imports: [ ng2Bootstrap.Ng2BootstrapModule.forRoot() ]
    });
    fixture = TestBed.createComponent(NavbarComponent);
    comp = fixture.componentInstance; 
    de = fixture.debugElement.query(By.css('nav'));
    el = de.nativeElement;
  });
  it('signin should open modal', fakeAsync(() => {
    var signin = <HTMLElement>el.getElementsByClassName("signin-link")[0];
    signin.click();
    tick();
    var temp =<HTMLElement>el.getElementsByClassName("signinmodal")[0];
    expect(["block"]).toContain(temp.style.display);
  }));

我正在使用 fakeasync 和 tick()，如 angular2 test guide 所示

但是上述测试总是失败，因为 Expected [ 'block' ] to contains ''.

这是模板代码

<li><a href="#" class="signin-link" (click)="signinmodal.show()" data-toggle="modal" data-target=".signinmodal">Signin</a></li>

<div class="modal signinmodal" bsModal #signinmodal="bs-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
      ...
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

编辑

我还尝试使用他们的点击模拟器，如 their test guide 中所述。

The click() helper function is not one of the Angular testing utilities. It's a function defined in this guide's sample code. All of the sample tests use it. If you like it, add it to your own collection of helpers.

export const ButtonClickEvents = {
   left:  { button: 0 },
   right: { button: 2 }
};
export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left): void {
  if (el instanceof HTMLElement) {
    el.click();
  } else {
    el.triggerEventHandler('click', eventObj);
  }
}

然后调用 click(signin) 而不是 signin.click()。但测试还是失败了。

Answer 1

更新:我已经采用了 ng2-bootstrap 的最小工作示例，并尝试使用 jasmine 单元测试对其进行测试，但我认为这是不可能的。单元测试在精简的浏览器窗口内运行，无需访问完整的样式表、外部依赖项(如 Bootstrap )等。这些测试旨在测试组件的逻辑，而不是模板的渲染和显示。

如果您想测试这种级别的 ui 交互，最好将其放入 E2E 测试中，然后使用 Protractor 。然后您将拥有一个完整的、可运行的浏览器实例，并且 ng2-bootstrap 应该按预期工作。

https://github.com/angular/angular-cli/wiki/e2e

初始答案:

很抱歉问了一个可能很愚蠢的问题，但是您的期望不是错误的吗？难道不应该是:

expect(temp.style.display).toContain("block");

尽管这可能无法解决问题，但重要的是要注意 expect 应该对被测试的项目进行操作，并且在某些情况下(我不确定这是否是其中之一) ) 可以负责解决 promise 。

要解决实际问题，也许您应该首先验证登录模式的点击是否正常工作，以及您是否确实找到了页面上的所有元素。有时可能会发生没有抛出错误，但找不到该元素的情况。