javascript - 在 PhantomJS 中设置元素高度

Question

在 PhantomJS 中测试时如何设置元素高度？

我正在使用 Jasmine 框架在 Karma 上进行测试，并在 PhantomJS headless 浏览器上运行。我正在尝试测试与“无限滚动”有关的 AngularJS 指令(当用户滚动到容器元素底部附近时自动加载项目)。我不使用 jQuery，我也不希望(除非没有其他办法)。我正在使用 .clientHeight、.scrollTop 和 .scrollHeight 属性。我的指令按预期工作，至少在 Chrome 中是这样。

我尝试为我的指令设置一个测试，但我找不到创建非零高度元素的方法。下面的代码让我不高兴:

describe('something', function () {
    it('works with element height', inject(function ($document) {
        var el = angular.element('<div>Lorem ipsum...</div>')[0];
        $document.append(el);
        // size of non-empty block element should be non-zero by default
        expect(el.clientHeight).not.toBe(0);
        expect(el.scrollHeight).not.toBe(0);
        // it should certainly be non-zero after the height is set manually
        el.style.height = '999px';
        expect(el.clientHeight).not.toBe(0);
        expect(el.scrollHeight).not.toBe(0);
    }));
});

我做错了什么？是否可以做我想做的事？

简答

使用 element.style.height 设置元素高度效果很好。我只是没有将元素正确附加到文档正文中。

Answer 1

我认为问题出在 $document 上。您需要定义哪个文档并找到 body 元素并附加到它。通过将 $document 替换为 angular.element($document[0].body)，这段代码现在在 PhantomJS 中通过了。

it('works with element height', inject(function ($document) {
    var el = angular.element('<div>Lorem ipsum...</div>')[0];

    //Find the correct body element
    angular.element($document[0].body).append(el);

    // size of non-empty block element should be non-zero by default
    expect(el.clientHeight).to.not.equal(0);
    expect(el.scrollHeight).to.not.equal(0);
    // it should certainly be non-zero after the height is set manually
    el.style.height = '999px';
    expect(el.clientHeight).to.not.equal(0);
    expect(el.scrollHeight).to.not.equal(0);
}));