merge all console events in one table (#5606)

* merge all events in one table, cleanup keyboard events

* fix tests

* reorder table columns, address feedback

* set Typed col to user passed input

Author: kuceb

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
     },

packages/driver/test/cypress/integration/commands/actions/click_spec.js

@@ -4310,39 +4310,40 @@ describe('src/cy/commands/actions/type', () => {
         // https://github.com/cypress-io/cypress/issues/5424
         it('has a table of keys', () => {
           cy.get(':text:first').type('{cmd}{option}foo{enter}b{leftarrow}{del}{enter}')
-          .then(function () {
-            const table = this.lastLog.invoke('consoleProps').table[3]()
+          .then(function ($input) {
+            const table = this.lastLog.invoke('consoleProps').table[2]()
 
             // eslint-disable-next-line
             console.table(table.data, table.columns)
-            expect(table.columns).to.deep.eq([
-              'typed', 'which', 'keydown', 'keypress', 'textInput', 'input', 'keyup', 'change', 'modifiers',
-            ])
 
             expect(table.name).to.eq('Keyboard Events')
             const expectedTable = {
-              1: { typed: '<meta>', which: 91, keydown: true, modifiers: 'meta' },
-              2: { typed: '<alt>', which: 18, keydown: true, modifiers: 'alt, meta' },
-              3: { typed: 'f', which: 70, keydown: true, keyup: true, modifiers: 'alt, meta' },
-              4: { typed: 'o', which: 79, keydown: true, keyup: true, modifiers: 'alt, meta' },
-              5: { typed: 'o', which: 79, keydown: true, keyup: true, modifiers: 'alt, meta' },
-              6: { typed: '{enter}', which: 13, keydown: true, keyup: true, modifiers: 'alt, meta' },
-              7: { typed: 'b', which: 66, keydown: true, keyup: true, modifiers: 'alt, meta' },
-              8: { typed: '{leftArrow}', which: 37, keydown: true, keyup: true, modifiers: 'alt, meta' },
-              9: { typed: '{del}', which: 46, keydown: true, keyup: true, modifiers: 'alt, meta' },
-              10: { typed: '{enter}', which: 13, keydown: true, keyup: true, modifiers: 'alt, meta' },
+              1: { 'Details': '{ code: MetaLeft, which: 91 }', Typed: '{cmd}', 'Events Fired': 'keydown', 'Active Modifiers': 'meta', 'Prevented Default': null, 'Target Element': $input[0] },
+              2: { 'Details': '{ code: AltLeft, which: 18 }', Typed: '{option}', 'Events Fired': 'keydown', 'Active Modifiers': 'alt, meta', 'Prevented Default': null, 'Target Element': $input[0] },
+              3: { 'Details': '{ code: KeyF, which: 70 }', Typed: 'f', 'Events Fired': 'keydown, keyup', 'Active Modifiers': 'alt, meta', 'Prevented Default': null, 'Target Element': $input[0] },
+              4: { 'Details': '{ code: KeyO, which: 79 }', Typed: 'o', 'Events Fired': 'keydown, keyup', 'Active Modifiers': 'alt, meta', 'Prevented Default': null, 'Target Element': $input[0] },
+              5: { 'Details': '{ code: KeyO, which: 79 }', Typed: 'o', 'Events Fired': 'keydown, keyup', 'Active Modifiers': 'alt, meta', 'Prevented Default': null, 'Target Element': $input[0] },
+              6: { 'Details': '{ code: Enter, which: 13 }', Typed: '{enter}', 'Events Fired': 'keydown, keyup', 'Active Modifiers': 'alt, meta', 'Prevented Default': null, 'Target Element': $input[0] },
+              7: { 'Details': '{ code: KeyB, which: 66 }', Typed: 'b', 'Events Fired': 'keydown, keyup', 'Active Modifiers': 'alt, meta', 'Prevented Default': null, 'Target Element': $input[0] },
+              8: { 'Details': '{ code: ArrowLeft, which: 37 }', Typed: '{leftarrow}', 'Events Fired': 'keydown, keyup', 'Active Modifiers': 'alt, meta', 'Prevented Default': null, 'Target Element': $input[0] },
+              9: { 'Details': '{ code: Delete, which: 46 }', Typed: '{del}', 'Events Fired': 'keydown, keyup', 'Active Modifiers': 'alt, meta', 'Prevented Default': null, 'Target Element': $input[0] },
+              10: { 'Details': '{ code: Enter, which: 13 }', Typed: '{enter}', 'Events Fired': 'keydown, keyup', 'Active Modifiers': 'alt, meta', 'Prevented Default': null, 'Target Element': $input[0] },
+              11: { 'Details': '{ code: MetaLeft, which: 91 }', Typed: '{cmd}', 'Events Fired': 'keyup', 'Active Modifiers': 'alt', 'Prevented Default': null, 'Target Element': $input[0] },
+              12: { 'Details': '{ code: AltLeft, which: 18 }', Typed: '{option}', 'Events Fired': 'keyup', 'Active Modifiers': null, 'Prevented Default': null, 'Target Element': $input[0] },
             }
 
+            // uncomment for debugging
+            // _.each(table.data, (v, i) => expect(v).containSubset(expectedTable[i]))
             expect(table.data).to.deep.eq(expectedTable)
           })
         })
 
         it('has no modifiers when there are none activated', () => {
-          cy.get(':text:first').type('f').then(function () {
-            const table = this.lastLog.invoke('consoleProps').table[3]()
+          cy.get(':text:first').type('f').then(function ($el) {
+            const table = this.lastLog.invoke('consoleProps').table[2]()
 
             expect(table.data).to.deep.eq({
-              1: { typed: 'f', which: 70, keydown: true, keypress: true, textInput: true, input: true, keyup: true },
+              1: { Typed: 'f', 'Events Fired': 'keydown, keypress, textInput, input, keyup', 'Active Modifiers': null, Details: '{ code: KeyF, which: 70 }', 'Prevented Default': null, 'Target Element': $el[0] },
             })
           })
         })
@@ -4352,14 +4353,14 @@ describe('src/cy/commands/actions/type', () => {
             return false
           })
 
-          cy.get(':text:first').type('f').then(function () {
-            const table = this.lastLog.invoke('consoleProps').table[3]()
+          cy.get(':text:first').type('f').then(function ($el) {
+            const table = this.lastLog.invoke('consoleProps').table[2]()
 
             // eslint-disable-next-line
             console.table(table.data, table.columns)
 
             expect(table.data).to.deep.eq({
-              1: { typed: 'f', which: 70, keydown: 'preventedDefault', keyup: true },
+              1: { Typed: 'f', 'Events Fired': 'keydown, keyup', 'Active Modifiers': null, Details: '{ code: KeyF, which: 70 }', 'Prevented Default': true, 'Target Element': $el[0] },
             })
           })
         })
@@ -5284,10 +5285,9 @@ https://on.cypress.io/type`)
 
           $(commandLogEl).find('.command-wrapper').click()
 
-          expect(spyTableName.firstCall).calledWith('Mouse Move Events')
-          expect(spyTableName.secondCall).calledWith('Mouse Click Events')
-          expect(spyTableName.thirdCall).calledWith('Keyboard Events')
-          expect(spyTableData).calledThrice
+          expect(spyTableName.firstCall).calledWith('Mouse Events')
+          expect(spyTableName.secondCall).calledWith('Keyboard Events')
+          expect(spyTableData).calledTwice
         })
       })
     })