Screen Shot 2013-07-29 at 21.04.47

Testing the CSS: getComputedStyle

I’m planning to get external fixtures more than inline fixtures, and test it using the getComputedStyle CSS properties values.

Can I use: getComputedStyle
getComputedStyle capability test


Real Responsive Web Design example using getPropertyValue() function

getPropertyValue Example:

Spec javascript file source code

boilerplate.html source code

boilerplate.html source code


Using the “jasmine-dom” plugin make this idea even even more easy, because is adding some handy “DOM matchers” for this situation: toBeVisible, toHaveClass, toBeSelected, toBeChecked, etc.

jasmine-dom was inspired by the jasmine-jquery add-on for Jasmine JavaScript Testing Framework. This add-on provides a set of custom matchers for working with DOM nodes and an API for handling HTML fixtures in your spec – (from github description)

Link to the js lib:

HTML Fixtures

The Fixture module of jasmine-jquery allows you to load HTML content to be used by your tests. The overall workflow is like follows:

In testthis.html file:

Inside your test:

By default, fixtures are loaded from ‘spec/javascripts/fixtures’. You can configure this path:

Your fixture is being loaded into:

< div id="jasmine-fixtures">< /div>

container that is automatically added to the DOM by the Fixture module.

Also, fixtures are internally cached by the Fixture module, so you can load the same fixture file in several tests without penalty to your test suite’s speed.


Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *