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.如何使用下拉列表中更改的值触发事件？

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',() => {

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

      fixture.detectChanges();

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

    });
  });