CODEWITHSUNDEEP
javascriptangularjsjqlite
timmy
timmy

Reputation: 1758

How To Find Elements By Id in Angular Directive Test

I have a directive that renders the following html in a unit test:

<div id="published-envs">
    <strong>Published to</strong>
    <!-- ngRepeat: env in fundConfigurationVersion.publicationEnvironments --><div data-ng-repeat="env in fundConfigurationVersion.publicationEnvironments" class="ng-binding ng-scope">
            QA (Jan 29, 2015)
    </div><!-- end ngRepeat: env in publicationEnvironments --><div data-ng-repeat="env in publicationEnvironments" class="ng-binding ng-scope">
            PROD (Jan 30, 2015)
    </div><!-- end ngRepeat: env in publicationEnvironments -->
</div>

I am trying to get a hold of the <div id="published-envs"> and assert that it has two child <div>'s in it.

I have tried the following but it does not work: var environments = element.find('#published-envs'); //comes back empty

What is the correct way to find elements by id in an angular unit test?

Upvotes: 1

Views: 3936

Answers (1)

scniro
scniro

Reputation: 16989

According to Angular Element Docs, .find()

Limited to lookups by tag name

Try 

var environments = angular.element(document.getElementById('published-envs')).find('div');

JSFiddle Example

Edit

For compiled markup, it's essentially the same, just inject the $compile service and use as follows 

var comipledEnvironments = $compile(angular.element('<div id="published-envs"><div></div><div></div></div>'))($scope).find('div')

console.log(comipledEnvironments); // 2 <div>'s

Updated JSFiddle

Upvotes: 1

Related Questions