Question

在为角度视图编写Mocha / Chai测试时，我发现jqlite（因为我没有使用jQuery），因此无法找到顶级元素。

我把它简化为一个简单的例子：

/* 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 two p tags", function() {
        expect( view.find( "p" ).length ).to.equal( 2 );
    } );

    it( "should find one span tag", function() {
        expect( view.find( "span" ).length ).to.equal( 1 );
    } );

    it( "should find two div tags", function() {
        expect( view.find( "div" ).length ).to.equal( 2 );
    } );


} );

在这个例子中，前两个测试通过，第三个测试失败：

View
    ✓ should find two p tags
    ✓ should find one span tag
    ✗ should find two div tags
    AssertionError: expected 0 to equal 2
        at ...

这似乎是因为div是顶级元素，span和p标签位于它们之下。如果我将整个事物包含在另一个标签中，第三个测试将开始通过。

为什么？

Answer 1

.find仅搜索后代，因此答案为0。

来自http://api.jquery.com/find/

给定一个表示一组DOM元素的jQuery对象， .find（）方法允许我们搜索这些的后代 DOM树中的元素并从中构造一个新的jQuery对象匹配元素。 .find（）和.children（）方法类似，除了后者只沿着DOM树的单个级别旅行

为什么Angular.element / jqlite没有找到顶级元素？

1 个答案: