Question

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

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

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

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

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

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

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

Answer 1

我解决了这个问题：

您需要将所有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
});

Answer 2

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');
});

Answer 3

I resolved a quite similar issue where my components were not appearing in Karma Test Runner by adding following to LIFA key of REM. I wanted Karma to automatically include the file so I set IF OBJECT_ID('tempdb..#TestData') IS NOT NULL DROP TABLE #TestData; WITH Data (EmployeePracticeArea) AS ( SELECT 'LIFA' UNION SELECT 'REM' UNION SELECT 'EUR' UNION SELECT 'CS' ) SELECT * INTO #TestData FROM Data ; to files.

karma.conf.js

Upon doing this, I could then view my components in proper styling which made unit testing a lot faster and easier.

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

3 个答案: