Should we use CSS in Karma Unit level tests in AngularJS projects

Question

Say your Javascript performs some element/position calculations e.g. in angularjs directive.

In order to test this Javascript code is it appropriate to include CSS in karma.conf.js ?

I see that some popular projects did include css files.

e.g. ng-gridproject karma.conf.js

'dist/release/ui-grid.css',

The questions is more towards the boundary of e2e tests vs. unit tests.

Answer 1

As far as I understand your question, here's my take on this -

Unit test are to check functionality of particular source code.

There are following ways to do unit testing for a function

1. Pass the input to function and test the output
2. Pass the input and test every thing (steps) it does to manipulate that input
3. Test if its calling anything external function to get any input & use the stubbed value as a returned object/value from that external function

If a method in directive is manipulating css, then it should be adding and removing CSS class inside that method, isn't it? So in assertions it need to check only if particular class is present or not. (In most of the cases which I worked on)

CSS file is external file and its a dependancy for javascript source file & it should be treated as dependancies.

Where as e2e testing is the like integration testing, to make sure if all integration files work together perfectly. So if we need to test CSS changes, we should check with e2e.

Here is interesting talk on Unit Testing from Miško Hevery. It's not related to CSS, but in general Unit Testing & about handling dependancies(17:50)