Question

我有一个下拉菜单的组件。

更改后，它会触发serviceChanged函数，该函数对数组进行过滤以根据事件值从数组中获取selectedProduct。

我想为serviceChanged函数编写单元测试代码。

请建议我如何编写单元测试用例以测试serviceChanged功能

我的代码如下：

下面是我的HTML

<select formControlName="selectedService" id="service" (change)="serviceChanged($event)">
    <option value=""  disabled>Select</option>
    <option *ngFor="let service of services" [value]="service.serviceCode">{{service.serviceName}}</option>
</select>

我用于在serviceChanged函数中传递服务代码的模拟数据如下：

const data = {   
    "serviceName":"UK 36 Month Mobile - no SIM card",
    "serviceCode":"V240M-DTM-24-MOBILE-UK-B"
};

我要调用的下拉值更改函数如下：

serviceChanged(event: any) {    
    const selectedServiceCode = event.target.value;
    const productIds: string[] = this.serviceProdctMapping[selectedServiceCode];
    if (productIds && productIds.length > 0) {
      this.serviceProducts = this.products.filter(p => productIds.indexOf(p.productCode) > -1);
    } else {
      this.serviceProducts = [];
    }
    const selectedService = this.services.find(s => s.serviceCode === selectedServiceCode);
    this.selectedService = selectedService;
    (this.details.get('service') as FormControl).setValue(selectedService.serviceCode);
    (this.details.get('serviceInfo') as FormControl).setValue(this.selectedService);
}


ngOnInit() {   
    this.subscription = this.dtmService.getInitialData().subscribe(data => {
      console.log('sample data', data);
      this.services = data.services;
      this.serviceProdctMapping = data.serviceProduct;
    });
}

以下是我的规格。 ts文件

it('Should populate selected service data', () => {
    component.serviceChanged(data.serviceCode);
    expect(component.selectedService).toEqual({ "serviceCode": "V240M-DTM-24-MOBILE-UK-B", "serviceName": "UK 36 Month Mobile - no SIM card"});   
});

Answer 1

首先，您需要模拟dtmService，因为它不是测试的主题。您可以执行以下操作：

@NgModule({
...
 providers: [
{
          provide: DtmService, useValue:
            getInitialData: () =>
              of({   
                "serviceName":"UK 36 Month Mobile - no SIM card",
                "serviceCode":"V240M-DTM-24-MOBILE-UK-B"
              })
        }
]
...
})

如果您想触发更改事件，可以执行以下操作：

const select = fixture.debugElement.query(By.css('select'));
select.nativeElement.value = 'serviceCodeX';
       dispatchEvent(select.nativeElement, 'change');
       fixture.detectChanges();
       tick();

请确保为此使用fakeAsync。

然后您在函数上创建一个间谍：

const spy = spyOn(component, 'serviceChanged');

要检查它是否被调用，您可以这样做：

expect(spy).not.toHaveBeenCalled();

此后，您可以通过执行与select相同的操作来获取对其他表单控件的引用，并根据您的逻辑检查其内容。

如何在选定的触发事件上测试组件

1 个答案: