javascript - Why doesn't Angular.element/jqlite find top-level elements? -

javascript - Why doesn't Angular.element/jqlite find top-level elements? -

when writing mocha/chai test angular view, i've discovered jqlite (since i'm not using jquery), won't find top-level elements.

i've boiled downwards simple example:

/* jshint expr:true */ describe( "view", function() { 'use strict'; var $compile, $rootscope; beforeeach( inject( function( _$compile_, _$rootscope_ ) { $compile = _$compile_; $rootscope = _$rootscope_; } ) ); var view; beforeeach( function() { var html = "<div><span>div[0].span</span><p>div[0].p</p></div><div><h1>div[1].h1</h1><p>div[1].p</div>"; view = $compile( angular.element( html ) )( $rootscope ); } ); it( "should find 2 p tags", function() { expect( view.find( "p" ).length ).to.equal( 2 ); } ); it( "should find 1 span tag", function() { expect( view.find( "span" ).length ).to.equal( 1 ); } ); it( "should find 2 div tags", function() { expect( view.find( "div" ).length ).to.equal( 2 ); } ); } );

in example, first 2 tests pass, 3rd fails:

view ✓ should find 2 p tags ✓ should find 1 span tag ✗ should find 2 div tags assertionerror: expected 0 equal 2 @ ...

this seems because divs top-level elements, span , p tags beneath them. if enclose whole thing in tag, 3rd test start pass.

why?

.find searches descendants reply 0.

from http://api.jquery.com/find/

given jquery object represents set of dom elements, .find() method allows search through descendants of these elements in dom tree , build new jquery object matching elements. .find() , .children() methods similar, except latter travels single level downwards dom tree

javascript angularjs karma-runner chai