Как протестировать компонент при событии «Вызвать»

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, и проверяет их содержимое в зависимости от вашей логики.