angular2 测试，我如何模拟子组件

Question

如何在 jasmine 测试中模拟子组件？

我有MyComponent，它使用MyNavbarComponent 和MyToolbarComponent

import {Component} from 'angular2/core';
import {MyNavbarComponent} from './my-navbar.component';
import {MyToolbarComponent} from './my-toolbar.component';

@Component({
  selector: 'my-app',
  template: `
    <my-toolbar></my-toolbar>
    {{foo}}
    <my-navbar></my-navbar>
  `,
  directives: [MyNavbarComponent, MyToolbarComponent]
})
export class MyComponent {}

当我测试这个组件时，我不想加载和测试这两个子组件； MyNavbarComponent，MyToolbarComponent，所以我想模拟一下。

我知道如何使用provide(MyService, useClass(...)) 模拟服务，但我不知道如何模拟指令；组件；

  beforeEach(() => {
    setBaseTestProviders(
      TEST_BROWSER_PLATFORM_PROVIDERS,
      TEST_BROWSER_APPLICATION_PROVIDERS
    );

    //TODO: want to mock unnecessary directives for this component test
    // which are MyNavbarComponent and MyToolbarComponent
  })

  it('should bind to {{foo}}', injectAsync([TestComponentBuilder], (tcb) => {
    return tcb.createAsync(MyComponent).then((fixture) => {
      let DOM = fixture.nativeElement;
      let myComponent = fixture.componentInstance;
      myComponent.foo = 'FOO';
      fixture.detectChanges();
      expect(DOM.innerHTML).toMatch('FOO');
    });
  });

这是我的 plunker 示例；

http://plnkr.co/edit/q1l1y8?p=preview

Answer 1

根据要求，我将发布另一个关于如何使用input/output 模拟子组件的答案：

首先让我们说我们有TaskListComponent，它显示任务，并在单击其中一个时刷新：

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

app-task 是具有[task] 输入和(click) 输出的子组件。

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

所以正如@Klas 建议的那样，我们可以配置我们的TestModule：

schemas: [CUSTOM_ELEMENTS_SCHEMA]

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

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

首先，我们将为子组件（相同的选择器）定义一个模拟指令：

@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;

[这部分通常应该在beforeEach 部分，以使代码更简洁。]

从这里开始，测试是小菜一碟:)

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();
});

Answer 2

如果你在TestBed中使用schemas: [CUSTOM_ELEMENTS_SCHEMA]，被测组件将不会加载子组件。

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestBed, async } from '@angular/core/testing';
import { MyComponent } from './my.component';

describe('App', () => {
  beforeEach(() => {
    TestBed
      .configureTestingModule({
        declarations: [
          MyComponent
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
      });
  });

  it(`should have as title 'app works!'`, async(() => {
    let fixture = TestBed.createComponent(MyComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('Todo List');
  }));

});

这适用于已发布的 Angular 2.0 版本。 Full code sample here.

CUSTOM_ELEMENTS_SCHEMA 的替代品是NO_ERRORS_SCHEMA

Answer 3

感谢 Eric Martinez，我找到了这个解决方案。

我们可以使用此处记录的overrideDirective 函数， https://angular.io/docs/ts/latest/api/testing/TestComponentBuilder-class.html

需要三个参数； 1. 要实现的组件 2.要覆盖的子组件 3. 模拟组件

已解决的解决方案在http://plnkr.co/edit/a71wxC?p=preview

这是来自 plunker 的代码示例

import {MyNavbarComponent} from '../src/my-navbar.component';
import {MyToolbarComponent} from '../src/my-toolbar.component';

@Component({template:''})
class EmptyComponent{}

describe('MyComponent', () => {

  beforeEach(injectAsync([TestComponentBuilder], (tcb) => {
    return tcb
      .overrideDirective(MyComponent, MyNavbarComponent, EmptyComponent)
      .overrideDirective(MyComponent, MyToolbarComponent, EmptyComponent)
      .createAsync(MyComponent)
      .then((componentFixture: ComponentFixture) => {
        this.fixture = componentFixture;
      });
  ));

  it('should bind to {{foo}}', () => {
    let el = this.fixture.nativeElement;
    let myComponent = this.fixture.componentInstance;
    myComponent.foo = 'FOO';
    fixture.detectChanges();
    expect(el.innerHTML).toMatch('FOO');    
  });
});

Answer 4

我整理了一个简单的MockComponent 模块来帮助简化此操作：

import { TestBed } from '@angular/core/testing';
import { MyComponent } from './src/my.component';
import { MockComponent } from 'ng2-mock-component';

describe('MyComponent', () => {

  beforeEach(() => {

    TestBed.configureTestingModule({
      declarations: [
        MyComponent,
        MockComponent({ 
          selector: 'my-subcomponent', 
          inputs: ['someInput'], 
          outputs: [ 'someOutput' ]
        })
      ]
    });

    let fixture = TestBed.createComponent(MyComponent);
    ...
  });

  ...
});

它可以在 https://www.npmjs.com/package/ng2-mock-component.