Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select and Option component not working with tests in Karma

See original GitHub issue

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?

Create a new CLI project
Install and import angular material
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>
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?

Issue Analytics

State:
Created 6 years ago
Reactions:3
Comments:10 (2 by maintainers)

Top GitHub Comments

5reactions

glendaviesnzcommented, May 17, 2018

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

5reactions

willshowellcommented, Jun 15, 2017

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

Top Results From Across the Web

Angular click select option in component test - Stack Overflow

I was able to get the value that is now selected by doing selectEl.innerText.trim() . Not sure if this is the best way...

ng test - Angular

Option Description Value Type Defau... ‑‑browsers Override which browsers tests are run against. string ‑‑code‑coverage Output a code coverage report. boolean false ‑‑code‑coverage‑exclude Globs to exclude...

Front-End Unit Testing Using Karma Test Runner

This tutorial explains how to setup Karma & automate Front-End Unit Testing Using Karma, basic configuration options for Karma.conf.js file ...

Angular Test Select Dropdown - ConcretePage.com

This page will walk through Angular unit test select dropdown example. In our component we have two select elements and their property ...

Configuration File - Karma

If false, Karma does not clear the context window upon the completion of running the tests. Setting this to false is useful when...