Question

我正在angular应用上运行单元测试，当我单击下拉列表时，它应该通过更新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与一些字符串连接在一起使用。制定自己的逻辑，并在规格文件中遵循它。在这里，我也将{{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个不同的测试用例。希望你有主意。！

享受！

点击事件发生时如何在下拉菜单中执行单元测试

2 个答案: