CSS选择器没有在角度单元测试中找到dom元素w/karma&chai

Question

我有一个测试指令,我要验证它有几个具有类属性的特定元素.当使用karma + chai进行测试时,我只能选择element.find实际的dom元素(即div).使用element.find按类或ID定位失败.有人可以在这种情况下照亮我使用的api吗？

这是单元测试

var expect = chai.expect;
var assert = chai.assert;
beforeEach(module('blah'));
beforeEach(module('mytemplates')); // for ng-html2js

describe('Testing notifications directive', function() {
    var scope, elem, directive;

    var html = '<notifications></notifications>';
    var rendered;
    beforeEach(function(){
        inject(function($compile, $rootScope) {
            elem = angular.element(html);
            scope = $rootScope.$new();
            scope.notificationList =_notificationsspecmockdata;
            rendered = $compile(elem)(scope);
            scope.$digest();
        });
    });

    it('should render a notifications element', function() {
        console.log(elem);
        console.log(elem.find('.close-icon'))
        console.log('------------------');
        console.log(rendered);
        console.log(rendered.find('.close-icon'))
        console.log('------------------');
        console.log(elem.find('div').length);

        expect(elem.find('div').length).to.eql(6); // works
    });
});

和输出.正如你所看到的那样,dom元素确实存在于我正在寻找的类中.

Object{0: <li id="notificationdropdown" class="notification-dropdown hidden-xs hidden-sm">
    <a href="#" class="trigger">
        <i class="icon-warning-sign"></i>
        <span class="count ng-binding"></span>
    </a>
    <div class="pop-dialog">
        <div class="pointer right">
            <div class="arrow"></div>
            <div class="arrow_border"></div>
        </div>
        <div class="body">
            <a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
            <div class="notifications">
                <h3 class="ng-binding">You have 0
                    notifications</h3>
                <!-- ngRepeat: table in problemTables -->

            </div>
        </div>
    </div>
</li>, length: 1}
LOG: Object{}
LOG: '------------------'
LOG: Object{0: <li id="notificationdropdown" class="notification-dropdown hidden-xs hidden-sm">
    <a href="#" class="trigger">
        <i class="icon-warning-sign"></i>
        <span class="count ng-binding"></span>
    </a>
    <div class="pop-dialog">
        <div class="pointer right">
            <div class="arrow"></div>
            <div class="arrow_border"></div>
        </div>
        <div class="body">
            <a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
            <div class="notifications">
                <h3 class="ng-binding">You have 0
                    notifications</h3>
                <!-- ngRepeat: table in problemTables -->

            </div>
        </div>
    </div>
</li>, length: 1}
LOG: Object{}
LOG: '------------------'
LOG: 6

Answer 1

使用document.querySelector().

返回与指定的选择器组匹配的文档中的第一个元素(使用文档节点的深度优先预先遍历遍历).

要在测试中选择一个类/ ID,请执行...

element[0].querySelector('.klass');
element[0].querySelector('#ID');

另外,正如@Brett Caswell在评论中所说,选择同一类的所有元素,使用document.querySelectorAll()