噶 - 不正确的ui属性的div，而单元测试Angular JS指令

Question

我正在写一个指令的测试，基本上扩展它的容器以达到浏览器窗口的整个宽度。

为了举例说明，我会写一些示例代码。

HTML页面：

<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。同时检查记录的element[0].offsetLeft结果为0.

任何想法，我如何（如果可能）告诉Karma（茉莉花？）呈现div，所以我可以检查偏移？

---

基于daveoncode建议，我做了一些修改测试，我们正在改善。 但是，该指令似乎并未在测试中起作用。
我而具有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) 
} 

Answer 1

TIP 1 265px仍然得到0像素为margin-left：

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

TIP 2：

好吧，我认为现在你的问题实际上是另一个，你正在使用jQlite .css（）实现，这不同于jQuery不检索计算的样式，但只有内联的（因此我恐惧是不能“翻译”auto到像素的实际数量！）...尝试使用这个片段检索计算保证金左：

window.getComputedStyle(element, null).marginLeft 

（的getComputedStyle应除IE每个浏览器中运行，因此，如果您正在使用PhantomJS它的确定测试）