噶 - 不正確的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它的確定測試）