web-dev-qa-db-ja.com

Angular 5コンポーネントテストの選択およびトリガーされたイベント

ドロップダウンのあるコンポーネントがあります。変更すると、配列をフィルタリングするイベントがトリガーされ、イベント値に基づいて配列からselectedProductが取得されます。

私のコードは次のとおりです。

  public onProductChanged(event): void {
    this.selectedProduct = this.products.find((product: Products) => product.id == event.target.value);
  }

私の選択ドロップダウン：

<select id="product" (change)="onProductChanged($event)">
    <option>--- Please Select ---</option>
    <option *ngFor="let product of products" [value]="product.id"> {{ product.displayName }} </option>
</select>

製品オブジェクトはオブジェクトです：

{ "id": 1, "name": "name_here", "displayName": "Name Here" }

これはすべて機能しますが、コンポーネントテストで、選択値を変更するとイベントがトリガーされ、正しい値が取得されることをテストしたいと思います。

私のテストコードは次のとおりです。

  describe('Product selection', () => {
    it('should select product', () => {

      expect(component.selectedProduct).toBeUndefined();
      productSelectElement.nativeElement.value = 'Product Name';
      productSelectElement.nativeElement.dispatchEvent(new Event('change'));

      fixture.detectChanges();

      expect(component.onProductChanged).toHaveBeenCalled();
      expect(component.selectedProduct).toEqual({ "id": 1, "name": "product_name", "displayName": "Product Name" });
    });
  });

ProductChangedイベントが呼び出され、そのテストに合格しました。ただし、selectedProductは常にnullです。ドロップダウンの変更された値を使用してイベントを発生させるにはどうすればよいですか？

angulartestingcomponentsangular5
5
Steve Fitzsimons

以前は、それぞれの前に、呼び出しなしで関数のspyOnを設定していたことがわかりました。作業コードは次のとおりです。

  beforeEach(() => {
    fixture = TestBed.createComponent(SelectProductsComponent);
    component = fixture.componentInstance;
    component.products = products;
    fixture.detectChanges();

    productSelectElement = fixture.debugElement.query(By.css('#products'));

    spyOn(component, 'onProductChanged').and.callThrough();

    expect(component.products).toEqual(products);
    expect(component.selectedProduct).toBeUndefined();
  });

  describe('Product selection', () => {
    it('should select product', () => {

      productSelectElement.nativeElement.value = 1;
      productSelectElement.nativeElement.dispatchEvent(new Event('change'));

      fixture.detectChanges();

      expect(component.onProductChanged).toHaveBeenCalled();
      expect(component.selectedProduct).toEqual({ "id": 1, "name": "product_name", "displayName": "Product Name" });

    });
  });
10
Steve Fitzsimons