单元测试 – angular2测试,我如何模拟子组件

所以让我们开始说我们有TaskListComponent显示任务，并且当其中一个被点击时刷新：

<div id="task-list">
  <div *ngFor="let task of (tasks$ | async)">
    <app-task [task]="task" (click)="refresh()"></app-task>
  </div>
</div>

应用任务是具有[任务]输入和(点击)输出的子组件。

好的，现在我们要为我的TaskListComponent编写测试，当然我们不想测试真正的app-task组件。

所以@Klas建议我们可以配置我们的TestModule：

schemas: [CUSTOM_ELEMENTS_SCHEMA]

我们可能不会在构建或运行时收到任何错误，但是除了子组件的存在之外，我们将无法进行测试。

那么我们如何模拟子组件呢？

首先我们为我们的子组件定义一个mock指令(同一个选择器)：

@Directive({
  selector: 'app-task'
})
class MockTaskDirective {
  @Input('task')
  public task: ITask;
  @Output('click')
  public clickEmitter = new EventEmitter<void>();
}

现在我们将在测试模块中声明它：

let fixture : ComponentFixture<TaskListComponent>;
let cmp : TaskListComponent;

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [TaskListComponent,**MockTaskDirective**],// schemas: [CUSTOM_ELEMENTS_SCHEMA],providers: [
      {
        provide: TasksService,useClass: MockService
      }
    ]
  });

  fixture = TestBed.createComponent(TaskListComponent);
  **fixture.autoDetectChanges();**
  cmp = fixture.componentInstance;
});

>请注意，由于灯具的子组件的生成在其创建后异步发生，因此我们激活其autoDetectChanges功能。

在我们的测试中，我们现在可以查询指令，访问其DebugElement的注入器，并通过它获取我们的模拟指令实例：

import { By } from '@angular/platform-browser';    
const mockTaskEl = fixture.debugElement.query(By.directive(MockTaskDirective));
    const mockTaskCmp = mockTaskEl.injector.get(MockTaskDirective) as MockTaskDirective;

[这部分通常在前面的部分，更清洁的代码。]

从这里，测试是一块蛋糕:)

it('should contain task component',()=> {
  // Arrange
  const mockTaskEl = fixture.debugElement.query(By.directive(MockTaskDirective));

  // Assert
  expect(mockTaskEl).toBeTruthy();
});
it('should pass down task object',()=>{
  // Arrange
  const mockTaskEl = fixture.debugElement.query(By.directive(MockTaskDirective));
  const mockTaskCmp = mockTaskEl.injector.get(MockTaskDirective) as MockTaskDirective;

  // Assert
  expect(mockTaskCmp.task).toBeTruthy();
  expect(mockTaskCmp.task.name).toBe('1');
});
it('should refresh when task is clicked',()=> {
  // Arrange
  spyOn(cmp,'refresh');
  const mockTaskEl = fixture.debugElement.query(By.directive(MockTaskDirective));
  const mockTaskCmp = mockTaskEl.injector.get(MockTaskDirective) as MockTaskDirective;

  // Act
  mockTaskCmp.clickEmitter.emit();

  // Assert
  expect(cmp.refresh).toHaveBeenCalled();
});