web-dev-qa-db-ja.com

angular2テスト、サブコンポーネントをモックする方法

ジャスミンテストでサブコンポーネントをモックするにはどうすればよいですか？

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 {}

このコンポーネントをテストするとき、これらの2つのサブコンポーネントをロードしてテストしたくありません。 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');
    });
  });

これが私の配管工の例です。

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

unit-testingtestingjasmineangularcomponents
50
allenhwkim

要求に応じて、サブコンポーネントをinput/outputでモックする方法に関する別の回答を投稿しています。

それでは、タスクを表示するTaskListComponentがあり、タスクの1つがクリックされるたびに更新するということから始めましょう。

<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-taskcomponentをテストしたくありません。

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

schemas: [CUSTOM_ELEMENTS_SCHEMA]in TestBedを使用すると、テスト対象のコンポーネントはサブコンポーネントをロードしません。

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のリリースバージョンで機能します。 ここに完全なコードサンプル 。

CUSTOM_ELEMENTS_SCHEMAの代わりにNO_ERRORS_SCHEMAがあります

23
Klas Mellbourn

エリック・マルティネスのおかげで、私はこの解決策を見つけました。

ここに記載されているoverrideDirective関数を使用できます https://angular.io/docs/ts/latest/api/testing/TestComponentBuilder-class.html

3つのパラメーターが必要です。 1.実装するコンポーネント2.オーバーライドする子コンポーネント3.モックコンポーネント

解決された解決策はここにあります http://plnkr.co/edit/a71wxC?p=preview

これは、配管工からのコード例です

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');    
  });
});
7
allenhwkim

これを少し簡単にするために、簡単な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 で入手できます。

5
Christian Nunciato