CSS問題測試AngularJS指令與Karma +茉莉花

我使用Karma + Jasmine來測試我的AngularJS指令，我寫了超過300個測試，我非常高興......直到我發現一個問題帶我到這裏，因爲我被困住了：一些測試失敗了，因爲他們需要將CSS應用到一些元素上（我的指令中的一段代碼根據這種樣式進行了大小計算），儘管我添加了包含CSS實現的文件，但該文件似乎被忽略在測試期間。在我的人緣配置我加了這樣的css文件：CSS問題測試AngularJS指令與Karma +茉莉花

files: [ 
    // .. 
    'styles/foo.css', 
    // .. 
],

上述設置生成的body而不是head link標籤，所以我想爲「手動」注入的CSS使用JS：

angular.element(document).find('head').prepend(
     '<style type="text/css">@charset "UTF-8";' + 
     '/* THE STYLE I NEED FOR MY TESTS HERE */' + 
     '</style>' 
);

但這兩種方法似乎都不起作用（我測試了樣式標籤並正確注入）。我終於想補充一點，我編譯使用角度$compile的HTML中的樣式塊：

var element = ng.element('<div>' + 
'<style type="text/css">@charset "UTF-8";' + 
      '/* THE STYLE I NEED FOR MY TESTS HERE */' + 
      '</style>' + 
'<my-directive></my-directive>' + 
+ '</div>'); 
$compile(element)(scope);

...但仍然沒有運氣...我也試圖從PhantomJS切換測試運行鉻，但問題是相同的：風格在某種程度上忽略（它們被注入，但使用jQuery(targetElement).css('width')返回0，他們沒有得到應用的元素，其實）...

所以，我的大問題：我應該如何導入並在業力測試中成功應用樣式表？ :(

來源

2014-09-03 daveoncode

好吧，這個問題很簡單和愚蠢......我想知道爲什麼我失去了這麼多時間來實現它：P 所以......通過在配置文件中指定它們，Karma完全注入CSS，就像我作爲第一種方法完成了（不需要其他插件或黑魔法），但是... 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);

來源

2014-09-04 08:42:40 daveoncode

我強烈建議afterEach（function（）{元素}後面添加一個。在測試中將元素附加到DOM時刪除（） }）。當你有數千次測試時，它們會變得很慢，否則你也可能與以前的測試產生衝突。 – ValentinH 2017-01-31 14:54:50

從你的情況來看，你正在測試DOM是否處於某種特定的狀態，我發現一個插件看起來就像這個用例一樣：jasmine-jquery即使你使用AngularJs您的DOM操作「重，這種擴展將仍然讓你測試得到的DOM的狀態。

我特別想你應該有一個看看StyleSheet Fixtures，它可以讓你的測試注入CSS。

聲明：我還沒有測試過任何這個，答案只是研究結果。

來源

2014-09-04 01:27:06 klyd

CSS問題測試AngularJS指令與Karma +茉莉花

回答

相關問題