Including CSS in Karma Tests using Webstorm Debugger

Question

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

When I run my karma tests, there is no css included. When debugging it is difficult to know what is going on or why something is not working because the html elements are not styled like they are in the production appplication.

Is is possible to inlcude css in the karma tests while debugging using webstorm?

I have already tried including all css in the files array

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

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

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

Answer 1

I worked it out:

1. You need to add all your css to your karma.conf 'files' array.

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

2. Create a new module called test_css.js, the location of this file will depend on your folder structure. In here you need to programatically inject all your css files into your the current document.

   define(function(require) {
       "use strict";
   
       require('jquery');
   
       //Modify to suit your requirements
       $('body').append('<link rel="stylesheet" href="/base/app/css/styles.css" />');
   
   });
   

3. Include this module as part of the deps array in 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
   });