3

我将 Backbone.js 和 RequireJs 用于单页应用程序。

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

在使用 webstorm 进行调试时，是否可以在 karma 测试中包含 css？

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

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

这是包含在生产应用程序的 index.html 中的 css 文件，我无法在业力配置中找到添加这样的内容。

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

3 回答 3

6

我解决了：

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

    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
});
于 2014-02-26T02:02:04.077 回答
1

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-23T14:47:38.567 回答
0

我通过将以下内容添加files到karma.conf.js. 我希望 Karma 自动包含该文件，所以我设置included为true.

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

这样做后，我可以以适当的样式查看我的组件，这使得单元测试更快更容易。

于 2017-08-30T20:12:31.813 回答