Geek asks and answers

Including CSS in Karma Tests with Webstorm Debugger

I am using Backbone.js and RequireJs for a single page application.

When I run my karma tests, css is not included. When debugging, it’s hard to understand what is happening or why something isn’t working, because the html elements are not styled like in a production application.

Is it possible to embed css in karma tests during debugging using webstorm?

I already tried to include all css in the file array

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

This is the css file that is included in the index.html of the production application, there is nothing in the karma configuration that I can find to add something like this.

<link rel="stylesheet" href="css/styles.css" />
+3
source share
3 answers

I designed it:

  • You need to add all your css to the karma.conf file array.

    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
});
+6

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

, Runner Karma Test Runner, files karma.conf.js. , , included true.

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

, .

0

More articles:


All Articles