在PhantomJS中设置元素高度

Question

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

我正在使用Jasmine框架测试Karma并在PhantomJS无头浏览器上运行.我正在尝试测试一个与"无限滚动"有关的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为PhantomJS传递给我angular.element($document[0].body).

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);
}));