browser-monkey - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

index.js

@@ -82,3 +82,3 @@ var retry = require('trytryagain');
 
-          expect(actualTexts).to.eql(text);
+          expect(actualTexts).to.eql(text.map(String));
         } else {
@@ -138,2 +138,6 @@ var elementText = els.text();
 Selector.prototype.extend = function (methods) {
+  return this.component(methods);
+};
+
+Selector.prototype.component = function (methods) {
   function Extension() {
@@ -140,0 +144,0 @@ Selector.apply(this, arguments);

package.json

 {
   "name": "browser-monkey",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "reliable dom testing",
@@ -5,0 +5,0 @@ "main": "index.js",

readme.md

@@ -100,5 +100,67 @@ # browser monkey
 
-Ensures that the scope contains the `css` and `options.text`, the scope returned still refers to the outer scope.
+Ensures that the scope contains the `css` and `options.text`, the scope returned still refers to the outer scope. This is useful, for example, in finding list items that contain certain elements, but still referring to the list items.
 
 * `css` - css to find in the scope
 * `options.text` - text to find in the scope.
+
+For example, find the `li` that contains the `h2` with the text `Second`, and click the link in the `li`.
+
+```html
+<ul>
+	<li>
+		<h2>First</h2>
+        <a href="first">link</a>
+	</li>
+	<li>
+		<h2>Second</h2>
+        <a href="second">link</a>
+	</li>
+	<li>
+		<h2>Third</h2>
+        <a href="third">link</a>
+	</li>
+</ul>
+```
+
+```js
+browser.find('ul li').containing('h2', {text: 'Second'}).find('a').click();
+```
+
+## component
+
+Represents a component on the page, with methods to access certain elements of the component.
+
+```js
+var componentScope = scope.component(methods);
+```
+
+* `methods` - an object containing functions for scopes of elements inside the component.
+* `componentScope` - a scope, but containing additional access methods
+
+You can create a component from another component too, simply extending the functionality in that component.
+
+For example, you may have an area on the page that deals with instant messages. You have a list of messages, a text box to enter a new message, and a button to send the message.
+
+```js
+var messages = browser.component({
+  messages: function () {
+    return this.find('.messages');
+  },
+  messageText: function () {
+    return this.find('input.message');
+  },
+  sendButton: function () {
+    return this.find('button', {text: 'Send'});
+  }
+});
+```
+
+You can then use the messages component:
+
+```js
+messages.messages().shouldHave({text: ['hi!', 'wassup?']}).then(function () {
+  return messages.messageBox().typeIn("just hangin'");
+}).then(function () {
+  return messages.sendButton().click();
+});
+```

test/browserMonkeySpec.js

@@ -77,7 +77,7 @@ var browser = require('..');
     it('eventually finds elements and asserts that they each have text', function () {
-      var good = browser.find('.element div').shouldHave({text: ['one', 'two']});
+      var good = browser.find('.element div').shouldHave({text: ['one', 2]});
       var bad1 = browser.find('.element div').shouldHave({text: ['one']});
       var bad2 = browser.find('.element div').shouldHave({text: ['one', 'three']});
 
-      eventuallyInsertHtml('<div class="element"><div>\none</div><div>two\n</div></div>');
+      eventuallyInsertHtml('<div class="element"><div>\none</div><div> 2\n</div></div>');
 
@@ -227,5 +227,5 @@ return Promise.all([
 
-  describe('extend', function () {
+  describe('component', function () {
     it('can return new selectors by extending', function () {
-      var user = browser.extend({
+      var user = browser.component({
         name: function () {
@@ -248,3 +248,3 @@ return this.find('.user-name');
     it('can return new scoped selectors', function () {
-      var admin = browser.extend({
+      var admin = browser.component({
         user: function () {
@@ -255,3 +255,3 @@ return user.scope(this.find('.user'));
 
-      var user = browser.extend({
+      var user = browser.component({
         name: function () {
@@ -258,0 +258,0 @@ return this.find('.user-name');

No alert changes

Improved metrics

Total package byte prevSize

25837

increased by7.39%

Lines of code

548

increased by0.55%

Number of lines in readme file

166

increased by59.62%

No dependency changes