Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular directive testing select options

How do you select an option in an angular directive test?

 var options = elem.find('#test-code-select option');
 expect(angular.element(options[0]).text()).to.equal('234');
 expect(angular.element(options[1]).text()).to.equal('236');

These work fine, but how do I manually force the selection of an option?

angular.element(options[1]).click(); //nope
angular.element(options[1]).trigger('click'); //nope
angular.element(options[1]).attr('selected', true); //nope

EDIT:

The directive template includes a select with an internal ng-model, I suspect this is the cause of the problem:

<select id='test-code-select' ng-options='code as code for code in codeList' ng-model='code'>
like image 962
psugar Avatar asked May 27 '15 23:05

psugar


People also ask

What is fixture detectChanges ()?

fixture is a wrapper for our component's environment so we can control things like change detection. To trigger change detection we call the function fixture.detectChanges() , now we can update our test spec to: Copy it('login button hidden when the user is authenticated', () => { expect(el. nativeElement. textContent.

What is @directive in Angular?

What is meant by directives in Angular? Directives are classes that add new behavior or modify the existing behavior to the elements in the template. Basically directives are used to manipulate the DOM, for example adding/removing the element from DOM or changing the appearance of the DOM elements.

What is Componentfixture in Angular testing?

You can create a component fixture with TestBed. createComponent . Fixtures have access to a debugElement , which will give you access to the internals of the component fixture. Change detection isn't done automatically, so you'll call detectChanges on a fixture to tell Angular to run change detection.

What is the best testing framework for Angular?

When it comes to the Angular world, Jasmine is the recommended testing framework. Angular CLI comes by default with Jasmine and Karma as the test runner. It generates test files at component creation, collects unit tests, runs karma, and displays results on a web page.


1 Answers

This works for me:

var select = elem.find('#test-code-select');
select.val('236').change();
expect(scope.code).toEqual('236');

Note the call to change().

like image 95
ejain Avatar answered Nov 15 '22 12:11

ejain