web-dev-qa-db-ja.com

Angular：コンポーネントの出力が出力されないことの単体テスト

次のようなコンポーネントがあるとしましょう。

@Component({
  selector: 'example',
  template: ` `
})
export class ExampleComponent {
  value: any;
  @Output() output: EventEmitter<any> = new EventEmitter();

  onValueChange(newValue: any) {
    if (newValue !== this.value) {
      this.value = newValue;
      this.output.emit(newValue);
    }
  }
}

私は以下のようなテストを書きました。 onValueChangeがvalueと同じ値で呼び出された場合、コンポーネントが重複した値を出力しないことをテストしたいと思います。監視可能なサブスクリプションが呼び出されないという単体テストのベストプラクティスはありますか？私が技術的に行ったことは機能しますが、少しハッキーな感じがします。

describe('ExampleComponent', () => {
  it('should not output duplicate values', () => {
    const component = new ExampleComponent();
    component.value = 1;
    component.output.subscribe(value => {
      // if the output is not triggered then we'll never reach this 
      // point and the test will pass
      expect(true).toEqual(false);
    });
    component.onValueChange(1);
  });
});
angularjasminerxjs
9
Rich McCluskey

次のようなスパイを使用できます。

describe('ExampleComponent', () => {
  it('should not output duplicate values', () => {
    const component = new ExampleComponent();        
    spyOn(component.output, 'emit');

    component.value = 1;
    component.onValueChange(1);

    expect(component.output.emit).not.toHaveBeenCalled();
  });
});
12
Mohamed Gara

それはあなたがそれをする方法とほとんど同じです。バリエーションは次のとおりです。

describe('ExampleComponent', () => {
  it('should not output duplicate values', () => {
    const component = new ExampleComponent();
    let numEvents = 0;
    component.value = 1;
    component.output.subscribe(value => ++numEvents);
    component.onValueChange(1);
    expect(numEvents).toEqual(0);
  });
});
2
Brandon