Testing CSS classes with Jasmine-JQuery
April 03, 2015
If you would like to test your CSS classes with Jasmine you can use Jasmine Jquery.
jasmine-jquery provides two extensions for the Jasmine JavaScript Testing Framework:
- a set of custom matchers for jQuery framework
- an API for handling HTML, CSS, and JSON fixtures in your specs
Using the loadStyleFixtures or setStyleFixtures global shortcuts we can add the css we want to test either from a relative url
loadStyleFixtures('css/stylesheet.css');
or append the classes directly to the document head
setStyleFixtures('.btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; }');
Then load the fixtures using the loadFixtures or setFixtures global shortcuts either from a relative url
loadFixtures('templates/success.html');
or append the fixture directly to the document body
fixture = setFixtures('<button type="button" class="btn btn-success">Success</button>');
Then use the custom matchers to retrieve the element you would like to test against
var successButton = fixture.find('.btn-success');
and then test against your expectation
expect(successButton.css('color')).toEqual('rgb(255, 255, 255)');
You can see the test below working in this jsfiddle
with all tests passing