angularjs - 如何使用测试 Angular 指令检查元素的可见性？

Question

我正在尝试为我的 angularjs 指令编写一个简单的测试。

该指令将一个 div 包装在另一个 div 中，创建第二个子项以显示“加载中”，并使用 $scope.ready 选择哪个子项可见。所以原始的 HTML 可能看起来像:

<loading>
  <div>This is my data</div>
</loading>

运行指令后的 HTML 如下所示:

<div>
  <div ng-show="ready">
    <div>This is my data</div>
  </div>
  <div ng-show="!ready">
    LOADING
  </div>
</div>

该指令在浏览器中运行时有效。我写了一个单元测试(mocha+shouldjs，但用 jasmine+expect 可能没问题)如下:

describe('loading', function(){
    var scope, element, loading, wrapper, parent;
    beforeEach(function () {
    inject(function ($compile,$rootScope) {
            scope = $rootScope;
            wrapper = $($compile('<div id="a"><loading><div id="b">RUN</div></loading></div>')($rootScope));
            element = wrapper.find("#b");
            parent = element.parent();
            loading = wrapper.children("div").children("div:eq(1)");
    });
    });
  it('should wrap the element with loading', function(){
        wrapper.children("div").children("div:eq(0)").children("div")[0].should.equal(element[0]);
  });
    it('should create the loading element', function(){
        loading.html().should.eql("Loading");
    });
    describe('when ready is false', function(){
        before(function () {
            scope.ready = false;
        });
        it('should show the loading element', function(){
            loading.is(":visible").should.be.true;
        });
        it('should hide the actual element', function(){
            element.is(":visible").should.be.false;
        });
    });
    describe('when ready is true', function(){
        it('should hide the loading element', function(){
            loading.is(":visible").should.be.false;
        });
        it('should show the actual element', function(){
            element.is(":visible").should.be.true;
        });
    });
});

嵌入有效，所有 HTML 都已添加并正确包装。但是没有元素是可见的。错误是(修剪):

Chrome 37.0.2062 (Mac OS X 10.9.5) directives loading when ready is false should show the loading element FAILED

AssertionError: expected false to be true

Chrome 37.0.2062 (Mac OS X 10.9.5) directives loading when ready is true should show the actual element FAILED

AssertionError: expected false to be true

Chrome 37.0.2062 (Mac OS X 10.9.5): Executed 7 of 7 (2 FAILED) (0.235 secs / 0.048 secs)

注意:是的，我在我的测试套件中包含了 jQuery，所以我可以执行上面的 element.is() 和类似的操作。当然，它是行不通的，所以我们总是欢迎一种更简单且实际有效的方法。

更新:

根据@Esteban 提供的以下信息，我已对其进行了简化，但仍然无法正常工作。更改 $scope.ready = true 似乎没有 Angular 来处理元素。 fiddle 在这里:

http://jsfiddle.net/L825ks1w/6/

Answer 1

使用 jasmine-jquery:

过去我用过jasmine-jquery并使用夹具系统，以便将元素实际添加到 DOM 中，您可以测试这样的情况。它还会在每次测试后为您清理 DOM，因此无需担心每次测试后 DOM 变脏。

查看更新的示例:

function ($compile,$rootScope) {
            scope = $rootScope;
            wrapper = $($compile('<div id="a"><loading><div id="b">RUN</div></loading></div>')($rootScope));
            element = wrapper.find("#b");

            jasmine.appendSetFixtures(element);

            parent = element.parent();
            loading = wrapper.children("div").children("div:eq(1)");
    });

然后测试你可以做:

    describe('when ready is false', function(){
        before(function () {
            scope.ready = false;
        });
        it('should show the loading element', function(){
            expect(loading).toBeVisible();
        });
        it('should hide the actual element', function(){
            expect(element).not.toBeVisible();
        });
    });

替代方案:

您还可以改为检查 ng-hide 类是否存在:

expect(loading.hasClass('ng-hide')).toBe(false);