views:

748

answers:

5
+4  Q: 

CSS Unit Testing

A few quick searches discovered that I'm obviously not the first person to have the thought "Can I unit test my CSS?".

I'm wondering if anyone here has taken on CSS Unit Testing successfully? If you've tried and failed, or just have your own theories, please tell me why it (apparently) hasn't been done yet?

A: 

It doesn't make sense to do so IMO. CSS is a language for controlling page layout; trying to unit-test it would be like trying to unit-test Postscript.

The only obvious use for unit testing I could think of is comparing screenshots to see which browsers were affected by a change in the code. Beyond that though, you can't say the code is right unless you manually compare everything in the rendered output to what the spec says it should be. To me, getting CSS right is always going to be trial-and-error.

Ant P.
This is not "unit" testing. I'm not saying that you shouldn't test by visual inspection, but it isn't the same kind of testing as unit testing. Unit testing has a definite connotation of testing units of execution. CSS is decoration, not execution.
tvanfosson
Well Postscript actually is a programming language with functions and everything. So you could certainly unit test that.
slim
+5  A: 

You could use Selenium, which is a web testing framework. This way you could assert what styles are to be applied to elements in the DOM etc.

Selenium

Otherwise, not sure what your aim is. Unit testing is, as the name suggests, testing 'Units', and to me, this only makes sense with code, not css.

well, CSS is code, ...kind of. Anyway, changing the input (the CSS file) will change the output (the visuals), and I'd like to make assertions about the output - checking that the font size in paragraphs is never different - checking that the text aligns to a grid properly, etc.
nickf
Selenium is what you need for that.And just to be clear. CSS isn't code :-) , it's not a programming language, and is in no way Turing Complete, it's a descriptive language to visually style XML Docs.
It's not a programming language. But it is code. Just as HTML is code.
slim
again, sorry have to disagree. Code is something executed by a machine. HTML is markup.
OK, you've picked an extremely narrow definition of 'code'. By that definition the C in 'ASCII' doesn't make sense.
slim
A: 

You can unit test the application of your CSS (i.e., are the styles/classes applied properly). You can visually inspect the results of applying your CSS. I don't see how you can unit test the CSS itself, since the CSS does not "execute." As @claimid (do you have a real name?) suggests, Selenium is one tool you can use to test your UI, though I wouldn't call that unit testing either. Note that not all tests are "unit" tests nor do they need to be.

tvanfosson
claimId is an issuer of OpenIDs, so my username is actually ac2u, but prefixed with my openID issuer.
+2  A: 

Currently, understanding whether CSS is working properly or not is visually determined. So far, the best way to test it is through installing multiple browsers on your dev machine. Start using tools like Firebug and Web Developer on Firefox, and forget about Unit testing CSS until it becomes Turing complete. :-)

Clinton Judy
A: 

I'm trying to make unit test for CSS something real. http://github.com/gagarine/CSSunit I will implement that as a jQuery Plugin but I'm sure it will be easy to port.

gagarine