CSS testing for serious developers

A motivation for testing your CSS

Transcript

1. CSS testing for serious developers … and for everybody else
2. Hi, I’m a serious developer. I do real stuff. I make banks go live, help shops sell stuff online. I add value.
3. I do a lot of Java. Enterprise. I build back-end systems. Server- side. I mean, I am not old fashioned.
4. JavaScript for example. I do write some things here and there. You know. If something needs to look fancy.
5. And I think a lot about quality. Testing. TDD. I do it. Build pipeline, you know it. I even use fancy things like Jasmine. For JavaScript. When going to production everything is well tested. Really everything. Well, basically everything.
6. We test the things you can test, right? Not stuff like CSS… I mean you can’t test it, can you? I’ve never heard anybody do it.
7. I don’t think you should do it. It is just design. You don’t want to have everything in your pipeline. And it’s not a biggie anyway…
8. Although, just recently we couldn’t deploy a critical bug fix. The release candidate shipped with a broken layout on the front page. Our product owner didn’t want to go live with that. That was crazy. Only because of some broken CSS.
9. There you are, putting hours into testing your server-side code, and a tiny issue with your layout… Of course we did give the front- end developer hell for that.
10. It would be cool though to just know that this stuff is fine. I did have our intern google for that the other day.
11. He came back saying there where some people out there hacking on testing just that, too. Rule 34 seems to apply to tech stuff, too.
12. That’s what he found: •  Cactus (https://github.com/winston/cactus/) Ruby & Selenium •  Sassquatch (https://github.com/d-i/Sassquatch/) SASS based prototype •  CSS critic (http://cburgmer.github.com/csscritic/) In-browser & PhantomJS
13. Cactus "   For Ruby "   Uses Capybara to test actual values using Selenium "   One TW projects is already doing a trial run on it Cactus.expect(".header”, "font-size").toEqual("24px");
14. Sassquatch "   Just a prototype for now "   Tests SASS (& SCSS), not CSS "   Idea: Use SASS functions to test SASS in SASS grid-columns { five-columns-at-960px { expect: to-equal(grid-width(5), 400px); } }
15. CSS critic "   Test CSS based on Screenshots "   Run tests against an older reference rendering "   Done by Yours truly "   Internal-Alpha release ;) " Link to screencast on youtube I won't show now csscritic.compare('basket.html');
16. Goal "   CSS can be critical to a web application going live just as any other component. "   Testing your CSS is an addition to your Continuous Delivery approach. "   Keeps you safe during refactorings. "   Keeps your “UI Dev” from being blamed for broken pages. "   Already helping projects go live right now!