使用Webstorm调试器在Karma测试中包含CSS

Question

我在单页面应用程序中使用Backbone.js和RequireJs.

当我进行业力测试时,没有包含css.在调试时,很难知道发生了什么或为什么某些东西不起作用,因为html元素的样式不像生产应用程序中那样.

在使用webstorm进行调试时,是否有可能在karma测试中包含css？

我已经尝试在文件数组中包含所有css

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

这是包含在生产应用程序的index.html中的css文件,在karma配置中没有任何地方可以找到添加这样的东西.

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

Answer 1

我解决了这个问题:

1. 您需要将所有css添加到karma.conf'文件'数组中.

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

2. 创建一个名为的新模块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" />');
   
   });
   

3. 将此模块作为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
   });