Besides its HTML fixture module, the Jasmine jQuery extension comes with a set of custom matchers, which help in writing expectations with the DOM elements.
The biggest advantage of using these custom matchers, as demonstrated, is that they generate better error messages. So, although we can write all specs without using any of these matchers, it would get us much more useful information when an error happens if we used the matchers.
To better understand this advantage, we can revisit the example of the should expose a property with its DOM element spec. There, it uses the toExist matcher:
it("should expose a property with its DOM element", function() {
expect(view.$element).toExist();
});If this spec fails, we get a nice error message, as shown in the following screenshot:
This shows a nice custom matcher error message
Now, we rewrite this spec without the custom matcher (still making the same validation):
it("should expose a property with its DOM element", function() {
expect($(document).find(view.$element).length).toBeGreaterThan(0);
});This time, the error message gets less informative:
Upon reading the error, we can't understand what it is truly testing
So, use these matchers whenever you can to get better error messages. Let's go over some of the available custom matchers, demonstrated by example, with these acceptance criteria of the NewInvestmentView class:
NewInvestmentViewshould allow the input of the stock symbolNewInvestmentViewshould allow the input of sharesNewInvestmentViewshould allow the input of the share priceNewInvestmentViewshould have an empty stock symbolNewInvestmentViewshould have its shares' value at zeroNewInvestmentViewshould have its share price value at zeroNewInvestmentViewshould have its stock symbol input on focusNewInvestmentViewshould not allow to add
It is important that you understand that these next examples, although useful to demonstrate how the Jasmine jQuery matchers work, are not really testing any JavaScript code but only the HTML elements that were loaded by the HTML fixture module.
This matcher checks whether the element matches the passed CSS selector, as follows:
it("should allow the input of the stock symbol", function() {
expect(view.$element.find('.new-investment-stock-symbol')).toBeMatchedBy('input[type=text]'),
});This matcher checks whether the content of the element matches the passed HTML, as follows:
it("should allow the input of shares", function() {
expect(view.$element).toContainHtml('<input type="number" class="new-investment-shares" name="shares" value="0">'),
});This matcher checks whether the element contains any child element matching the passed CSS selector, as follows
it("should allow the input of the share price", function() {
expect(view.$element).toContainElement('input[type=number].new-investment-share-price'),
});Only valid for inputs, this validates the expected value against the element's value attribute with the following code:
it("should have an empty stock symbol", function() {
expect(view.$element.find('.new-investment-stock-symbol')).toHaveValue(''),
});
it("should have its shares value to zero", function() {
expect(view.$element.find('.new-investment-shares')).toHaveValue('0'),
});This matcher tests whether the element has any attribute with the name and value specified. The following example shows how to use this matcher to test an input for its value attribute, an expectation that could have been written with the toHaveValue matcher:
it("should have its share price value to zero", function() {
expect(view.$element.find('.new-investment-share-price')).toHaveAttr('value', '0'),
});The following code illustrates how the matcher checks whether the input element is focused:
it("should have its stock symbol input on focus", function() {
expect(view.$element.find('.new-investment-stock-symbol')).toBeFocused();
});This matcher checks whether the element is disabled with the following code:
function itShouldNotAllowToAdd () {
it("should not allow to add", function() {
expect(view.$element.find('input[type=submit]')).toBeDisabled();
});The extension has many more available matchers; make sure to check the documentation of the project at https://github.com/velesin/jasmine-jquery#jquery-matchers.