如何在单击事件发生时对下拉列表执行单元测试

Question

我在角度应用程序上运行单元测试，当我点击下拉列表时，它应该通过更新ID号等前端数据来响应

前端模板

<mat-menu #menuFilter="matMenu">
   <button *ngFor="let customer of customers; let i = index" 
   (click)="onCustomerChange(i)" mat-menu-item class="selectCustomerData"> 
   {{owner.id}}</button>
 </mat-menu>

后端，打字稿

onCustomerChange(i) {
    console.log(this.customers[i].ownerid);
    this.customerNumber = this.customers[i].ownerid;
    this.customerName = this.customers[i].ownername;
}

测试运行

it('should update the customer number on selecting a value from drop down',()=>{
  fixture.detectChanges();
//what should I do here
 })

Answer 1

好的，首先，代码改进：

<mat-menu #menuFilter="matMenu">
   <button *ngFor="let customer of customers" 
   (click)="onCustomerChange(customer)" mat-menu-item class="selectCustomerData"> 
   {{owner.id}}</button>
 </mat-menu>

在ts：

onCustomerChange(customerObj) {
   console.log(customerObj.ownerid);
   this.customerNumber = customerObj.ownerid;
   this.customerName = customerObj.ownername;
}

现在，对于单元测试：

  it('should update the customer number on selecting a value from drop down', () => {
    component.customers = [{ ownerid: 1, ownerName: 'Person1' }, { ownerid: 2, ownerName: 'Person2' }];
    spyOn(component, 'onCustomerChange').and.callThrough();
    const e = fixture.debugElement.nativeElement.querySelectorAll('.selectCustomerData');
    e[1].click();
    expect(component.onCustomerChange).toHaveBeenCalledWith({ ownerid: 2, ownerName: 'Person2' });
    expect(component.customerNumber).toBe(2);
    expect(component.customerName).toBe('Person2');
  });

你可以在角度单元测试中使用refer to this blog to get very elaborate examples 。

Answer 2

这有点工作要做。

首先，你必须将id放在mat-menu的按钮上，以便通过querySelector识别。在这里，我使用index与一些字符串连接。制作自己的逻辑并在spec文件中关注它。在这里，我也将{{owner.id}}更改为{{customer.ownerid}}，因为我不知道owner.id是指什么，它与答案无关。此外，我添加了按钮来触发菜单，因为您还没有提到如何操作。

<mat-menu #menuFilter="matMenu">
  <button *ngFor="let customer of customers; let i = index" [id]="'btn_'+i"
          (click)="onCustomerChange(i)" mat-menu-item class="selectCustomerData">
    {{customer.ownerid}}</button>
</mat-menu>

<!-- Refer to the spec.ts how to trigger this, since I don't know your logic.-->
<button mat-icon-button [matMenuTriggerFor]="menuFilter" id="btnMenu">
  Click Here to Trigger the Menu
</button>

现在的规格

let dom;
let button;
beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
   // You can initialize these here, if you are planning to use it inside the multiple 
   // test cases
    dom = fixture.nativeElement;
    button = dom.querySelector('#btnMenu');
    fixture.detectChanges();
  });

 it('should update the customer number on selecting a value from drop down', () => {
    // initially no mat-menu is opened
    let menu = dom.parentNode.querySelector('.mat-menu-panel');
    expect(menu).toBeFalsy();

    // trigger the menu
    button.click();

    // mat menu should be open now
    menu = dom.parentNode.querySelector('.mat-menu-panel');
    expect(menu).toBeTruthy();

    // click on the first element of the menu,it should pass the 0 index to the 
    // onCustomerChange method
    dom.parentNode.querySelector('#btn_0').click();
    expect(component.customerNumber).toBe(component.customers[0].ownerid);
  });

您也可以将其实现为3个不同的测试用例。希望你有这个想法。

请享用！！