Angular 5 组件测试选择和触发事件

Question

我有一个带有下拉菜单的组件。 更改后，它会触发一个事件，该事件会根据事件值过滤数组以从数组中获取 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 始终为空。如何使用下拉列表中更改的值来触发事件？

Answer 1

事实证明，在之前的每个函数中，我都为该函数设置了一个间谍On，而无需调用。工作代码如下：

  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" });

    });
  });

Answer 2

这是一个很好的问题，自从提出这个问题以来，Angular 已经发生了很大的变化。关于如何实现或测试

<select>

输入的文档非常少（即使在 Angular.dev 上）。

component.ts 应如下所示：

public onProductChanged(product): void {
  this.selectedProduct = product
}

组件.html：

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

组件.规格.ts：

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

    expect(component.selectedProduct).toBeUndefined();
    productSelectElement.nativeElement.value = 
      productSelectElement.nativeElement.options[1].value;
    productSelectElement.triggerEventHandler('ngModelChange', { "id": 1, 
      "name": "product_name", "displayName": "Product Name" });

    fixture.detectChanges();

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