在PhantomJS中设置元素高度 [英] Set element height in PhantomJS

问题描述

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

我正在使用Jasmine框架测试Karma并在PhantomJS无头上运行浏览器。我正在尝试测试一个关注无限滚动的AngularJS指令（当用户滚动到容器元素底部附近时自动加载项目）。我不使用jQuery，我也不希望（除非没有别的办法）。我正在使用 .clientHeight ， .scrollTop 和 .scrollHeight 属性。我的指令按预期工作，至少在Chrome中。

I'm testing on Karma using Jasmine framework and running on PhantomJS headless browser. I'm trying to test an AngularJS directive concerned with "infinite scrolling" (automated loading of items when user scrolls near to the bottom of the container element). I'm not using jQuery, nor do I wish to (unless there's no other way). I'm using .clientHeight, .scrollTop, and .scrollHeight properties. My directive works as expected, at least in Chrome.

我尝试为我的指令设置测试，但我找不到用非创建元素的方法零高度。以下代码没有给我带来快乐：

I tried setting up a test for my directive, but I can't find a way to create element with non-zero height. The following code gives me no joy:

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

我做错了什么？是否有可能做我想做的事情？

What am I doing wrong? Is it possible to do what I'm trying to do?

简答

使用 element.style.height 设置元素高度可以正常工作。我只是没有将元素正确地附加到文档正文中。

Short Answer

Setting the element height using element.style.height works just fine. I just didn't append the element correctly into the document body.

推荐答案

我认为问题在于$文献。您需要定义哪个文档并找到body元素并附加到该元素。此代码现在在PhantomJS中通过，用 angular.element（$ document [0] .body） $ document c>。

I think the problem is with $document. You need to define which document and find the body element and attach to that. This code passes for me now in PhantomJS, by replacing $document with 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);
}));

这篇关于在PhantomJS中设置元素高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！