Split hooks and open hooks in ide from reporter (#7821)

* Add invocation details to hooks

* Add hooks to emitted root runnable

* Hook details model

* Progress on hook models

* Add commands to hook

* Fix display of hooks

* Display hooks in correct order

* (More) efficiently reorder hooks and display split numbers

* Open hook in IDE functionality

* Properly style button to open in IDE

* Add ability to open test body in IDE

* Fix hooks specs

* Runnables store tests

* Test model unit tests

* HookDetails -> HookProps

* Fix reporter integration tests

* Fix issue with after hook

* Update runner mocha tests

* Remove driver integration test that is no longer needed

* Update snapshot for server tests

* Add reporter integration tests for hooks

* Fix driver querying test

* Add runner test for hooks

* Update reporter hook tests to check for before all

* Fix before/after hook counts

* Fix runner test

* Fix issue with stack trace in ff and clean up mocha override

* Just incase someone names their test or support file common.js

Co-authored-by: Chris Breiding <chrisbreiding@users.noreply.github.com>

packages/driver/cypress/integration/commands/querying_spec.js

@@ -502,20 +502,18 @@ describe('src/cy/commands/querying', () => {
     })
 
     describe('.log', () => {
-      beforeEach(() => {
-        beforeEach(function () {
-          this.logs = []
-
-          cy.on('log:added', (attrs, log) => {
-            if (attrs.name === 'root') {
-              this.lastLog = log
+      beforeEach(function () {
+        this.logs = []
 
-              this.logs.push(log)
-            }
-          })
+        cy.on('log:added', (attrs, log) => {
+          if (attrs.name === 'root') {
+            this.lastLog = log
 
-          return null
+            this.logs.push(log)
+          }
         })
+
+        return null
       })
 
       it('can turn off logging', () => {

packages/driver/cypress/integration/cypress/runner_spec.js

@@ -11,16 +11,6 @@ Cypress.on('test:after:run', (test) => {
 })
 
 describe('src/cypress/runner', () => {
-  it('handles "double quotes" in test name', (done) => {
-    cy.once('log:added', (log) => {
-      expect(log.hookName).to.equal('test')
-
-      return done()
-    })
-
-    return cy.wrap({})
-  })
-
   context('pending tests', () => {
     it('is not pending', () => {})
 

packages/driver/src/cypress.js

@@ -198,7 +198,7 @@ class $Cypress {
     window.cy = this.cy
     this.isCy = this.cy.isCy
     this.log = $Log.create(this, this.cy, this.state, this.config)
-    this.mocha = $Mocha.create(specWindow, this)
+    this.mocha = $Mocha.create(specWindow, this, this.config)
     this.runner = $Runner.create(specWindow, this.mocha, this, this.cy)
 
     // wire up command create to cy

packages/driver/src/cypress/cy.js

@@ -1270,15 +1270,15 @@ const create = function (specWindow, Cypress, Cookies, state, config, log) {
       return snapshots.getStyles(...args)
     },
 
-    setRunnable (runnable, hookName) {
+    setRunnable (runnable, hookId) {
       // when we're setting a new runnable
       // prepare to run again!
       stopped = false
 
       // reset the promise again
       state('promise', undefined)
 
-      state('hookName', hookName)
+      state('hookId', hookId)
 
       state('runnable', runnable)
 

packages/driver/src/cypress/log.js

@@ -13,7 +13,7 @@ const $errUtils = require('./error_utils')
 const groupsOrTableRe = /^(groups|table)$/
 const parentOrChildRe = /parent|child/
 const SNAPSHOT_PROPS = 'id snapshots $el url coords highlightAttr scrollBy viewportWidth viewportHeight'.split(' ')
-const DISPLAY_PROPS = 'id alias aliasType callCount displayName end err event functionName hookName instrument isStubbed message method name numElements numResponses referencesAlias renderProps state testId timeout type url visible wallClockStartedAt'.split(' ')
+const DISPLAY_PROPS = 'id alias aliasType callCount displayName end err event functionName hookId instrument isStubbed message method name numElements numResponses referencesAlias renderProps state testId timeout type url visible wallClockStartedAt'.split(' ')
 const BLACKLIST_PROPS = 'snapshots'.split(' ')
 
 let delay = null
@@ -172,7 +172,7 @@ const defaults = function (state, config, obj) {
     state: 'pending',
     instrument: 'command',
     url: state('url'),
-    hookName: state('hookName'),
+    hookId: state('hookId'),
     testId: runnable ? runnable.id : undefined,
     viewportWidth: state('viewportWidth'),
     viewportHeight: state('viewportHeight'),

packages/driver/src/cypress/mocha.js

@@ -1,5 +1,6 @@
 const _ = require('lodash')
 const $errUtils = require('./error_utils')
+const $stackUtils = require('./stack_utils')
 
 // in the browser mocha is coming back
 // as window
@@ -25,6 +26,7 @@ function invokeFnWithOriginalTitle (ctx, originalTitle, mochaArgs, fn) {
 
   return ret
 }
+
 function overloadMochaFnForConfig (fnName, specWindow) {
   const _fn = specWindow[fnName]
 
@@ -86,7 +88,53 @@ function overloadMochaFnForConfig (fnName, specWindow) {
   })
 }
 
-const ui = (specWindow, _mocha) => {
+function getInvocationDetails (specWindow, config) {
+  if (specWindow.Error) {
+    let stack = (new specWindow.Error()).stack
+
+    // firefox throws a different stack than chromium
+    // which includes this file (mocha.js) and mocha/.../common.js at the top
+    if (specWindow.Cypress.browser.family === 'firefox') {
+      stack = $stackUtils.stackWithLinesDroppedFromMarker(stack, 'mocha/lib/interfaces/common.js')
+    }
+
+    return $stackUtils.getSourceDetailsForFirstLine(stack, config('projectRoot'))
+  }
+}
+
+function overloadMochaHook (fnName, suite, specWindow, config) {
+  const _fn = suite[fnName]
+
+  suite[fnName] = function (title, fn) {
+    const _createHook = this._createHook
+
+    this._createHook = function (title, fn) {
+      const hook = _createHook.call(this, title, fn)
+
+      hook.invocationDetails = getInvocationDetails(specWindow, config)
+
+      return hook
+    }
+
+    const ret = _fn.call(this, title, fn)
+
+    this._createHook = _createHook
+
+    return ret
+  }
+}
+
+function overloadMochaTest (suite, specWindow, config) {
+  const _fn = suite.addTest
+
+  suite.addTest = function (test) {
+    test.invocationDetails = getInvocationDetails(specWindow, config)
+
+    return _fn.call(this, test)
+  }
+}
+
+const ui = (specWindow, _mocha, config) => {
   // Override mocha.ui so that the pre-require event is emitted
   // with the iframe's `window` reference, rather than the parent's.
   _mocha.ui = function (name) {
@@ -109,13 +157,21 @@ const ui = (specWindow, _mocha) => {
     overloadMochaFnForConfig('describe', specWindow)
     overloadMochaFnForConfig('context', specWindow)
 
+    // overload tests and hooks so that we can get the stack info
+    overloadMochaHook('beforeAll', this.suite.constructor.prototype, specWindow, config)
+    overloadMochaHook('beforeEach', this.suite.constructor.prototype, specWindow, config)
+    overloadMochaHook('afterAll', this.suite.constructor.prototype, specWindow, config)
+    overloadMochaHook('afterEach', this.suite.constructor.prototype, specWindow, config)
+
+    overloadMochaTest(this.suite.constructor.prototype, specWindow, config)
+
     return this
   }
 
   return _mocha.ui('bdd')
 }
 
-const setMochaProps = (specWindow, _mocha) => {
+const setMochaProps = (specWindow, _mocha, config) => {
   // Mocha is usually defined in the spec when used normally
   // in the browser or node, so we add it as a global
   // for our users too
@@ -128,21 +184,17 @@ const setMochaProps = (specWindow, _mocha) => {
 
   // this needs to be part of the configuration of cypress.json
   // we can't just forcibly use bdd
-  return ui(specWindow, _mocha)
+  return ui(specWindow, _mocha, config)
 }
 
-const globals = (specWindow, reporter) => {
-  if (reporter == null) {
-    reporter = () => {}
-  }
-
+const createMocha = (specWindow, config) => {
   const _mocha = new Mocha({
-    reporter,
+    reporter: () => {},
     timeout: false,
   })
 
   // set mocha props on the specWindow
-  setMochaProps(specWindow, _mocha)
+  setMochaProps(specWindow, _mocha, config)
 
   // return the newly created mocha instance
   return _mocha
@@ -269,15 +321,15 @@ const override = (Cypress) => {
   patchRunnableResetTimeout()
 }
 
-const create = (specWindow, Cypress, reporter) => {
+const create = (specWindow, Cypress, config) => {
   restore()
 
   override(Cypress)
 
   // generate the mocha + Mocha globals
   // on the specWindow, and get the new
   // _mocha instance
-  const _mocha = globals(specWindow, reporter)
+  const _mocha = createMocha(specWindow, config)
 
   const _runner = getRunner(_mocha)
 
@@ -307,7 +359,5 @@ const create = (specWindow, Cypress, reporter) => {
 module.exports = {
   restore,
 
-  globals,
-
   create,
 }

packages/driver/src/cypress/runner.js

@@ -17,8 +17,8 @@ const HOOKS = 'beforeAll beforeEach afterEach afterAll'.split(' ')
 const TEST_BEFORE_RUN_EVENT = 'runner:test:before:run'
 const TEST_AFTER_RUN_EVENT = 'runner:test:after:run'
 
-const RUNNABLE_LOGS = 'routes agents commands'.split(' ')
-const RUNNABLE_PROPS = 'id order title root hookName hookId err state failedFromHookId body speed type duration wallClockStartedAt wallClockDuration timings file originalTitle'.split(' ')
+const RUNNABLE_LOGS = 'routes agents commands hooks'.split(' ')
+const RUNNABLE_PROPS = 'id order title root hookName hookId err state failedFromHookId body speed type duration wallClockStartedAt wallClockDuration timings file originalTitle invocationDetails'.split(' ')
 
 const debug = require('debug')('cypress:driver:runner')
 
@@ -131,6 +131,27 @@ const wrapAll = (runnable) => {
   )
 }
 
+const condenseHooks = (runnable, getHookId) => {
+  const hooks = _.compact(_.concat(
+    runnable._beforeAll,
+    runnable._beforeEach,
+    runnable._afterAll,
+    runnable._afterEach,
+  ))
+
+  return _.map(hooks, (hook) => {
+    if (!hook.hookId) {
+      hook.hookId = getHookId()
+    }
+
+    if (!hook.hookName) {
+      hook.hookName = getHookName(hook)
+    }
+
+    return wrap(hook)
+  })
+}
+
 const getHookName = (hook) => {
   // find the name of the hook by parsing its
   // title and pulling out whats between the quotes
@@ -378,7 +399,7 @@ const hasOnly = (suite) => {
   )
 }
 
-const normalizeAll = (suite, initialTests = {}, setTestsById, setTests, onRunnable, onLogsById, getTestId) => {
+const normalizeAll = (suite, initialTests = {}, setTestsById, setTests, onRunnable, onLogsById, getTestId, getHookId) => {
   let hasTests = false
 
   // only loop until we find the first test
@@ -396,7 +417,7 @@ const normalizeAll = (suite, initialTests = {}, setTestsById, setTests, onRunnab
   // create optimized lookups for the tests without
   // traversing through it multiple times
   const tests = {}
-  const normalizedSuite = normalize(suite, tests, initialTests, onRunnable, onLogsById, getTestId)
+  const normalizedSuite = normalize(suite, tests, initialTests, onRunnable, onLogsById, getTestId, getHookId)
 
   if (setTestsById) {
     // use callback here to hand back
@@ -420,7 +441,7 @@ const normalizeAll = (suite, initialTests = {}, setTestsById, setTests, onRunnab
   return normalizedSuite
 }
 
-const normalize = (runnable, tests, initialTests, onRunnable, onLogsById, getTestId) => {
+const normalize = (runnable, tests, initialTests, onRunnable, onLogsById, getTestId, getHookId) => {
   const normalizeRunnable = (runnable) => {
     let i
 
@@ -446,6 +467,9 @@ const normalize = (runnable, tests, initialTests, onRunnable, onLogsById, getTes
       _.extend(runnable, i)
     }
 
+    // merge all hooks into single array
+    runnable.hooks = condenseHooks(runnable, getHookId)
+
     // reduce this runnable down to its props
     // and collections
     return wrapAll(runnable)
@@ -466,7 +490,7 @@ const normalize = (runnable, tests, initialTests, onRunnable, onLogsById, getTes
     _.each({ tests: runnable.tests, suites: runnable.suites }, (_runnables, type) => {
       if (runnable[type]) {
         return normalizedRunnable[type] = _.map(_runnables, (runnable) => {
-          return normalize(runnable, tests, initialTests, onRunnable, onLogsById, getTestId)
+          return normalize(runnable, tests, initialTests, onRunnable, onLogsById, getTestId, getHookId)
         })
       }
     })
@@ -480,7 +504,7 @@ const normalize = (runnable, tests, initialTests, onRunnable, onLogsById, getTes
     if (suite._onlyTests.length) {
       suite.tests = suite._onlyTests
       normalizedSuite.tests = _.map(suite._onlyTests, (test) => {
-        const normalizedTest = normalizeRunnable(test, initialTests, onRunnable, onLogsById, getTestId)
+        const normalizedTest = normalizeRunnable(test, initialTests, onRunnable, onLogsById, getTestId, getHookId)
 
         push(normalizedTest)
 
@@ -493,20 +517,20 @@ const normalize = (runnable, tests, initialTests, onRunnable, onLogsById, getTes
       suite.tests = []
       normalizedSuite.tests = []
       _.each(suite._onlySuites, (onlySuite) => {
-        const normalizedOnlySuite = normalizeRunnable(onlySuite, initialTests, onRunnable, onLogsById, getTestId)
+        const normalizedOnlySuite = normalizeRunnable(onlySuite, initialTests, onRunnable, onLogsById, getTestId, getHookId)
 
         if (hasOnly(onlySuite)) {
           return filterOnly(normalizedOnlySuite, onlySuite)
         }
       })
 
       suite.suites = _.filter(suite.suites, (childSuite) => {
-        const normalizedChildSuite = normalizeRunnable(childSuite, initialTests, onRunnable, onLogsById, getTestId)
+        const normalizedChildSuite = normalizeRunnable(childSuite, initialTests, onRunnable, onLogsById, getTestId, getHookId)
 
         return (suite._onlySuites.indexOf(childSuite) !== -1) || filterOnly(normalizedChildSuite, childSuite)
       })
 
-      normalizedSuite.suites = _.map(suite.suites, (childSuite) => normalize(childSuite, tests, initialTests, onRunnable, onLogsById, getTestId))
+      normalizedSuite.suites = _.map(suite.suites, (childSuite) => normalize(childSuite, tests, initialTests, onRunnable, onLogsById, getTestId, getHookId))
     }
 
     return suite.tests.length || suite.suites.length
@@ -585,14 +609,6 @@ const _runnerListeners = (_runner, Cypress, _emissions, getTestById, getTest, se
   })
 
   _runner.on('hook', (hook) => {
-    if (hook.hookId == null) {
-      hook.hookId = getHookId()
-    }
-
-    if (hook.hookName == null) {
-      hook.hookName = getHookName(hook)
-    }
-
     // mocha incorrectly sets currentTest on before/after all's.
     // if there is a nested suite with a before, then
     // currentTest will refer to the previous test run
@@ -903,6 +919,7 @@ const create = (specWindow, mocha, Cypress, cy) => {
         onRunnable,
         onLogsById,
         getTestId,
+        getHookId,
       )
     },
 
@@ -968,6 +985,9 @@ const create = (specWindow, mocha, Cypress, cy) => {
       // if this isnt a hook, then the name is 'test'
       const hookName = runnable.type === 'hook' ? getHookName(runnable) : 'test'
 
+      // set hook id to hook id or test id
+      const hookId = runnable.type === 'hook' ? runnable.hookId : runnable.id
+
       // if we haven't yet fired this event for this test
       // that means that we need to reset the previous state
       // of cy - since we now have a new 'test' and all of the
@@ -1061,7 +1081,7 @@ const create = (specWindow, mocha, Cypress, cy) => {
       // running lifecycle events
       // and also get back a function result handler that we use as
       // an async seam
-      cy.setRunnable(runnable, hookName)
+      cy.setRunnable(runnable, hookId)
 
       // TODO: handle promise timeouts here!
       // whenever any runnable is about to run