← Back to Upcase

Testing CSS/Styling in an app


(Jon Seidel) #1

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.


(Josh Clayton) #2

@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!


(Greg Williams) #3

@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:
http://nadarei.co/nkss-rails/


(Jon Seidel) #4

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.