-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of https://github.com/hinthealth/behave
* 'master' of https://github.com/hinthealth/behave: Better spacing Updated ReadMe!
- Loading branch information
Showing
1 changed file
with
58 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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... | ||
|
@@ -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'); | ||
``` |