Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
138
rated 0 times [  145] [ 7]  / answers: 1 / hits: 22431  / 6 Years ago, sun, december 2, 2018, 12:00:00

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.


More From » angular

 Answers
64

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

[#52998] Wednesday, November 28, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
karivictoriab

Total Points: 530
Total Questions: 90
Total Answers: 95

Location: Honduras
Member since Sun, Dec 26, 2021
2 Years ago
;