Search code examples
javascriptangularjskarma-mocha

input:not([type="checkbox"]) not working in angular test


Below is my compiled template in beforeEach function

template = '<form name="configForm">' +
                  '<input type="number"/>' +
                  '<input type="checkbox"/>' +
                  '<input type="text"/>' +
                  '<div class="form-error" ng-show="configForm.$error.max">Error</div>' + 
                  '</form>';
element = angular.element(template);   
element = $compile(element)($scope);

Why is below find method returning me empty results?

var dirElementInput = element.find('input:not([type="checkbox"])');
console.log(dirElementInput); 
console.log(dirElementInput.length);

But when i use it like this, it works:

var dirElementInput = element.find('input');
console.log(dirElementInput); 
console.log(dirElementInput.length);

Object{0: <input type="number">, 1: <input type="checkbox">, 2: <input type="text">, length: 3}

LOG: 3

Solution

  • The jQueryLite that Angular uses, the find() method is limited to finding by tag name, so you cannot use :not here like you would in the full jQuery library....

    An alternative would be to write a small method to filter the input types.

    For reference, here's the Angular Documentation on find().