在 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.

推荐答案

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

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屋！