Angular中的单元测试点击事件 [英] Unit testing click event in Angular

问题描述

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

I'm trying to add unit tests to my Angular 2 app. In one of my components, there is a button with a (click) handler. When the user clicks the button a function is called which is defined in the .ts class file. That function prints a message in the console.log window saying that the button has been pressed. My current testing code tests for printing of the console.log message:

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 。我怎么能这样做？

However, this only tests the controller class, not the HTML. I don't just want to test that the logging happens when onEditButtonClick is called; I also want to test that onEditButtonClick is called when the user clicks the edit button defined in the component's HTML file. How can I do that?

推荐答案

我的目标是检查'onEditButtonClick'是否正在获取当用户单击编辑按钮而不是仅检查正在打印的console.log时调用。

My objective is to check if the 'onEditButtonClick' is getting invoked when the user clicks the edit button and not checking just the console.log being printed.

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

You will need to first set up the test using the Angular TestBed. This way you can actually grab the button and click it. What you will do is configure a module, just like you would an @NgModule, just for the testing environment

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 方法，单击按钮，并检查方法是否被调用

Then you need to spy on the onEditButtonClick method, click the button, and check that the method was called

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

Here we need to run an async test as the button click contains asynchronous event handling, and need to wait for the event to process by calling fixture.whenStable

另见：

• 测试文档

• Testing documentation

这篇关于Angular中的单元测试点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！