测试Angular2组件@Input和@Output

Question

如何构建Angular2简单表单组件的测试：

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'user-form',
  template: `
    <input [(ngModel)]="user.name">
    <button (click)="remove.emit(user)">Remove</button>
  `
})
export class UserFormComponent {
  @Input() user: any;
  @Output() remove: EventEmitter<any> = new EventEmitter();
}

Answer 1

Angular2 RC.5

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { fakeAsync, tick, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser/src/dom/debug/by';
import { dispatchEvent } from '@angular/platform-browser/testing/browser_util';

function findElement(fixture, selector) {
  return fixture.debugElement.query(By.css(selector)).nativeElement;
}

import { UserFormComponent } from './user-form.component';

describe('User Form Component', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestComponent],
      imports: [FormsModule]
    });
  });

  it('should update', fakeAsync(() => {
    const fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    tick();
    const input = findElement(fixture, 'input');
    expect(input.value).toEqual('Tom');
    input.value = 'Thomas';
    dispatchEvent(input, 'input');
    expect(fixture.debugElement.componentInstance.user.name).toEqual('Thomas');
  }));

  it('should remove', fakeAsync(() => {
    const fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    tick();
    spyOn(fixture.debugElement.componentInstance, 'remove');
    const button = findElement(fixture, 'button');
    button.click();
    expect(fixture.debugElement.componentInstance.remove).toHaveBeenCalledWith(
      jasmine.objectContaining({id: 1})
    );
  }));
});

@Component({
  selector: 'test-component',
  directives: [UserFormComponent],
  template: `<user-form [user]="user" (remove)="remove($event)"></user-form>`
})
class TestComponent {
  user: any = { id: 1, name: 'Tom' };
  remove(user) { }
}