Components: Select and Option component not working with tests in Karma

[YoannBureau]

Bug :

Select component from Angular Material don't load Option components in Karma

What is the expected behavior?

Using Karma & testbed, I should be able to fetch Option components related to my Select component instance

What is the current behavior?

Only the Select is displayed, and if I fetch for Options, I find nothing. The same in Karma preview : if I click on the Select, nothing happens (i.e. no option is shown)

What are the steps to reproduce?

1. Create a new CLI project
2. Install and import angular material
3. In the app.component.html file, add a Select components with options, such as :
   <md-select placeholder="Favorite food"> <md-option [value]="1">1</md-option> <md-option [value]="2">2</md-option> <md-option [value]="3">3</md-option> </md-select>
4. Launch Karma (ng test command) and see that there is nothing inside the Select component instance

What is the use-case or motivation for changing an existing behavior?

Allow us to unit test our pages using Select components

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/animations": "^4.1.3",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/material": "^2.0.0-beta.6",

Is there anything else we should know?

[jelbourn]

Check out our unit tests for md-select for an example: https://github.com/angular/material2/blob/master/src/lib/select/select.spec.ts

[YoannBureau]

I think you don't get it. I'm not saying that my test doesn't work. I'm saying that the karma preview is KO.

Because it's not possible to reproduce it on plunker or codepen, i've made a zip file with an empty project that reproduces the problem : http://s000.tinyupload.com/index.php?file_id=35616718992258616489

[willshowell]

@YoannBureau the unit tests that @jelbourn pointed to should be sufficient. You may be particularly interested in this section.

[kadosh]

@YoannBureau, maybe what you're experiencing is some confusion due to the fact that the md-select is not responding as you expect when manually clicking on it while running the tests. But it is actually working if you run everything directly from the tests. For example, if you run the following inside your test, you will see the md-select opening the options, but if you click directly on it, you won't see anything.

const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
trigger.click();
fixture.detectChanges();

[Svoig]

I'm running into the same issue using md-select with the ReactiveFormsModule. I haven't been able to use .click() to display my md-option elements in my component test.

My test looks like this:

beforeEach(function (this: Context) {
   ...
   this.component.list = this.mockList;
   this.form.setValue({
    ...this.mockFormValue,
   });
   this.fixture.detectChanges();
   this.selectEl.click();
   this.fixture.detectChanges();

[iamwhitebox]

@jelbourn any advice on unit testing components for version ^5.0.2 of angular material? It appears as though MdDialogModule.forRoot() has been deprecated, can the material components be imported individually?

[itLead797]

I'm doing something very similar to what @kadosh mentions above, but the mat-options do not appear to populate the DOM in Karma. The dropdown mat-option elements are NULL.

`
beforeEach(() => {
fixture = TestBed.createComponent(ClassCodeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
instance = fixture.debugElement.nativeElement;
fixture.detectChanges();
});

it('should perform type-ahead search', () => {
setInputValue('#businessDescriptionFld', 'Book');
fixture.detectChanges();
console.log(instance.querySelector('#mat-option-1');
let value = instance.querySelector('#mat-option-1').value;
expect(value).toContain('Bookstore');
});

// used to set value on html field element
function setInputValue(selector: string, value: string) {
fixture.detectChanges();
tick();
const input = fixture.debugElement.query(By.css(selector)).nativeElement;
input.value = value;
input.dispatchEvent(new Event('input'));
tick();
}
`
The console.log statement provides LOG: null ... I've downloaded the code located at "https://github.com/angular/material2". Unfortunately it's lacking .spec examples in places where it would be exceptionally helpful. (i.e. src/material-examples/autocomplete-display). Is there any possibility of getting a working example of some testBed tests?

[cdchow]

to echo the recent comments, it looks like mat-options are not appearing in the overlay container despite clicking on the mat-select element -- i've also verified that the data I use to populate my mat-options is indeed present prior to triggering the click event

beforeEach(fakeAsync(() => {
  trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
  trigger.click();
  fixture.detectChanges();

  options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
}));

describe('when selecting custom type', () => {
  it('then shows new input field', () => {
    console.log(options); // NodeList{}
    console.log(overlayContainerElement); // <div class="cdk-overlay-container"></div>
  });
});

[glendaviesnz]

Took us a bit of time working through the specs suggested above to get this working for our use case - we put together a helper class to deal with some of the bolierplate around select menu testing which may be helpful to others - https://gist.github.com/glendaviesnz/fc8e99b41f0dda8b1c0dc4d397e0d152

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}