View on GitHub

Transition.js 2.0

Detangled in-Browser Webapp Testing

Transition’s Apis

DOM Helpers

The DOM helpers make working with the main frame (where the application runs) simpler. They will use jQuery within the web application if it is present (by detecting the presence of $), or wrap the main frame’s document in a jQuery object.

When a function is suffixed with an underscore, it creates a closure over the arguments and returns a function that performs the action. This is useful for when callbacks are required in your tests, avoiding having to write out an anonymous function.

Transition.navigateTo(url), Transition.navigateTo_(url)

These set the main frame’s location.

Transition.find(selctor)

This executes jQuery’s find, returning the result set.

Transition.elementExist(selctor)s, Transition.elementExists(selctor)_

These boolean predicates test if an element exists in the page.

Transition.elementNotExist(selctor)s, Transition.elementNotExists(selctor)_

These boolean predicates test if an element does not exist in the page.

Transition.noop()

This is a dummy function, it can be used for states where you do not want or need an on-enter trigger.

Transition.constantly_(value)

Returns a function that when called always returns the value passed to constantly_.

  var fn = Transition.constantly_(3);
  fn(); // => 3
  fn(); // => 3
  fn(); // => 3

Transition.click(selector), Transition.click_(selector)

These take a selector, find the matching dom elements and call click() on them.

Transition.isChecked(selector), Transition.isChecked_(selector), Transition.isNotChecked(selector), Transition.isNotChecked_(selector)

These take a selector and test if the node has or does not have the attribute checked.

Transition.clickAnchor(selector), Transition.clickAnchor_(selector)

These functions take a selector and simulate clicking an anchor tag. They set the main frame’s location to the href of the anchor tag. If href starts with a has, then only the location.hash is set.

Transition.fillInWithKeyEvents(selector, text)

This sends keyup/keydown events to the elements identified by selector, simulating a user typing.

Transition.findVisibleText(text), Transition.findVisibleText_(text)

These search the entire dom of the main frame for any element that contains the provided text.

Transition.findVisibleText, Transition.findVisibleText_

findVisibleText performs a jQuery find for the last node that matchs the selector: *contains(yourtext):visible:last

Logging

There are 6 logging levels, each indicating a different severity:

The Log output window’s filter setting will determine what is visible based on the level.

The log functions use sprintf for formatting entries. The first argument will be treated as the format string and additional arguments will supply values for the format string.

The format strings follow the sprintf library with a single addition: %a for formatting JavaScript objects:

  Transition.Log.info("Object is: %a", {an: 'object', num: 123});
  // => [23:20:30] Object is: {"an":"object","num":123}

Test Declaration

Transition.addTest({name: 'test-name', states: [...]})

Adding States

Transition.to(name, [predicate])

This adds a transition to the current state. It can be passed a name and optionally a predicate.

Transition.when(predicate)

when attaches a predicate to a transition. The predicate may be any of the following:

string: method

If the string names a method on the test, this method will become the predicate used to determine if the transition is followed.

  ...
    this.newState('mainPage', this.navigateTo_('/'))
      .to('success').when('listsFormExists')
  ...

  listsFormExists: function () {
    return Transition.elementExists('form[action="/lists"]');
  }
string: jQuery selector

If the string does not identify a method on the test, then it is treated as a jQuery selector. The selector may be prefixed with an exclamation mark. jQuery selectors are treated as if you had written: Transition.elementExists_(selector)

If the selector starts an exclamation mark, it is treated as if Transition.elementNotExists_(selector) were written.

  ...
    this.newState('mainPage', this.navigateTo_('/'))
      .to('success').when('form[action="/lists"]')
      .to('failure').when('!form[action="/lists"]')
  ...
function

A function may be passed as the predicate.

  ...
    this.newState('mainPage', this.navigateTo_('/'))
      .to('success').when(function () {
        return Transition.elementExists('form[action="/lists"]')
      })
  ...