使用Webstorm調試器在Karma測試中包含CSS

我對單個頁面應用程序使用Backbone.js和RequireJs。使用Webstorm調試器在Karma測試中包含CSS

當我運行我的業力測試時，沒有包含CSS。在調試時，很難知道發生了什麼，或者爲什麼某些內容不起作用，因爲html元素沒有像生產應用程序中那樣進行設計。

在使用webstorm進行調試時，是否有可能在業力測試中包含css？

我已經嘗試包括文件陣列

files: [ 
    {pattern: 'app/css/*.css', included: false}, 
    ... 
],

這是包含在生產應用中的index.html的CSS文件中的所有CSS，無處在的業力的配置，我可以發現添加這樣的東西。

<link rel="stylesheet" href="css/styles.css" />

來源

2014-02-25 jax

出於好奇 - 爲什麼要在做測試時使用風格化的html？我看到的一種情況是，你可能已經顯示/隱藏元素（通過CSS）。你有其他情況嗎？ – csg

我的應用程序正在加載一個引導模式對話框，該對話框在沒有CSS的情況下不會顯示。我的測試無法找到從json數據源生成的一些元素。只要應用程序被設計，我就能立即發現問題。這是由前一個選擇元素引起的，因爲它應該是未被選中的。 – jax

我的工作了：

你需要將所有的CSS添加到您的karma.conf '文件' 陣列。

files: [ 
    {pattern: 'app/**/*.css', included: false}, 
    ... 
],

創建一個名爲test_css.js新的模塊，這個文件的位置將取決於您的文件夾結構。在這裏，您需要以編程方式將所有的css文件注入到當前文檔中。

define(function(require) { 
    "use strict"; 

    require('jquery'); 

    //Modify to suit your requirements 
    $('body').append('<link rel="stylesheet" href="/base/app/css/styles.css" />'); 

});

包含該模塊爲deps陣列的一部分test-main.js

requirejs.config({ 
    baseUrl: '/base/app/js', 

    paths: { 
     ... 
     'test.css' : '../test_utils/test_css' 
    }, 

    // ask Require.js to load these files (all our tests) 
    deps: ['test.css'].concat(tests), 

    // start test run, once Require.js is done 
    callback: window.__karma__.start 
});

來源

2014-02-26 02:02:04 jax

JAX答案是非常有益的。

此外，對於那些不使用jQuery的但d3.js，您可以test-css.js是這樣的：

define([ 
    'd3' 
], function(d3) { 
    "use strict"; 
    d3.select('body').append('link') 
     .attr('rel', 'stylesheet') 
     .attr('href', '/base/app/styles/mystyles.css'); 
});

來源

2014-05-23 14:47:38 Alex

我決定在我的組件沒有在噶測試運行出現相當類似的問題files的關鍵字karma.conf.js。我想讓Karma自動包含文件，因此我將included設置爲true。

. 
. 
. 
files: [ 
    { pattern: 'node_modules/abc/abc.min.css', included:true, watched: false } 
],

這樣做後，我可以查看我的組件在適當的樣式，使單元測試更快，更容易。

來源

2017-08-30 20:12:31 baltoro

使用Webstorm調試器在Karma測試中包含CSS

回答

相關問題