Angular click select option in component test

Question

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\'));
sele         


        

Answer 1

I expanded on Emmy's answer a little bit. Here is a working "helper" method for selecting material drop downs.

import { By } from '@angular/platform-browser';

export default class TestUtils {
  static selectDropdown(id: string, fixture: any): void {
    const select = fixture.debugElement.query(By.css(`#${id}`)).nativeElement;
    select.click();
    fixture.detectChanges();
    const selectOptions = fixture.debugElement.queryAll(By.css(`.${id}Option`));
    selectOptions[5].nativeElement.click();
    fixture.detectChanges();
  }
}

This lets your specify the drop down you would like to select (by id) and the index you would like to select. The only caveat for this method is you have to add a class to your mat-option elements in your dropdown. Example:

{{trim}}

Just make sure the class for the mat-option contains the ID with the addition of 'Option'.

This solves an issue with Emmy's answer where if you have multiple drop downs on a single form, you can specify which mat-option you click on.

You can make use of the above extension method by referencing it in your test like so:

TestUtils.selectDropdown('yearDropdown', 1, fixture);
expect(fixture.componentInstance.onYearChange).toHaveBeenCalled();