Testing whether certain elements are visible or not
angularjs, karma-runner
Solution
This behavior has changed in Angular 1.2 because of `ng-animate`.
The code for `ngShow` is:
var ngShowDirective = ['$animate', function($animate) {
return function(scope, element, attr) {
scope.$watch(attr.ngShow, function ngShowWatchAction(value){
$animate[toBoolean(value) ? 'removeClass' : 'addClass'](element, 'ng-hide');
});
};
}];
Which means that it will add/remove class `ng-hide` to hide/show the element.
Thus, as an example, the right way to test if the element is hidden would be:
expect(element.find('.value-entry input').hasClass('ng-hide')).toBe(true);
Problem
How do I find out if an element is visible or hidden in testacular (jasmine)? My DOM looks like: ``` <div class="span5 value-entry"> <input type="text" ng-model="query.value" placeholder="Enter value" class="input-large" ng-show="genericInput(criteria.attribute)"> <select ng-model="query.value" ng-options="entry for entry in filteredValue(criteria.attribute)" class="input-medium" ng-show="!genericInput(criteria.attribute)"> <option value="">-- Select Value --</option>. </select> </div> ``` Either the select is shown or the input box, but not both. I wish to check which element is visible (based on some other criteria), but I can't seem to figure out how to get the code working. I have written the following code: ``` expect(element('.value-entry input').is(':visible')).toBe(true); ``` But I get an error: ``` TypeError: Object #<Object> has no method 'is' ``` How do I check if the input is visible and the select is hidden at the same time (and vice versa)? EDIT : I wish to add here that this is an end to end test