3

シングルページアプリケーションに Backbone.js と RequireJs を使用しています。

カルマ テストを実行すると、css が含まれていません。本番アプリケーションのように html 要素のスタイルが設定されていないため、デバッグ時に何が起こっているのか、または何かが機能していない理由を知ることは困難です。

webstorm を使用してデバッグ中にカルマ テストに css を含めることは可能ですか?

ファイル配列にすべての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: [
    {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.jstest-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 に答える