验证方法和属性

测试Angular 2组件需要深入了解Angular 2 @angular/core/testing模块。 虽然Jasmine的许多功能在Angular的测试模块中使用,但是Angular在测试组件时还需要一些非常具体的包装器和routine。

我们可以相当容易地测试简单Angular 2组件的属性和方法 - 毕竟,Angular 2组件是我们可以创建和接口的简单类。 说我们有一个简单的组件,保持显示一个定义的消息。 消息的内容可以通过setMessage函数改变,而clearMessage函数将会设置一个空消息。 这是一个非常小的组件,但我们将如何测试呢?

message.component.ts

import {Component} from '@angular/core';
@Component({
  selector: 'display-message',
  template: '<h1>{{message}}</h1>'
})
export class MessageComponent {
  public message: string = '';
  constructor() {}
  setMessage(newMessage: string) {
      this.message = newMessage;
  }
  clearMessage() {
    this.message = '';
  }
}

现在我们将创建两个单元测试,一个测试setMessage函数以查看是否显示新消息,另一个测试clearMessage函数以查看清除消息是否按预期工作。

message.spec.ts

import {MessageComponent} from './message.component';
describe('Testing message state in message.component', () => {
  let app: MessageComponent;
  beforeEach(() => {
    app = new MessageComponent();
  });
  it('should set new message', () => {
    app.setMessage('Testing');
    expect(app.message).toBe('Testing');
  });
  it('should clear message', () => {
    app.clearMessage();
    expect(app.message).toBe('');
  });
});

View Example

我们创建了两个测试:一个用于setMessage,另一个用于clearMessage。 为了调用这些函数,我们必须首先初始化MessageComponent类。 这是通过在执行每个测试之前调用beforeEach函数来实现的。

一旦我们的MessageComponent对象被创建,我们可以调用setMessageclearMessage并分析这些动作的结果。 我们制定一个预期的结果,然后测试看看我们期望的结果是否是。 这里我们测试我们试图设置的消息是否将MessageComponent属性消息修改为我们想要的值。 如果是,那么测试成功,我们的MessageComponent按预期工作。