我正在为一个指令编写测试,该指令基本上扩展了它的容器以达到浏览器窗口的整个宽度.
为了举例说明,我将编写一些示例代码.
<div style="width: 800px; margin: 0 auto;"> <full-width></full-width> </div>
然后该指令将fullWidth指令替换为：
<div class="full-width"> <div ng-transclude=""></div> </div>
并为元素指定边距,如下所示：
var sideOffset = element[0].offsetLeft*-1;
element.css('margin-left',sideOffset+'px')
element.css('margin-right',sideOffset+'px')
现在,该指令完全正常,但当我尝试使用以下方法测试偏移：
describe('Directive: fullWidth',function () {
beforeEach(module('myApp'))
var element,scope
beforeEach(inject(function ($rootScope) {
scope = $rootScope.$new()
}))
it('should have the same right and left margin',inject(function ($compile) {
element = angular.element('<tt-full-width-section></tt-full-width-section>');
element = $compile(element)(scope)
var leftMargin = element.css('margin-left')
console.log(leftMargin)
console.log(element)
}))
})
我得到一个不错的0px.还检查记录的元素[0] .offsetLeft得到0.
我怎么能(如果可能的话)告诉Karma(Jasmine？)渲染div以便我可以检查偏移？
基于daveoncode建议,我对测试进行了一些更改,我们正在改进.
但是,该指令似乎在测试中不起作用.
我仍然得到0px作为margin-left而265px的offsetLeft
it('should have the same right and left margin',inject(function ($compile) {
element = angular.element(
' <div style="width:50%; margin: 0 auto;">' +
' <full-width></full-width>' +
' </div>'
);
element = $compile(element)(scope)
angular.element(document).find('body').append(element);
var el2 = element.find('div')
var leftMargin = el2.css('margin-left')
var rightMargin = el2.css('margin-right')
console.log(leftMargin,el2)
}
解决方法
提示1：
CSS样式在添加到DOM之前不会应用于元素！这不是与业力,角度,茉莉或其他相关的问题……这就是浏览器引擎的工作原理！浏览器解析CSS定义并根据它呈现页面中的元素,但在角度测试中,您编写：
var element = angular.element('<my-directive></my-directive>');
$compile(element)(scope);
您正在处理内存中的DOM节点,除了您的JavaScript代码之外,它们都是未知的！浏览器引擎应该如何将CSS应用于生活在js变量中的内存节点？它显然不能……它只能遍历页面中的节点树,所以……“修复”非常简单：你必须将元素添加到DOM：
angular.element(document).find('body').append(element);
提示2：
好吧,我认为现在你的问题实际上是另一个,你正在使用jQlite .css()实现,这与jQuery不同,它不会检索计算的样式而只是内联的(因此我担心不能“将“自动转换为实际的像素数！”…尝试使用此片段检索剩余的计算边距：
window.getComputedStyle(element,null).marginLeft
(getComputedStyle应该适用于IE以外的每个浏览器,所以如果你使用PhantomJS进行测试就可以了)
