merge all console events in one table

packages/driver/src/cy/commands/actions/click.js

@@ -5,58 +5,29 @@ const $dom = require('../../../dom')
 const $utils = require('../../../cypress/utils')
 const $actionability = require('../../actionability')
 
-const formatMoveEventsTable = (events) => {
-  return {
-    name: `Mouse Move Events${events ? '' : ' (skipped)'}`,
-    data: _.map(events, (obj) => {
-      const key = _.keys(obj)[0]
-      const val = obj[_.keys(obj)[0]]
-
-      if (val.skipped) {
-        const reason = val.skipped
-
-        // no modifiers can be present
-        // on move events
-        return {
-          'Event Name': key,
-          'Target Element': reason,
-          'Prevented Default?': null,
-          'Stopped Propagation?': null,
-        }
-      }
-
-      // no modifiers can be present
-      // on move events
-      return {
-        'Event Name': key,
-        'Target Element': val.el,
-        'Prevented Default?': val.preventedDefault,
-        'Stopped Propagation?': val.stoppedPropagation,
-      }
-    }),
-  }
-}
-
 const formatMouseEvents = (events) => {
   return _.map(events, (val, key) => {
+    // get event type either from the keyname, or from the sole object key name
+    const eventName = (typeof key === 'string') ? key : val.type
+
     if (val.skipped) {
       const reason = val.skipped
 
       return {
-        'Event Name': key,
+        'Event Type': eventName,
         'Target Element': reason,
-        'Prevented Default?': null,
-        'Stopped Propagation?': null,
-        'Modifiers': null,
+        'Prevented Default': null,
+        'Stopped Propagation': null,
+        'Active Modifiers': null,
       }
     }
 
     return {
-      'Event Name': key,
+      'Event Type': eventName,
       'Target Element': val.el,
-      'Prevented Default?': val.preventedDefault,
-      'Stopped Propagation?': val.stoppedPropagation,
-      'Modifiers': val.modifiers ? val.modifiers : null,
+      'Prevented Default': val.preventedDefault || null,
+      'Stopped Propagation': val.stoppedPropagation || null,
+      'Active Modifiers': val.modifiers || null,
     }
   })
 }
@@ -243,12 +214,12 @@ module.exports = (Commands, Cypress, cy, state, config) => {
         onTable (domEvents) {
           return {
             1: () => {
-              return formatMoveEventsTable(domEvents.moveEvents.events)
-            },
-            2: () => {
               return {
-                name: 'Mouse Click Events',
-                data: formatMouseEvents(domEvents.clickEvents),
+                name: 'Mouse Events',
+                data: _.concat(
+                  formatMouseEvents(domEvents.moveEvents.events),
+                  formatMouseEvents(domEvents.clickEvents),
+                ),
               }
             },
           }
@@ -275,25 +246,18 @@ module.exports = (Commands, Cypress, cy, state, config) => {
         onTable (domEvents) {
           return {
             1: () => {
-              return formatMoveEventsTable(domEvents.moveEvents.events)
-            },
-            2: () => {
               return {
-                name: 'Mouse Click Events',
+                name: 'Mouse Events',
                 data: _.concat(
+                  formatMouseEvents(domEvents.moveEvents.events),
                   formatMouseEvents(domEvents.clickEvents[0]),
-                  formatMouseEvents(domEvents.clickEvents[1])
+                  formatMouseEvents(domEvents.clickEvents[1]),
+                  formatMouseEvents({
+                    dblclick: domEvents.dblclick,
+                  })
                 ),
               }
             },
-            3: () => {
-              return {
-                name: 'Mouse Double Click Event',
-                data: formatMouseEvents({
-                  dblclick: domEvents.dblclick,
-                }),
-              }
-            },
           }
         },
       })
@@ -316,20 +280,16 @@ module.exports = (Commands, Cypress, cy, state, config) => {
         onTable (domEvents) {
           return {
             1: () => {
-              return formatMoveEventsTable(domEvents.moveEvents.events)
-            },
-            2: () => {
               return {
-                name: 'Mouse Click Events',
-                data: formatMouseEvents(domEvents.clickEvents, formatMouseEvents),
-              }
-            },
-            3: () => {
-              return {
-                name: 'Mouse Right Click Event',
-                data: formatMouseEvents(domEvents.contextmenuEvent),
+                name: 'Mouse Events',
+                data: _.concat(
+                  formatMouseEvents(domEvents.moveEvents.events),
+                  formatMouseEvents(domEvents.clickEvents),
+                  formatMouseEvents(domEvents.contextmenuEvent)
+                ),
               }
             },
+
           }
         },
       })

packages/driver/src/cy/commands/actions/type.js

@@ -36,33 +36,39 @@ module.exports = function (Commands, Cypress, cy, state, config) {
 
       const table = {}
 
-      const getRow = (id, key, which) => {
+      const getRow = (id, key, event) => {
         if (table[id]) {
           return table[id]
         }
 
-        const obj = table[id] = {}
         const modifiers = $Keyboard.modifiersToString(keyboard.getActiveModifiers(state))
 
-        if (modifiers) {
-          obj.modifiers = modifiers
+        const formatEventDetails = (obj) => {
+          return `{ ${(Object.keys(obj)
+          .filter((v) => Boolean(obj[v]))
+          .map((v) => `${v}: ${obj[v]}`))
+          .join(', ')
+          } }`
         }
-
-        if (key) {
-          obj.typed = key
-
-          if (which) {
-            obj.which = which
-          }
+        const obj = table[id] = {
+          'Typed': key || null,
+          'Target Element': event.target,
+          'Events Fired': '',
+          'Details': formatEventDetails({ code: event.code, which: event.which }),
+          'Prevented Default': null,
+          'Active Modifiers': modifiers || null,
         }
 
         return obj
       }
 
-      updateTable = function (id, key, column, which, value) {
-        const row = getRow(id, key, which)
+      updateTable = function (id, key, event, value) {
+        const row = getRow(id, key, event)
 
-        row[column] = value || 'preventedDefault'
+        row['Events Fired'] += row['Events Fired'] ? `, ${event.type}` : event.type
+        if (!value) {
+          row['Prevented Default'] = true
+        }
       }
 
       // transform table object into object with zero based index as keys
@@ -84,13 +90,12 @@ module.exports = function (Commands, Cypress, cy, state, config) {
             'Applied To': $dom.getElements(options.$el),
             'Options': deltaOptions,
             'table': {
-              // mouse events tables will take up slots 1 and 2 if they're present
+              // mouse events tables will take up slot 1 if they're present
               // this preserves the order of the tables
-              3: () => {
+              2: () => {
                 return {
                   name: 'Keyboard Events',
                   data: getTableData(),
-                  columns: ['typed', 'which', 'keydown', 'keypress', 'textInput', 'input', 'keyup', 'change', 'modifiers'],
                 }
               },
             },
@@ -271,11 +276,7 @@ module.exports = function (Commands, Cypress, cy, state, config) {
           return cy.timeout(totalKeys * options.delay, true, 'type')
         },
 
-        onEvent (...args) {
-          if (updateTable) {
-            return updateTable(...args)
-          }
-        },
+        onEvent: updateTable || _.noop,
 
         // fires only when the 'value'
         // of input/text/contenteditable

packages/driver/src/cy/keyboard.ts

@@ -52,6 +52,7 @@ interface KeyDetails {
   shiftKeyCode?: number
   simulatedDefault?: SimulatedDefault
   simulatedDefaultOnly?: boolean
+  originalSequence?: string
   events: {
     [key in KeyEventType]?: boolean;
   }
@@ -153,16 +154,16 @@ const getFormattedKeyString = (details: KeyDetails) => {
   let foundKeyString = _.findKey(keyboardMappings, { key: details.key })
 
   if (foundKeyString) {
-    return `{${foundKeyString}}`
+    return `{${details.originalSequence}}`
   }
 
   foundKeyString = keyToModifierMap[details.key]
 
   if (foundKeyString) {
-    return `<${foundKeyString}>`
+    return `{${details.originalSequence}}`
   }
 
-  return details.key
+  return details.originalSequence
 }
 
 const countNumIndividualKeyStrokes = (keys: KeyDetails[]) => {
@@ -206,6 +207,8 @@ const getKeyDetails = (onKeyNotFound) => {
         details.text = details.key
       }
 
+      details.originalSequence = key
+
       return details
     }
 
@@ -747,6 +750,8 @@ export class Keyboard {
     .then(() => {
       if (options.release !== false) {
         return Promise.map(modifierKeys, (key) => {
+          options.id = _.uniqueId('char')
+
           return this.simulatedKeyup(getActiveEl(doc), key, options)
         })
       }
@@ -898,7 +903,7 @@ export class Keyboard {
     const formattedKeyString = getFormattedKeyString(keyDetails)
 
     debug('format string', formattedKeyString)
-    options.onEvent(options.id, formattedKeyString, eventType, which, dispatched)
+    options.onEvent(options.id, formattedKeyString, event, dispatched)
 
     return dispatched
   }

packages/driver/src/cy/mouse.js

@@ -247,16 +247,16 @@ const create = (state, keyboard, focused) => {
 
       pointerout()
       pointerleave()
-      events.push({ pointerover: pointerover() })
+      events.push({ type: 'pointerover', ...pointerover() })
       pointerenter()
       mouseout()
       mouseleave()
-      events.push({ mouseover: mouseover() })
+      events.push({ type: 'mouseover', ...mouseover() })
       mouseenter()
       state('mouseLastHoveredEl', $elements.isAttachedEl(el) ? el : null)
       state('mouseCoords', { x, y })
-      events.push({ pointermove: pointermove() })
-      events.push({ mousemove: mousemove() })
+      events.push({ type: 'pointermove', ...pointermove() })
+      events.push({ type: 'mousemove', ...mousemove() })
 
       return events
     },