Как смоделировать событие и передать его методу в тестах жасмина?

Question

Я новичок в тестах Жасмин и пытаюсь написать модульный тест для события изменения, для которого в аргументе метода требуется событие как фиктивное значение, и я не могу его достичь.это то, что я пробовал

    it('sample test', () => {
    const compiled = fixture1.debugElement;
    const event = {
    preventDefault: jasmine.createSpy(),
    srcElement: jasmine.createSpy()
};
spyOn(component1, 'onChange');
   const select = compiled.query(By.css('#elect-menu')).nativeElement;
   select.value = select.options[1].value;
   select.dispatchEvent(new Event('change'));
   fixture1.detectChanges();
   expect(component1.onChange).toHaveBeenCalled();`

мой HTML-код выглядит следующим образом

<select id="select-menu" (change)="onChange($event)" (dblclick)="onChange($event)"> 
         <option value="default">some value</option>         
         <option  *ngFor="let line of lines"  [value]="line.id" >{{line.name}}</option>
     </select>  

мой компонентный метод, который будет вызываться при изменении onChange ($ event) {

const selected = parseInt($event.target.value);
switch (selected) {
      case 1: {
        //some logic
         break;
      }
}

Я хочу написать контрольный пример для проверки положительного и отрицательного потоков в случае 1.

Answer 1

У тебя здесь происходит пара вещей.Во-первых, нет необходимости использовать spyOn для метода внутри тестируемого компонента.Вместо этого вы должны использовать функцию ожидаем (), чтобы проверить, что метод onChange () сделал то, что должен был.Например:

onChange($event) {
    const selected = parseInt($event.target.value);
    switch (selected) {
        case 1:
            this.testValue = 1; // Set some variable based on the selected value
            break;
        ...
    }
}

it('sample test', () => {
    const compiled = fixture1.debugElement;
    const select = compiled.query(By.css('#select-menu')).nativeElement;
    select.value = select.options[1].value;
    select.dispatchEvent(new Event('change'));
    fixture1.detectChanges();

    expect(component.testValue).toBe(1); // Check to see if the variable is correctly set
}

Во-вторых, у вас есть опечатка здесь: const select = compiled.query(By.css('#elect-menu')).nativeElement; - должно быть '#select-menu';

Если вы действительно просто хотите использовать шпиона в своем методе,правильный синтаксис:

let methodSpy = spyOn(component1, 'onChange').and.callThrough();
// Do something that triggers the method
expect(methodSpy).toHaveBeenCalled();