验证方法和属性

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

message.component.ts

  1. import {Component} from '@angular/core';
  2. @Component({
  3. selector: 'display-message',
  4. template: '<h1>{{message}}</h1>'
  5. })
  6. export class MessageComponent {
  7. public message: string = '';
  8. constructor() {}
  9. setMessage(newMessage: string) {
  10. this.message = newMessage;
  11. }
  12. clearMessage() {
  13. this.message = '';
  14. }
  15. }

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

message.spec.ts

  1. import {MessageComponent} from './message.component';
  2. describe('Testing message state in message.component', () => {
  3. let app: MessageComponent;
  4. beforeEach(() => {
  5. app = new MessageComponent();
  6. });
  7. it('should set new message', () => {
  8. app.setMessage('Testing');
  9. expect(app.message).toBe('Testing');
  10. });
  11. it('should clear message', () => {
  12. app.clearMessage();
  13. expect(app.message).toBe('');
  14. });
  15. });

View Example

我们创建了两个测试:一个用于setMessage,另一个用于clearMessage。 为了调用这些函数,我们必须首先初始化MessageComponent类。 这是通过在执行每个测试之前调用beforeEach函数来实现的。 一旦我们的MessageComponent对象被创建,我们可以调用setMessageclearMessage并分析这些动作的结果。 我们制定一个预期的结果,然后测试看看我们期望的结果是否是。 这里我们测试我们试图设置的消息是否将MessageComponent属性消息修改为我们想要的值。 如果是,那么测试成功,我们的MessageComponent按预期工作。