失败：在业力测试中无法读取 null 的属性“点击”[关闭]

Question

我正在为 click 事件编写 karma/jasmine 测试用例，但我的按钮为空。请给我建议。提前致谢。

  it('should', async(() => {
    spyOn(component, 'clickMethod');
    let button = fixture.debugElement.nativeElement.querySelector('#view-rec');
    console.log(button); --> button is null I am getting
    button.click();
    fixture.whenStable().then(() => {
        expect(component.clickMethod).toHaveBeenCalled();
    })

组件::

  clickMethod() {
      this.msg.node.setVal(false);
      this.myBtn = "Hello";
  }

HTML::

<mat-menu #menu="matMenu" class="dropdown">
  <button mat-menu-item>
  </button>
  <button mat-menu-item id="view-rec"(click)='clickMethod()'>   
  </button> 
</mat-menu>

Answer 1

我认为您需要先打开菜单，然后才能访问要单击的mat-menu-item。

例如：

<button id="menu-open-icon" mat-icon-button [matMenuTriggerFor]="menu"> 
  <mat-icon>more_vert</mat-icon>
</button>

<mat-menu #menu="matMenu"> 
  <button mat-menu-item id="view-rec"(click)='clickMethod()'>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voicemail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-menu>

尝试：

it('should', () => {
    spyOn(component, 'clickMethod').and.callThrough();
    let menuIcon = fixture.debugElement.nativeElement.querySelector('#menu-open-icon')
    menuIcon.click();
    let button = fixture.debugElement.nativeElement.querySelector('#view-rec');
    console.log(button); --> this should not be null now
    button.click();
    fixture.detectChanges();
    expect(component.clickMethod).toHaveBeenCalled()
})