Jasmine-jQuery

Enjoy this cheat sheet at its fullest within Dash, the macOS documentation browser.

jQuery Matchers

toBeChecked()

Only for tags that have checked attribute.

expect($('<input type="checkbox" checked="checked"/>')).toBeChecked()

toBeDisabled()

expect('<input type="submit" disabled="disabled"/>').toBeDisabled()

toBeEmpty()

Checks for child DOM elements or text.

toBeFocused()

expect($('<input type="text" />').focus()).toBeFocused()

toBeHidden()

Elements can be considered hidden for several reasons:

  • They have a CSS display value of none.
  • They are form elements with type equal to hidden.
  • Their width and height are explicitly set to 0.
  • An ancestor element is hidden, so the element is not shown on the page.

toBeInDOM()

Checks to see if the matched element is attached to the DOM.

expect($('#id-name')[0]).toBeInDOM()'

toBeMatchedBy(jQuerySelector)

Check to see if the set of matched elements matches the given selector.

expect($('<span></span>').addClass('js-something')).toBeMatchedBy('.js-something')

true if the DOM contains the element.

toBeSelected()

Only for tags that have selected attribute.

expect($('<option selected="selected"></option>')).toBeSelected()

toBeVisible()

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

toContainElement(jQuerySelector)

expect($('<div><span class="some-class"></span></div>')).toContainElement('span.some-class')

toContainHtml(string)

expect($('<div><ul></ul><h1>header</h1></div>')).toContainHtml('<ul></ul>')

toContainText(string)

expect($('<div><ul></ul><h1>header</h1></div>')).toContainText('header')

toEqual(jQuerySelector)

expect($('<div id="some-id"></div>')).toEqual('div')
expect($('<div id="some-id"></div>')).toEqual('div#some-id')

toExist()

true if element exists in or out of the DOM.

toHandle(eventName)

expect($form).toHandle("submit")

toHandleWith(eventName, eventHandler)

expect($form).toHandleWith("submit", yourSubmitCallback)

toHaveAttr(attributeName, attributeValue)

Attribute value is optional, if omitted it will check only if attribute exists.

toHaveBeenTriggeredOn(selector)

If event has been triggered on selector.

toHaveBeenTriggered()

If event has been triggered on selector.

toHaveBeenTriggeredOnAndWith(selector, extraParameters)

If event has been triggered on selector and with extraParameters.

toHaveBeenPreventedOn(selector)

If event has been prevented on selector.

toHaveBeenPrevented()

If event has been prevented on selector.

toHaveClass(className)

expect($('<div class="some-class"></div>')).toHaveClass("some-class")

toHaveCss(css)

expect($('<div style="display: none; margin: 10px;"></div>')).toHaveCss({display: "none", margin: "10px"})
expect($('<div style="display: none; margin: 10px;"></div>')).toHaveCss({margin: "10px"})

toHaveData(key, value)

Value is optional, if omitted it will check only if an entry for that key exists.

toHaveHtml(string)

expect($('<div><span></span></div>')).toHaveHtml('<span></span>')

toHaveId(id)

expect($('<div id="some-id"></div>')).toHaveId("some-id")

toHaveLength(value)

expect($('ul > li')).toHaveLength(3)

toHaveProp(propertyName, propertyValue)

Property value is optional, if omitted it will check only if property exists.

toHaveText(string)

Accepts a String or regular expression.

expect($('<div>some text</div>')).toHaveText('some text')

toHaveValue(value)

Only for elements on which val can be called (input, textarea, etc).

expect($('<input type="text" value="some text"/>')).toHaveValue('some text')