Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/hinthealth/behave
Browse files Browse the repository at this point in the history
* 'master' of https://github.com/hinthealth/behave:
  Better spacing
  Updated ReadMe!
  • Loading branch information
blakewest committed Oct 31, 2014
2 parents 330bda8 + 6244f69 commit b85eb34
Showing 1 changed file with 58 additions and 29 deletions.
87 changes: 58 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,30 +13,35 @@ Before:
$("[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();
```

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

You can also fill individual fields, or jQuery elements as input.
```
fill('myOtherEl').with('new text');

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

Behave! is very forgiving when you try to fill in an element on the page. If your
Behave! tries to intelligently find things when you try to fill in an element on the page. If your
forms conform to general standards, it will likely find them. It searches for attrs like
name, for, placeholder, type, 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').

***FIND***

Under the hood of "fill" is a robust "find" function. The signature is...
***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...
Expand All @@ -47,28 +52,52 @@ Behave.find('danger', 'icon') // Finds els of type 'icon', 'div', or 'span'
Behave.find('Birthday', 'display') // Searches EXACT text of all elements.
```

Behave also finds and makes available each element on your page instantly! Let's say your page is...
```
<form type='form'></form>"
<input type='checkbox' name='accept_terms'>"
<input type='text' name='first_name'>"
<label for='practice_url'>Practice Url</label>"
<input type='text' name='practice_url'>"
</form>
<div name='coupon-container'></div>")
```
then you could do...
```
var $els = Behave.getAllEls()
$els.accept_terms
$els.PracticeUrl // This will return the label element. It automatically removes spaces from text.
$els.practice_url // would return the input that has name="practice_url"
$els.couponContainer // auto camelCases attrs that have dash-case
```
**#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')'


**#select**

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

**Global Methods**

Behave also, for convenience (and because it should only get loaded during tests), aliases the `find`
and `fill` functions to the window. So in your tests you can just do...
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')
select('value').from('dropdown');
```

0 comments on commit b85eb34

Please sign in to comment.