Databases
StackOverflow2013
Postsdbo
POUnit testing a directive with <select>
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUnit testing a directive with <select>
    text
    copied!<p>I have a directive called <code>&lt;dimension&gt;</code> that renders html:</p> <pre><code>angular.module('myApp.directives'). directive('dimension', ['$rootScope', 'Dimension', function($rootScope, Dimension) { return { restrict: 'E', scope: { ngModel: '=', inputs: '=inputsModel', url: '@', listenFor: '@', broadcastOnChange: '@' }, controller: function($scope, $element, $attrs, $transclude, Dimension) { this.get = function() { Dimension.get($attrs.url, $scope.inputs).then(function(data) { $scope.alloptions = data; }); }; }, link: function($scope, $element, $attrs, $controller) { $controller.get(); // Listen for changes to select, and broadcast those changes out to rootScope var dimension = $($element).find('select'); dimension.on('change', function(event) { $rootScope.$broadcast('DimensionDirective.change', $attrs.broadcastOnChange); }); // Listen for the broadcast, and react if the value of the broadcast is in the listen-for attribute list $rootScope.$on('DimensionDirective.change', function(event, value) { if (value == $scope.listenForArray) { $controller.get(); } }); }, template: '&lt;div&gt;' + '&lt;label ng-transclude&gt;&lt;/label&gt;' + '&lt;fieldset&gt;' + '&lt;div class="form-group"&gt;' + '&lt;select ng-model="ngModel" ng-options="x for x in alloptions" multiple class="form-control"&gt;&lt;/select&gt;' + '&lt;/div&gt;' + '&lt;/fieldset&gt;' + '&lt;/div&gt;', replace: true, transclude: true }; }]). factory('Dimension', ["$http", function($http) { return { get: function(_url, _inputs) { var future; future = $http({ url: _url, method: 'POST', data: _inputs }); return future.then(function(response) { return response.data; }); } }; } ]); </code></pre> <p>I now want to create a unit test to validate that there are the correct number of elements in the select, after they loaded from xhr. I created a unit test that looks roughly like this:</p> <pre><code>describe('directive', function() { var $httpBackend; beforeEach(module('myApp.directives')); beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) { $httpBackend = _$httpBackend_; $httpBackend.expectPOST('url'). respond(["Item 1", "Item 2"]); })); it('should load select\'s options from xhr on render', function() { inject(function($compile, $rootScope) { var element = $compile('&lt;dimension ng-model="inputs.model" url="url"&gt;Dimension&lt;/dimension&gt;')($rootScope); var select = element.find('select'); expect(element.find('select').length).toBe(2); //TODO this isn't right. }); }); }); </code></pre> <p>However, that last expect() isn't doing the right thing. Any suggestions on how to test that the <code>&lt;select&gt;</code> loads the right information and displays it?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload