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.

codequiet · Accepted Answer · 2018-12-06 06:30:16Z

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

it gives error Expected a spy, but got Function. @codequiet. I wanted to use expect(component1.somemethod).toHaveBeenCalled();
Right, component1.somemethod is a function, but toHaveBeenCalled() must be used with a Jasmine spy. The correct syntax in this case would be let methodSpy = spyOn(component1, 'onChange').and.callThrough(); and after you've triggered the method, expect(methodSpy).toHaveBeenCalled();.
It works exactly the same way. For example, if your HTML contains (input)="handleInput($event)", then you can create a spy with spyOn(component, 'handleInput').and.callThrough(). It would be best if you just check for the actual result of the function though. If the input event should modify some data, check that the data has changed, or if the input event causes a button to become enabled, check that the button is enabled, etc.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related