Testing CSS/Styling in an app

What are some good ways to write tests for styling. For example, I’ve got a situation in an existing app where only horizontal scrolling is allowed on a textarea and I’d like to start with a good test to flush this out. I suppose I could use :js => true in a spec and then peek into the DOM, but that seems sorta kludgey to me.

@JESii I’ve only tested CSS frameworks and not visual aspects of apps themselves. I’m not suggesting you skip this, but it’s error-prone and will give you a false sense of security since it’s subjective to the JS driver running the spec.

That said, you can use a JS driver coupled with page.evaluate_script (which returns values) and jQuery to make assertions about locations of elements on the page. You may want to look at https://github.com/joshuaclayton/blueprint-css/commit/bd1f0b504c8c941ac23b4f898971a132ef2b75a8 and https://github.com/joshuaclayton/blueprint-css/blob/b59f2bb8066e34f3b1b9dc7e16dd1295bd6eaeeb/features/support/document_element.rb for some inspiration.

Good luck!

@JESii A popular technique amongst front-end developers and designers is to create a style guide for your application. Breaking each of your UI elements up in to modules and have them displayed live for you to test visually, completely outside the context of any one page allows you to quickly visually test that an app is styled properly.

Check these out:

Thanks, @joshclayton … I figured this stuff might be a tad brittle but thought it could help in the conversion I’m working on. I’ll check out the links.

And thank you also, @greg3b… the nkss stuff looks very interesting.