How to mock an event and pass it to a method in jasmine tests?

Question

I am new to Jasmine tests and I am trying to write unit test for change event,which requires event as mock value in the method argument and I am unable to achieve it. this is what I have tried

    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();`

my html code looks like this

<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>  

my component method which will be called on change onChange($event) {

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

I want to write a test case to test positive and negative flows in case 1.

Answer 1

You've got a couple things going on here. First, there's no need to use spyOn for a method inside the component you're testing. Instead, you should use an expect() to check if the onChange() method did what it was supposed to. For example:

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
}

Second, you have a typo here: const select = compiled.query(By.css('#elect-menu')).nativeElement; - should be '#select-menu';

If you really just want to use a spy on your method, the correct syntax is:

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