Angular中的单元测试点击事件

Question

我正在尝试将单元测试添加到我的 Angular 2 应用程序中。在我的一个组件中，有一个带有(click) 处理程序的按钮。当用户单击按钮时，会调用在.ts 类文件中定义的函数。该函数在 console.log 窗口中打印一条消息，说明该按钮已被按下。我当前的测试代码测试打印console.log 消息：

describe('Component: ComponentToBeTested', () => {
    var component: ComponentToBeTested;

    beforeEach(() => {
        component = new ComponentToBeTested();
        spyOn(console, 'log');
    });

    it('should call onEditButtonClick() and print console.log', () => {
        component.onEditButtonClick();
        expect(console.log).toHaveBeenCalledWith('Edit button has been clicked!);
    });
});

但是，这仅测试控制器类，而不是 HTML。我不只是想测试在调用onEditButtonClick 时是否发生了日志记录；我还想测试当用户单击组件的 HTML 文件中定义的编辑按钮时调用 onEditButtonClick。我该怎么做？

Answer 1

我的目标是检查用户单击编辑按钮时是否调用了“onEditButtonClick”，而不是仅检查正在打印的 console.log。

您需要首先使用 Angular TestBed 设置测试。这样，您实际上可以抓住按钮并单击它。你要做的是配置一个模块，就像你配置一个@NgModule，只是为了测试环境

import { TestBed, async, ComponentFixture } from '@angular/core/testing';

describe('', () => {
  let fixture: ComponentFixture<TestComponent>;
  let component: TestComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ],
      declarations: [ TestComponent ],
      providers: [  ]
    }).compileComponents().then(() => {
      fixture = TestBed.createComponent(TestComponent);
      component = fixture.componentInstance;
    });
  }));
});

那你需要窥探onEditButtonClick方法，点击按钮，检查该方法是否被调用

it('should', async(() => {
  spyOn(component, 'onEditButtonClick');

  let button = fixture.debugElement.nativeElement.querySelector('button');
  button.click();

  fixture.whenStable().then(() => {
    expect(component.onEditButtonClick).toHaveBeenCalled();
  });
}));

这里我们需要运行一个async测试，因为按钮点击包含异步事件处理，需要通过调用fixture.whenStable()等待事件处理

更新

现在首选使用fakeAsync/tick 组合，而不是async/whenStable 组合。如果进行了 XHR 调用，则应使用后者，因为 fakeAsync 不支持它。所以不是上面的代码，重构，它看起来像

it('should', fakeAsync(() => {
  spyOn(component, 'onEditButtonClick');

  let button = fixture.debugElement.nativeElement.querySelector('button');
  button.click();
  tick();
  expect(component.onEditButtonClick).toHaveBeenCalled();

}));

别忘了导入fakeAsync 和tick。

另见：

• Testing documentation
• What is the difference between fakeAsync and async in Angular testing?

Answer 2

可以使用'@angular/core/testing' 提供的async/fakeAsync 函数测试事件，因为浏览器中的任何事件都是异步的并被推送到事件循环/队列。

下面是一个非常基本的例子，使用fakeAsync测试点击事件。

fakeAsync 函数通过在特殊的fakeAsync 测试区域中运行测试主体来启用线性编码样式。

这里我正在测试一个被点击事件调用的方法。

it('should', fakeAsync( () => {
    fixture.detectChanges();
    spyOn(componentInstance, 'method name'); //method attached to the click.
    let btn = fixture.debugElement.query(By.css('button'));
    btn.triggerEventHandler('click', null);
    tick(); // simulates the passage of time until all pending asynchronous activities finish
    fixture.detectChanges();
    expect(componentInstance.methodName).toHaveBeenCalled();
}));

下面是Angular docs 不得不说的：

fakeAsync 优于 async 的主要优势在于测试看起来是同步的。没有then(...) 可以破坏可见的控制流。承诺返回的fixture.whenStable 不见了，取而代之的是tick()

存在限制。例如，您不能从 fakeAsync 中拨打 XHR 电话

Answer 3

我正在使用 Angular 6。我按照 Mav55 的回答，它奏效了。但是我想确定fixture.detectChanges(); 是否真的有必要，所以我删除了它，它仍然有效。然后我删除了tick(); 看看它是否有效并且确实有效。最后我从 fakeAsync() 包装中删除了测试，令人惊讶的是，它起作用了。

所以我最终得到了这个：

it('should call onClick method', () => {
  const onClickMock = spyOn(component, 'onClick');
  fixture.debugElement.query(By.css('button')).triggerEventHandler('click', null);
  expect(onClickMock).toHaveBeenCalled();
});

而且效果很好。

Answer 4

我遇到了类似的问题（详细说明如下），我通过使用tick 函数解决了它（在jasmine-core: 2.52 中），其毫秒数与原始setTimeout 调用中的毫秒数相同（或更大）。

例如，如果我有一个setTimeout(() => {...}, 2500);（因此它将在 2500 毫秒后触发），我会调用 tick(2500)，这将解决问题。

我在组件中的内容，作为对删除按钮单击的反应：

delete() {
    this.myService.delete(this.id)
      .subscribe(
        response => {
          this.message = 'Successfully deleted! Redirecting...';
          setTimeout(() => {
            this.router.navigate(['/home']);
          }, 2500); // I wait for 2.5 seconds before redirect
        });
  }

她是我的工作测试：

it('should delete the entity', fakeAsync(() => {
    component.id = 1; // preparations..
    component.getEntity(); // this one loads up the entity to my component
    tick(); // make sure that everything that is async is resolved/completed
    expect(myService.getMyThing).toHaveBeenCalledWith(1);
    // more expects here..
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const deleteButton = fixture.debugElement.query(By.css('.btn-danger')).nativeElement;
    deleteButton.click(); // I've clicked the button, and now the delete function is called...

    tick(2501); // timeout for redirect is 2500 ms :)  <-- solution

    expect(myService.delete).toHaveBeenCalledWith(1);
    // more expects here..
  }));

附：关于fakeAsync 和测试中的一般异步的很好解释可以在这里找到：a video on Testing strategies with Angular 2 - Julie Ralph, starting from 8:10, lasting 4 minutes :)

Answer 5

首先要检查按钮调用事件，我们需要监视单击按钮后将调用的方法 所以我们的第一行将是 spyOn 间谍方法采用两个参数 1) 组件名称 2) 成为间谍的方法，即：'onSubmit' 记住不要使用 '()' 只需要名称 然后我们需要使按钮的对象被点击 现在我们必须触发我们将添加点击事件的事件处理程序 那么我们希望我们的代码调用一次提交方法

it('should call onSubmit method',() => {
    spyOn(component, 'onSubmit');
    let submitButton: DebugElement = 
    fixture.debugElement.query(By.css('button[type=submit]'));
    fixture.detectChanges();
    submitButton.triggerEventHandler('click',null);
    fixture.detectChanges();
    expect(component.onSubmit).toHaveBeenCalledTimes(1);
});