如何在茉莉花角度测试事件html答案

【问题标题】：How test event html in jasmine angular如何在茉莉花角度测试事件html
【发布时间】：2021-07-22 13:11:03
【问题描述】：

我的项目中有一些函数，但我决定选择这个作为例子。我要测试的功能是这个。

   <mat-select
      *ngIf="name != '' && formControl == undefined"
      [placeholder]="placeholder"
      [formControlName]="name"
      [multiple]="multiple"
      (selectionChange)="selectionChange($event)"
   >
   selectionChange = (event) => {
      let emit: any[] = [];
      if (this.multiple) {
         emit = this.selectOptions.filter((item) => {
            return event.value.find((item2) => item2 === item.value);
         });
      } else {
         emit = [this.selectOptions.find((item) => item.value === event.value)];
      }
      this.onSelectionChange.emit(emit.map((item) => item.original));
   };

而jasmine中使用spie的函数是这样的，我想调用selectionChange函数传递事件作为参数，但是没有成功

  it('deverá chamar a função selectionChange', () => {
      
    let select = fixture.debugElement.query(By.css('.mat-select')).nativeElement;
   
    fixture.detectChanges();

    spyOn(component,'selectionChange').and.callThrough();
    component.selectionChange(select.event);
    expect(component.selectionChange).toHaveBeenCalled();
  });

【问题讨论】：

标签： angular testing jasmine

【解决方案1】：

我认为您可以在DebugElement 上利用triggerEventHandler。

试试这个：

import { By } from '@angular/platform-browser';
...
it('deverá chamar a função selectionChange', () => {
  let select = fixture.debugElement.query(By.css('mat-select'));
  const selectSpy = spyOn(component, 'selectionChange').and.callThrough();
  // the first argument is the event you want to trigger,
  // the 2nd argument is the object that is emitted ($event)
  // mock $event however you wish
  select.triggerEventHandler('selectionChange', { value: [] });
  expect(selectSpy).toHaveBeenCalled();
});

【讨论】：