I have tried the following to try to click an option in a select dropdown none of which work.
selectEl = fixture.debugElement.query(By.css('#dropdown'));
selectEl.nativeElement.options[3].nativeElement.dispatchEvent(new Event('click'));
selectEl.queryAll(By.css('option'))[3].nativeElement.click();
selectEl.nativeElement.options[3].nativeElement.click();
After each i run fixture.detectChanges();
to run the change detection but when I go to check the elements value it hasn't changed. expect(selectEl.nativeElement.options[selectEl.nativeElement.selectedIndex].textContent).toBe('name2');
Am I missing something simple to get this to work?
The way to change the selected option of a dropdown is to set the dropdown value and then dispatch a change
event.
You can use this answer as reference: Angular unit test select onChange spy on empty value
In your case, you should do something like this:
const select: HTMLSelectElement = fixture.debugElement.query(By.css('#dropdown')).nativeElement;
select.value = select.options[3].value; // <-- select a new value
select.dispatchEvent(new Event('change'));
fixture.detectChanges();