Question

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

我在spec.ts file

中写了以下测试

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 contain ''.

失败

这是模板代码

<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

中所述

click（）辅助函数不是Angular测试之一公用事业。它是本指南示例代码中定义的函数。所有的样本测试使用它。如果您喜欢，请将其添加到您自己的收藏中帮助者。

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的最小工作示例，并尝试使用茉莉花单元测试进行测试，我认为它不可能实现。单元测试在一个缩减的浏览器窗口内运行，无需访问完整的样式表，外部依赖项（如bootstrap）等。这些测试旨在测试组件的逻辑，而不是模板的呈现和显示。 / p>

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

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

初步回答：

很抱歉提出一个可能很愚蠢的问题，但是你的期望是不是错了？不应该是：

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

虽然这可能无法解决问题，但重要的是要注意expect应对待测项目进行操作，并且在某些情况下（我不确定是否这是其中之一）可以负责解决承诺。

要对实际问题进行问题排查，您可能应首先验证登录模式的点击是否正常，以及您是否真正找到了网页上的所有元素。有时可能会发生没有错误，但找不到该元素。

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

1 个答案: