简答

Question

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

我正在使用Jasmine框架测试Karma并在PhantomJS无头浏览器上运行。我试图测试一个关注＆＃34;无限滚动的AngularJS指令＆＃34; （当用户滚动到容器元素底部附近时自动加载项目）。我使用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元素并附加到该元素。此代码现在在PhantomJS中通过，将$document替换为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);
}));

Answer 2

您甚至可以完全删除JqLite的使用并使用原始DOM方法......

var el = document.createElement('div');
el.textContent = "Lorem ipsum...";

document.body.appendChild(el);

...

在PhantomJS中设置元素高度

简答

2 个答案: