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
TO TEST DEMO
http://jsfiddle.net/leolanese/xf6Jm/
Real Responsive Web Design example using getPropertyValue() function
getPropertyValue Example:
Spec javascript file source code
boilerplate.html source code
boilerplate.html source code
jasmine-dom.js
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.
https://github.com/jeffwatkins/jasmine-dom
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:
jasmine-dom-fixtures.js
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:
|
1 |
<div id="my-fixture">TEST THIS!</div> |
Inside your test:
|
1 2 3 |
loadFixtures('testthis.html'); $('#my-fixture').myTestedPlugin(); expect($('#my-fixture')).not.toBe(null); |
By default, fixtures are loaded from ‘spec/javascripts/fixtures’. You can configure this path:
|
1 |
jasmine.getFixtures().fixturesPath = 'your/new/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.
Enjoy!