docs: Add failure screenshot

* Remove need for an http server. Followed example from cypress-tab-plugin
* Fix issue where selectors were no longer logged when pipe failed to find an element when traversals were used

Author: NicholasBoll

Diff for: README.md

@@ -138,6 +138,24 @@ cy.wrap({ foo: 'bar' })
 //  - ASSERT  expected 'bar' to equal 'bar'
 ```
 
+Here's a screenshot of a failure using `cypress-pipe` and `loggable`:
+
+![cypress-pipe failure](./failure.png)
+
+The code that produced this was:
+
+```ts
+const getFirst = $el => $el.find('#first')
+const getSecond = loggable('getSecond', selector => $el => $el.find(selector))
+
+cy.get('body')
+  .pipe(getFirst)
+  .pipe(getSecond('#second1'))
+  .should('contain', 'foobar')
+```
+
+Pipe tries to add as much debugging information as possible.
+
 
 ## Installation
 ```

Diff for: cypress.json

@@ -1,3 +1,3 @@
 {
-  "baseUrl": "http://localhost:3333"
+
 }

Diff for: index.html renamed to cypress/fixtures/index.html

@@ -22,7 +22,6 @@ describe('loggable', () => {
   context('when a name is provided', () => {
     it('should set the displayName of the function', () => {
       const getFoo = loggable('getFoo', () => 'foo')
-      console.log('getFoo', getFoo)
       expect(getFoo.displayName).to.equal('getFoo')
     })
   })
@@ -99,7 +98,7 @@ describe('pipe()', () => {
         .pipe(subject => subject.foo.bar)
         .should('equal', 'baz')
     })
-  
+
     it('should allow for a specified timeout', (done) => {
       const obj = { foo: 'bar' }
       setTimeout(() => { obj.foo = 'baz' }, delay)
@@ -110,7 +109,7 @@ describe('pipe()', () => {
           // we should not get here
           done(new Error('Failed to fail on timeout'))
         })
-      
+
       cy.on('fail', (err) => {
         expect(err.message).to.include('Timed out retrying')
         expect(err.message).to.include("expected 'bar' to equal 'baz'")
@@ -124,9 +123,9 @@ describe('pipe()', () => {
       const getText = $el => $el.text()
 
       beforeEach(() => {
-        cy.visit('/')
+        cy.visit('/cypress/fixtures/')
       })
-  
+
       it('should have the correct element in the Command Log', () => {
         let lastLog
 
@@ -150,7 +149,7 @@ describe('pipe()', () => {
             lastLog = log
           }
         })
-        
+
         cy.get('body')
           .pipe(getFirst)
           .should(() => {
@@ -169,6 +168,32 @@ describe('pipe()', () => {
           .should('equal', 'foobar')
       })
 
+      it('should fail with the selector in the error message if element is not found', (done) => {
+        const assertMessage = error => {
+          expect(error.message).to.contain('#wontfind')
+          Cypress.off('fail', assertMessage)
+          done()
+        }
+        Cypress.on('fail', assertMessage)
+
+        const thisWillFail = $el => $el.find('#wontfind')
+        cy.get('body')
+          .pipe(thisWillFail, { timeout: 50 })
+      })
+
+      it('should fail with the selector in the error message if element is not found even if multiple traversals are used', (done) => {
+        const assertMessage = error => {
+          expect(error.message).to.contain('#wontfind')
+          Cypress.off('fail', assertMessage)
+          done()
+        }
+        Cypress.on('fail', assertMessage)
+
+        const thisWillFail = $el => $el.find('#first').find('#wontfind')
+        cy.get('body')
+          .pipe(thisWillFail, { timeout: 50 })
+      })
+
       it('should create a snapshot', () => {
         let lastLog
         cy.on('log:added', (attrs, log) => {
@@ -223,7 +248,7 @@ describe('pipe()', () => {
       const getText = $el => $el.text()
 
       beforeEach(() => {
-        cy.visit('/')
+        cy.visit('/cypress/fixtures/')
       })
 
       it('should have the correct element in the Command Log', () => {
@@ -256,7 +281,7 @@ describe('pipe()', () => {
             lastLog = log
           }
         })
-        
+
         cy.get('body')
           .pipe(getFirst)
           .should(() => {
@@ -266,7 +291,7 @@ describe('pipe()', () => {
             expect(consoleProps.Yielded).to.have.id('first')
           })
       })
-      
+
       it('should wait to continue for each step and resolve the chain with the correct value', () => {
         cy.get('body')
           .pipe(getFirst)

Diff for: cypress/integration/example_spec.js

@@ -3,6 +3,34 @@
 const isJquery = obj =>
   !!(obj && obj.jquery && Cypress._.isFunction(obj.constructor))
 
+const traversals = "find filter not children eq closest first last next nextAll nextUntil parent parents parentsUntil prev prevAll prevUntil siblings".split(" ")
+
+/**
+ * Patch the provided jQuery collection to add a `.selector` property to all traversal methods just
+ * like Cypress does in https://github.com/cypress-io/cypress/blob/13ebb9779d21238cae4da4b63cf6230da4a5341d/packages/driver/src/cy/commands/traversals.coffee#L50
+ * This patch allows a failure to log an error message that includes the last selector used when
+ * failing to find an element. A nice touch!
+ * @param {JQueryStatic} $el
+ */
+const patchJQueryForSelectorProperty = ($el) => {
+  traversals.forEach(traversal => {
+    const originalFn = $el.fn[traversal]
+
+    $el.fn[traversal] = function (...args) {
+      const ret = originalFn.apply(this, args)
+      ret.selector = Cypress._.chain(args)
+        .reject(Cypress._.isFunction)
+        .reject(Cypress._.isObject)
+        .reject(a => a == null)
+        .value()
+        .join(', ')
+      return ret
+    }
+  })
+}
+
+patchJQueryForSelectorProperty(Cypress.$)
+
 const getElements = $el => {
   if (!$el && !$el.length) {
     return
@@ -19,7 +47,7 @@ const getElements = $el => {
 
 /**
  * Format the argument according to its type
- * @param {any} arg 
+ * @param {any} arg
  */
 function formatArg (arg) {
   switch (typeof arg) {
@@ -32,11 +60,15 @@ function formatArg (arg) {
 
 Cypress.Commands.add('pipe', { prevSubject: true }, (subject, fn, options = { }) => {
 
+  // if (isJquery(subject)) {
+  //   patchJQueryForSelectorProperty(subject);
+  // }
+
   const getEl = (value) => isJquery(value) ? value : isJquery(subject) ? subject : undefined
 
   const now = performance.now()
   let isCy = false
-  
+
   Cypress._.defaults(options, {
     log: true,
     timeout: 4000,

Diff for: failure.png

@@ -4,8 +4,7 @@
   "description": "Create custom commands using plain-old functions",
   "main": "index.js",
   "scripts": {
-    "start": "http-server . -p 3333",
-    "test": "concurrently -k --success first 'npm run start' 'wait-on http://localhost:3333 && cypress run'"
+    "test": "cypress run'"
   },
   "repository": {
     "type": "git",
@@ -29,9 +28,6 @@
   },
   "homepage": "https://github.com/NicholasBoll/cypress-pipe#readme",
   "devDependencies": {
-    "concurrently": "^4.1.0",
-    "cypress": "^3.2.0",
-    "http-server": "^0.11.1",
-    "wait-on": "^3.1.0"
+    "cypress": "^3.8.1"
   }
 }