角5コンポーネントのテストで選択してトリガーしたイベント

Question

私はドロップダウンを持つコンポーネントを持っています。変更すると、配列をフィルタリングしてイベント値に基づいて配列からselectedProductを取得するイベントをトリガします。次のように

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

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

私の選択ドロップダウン：これはすべて私がテストしたいが働く

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

：

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

製品オブジェクトは、オブジェクトであります私のコンポーネントテストでは、選択値を変更するとイベントがトリガされ、正しい値が取得されます。

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です。ドロップダウンで変更された値を使用してイベントを発生させるにはどうすればよいですか？

Answer 1

それぞれの前に、コールスルーなしで関数のspyOnを設定していたことが分かります。次のようにコードを作業するです：

products`は、私はそれが配列だったが、その後、私はそれを行うには、有効なテストだと思うのコードのコピーペースト