rx-page-objects - npm Package Compare versions

Comparing version 1.14.0 to 1.15.0

API.md

@@ -8,8 +8,21 @@ #Index
   * [encore.rxCharacterCount.initialize(rxCharacterCountElement)](#encore.module_rxCharacterCount.initialize)
+* [encore.rxCollapse](#encore.module_rxCollapse)
+  * [encore.rxCollapse.main](#encore.module_rxCollapse.main)
+  * [encore.rxCollapse.initialize(rxCollapseElement)](#encore.module_rxCollapse.initialize)
 * [encore.rxOptionFormTable](#encore.module_rxOptionFormTable)
   * [encore.rxOptionFormTable.main](#encore.module_rxOptionFormTable.main)
   * [encore.rxOptionFormTable.initialize(rxOptionFormTableElement)](#encore.module_rxOptionFormTable.initialize)
+  * [encore.rxOptionFormTable.generateAccessor(elem)](#encore.module_rxOptionFormTable.generateAccessor)
 * [encore.rxSearchBox](#encore.module_rxSearchBox)
   * [encore.rxSearchBox.main](#encore.module_rxSearchBox.main)
   * [encore.rxSearchBox.initialize(rxSearchBoxElement)](#encore.module_rxSearchBox.initialize)
+* [encore.rxMultiSelect](#encore.module_rxMultiSelect)
+  * [encore.rxMultiSelect.main](#encore.module_rxMultiSelect.main)
+  * [encore.rxMultiSelect.initialize(rxMultiSelectElement)](#encore.module_rxMultiSelect.initialize)
+  * [encore.rxMultiSelect~rxSelectFilter](#encore.module_rxMultiSelect..rxSelectFilter)
+    * [rxSelectFilter.multiSelectByLabel(label)](#encore.module_rxMultiSelect..rxSelectFilter.multiSelectByLabel)
+    * [rxSelectFilter.apply(filterData)](#encore.module_rxMultiSelect..rxSelectFilter.apply)
+* [encore.rxSelectFilter](#encore.module_rxSelectFilter)
+  * [encore.rxSelectFilter.main](#encore.module_rxSelectFilter.main)
+  * [encore.rxSelectFilter.initialize(rxSelectFilterElement)](#encore.module_rxSelectFilter.initialize)
 * [encore.rxSortableColumn](#encore.module_rxSortableColumn)
@@ -28,4 +41,6 @@ * [encore.rxSortableColumn.initialize(rxSortableColumnElement, [repeaterString])](#encore.module_rxSortableColumn.initialize)
 * [encore.exercise.rxCharacterCount](#encore.exercise.module_rxCharacterCount)
+* [encore.exercise.rxCollapse](#encore.exercise.module_rxCollapse)
 * [encore.exercise.rxPaginate](#encore.exercise.module_rxPaginate)
 * [encore.exercise.rxSearchBox](#encore.exercise.module_rxSearchBox)
+* [encore.exercise.rxMultiSelect](#encore.exercise.module_rxMultiSelect)
 * [encore.exercise.rxToggleSwitch](#encore.exercise.module_rxToggleSwitch)
@@ -42,5 +57,10 @@
   * [rxCharacterCount.isOverLimit()](#rxCharacterCount.isOverLimit)
+* [rxCollapse](#rxCollapse)
+  * [rxCollapse.isDisplayed()](#rxCollapse.isDisplayed)
 * [rxForm](#rxForm)
   * [rxForm.currencyToPennies(currencyString)](#rxForm.currencyToPennies)
   * [rxForm.slowClick(elem)](#rxForm.slowClick)
+  * [rxForm.fill(reference, formData)](#rxForm.fill)
+  * [rxForm.textField](#rxForm.textField)
+    * [textField.generateAccessor(elem)](#rxForm.textField.generateAccessor)
   * [rxForm.dropdown](#rxForm.dropdown)
@@ -54,2 +74,3 @@ * [dropdown.options](#rxForm.dropdown.options)
     * [dropdown.initialize(selectElement)](#rxForm.dropdown.initialize)
+    * [dropdown.generateAccessor(elem)](#rxForm.dropdown.generateAccessor)
     * [dropdown.option](#rxForm.dropdown.option)
@@ -65,2 +86,3 @@ * [option.text](#rxForm.dropdown.option.text)
     * [checkbox.unselect()](#rxForm.checkbox.unselect)
+    * [checkbox.generateAccessor(elem)](#rxForm.checkbox.generateAccessor)
   * [rxForm.radioButton](#rxForm.radioButton)
@@ -70,4 +92,2 @@ * [radioButton.initialize(radioElement)](#rxForm.radioButton.initialize)
     * [radioButton.select()](#rxForm.radioButton.select)
-  * [rxForm.form](#rxForm.form)
-    * [form.fill(reference, formData)](#rxForm.form.fill)
 * [rxOptionFormTable](#rxOptionFormTable)
@@ -100,2 +120,18 @@ * [rxOptionFormTable.emptyMessage](#rxOptionFormTable.emptyMessage)
   * [rxSearchBox.clear()](#rxSearchBox.clear)
+* [rxMultiSelect](#rxMultiSelect)
+  * [rxMultiSelect.preview](#rxMultiSelect.preview)
+  * [rxMultiSelect.options](#rxMultiSelect.options)
+  * [rxMultiSelect.values](#rxMultiSelect.values)
+  * [rxMultiSelect.selectedOptions](#rxMultiSelect.selectedOptions)
+  * [rxMultiSelect.closeMenu()](#rxMultiSelect.closeMenu)
+  * [rxMultiSelect.openMenu()](#rxMultiSelect.openMenu)
+  * [rxMultiSelect.isOpen()](#rxMultiSelect.isOpen)
+  * [rxMultiSelect.select(optionTexts)](#rxMultiSelect.select)
+  * [rxMultiSelect.unselect(optionTexts)](#rxMultiSelect.unselect)
+  * [rxMultiSelect.option](#rxMultiSelect.option)
+    * [option.text](#rxMultiSelect.option.text)
+    * [option.value](#rxMultiSelect.option.value)
+    * [option.select()](#rxMultiSelect.option.select)
+    * [option.unselect()](#rxMultiSelect.option.unselect)
+    * [option.isSelected()](#rxMultiSelect.option.isSelected)
 * [rxSortableColumn](#rxSortableColumn)
@@ -143,2 +179,20 @@ * [rxSortableColumn.sort](#rxSortableColumn.sort)
 **Returns**: [rxCharacterCount](#rxCharacterCount) - Page object representing the rxCharacterCount object.  
+<a name="encore.module_rxCollapse"></a>
+#encore.rxCollapse
+**Members**
+
+* [encore.rxCollapse](#encore.module_rxCollapse)
+  * [encore.rxCollapse.main](#encore.module_rxCollapse.main)
+  * [encore.rxCollapse.initialize(rxCollapseElement)](#encore.module_rxCollapse.initialize)
+
+<a name="encore.module_rxCollapse.main"></a>
+##encore.rxCollapse.main
+**Returns**: [rxCollapse](#rxCollapse) - Page object representing the _first_ rxCollapse object found on the page.  
+<a name="encore.module_rxCollapse.initialize"></a>
+##encore.rxCollapse.initialize(rxCollapseElement)
+**Params**
+
+- rxCollapseElement `WebElement` - WebElement to be transformed into an rxCollapseElement object.  
+
+**Returns**: [rxCollapse](#rxCollapse) - Page object representing the rxCollapse object.  
 <a name="encore.module_rxOptionFormTable"></a>
@@ -151,2 +205,3 @@ #encore.rxOptionFormTable
   * [encore.rxOptionFormTable.initialize(rxOptionFormTableElement)](#encore.module_rxOptionFormTable.initialize)
+  * [encore.rxOptionFormTable.generateAccessor(elem)](#encore.module_rxOptionFormTable.generateAccessor)
 
@@ -163,2 +218,39 @@ <a name="encore.module_rxOptionFormTable.main"></a>
 **Returns**: [rxOptionFormTable](#rxOptionFormTable) - Page object representing the rxOptionFormTable object.  
+<a name="encore.module_rxOptionFormTable.generateAccessor"></a>
+##encore.rxOptionFormTable.generateAccessor(elem)
+Generates a getter and a setter for an option table on your page, no matter if that
+       rxOptionFormTable contains radio buttons or checkboxes. They will both function identically.
+       This function is very much tied to the [rxOptionFormTable](#rxOptionFormTable) page object,
+       which is much more feature rich than the other components in rxForm. When using this,
+       consider exposing a raw rxOptionFormTable component on your page object as well. This
+       provides users the ability to not only quickly get and set options in the rxOptionFormTable,
+       but also get columns, query cells, and other useful functions exposed in the component.
+
+**Params**
+
+- elem `WebElement` - The WebElement for the rxOptionFormTable.  
+
+**Returns**: `Object` - A getter and a setter to be applied to an option form table in a page object.  
+**Example**  
+```js
+var yourPage = Page.create({
+    paymentMethod: rxOptionFormTable.generateAccessor(element(by.model('paymentMethod.primary')));
+
+    // you should still expose the optionTable as well, for greater usability in integration tests
+    paymentMethodTable: {
+        get: function () {
+            rxOptionFormTable.initialize(element(by.model('paymentMethod.primary')));
+        }
+    }
+});
+
+it('should select the country', function () {
+    // select the card in the third row by `cardNumber`
+    yourPage.paymentMethod = [{cardNumber: '4111 1111 1111 1111'}]; // setter
+    expect(yourPage.paymentMethod).to.eventually.equal([2]); // getter
+    // include a raw option table object as well -- it will simplify more expressive tests
+    expect(yourPage.paymentMethodTable.row(2).cell('Card Type')).to.eventually.equal('Visa');
+});
+```
+
 <a name="encore.module_rxSearchBox"></a>
@@ -182,2 +274,76 @@ #encore.rxSearchBox
 **Returns**: [rxSearchBox](#rxSearchBox) - Page object representing the rxSearchBox object.  
+<a name="encore.module_rxMultiSelect"></a>
+#encore.rxMultiSelect
+**Members**
+
+* [encore.rxMultiSelect](#encore.module_rxMultiSelect)
+  * [encore.rxMultiSelect.main](#encore.module_rxMultiSelect.main)
+  * [encore.rxMultiSelect.initialize(rxMultiSelectElement)](#encore.module_rxMultiSelect.initialize)
+  * [encore.rxMultiSelect~rxSelectFilter](#encore.module_rxMultiSelect..rxSelectFilter)
+    * [rxSelectFilter.multiSelectByLabel(label)](#encore.module_rxMultiSelect..rxSelectFilter.multiSelectByLabel)
+    * [rxSelectFilter.apply(filterData)](#encore.module_rxMultiSelect..rxSelectFilter.apply)
+
+<a name="encore.module_rxMultiSelect.main"></a>
+##encore.rxMultiSelect.main
+**Returns**: [rxMultiSelect](#rxMultiSelect) - Page object representing the _first_ rxMultiSelect object found on the page.  
+<a name="encore.module_rxMultiSelect.initialize"></a>
+##encore.rxMultiSelect.initialize(rxMultiSelectElement)
+**Params**
+
+- rxMultiSelectElement `WebElement` - WebElement to be transformed into an rxMultiSelectElement object.  
+
+**Returns**: [rxMultiSelect](#rxMultiSelect) - Page object representing the rxSelectFilter object.  
+<a name="encore.module_rxMultiSelect..rxSelectFilter"></a>
+##encore.rxMultiSelect~rxSelectFilter
+**Scope**: inner namespace of [rxMultiSelect](#encore.module_rxMultiSelect)  
+**Members**
+
+* [encore.rxMultiSelect~rxSelectFilter](#encore.module_rxMultiSelect..rxSelectFilter)
+  * [rxSelectFilter.multiSelectByLabel(label)](#encore.module_rxMultiSelect..rxSelectFilter.multiSelectByLabel)
+  * [rxSelectFilter.apply(filterData)](#encore.module_rxMultiSelect..rxSelectFilter.apply)
+
+<a name="encore.module_rxMultiSelect..rxSelectFilter.multiSelectByLabel"></a>
+###rxSelectFilter.multiSelectByLabel(label)
+**Params**
+
+- label `string` - The label of the rxMultiSelect dropdown.  
+
+**Returns**: [rxMultiSelect](#rxMultiSelect) - Page object representing the rxSelectFilter object.  
+<a name="encore.module_rxMultiSelect..rxSelectFilter.apply"></a>
+###rxSelectFilter.apply(filterData)
+**Params**
+
+- filterData `Object` - Key-value pairs of the rxMultiSelects' labels and their options to select.
+                                    The value is an object, where the keys are the options and the values indicate
+                                    if the option should be selected or unselected.  
+
+**Returns**: `undefined`  
+**Example**  
+```js
+ multiSelect.filter({
+     Account: {
+         All: false,
+         B: true
+     }
+ });
+```
+
+<a name="encore.module_rxSelectFilter"></a>
+#encore.rxSelectFilter
+**Members**
+
+* [encore.rxSelectFilter](#encore.module_rxSelectFilter)
+  * [encore.rxSelectFilter.main](#encore.module_rxSelectFilter.main)
+  * [encore.rxSelectFilter.initialize(rxSelectFilterElement)](#encore.module_rxSelectFilter.initialize)
+
+<a name="encore.module_rxSelectFilter.main"></a>
+##encore.rxSelectFilter.main
+**Returns**: `rxSelectFilter` - Page object representing the _first_ rxSelectFilter object found on the page.  
+<a name="encore.module_rxSelectFilter.initialize"></a>
+##encore.rxSelectFilter.initialize(rxSelectFilterElement)
+**Params**
+
+- rxSelectFilterElement `WebElement` - WebElement to be transformed into an rxSelectFilterElement object.  
+
+**Returns**: `rxSelectFilter` - Page object representing the rxSelectFilter object.  
 <a name="encore.module_rxSortableColumn"></a>
@@ -287,2 +453,18 @@ #encore.rxSortableColumn
 
+<a name="encore.exercise.module_rxCollapse"></a>
+#encore.exercise.rxCollapse
+rxCollapse exercises.
+
+**Params**
+
+- \[options=\] `Object` - Test options. Used to build valid tests.  
+  - \[cssSelector=\] `string` - Fallback selector string to initialize widget with.  
+
+**Example**  
+```js
+describe('default exercises', encore.exercise.rxCollapse({
+    cssSelector: '.secondary-info rx-paginate', // select one of many widgets on page
+}));
+```
+
 <a name="encore.exercise.module_rxPaginate"></a>
@@ -327,2 +509,19 @@ #encore.exercise.rxPaginate
 
+<a name="encore.exercise.module_rxMultiSelect"></a>
+#encore.exercise.rxMultiSelect
+rxMultiSelect exercises.
+
+**Params**
+
+- \[options=\] `Object` - Test options. Used to build valid tests.  
+  - \[cssSelector=\] `string` - Fallback selector string to initialize widget with.  
+  - \[inputs=[]\] `Object` - The options of the select input.  
+
+**Example**  
+```js
+describe('default exercises', encore.exercise.rxMultiSelect({
+    cssSelector: '.my-form rx-multi-select', // select one of many widgets on page
+}));
+```
+
 <a name="encore.exercise.module_rxToggleSwitch"></a>
@@ -389,2 +588,12 @@ #encore.exercise.rxToggleSwitch
 **Returns**: `Boolean` - Whether or not the 'over-limit' class is displayed.  
+<a name="rxCollapse"></a>
+#rxCollapse
+**Members**
+
+* [rxCollapse](#rxCollapse)
+  * [rxCollapse.isDisplayed()](#rxCollapse.isDisplayed)
+
+<a name="rxCollapse.isDisplayed"></a>
+##rxCollapse.isDisplayed()
+**Returns**: `Boolean` - Whether the root element is currently displayed.  
 <a name="rxForm"></a>
@@ -397,2 +606,5 @@ #rxForm
   * [rxForm.slowClick(elem)](#rxForm.slowClick)
+  * [rxForm.fill(reference, formData)](#rxForm.fill)
+  * [rxForm.textField](#rxForm.textField)
+    * [textField.generateAccessor(elem)](#rxForm.textField.generateAccessor)
   * [rxForm.dropdown](#rxForm.dropdown)
@@ -406,2 +618,3 @@ * [dropdown.options](#rxForm.dropdown.options)
     * [dropdown.initialize(selectElement)](#rxForm.dropdown.initialize)
+    * [dropdown.generateAccessor(elem)](#rxForm.dropdown.generateAccessor)
     * [dropdown.option](#rxForm.dropdown.option)
@@ -417,2 +630,3 @@ * [option.text](#rxForm.dropdown.option.text)
     * [checkbox.unselect()](#rxForm.checkbox.unselect)
+    * [checkbox.generateAccessor(elem)](#rxForm.checkbox.generateAccessor)
   * [rxForm.radioButton](#rxForm.radioButton)
@@ -422,4 +636,2 @@ * [radioButton.initialize(radioElement)](#rxForm.radioButton.initialize)
     * [radioButton.select()](#rxForm.radioButton.select)
-  * [rxForm.form](#rxForm.form)
-    * [form.fill(reference, formData)](#rxForm.form.fill)
 
@@ -459,2 +671,65 @@ <a name="rxForm.currencyToPennies"></a>
 **Returns**: `undefined`  
+<a name="rxForm.fill"></a>
+##rxForm.fill(reference, formData)
+Set `value` in `formData` to the page object's current method `key`.
+       Aids in filling out form data via javascript objects.
+       For an example of this in use, see [encore-ui's end to end tests](http://goo.gl/R7Frwv).
+
+**Params**
+
+- reference `Object` - Context to evaluate under as `this` (typically, `this`).  
+- formData `Object` - Key-value pairs of deeply-nested form items, and their values to fill.  
+
+**Example**  
+```js
+var yourPage = Page.create({
+    form: {
+        set: function (formData) {
+            rxForm.fill(this, formData);
+        }
+    }
+});
+
+yourPage.form = {
+    aTextbox: 'My Name',
+    aRadioButton: 'Second Option'
+    aSelectDropdown: 'My Choice'
+    aModule: {
+        hasMethods: 'Can Accept Input Too',
+        deepNesting: {
+            might: 'be overkill at this level'
+        }
+    }
+};
+```
+
+<a name="rxForm.textField"></a>
+##rxForm.textField
+**Members**
+
+* [rxForm.textField](#rxForm.textField)
+  * [textField.generateAccessor(elem)](#rxForm.textField.generateAccessor)
+
+<a name="rxForm.textField.generateAccessor"></a>
+###textField.generateAccessor(elem)
+Generates a getter and a setter for a text field on your page.
+           Text fields include text boxes, text areas, anything that responds to `.clear()` and `.sendKeys()`.
+
+**Params**
+
+- elem `WebElement` - The WebElement for the text field.  
+
+**Returns**: `Object` - A getter and a setter to be applied to a text field in a page object.  
+**Example**  
+```js
+var yourPage = Page.create({
+    plainTextbox: rxForm.textField.generateAccessor(element(by.model('username')));
+});
+
+it('should fill out the text box', function () {
+    yourPage.plainTextbox = 'My Username'; // setter
+    expect(yourPage.plainTextbox).to.eventually.equal('My Username'); // getter
+});
+```
+
 <a name="rxForm.dropdown"></a>
@@ -472,2 +747,3 @@ ##rxForm.dropdown
   * [dropdown.initialize(selectElement)](#rxForm.dropdown.initialize)
+  * [dropdown.generateAccessor(elem)](#rxForm.dropdown.generateAccessor)
   * [dropdown.option](#rxForm.dropdown.option)
@@ -518,2 +794,23 @@ * [option.text](#rxForm.dropdown.option.text)
 **Returns**: [dropdown](#rxForm.dropdown) - Page object representing a dropdown.  
+<a name="rxForm.dropdown.generateAccessor"></a>
+###dropdown.generateAccessor(elem)
+Generates a getter and a setter for a dropdown on your page.
+
+**Params**
+
+- elem `WebElement` - The WebElement for the dropdown.  
+
+**Returns**: `Object` - A getter and a setter to be applied to a dropdown in a page object.  
+**Example**  
+```js
+var yourPage = Page.create({
+    someDropdown: rxForm.dropdown.generateAccessor(element(by.model('country')));
+});
+
+it('should select the country', function () {
+    yourPage.someDropdown = 'United States'; // setter
+    expect(yourPage.someDropdown).to.eventually.equal('United States'); // getter
+});
+```
+
 <a name="rxForm.dropdown.option"></a>
@@ -557,2 +854,3 @@ ###dropdown.option
   * [checkbox.unselect()](#rxForm.checkbox.unselect)
+  * [checkbox.generateAccessor(elem)](#rxForm.checkbox.generateAccessor)
 
@@ -581,2 +879,23 @@ <a name="rxForm.checkbox.initialize"></a>
 **Returns**: `undefined`  
+<a name="rxForm.checkbox.generateAccessor"></a>
+###checkbox.generateAccessor(elem)
+Generates a getter and a setter for a checkbox on your page.
+
+**Params**
+
+- elem `WebElement` - The WebElement for the checkbox.  
+
+**Returns**: `Object` - A getter and a setter to be applied to a checkbox in a page object.  
+**Example**  
+```js
+var yourPage = Page.create({
+    someCheckbox: rxForm.checkbox.generateAccessor(element(by.model('isPrivate')));
+});
+
+it('should fill out the checkbox', function () {
+    yourPage.someCheckbox = true; // setter
+    expect(yourPage.someCheckbox).to.eventually.be.true; // getter
+});
+```
+
 <a name="rxForm.radioButton"></a>
@@ -608,35 +927,2 @@ ##rxForm.radioButton
 **Returns**: `undefined`  
-<a name="rxForm.form"></a>
-##rxForm.form
-**Members**
-
-* [rxForm.form](#rxForm.form)
-  * [form.fill(reference, formData)](#rxForm.form.fill)
-
-<a name="rxForm.form.fill"></a>
-###form.fill(reference, formData)
-Set `value` in `formData` to the page object's current method `key`.
-           Aids in filling out form data via javascript objects.
-           For an example of this in use, see [encore-ui's end to end tests](http://goo.gl/R7Frwv).
-
-**Params**
-
-- reference `Object` - Context to evaluate under as `this` (typically, `this`).  
-- formData `Object` - Key-value pairs of deeply-nested form items, and their values to fill.  
-
-**Example**  
-```js
-yourPage.fill({
-    aTextbox: 'My Name',
-    aRadioButton: 'Second Option'
-    aSelectDropdown: 'My Choice'
-    aModule: {
-        hasMethods: 'Can Accept Input Too',
-        deepNesting: {
-            might: 'be overkill at this level'
-        }
-    }
-});
-```
-
 <a name="rxOptionFormTable"></a>
@@ -885,2 +1171,97 @@ #rxOptionFormTable
 
+<a name="rxMultiSelect"></a>
+#rxMultiSelect
+**Members**
+
+* [rxMultiSelect](#rxMultiSelect)
+  * [rxMultiSelect.preview](#rxMultiSelect.preview)
+  * [rxMultiSelect.options](#rxMultiSelect.options)
+  * [rxMultiSelect.values](#rxMultiSelect.values)
+  * [rxMultiSelect.selectedOptions](#rxMultiSelect.selectedOptions)
+  * [rxMultiSelect.closeMenu()](#rxMultiSelect.closeMenu)
+  * [rxMultiSelect.openMenu()](#rxMultiSelect.openMenu)
+  * [rxMultiSelect.isOpen()](#rxMultiSelect.isOpen)
+  * [rxMultiSelect.select(optionTexts)](#rxMultiSelect.select)
+  * [rxMultiSelect.unselect(optionTexts)](#rxMultiSelect.unselect)
+  * [rxMultiSelect.option](#rxMultiSelect.option)
+    * [option.text](#rxMultiSelect.option.text)
+    * [option.value](#rxMultiSelect.option.value)
+    * [option.select()](#rxMultiSelect.option.select)
+    * [option.unselect()](#rxMultiSelect.option.unselect)
+    * [option.isSelected()](#rxMultiSelect.option.isSelected)
+
+<a name="rxMultiSelect.preview"></a>
+##rxMultiSelect.preview
+**Returns**: `string` - The preview text for the dropdown.  
+<a name="rxMultiSelect.options"></a>
+##rxMultiSelect.options
+**Returns**: `Array.<string>` - The text of each option element in the dropdown.  
+<a name="rxMultiSelect.values"></a>
+##rxMultiSelect.values
+**Returns**: `Array.<string>` - The value of each option element in the dropdown.  
+<a name="rxMultiSelect.selectedOptions"></a>
+##rxMultiSelect.selectedOptions
+**Returns**: `Array.<optionTexts>` - Array of strings representing the currently selected options.  
+<a name="rxMultiSelect.closeMenu"></a>
+##rxMultiSelect.closeMenu()
+Close the menu
+
+**Returns**: `undefined`  
+<a name="rxMultiSelect.openMenu"></a>
+##rxMultiSelect.openMenu()
+Open the menu
+
+**Returns**: `undefined`  
+<a name="rxMultiSelect.isOpen"></a>
+##rxMultiSelect.isOpen()
+**Returns**: `boolean` - - Whether or not the menu is visible.  
+<a name="rxMultiSelect.select"></a>
+##rxMultiSelect.select(optionTexts)
+**Params**
+
+- optionTexts `Array.<string>` - Array of partial or total strings matching the desired options to select.  
+
+**Returns**: `undefined`  
+<a name="rxMultiSelect.unselect"></a>
+##rxMultiSelect.unselect(optionTexts)
+**Params**
+
+- optionTexts `Array.<string>` - Array of partial or total strings matching the desired options to unselect.  
+
+**Returns**: `undefined`  
+<a name="rxMultiSelect.option"></a>
+##rxMultiSelect.option
+**Params**
+
+- optionText `string` - Partial or total string matching the desired option.  
+
+**Returns**: [option](#rxMultiSelect.option) - Page object representing an option.  
+**Members**
+
+* [rxMultiSelect.option](#rxMultiSelect.option)
+  * [option.text](#rxMultiSelect.option.text)
+  * [option.value](#rxMultiSelect.option.value)
+  * [option.select()](#rxMultiSelect.option.select)
+  * [option.unselect()](#rxMultiSelect.option.unselect)
+  * [option.isSelected()](#rxMultiSelect.option.isSelected)
+
+<a name="rxMultiSelect.option.text"></a>
+###option.text
+**Returns**: `string` - The text inside of the current option.  
+<a name="rxMultiSelect.option.value"></a>
+###option.value
+**Returns**: `string` - The value bound to the option.  
+<a name="rxMultiSelect.option.select"></a>
+###option.select()
+Selects the option in the dropdown.
+
+**Returns**: `undefined`  
+<a name="rxMultiSelect.option.unselect"></a>
+###option.unselect()
+Unselects the option in the dropdown.
+
+**Returns**: `undefined`  
+<a name="rxMultiSelect.option.isSelected"></a>
+###option.isSelected()
+**Returns**: `Boolean` - Whether or not the option is currently selected.  
 <a name="rxSortableColumn"></a>
@@ -887,0 +1268,0 @@ #rxSortableColumn

exercise.js

@@ -162,3 +162,58 @@ /*jshint node:true*/
 
+var rxCollapse = require('./index').rxCollapse;
 
+/**
+   rxCollapse exercises.
+   @exports encore.exercise.rxCollapse
+   @param {Object} [options=] - Test options. Used to build valid tests.
+   @param {string} [options.cssSelector=] - Fallback selector string to initialize widget with.
+   @example
+   ```js
+   describe('default exercises', encore.exercise.rxCollapse({
+       cssSelector: '.secondary-info rx-paginate', // select one of many widgets on page
+   }));
+   ```
+ */
+exports.rxCollapse = function (options) {
+    if (options === undefined) {
+        options = {};
+    }
+
+    options = _.defaults(options, { /* defaults go here */ });
+
+    return function () {
+        var component;
+
+        before(function () {
+            if (options.cssSelector === undefined) {
+                component = rxCollapse.main;
+            } else {
+                component = rxCollapse.initialize($(options.cssSelector));
+            }
+        });
+
+        it('should show the element', function () {
+            expect(component.isDisplayed()).to.eventually.be.true;
+        });
+
+        it('should show a custom title', function () {
+            expect(component.title.getText()).to.eventually.equal('A Custom Title');
+        });
+
+        it('should expand and collapse with toggle', function () {
+            expect(component.isExpanded).to.eventually.be.true;
+
+            // Collapse
+            component.btnToggle.click();
+            expect(component.isExpanded).to.eventually.be.false;
+
+            // Expand
+            component.btnToggle.click();
+            expect(component.isExpanded).to.eventually.be.true;
+        });
+
+    };
+};
+
+
 var rxPaginate = require('./index').rxPaginate;
@@ -425,2 +480,88 @@
 
+var rxMultiSelect = require('./index').rxMultiSelect;
+
+/**
+   rxMultiSelect exercises.
+   @exports encore.exercise.rxMultiSelect
+   @param {Object} [options=] - Test options. Used to build valid tests.
+   @param {string} [options.cssSelector=] - Fallback selector string to initialize widget with.
+   @param {Object} [options.inputs=[]] - The options of the select input.
+   @example
+   ```js
+   describe('default exercises', encore.exercise.rxMultiSelect({
+       cssSelector: '.my-form rx-multi-select', // select one of many widgets on page
+   }));
+   ```
+ */
+exports.rxMultiSelect = function (options) {
+    if (options === undefined) {
+        options = {};
+    }
+
+    options = _.defaults(options, {
+        inputs: []
+    });
+
+    return function () {
+        var component;
+
+        before(function () {
+            if (options.cssSelector === undefined) {
+                component = rxMultiSelect.main;
+            } else {
+                component = rxMultiSelect.initialize($(options.cssSelector));
+            }
+        });
+
+        it('hides the menu initially', function () {
+            expect(component.isOpen()).to.eventually.be.false;
+        });
+
+        it('shows the menu when clicked', function () {
+            component.openMenu();
+            expect(component.isOpen()).to.eventually.be.true;
+        });
+
+        it('selects no options', function () {
+            component.unselect(['Select All']);
+            expect(component.selectedOptions).to.eventually.be.empty;
+            expect(component.preview).to.eventually.equal('None');
+        });
+
+        it('selects a single option', function () {
+            var input = _.first(options.inputs);
+            component.select([input]);
+            expect(component.selectedOptions).to.eventually.eql([input]);
+            expect(component.preview).to.eventually.equal(input);
+        });
+
+        if (options.inputs.length > 2) {
+            it('selects multiple options', function () {
+                var inputs = options.inputs.slice(0, 2);
+                component.select(inputs);
+                expect(component.selectedOptions).to.eventually.eql(inputs);
+                expect(component.preview).to.eventually.equal('2 Selected');
+            });
+        }
+
+        it('selects all options', function () {
+            component.select(['Select All']);
+            expect(component.selectedOptions).to.eventually.eql(['Select All'].concat(options.inputs));
+            expect(component.preview).to.eventually.equal('All Selected');
+        });
+
+        it('unselects all options', function () {
+            component.unselect(['Select All']);
+            expect(component.selectedOptions).to.eventually.be.empty;
+            expect(component.preview).to.eventually.equal('None');
+        });
+
+        it('hides the menu when another element is clicked', function () {
+            component.rootElement.element(by.xpath('../..')).click();
+            expect(component.isOpen()).to.eventually.be.false;
+        });
+
+    };
+};
+
 var rxToggleSwitch = require('./index').rxToggleSwitch;
@@ -427,0 +568,0 @@

package.json

@@ -5,3 +5,3 @@ {
   "description": "Midway test page objects for all of the Encore UI components",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "main": "index.js",
@@ -8,0 +8,0 @@ "license": "Apache License, Version 2.0",

README.md

@@ -55,2 +55,120 @@ # rx-page-objects
 
+## Forms
+
+Forms are everywhere. And they are *horribly boring*. Most forms are not innovative by themselves, but can be the epicenter of many tests that validate input, success messages, error responses, etc. How can you make a form with rx-page-objects? Easy!
+
+**bad**
+```js
+it('should fill out the form correctly', function () {
+    element(by.model('user.name')).sendKeys('Charlie Day');
+    element(by.model('user.country')).click();
+    element.all(by.repeater('country in countries')).element(by.cssContainingText('option', 'United States')).click();
+    element(by.buttonText('Submit')).click();
+    expect(element.all(by.repeater('message in messages')).first.getText()).to.eventually.contain('Success');
+});
+
+it('should show an error message when submitting a foreign country', function () {
+    // http://i.imgur.com/ag8KcpB.jpg
+    element(by.model('user.name')).sendKeys('Lāčplēsis');
+    element(by.model('user.country')).click();
+    element.all(by.repeater('country in countries')).element(by.cssContainingText('option', 'Latvia')).click();
+    element(by.buttonText('Submit')).click();
+    expect(element.all(by.repeater('message in messages')).first.getText()).to.eventually.contain('Error');
+});
+
+// copy-pasted tests continue below...I sure hope this form never changes...
+```
+
+**better**
+```js
+var Page = require('astrolabe').Page;
+
+var form = Page.create({
+
+    name: {
+        get: function () {
+            return element(by.model('user.name')).getAttribute('value');
+        },
+        set: function (input) {
+            element(by.model('user.name')).clear();
+            element(by.model('user.name')).sendKeys(input);
+        }
+    },
+
+    country: {
+        get: function () {
+            return encore.rxForm.dropdown.initiailze(element(by.model('user.country'))).selectedOption;
+        },
+        set: function (countryName) {
+            encore.rxForm.dropdown.initiailze(element(by.model('user.country'))).select(countryName);
+        }
+    },
+
+    submit: {
+        value: function () {
+            element(by.buttonText('Submit')).click();
+        }
+    }
+
+});
+
+it('should fill out the form correctly', function () {
+    form.name = 'Charlie Day';
+    form.country = 'United States';
+    form.submit();
+    expect(encore.rxNotify.all.exists('Success')).to.eventually.be.true;
+});
+
+it('should show an error message when submitting a foreign country', function () {
+    form.name = 'Lāčplēsis';
+    form.country = 'Latvia';
+    form.submit();
+    expect(encore.rxNotify.all.exists('Error')).to.eventually.be.true;
+});
+```
+
+**best**
+```js
+var Page = require('astrolabe').Page;
+
+var form = Page.create({
+
+    fill: {
+        value: function (formData) {
+            encore.rxForm.fill(this, formData);
+            this.submit();
+        }
+    },
+
+    name: encore.rxForm.textField.generateAccessor(element(by.model('user.name'))),
+
+    country: encore.rxForm.dropdown.generateAccessor(element(by.model('user.country')),
+
+    submit: {
+        value: function () {
+            element(by.buttonText('Submit')).click();
+        }
+    }
+
+});
+
+it('should fill out the form correctly', function () {
+    form.fill({
+        name: 'Charlie Day';
+        country: 'United States'
+    });
+    expect(encore.rxNotify.all.exists('Success')).to.eventually.be.true;
+});
+
+it('should show an error message when submitting a foreign country', function () {
+    form.fill({
+        name: 'Lāčplēsis';
+        country: 'Latvia'
+    });
+    expect(encore.rxNotify.all.exists('Error')).to.eventually.be.true;
+});
+```
+
+More examples of supported form entry elements can be found in the [test library's API documentation](http://rackerlabs.github.io/encore-ui/rx-page-objects/index.html#rxForm).
+
 When you're using rx-page-objects in your app, you can get back to focusing on what matters -- testing the *business logic* that your app provides, not that all the little buttons, notifications, and menus are working.
@@ -108,4 +226,4 @@
 
-Documentation: http://rackerlabs.github.io/encore-ui/rx-page-objects/index.html
+[Full Documentation](http://rackerlabs.github.io/encore-ui/rx-page-objects/index.html).
 
-Components Demo: http://rackerlabs.github.io/encore-ui/#/overview
+[Components Demo](http://rackerlabs.github.io/encore-ui/#/overview).

No alert changes

Improved metrics

Total package byte prevSize

240714

increased by24.75%

Lines of code

3866

increased by19.14%

Number of lines in readme file

228

increased by107.27%

No dependency changes