BEHAVE! To install

bower install behave

include behave, lodash and jquery scripts in your test framework

The Problem This Solves As we wrote front-end tests, we kept having to write verbose jQuery in order to grab and manipulate elements in our front-end tests. It sucked. Maybe you do the same thing. Maybe it looks like this...

 $("[name='email']").val('[email protected]').trigger('input');
 $("[for='age']").val(27).trigger('input');
 $("[for='dob']").val('04/27/87').trigger('input');

 var createButton = $view.find("button:contains('Create')")
 expect(createButton).not.toBeDisabled();

Ew. Gross.

The Solution Behave! Tell the DOM exactly what you want.

fill('form').with({email: '[email protected]', age: 27, dob: '04/27/87'});
expect(find('Create')).not.toBeDisabled()

The example above uses Behave's fill method. It tries to intelligently find elements that you need on the page. If your forms conform to general standards, it will likely find them. It searches for attrs like name, for, placeholder, type, plus actual text, and others. Fill only looks through element types that would typically show up in a form ('input', 'select', 'option', 'label', 'textarea', or 'form').

METHODS

#find

find is the heart of Behave. It is under the hood of most of the methods. The signature is... Behave.find(identifier, [type]) It will error if it doesn't find exactly one element. That means it fails if it finds nothing or many things. 'identifier' must be a string

Why would you want to do this? Sometimes having a variable is nice.

Type is optional. Thus, try to give it something unique, but if your searching for something that's not, you can specify a "type" of DOM element to narrow the search by doing...

Behave.find('email', 'field') // Finds els of type 'input', 'select', 'option', 'label', 'textarea', or 'form'
Behave.find('Sign Up', 'clickable') // Finds els of type 'button', or 'a'
Behave.find('danger', 'icon') // Finds els of type 'icon', 'div', or 'span'
Behave.find('Birthday', 'display') // Searches EXACT text of all elements.

#tryFind

For those times when you don't want find to error (like checking that an element doesn't exist), you can use tryFind tryFind(identifier, [type])

#findAll

findAll will allow you to find multiple elements (where as find errors unless it finds exactly 1)

#fill

fill('identifier').with('some value'). fill by itself really does nothing. it returns an object that has a "with" method where you fill the value. It also has a special case of taking a form, and you can pass it an object with many values, like so...

 fill('form').with({first_name: "Phil", last_name: "Lesh", age: 58});

Lastly, it's good to know that fill can also take a jQuery object, which is convenient when you want to use a variable to store an element, like so...

 var myEl = Behave.find('myEl')
 fill(myEl).with('yay');

#click

click(identifier) // basically does find('identifier').trigger('click') click can take a string or a jquery object. ex. click('Create'). Or var button = find('Create') ; click(button) click also handles angular idiosyncracies like a radio element needing to do '.click().trigger('click')'

#choose

choose('value').from('dropdownIdentifier') Basically like click, except with dropdowns.

Global Methods

For convenience (and because it should only get loaded during tests), Behave aliases the following methods to the window. So in your tests you can just do...

 find('email');
 tryFind('email');
 findAll('email');
 fill('password').with('secret');
 click('button')
 choose('value').from('dropdown');