Karma: Include css files in browser

[alindsay55661]

Some of my tests require css libraries to be included such as Bootstrap. Currently I don't see a way of doing this. It would be nice if Karma would allow for specifying css files in a fashion similar to javascript files.

[vojtajina]

Yep, let's extend the web server to properly serve css files. (Instead of <script> tag, insert a <link ....> and set correct mime type.

[revolunet]

Yes we need to be able to include CSS files as it useful for the tests : transition events, sizing, jQuery selectors...

[matsko]

Hey @vojtajina, I'm up for making a PR for this. AngularJS needs it for including the angular.css inside of the tests. Does that work for you?

[vojtajina]

@matsko absolutely!

[matsko]

@vojtajina this is what you had in mind when we spoke earlier right?

[vojtajina]

Yep

On Fri, Jun 14, 2013 at 5:05 PM, Matias Niemelä [email protected]:

@vojtajina https://github.com/vojtajina this is what you had in mind
when we spoke earlier right?

—
Reply to this email directly or view it on GitHubhttps://github.com/karma-runner/karma/issues/431#issuecomment-19487848
.

[timols]

:+1: am running into the same issue here too. Would be happy to collaborate on a PR too.

[revolunet]

thanks @timols !

[timols]

Hi @vojtajina do you have this slated for release 0.9.5?

[vojtajina]

@timols yep, but let's fix the #636 first

[romankuzmik]

is it in latest 0.10 release yet? I do not see anything in docs related to how to use it. Thanx!

[romankuzmik]

nevermind, looked at sources,

// list of files / patterns to load in the browser
files: [
  'node_modules/chai/chai.js',
  'node_modules/sinon/pkg/sinon.js',
  'lib/ext.dev/ext-all-dev.js',
  'lib/ext/resources/ext-theme-neptune/ext-theme-neptune-all.css',

works just fine.

[PVince81]

Is this broken again in karma 0.12.16 ?

I tried including a CSS file using this:

config.set({
...
    files: [
        'js/*.js',
        'css/*.css'
    ],
...
});

Then going to debug.html I inspected the "head" tag of the page but there is no "link" tag appearing.
Adding the explicit CSS file name instead of a wildcard also didn't work.

I couldn't find any useful information related to this feature after googling.
Am I doing it wrong ?

[PVince81]

Hmmm... I was looking in the wrong place. They seem to be included in the "body" tag instead.
Also it seems I need to add a proxies section to serve them.
Would be good to have this documented better.

Thanks.

[Nate-Wilkins]

@PVince81 proxies section? I'm in the same boat - unable to load css.

_Edit:_ Lied I can but I didn't have to include a proxies section. Wasn't using the included property. proxies seems unrelated?

[bupy7]

Don't work in my case. Version of Karma: 1.6.0. Additional I'm using grunt-karma package. I added path to a css file, but it don't work.

Config: https://github.com/bupy7/js-cropbox/blob/master/Gruntfile.js#L41
My solution of the problem: https://github.com/bupy7/js-cropbox/blob/master/tests/fixtures/body.html#L2

What do I do wrong? May be grunt-karma have a bug?