diff --git a/packages/driver/src/cy/commands/actions/click.js b/packages/driver/src/cy/commands/actions/click.js index 051704ad04ab..f6e0cb7f5a58 100644 --- a/packages/driver/src/cy/commands/actions/click.js +++ b/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) + ), } }, + } }, }) diff --git a/packages/driver/src/cy/commands/actions/type.js b/packages/driver/src/cy/commands/actions/type.js index 31d43409a432..af15898c2a7d 100644 --- a/packages/driver/src/cy/commands/actions/type.js +++ b/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 diff --git a/packages/driver/src/cy/keyboard.ts b/packages/driver/src/cy/keyboard.ts index cee1726c41b2..beaef157253c 100644 --- a/packages/driver/src/cy/keyboard.ts +++ b/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 } diff --git a/packages/driver/src/cy/mouse.js b/packages/driver/src/cy/mouse.js index edb9a0d782c9..414b802db362 100644 --- a/packages/driver/src/cy/mouse.js +++ b/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 }, diff --git a/packages/driver/test/cypress/integration/commands/actions/click_spec.js b/packages/driver/test/cypress/integration/commands/actions/click_spec.js index 9ed9308a054c..bc42444ef498 100644 --- a/packages/driver/test/cypress/integration/commands/actions/click_spec.js +++ b/packages/driver/test/cypress/integration/commands/actions/click_spec.js @@ -537,7 +537,7 @@ describe('src/cy/commands/actions/click', () => { }) $btn.on('click', () => { - fail('should not have gotten click') + fail('btn should not have gotten click') }) cy.$$('body').on('click', (e) => { @@ -2331,67 +2331,61 @@ describe('src/cy/commands/actions/click', () => { const consoleProps = this.lastLog.invoke('consoleProps') expect(consoleProps.table[1]()).to.containSubset({ - 'name': 'Mouse Move Events', + 'name': 'Mouse Events', 'data': [ { - 'Event Name': 'pointerover', + 'Event Type': 'pointerover', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'mouseover', + 'Event Type': 'mouseover', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'pointermove', + 'Event Type': 'pointermove', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'mousemove', + 'Event Type': 'mousemove', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, - ], - }) - - expect(consoleProps.table[2]()).to.containSubset({ - name: 'Mouse Click Events', - data: [ { - 'Event Name': 'pointerdown', + 'Event Type': 'pointerdown', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'mousedown', + 'Event Type': 'mousedown', 'Target Element': { id: 'input' }, - 'Prevented Default?': true, - 'Stopped Propagation?': true, + 'Prevented Default': true, + 'Stopped Propagation': true, }, { - 'Event Name': 'pointerup', + 'Event Type': 'pointerup', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'mouseup', + 'Event Type': 'mouseup', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'click', + 'Event Type': 'click', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, ], }) @@ -2402,36 +2396,36 @@ describe('src/cy/commands/actions/click', () => { cy.$$('input:first').mouseup(_.stubFalse) cy.get('input:first').click().then(function () { - expect(this.lastLog.invoke('consoleProps').table[2]().data).to.containSubset([ + expect(this.lastLog.invoke('consoleProps').table[1]().data).to.containSubset([ { - 'Event Name': 'pointerdown', + 'Event Type': 'pointerdown', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'mousedown', + 'Event Type': 'mousedown', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'pointerup', + 'Event Type': 'pointerup', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'mouseup', + 'Event Type': 'mouseup', 'Target Element': { id: 'input' }, - 'Prevented Default?': true, - 'Stopped Propagation?': true, + 'Prevented Default': true, + 'Stopped Propagation': true, }, { - 'Event Name': 'click', + 'Event Type': 'click', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, ]) }) @@ -2441,36 +2435,64 @@ describe('src/cy/commands/actions/click', () => { cy.$$('input:first').click(_.stubFalse) cy.get('input:first').click().then(function () { - expect(this.lastLog.invoke('consoleProps').table[2]().data).to.containSubset([ + expect(this.lastLog.invoke('consoleProps').table[1]().data).to.containSubset([ + { + 'Event Type': 'pointerover', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'mouseover', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'pointermove', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, { - 'Event Name': 'pointerdown', + 'Event Type': 'mousemove', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'pointerdown', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'mousedown', + 'Event Type': 'mousedown', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'pointerup', + 'Event Type': 'pointerup', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'mouseup', + 'Event Type': 'mouseup', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'click', + 'Event Type': 'click', 'Target Element': { id: 'input' }, - 'Prevented Default?': true, - 'Stopped Propagation?': true, + 'Prevented Default': true, + 'Stopped Propagation': true, }, ]) }) @@ -2495,46 +2517,42 @@ describe('src/cy/commands/actions/click', () => { expect(_.map(consoleProps.table, (x) => x())).to.containSubset([ { - 'name': 'Mouse Move Events (skipped)', - 'data': [], - }, - { - 'name': 'Mouse Click Events', + 'name': 'Mouse Events', 'data': [ { - 'Event Name': 'pointerdown', + 'Event Type': 'pointerdown', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'mousedown', + 'Event Type': 'mousedown', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'pointerup', + 'Event Type': 'pointerup', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'mouseup', + 'Event Type': 'mouseup', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'click', + 'Event Type': 'click', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, ], }, @@ -2546,45 +2564,45 @@ describe('src/cy/commands/actions/click', () => { cy.$$('input:first').click(_.stubFalse) cy.get('input:first').type('{ctrl}{shift}', { release: false }).click().then(function () { - expect(this.lastLog.invoke('consoleProps').table[2]().data).to.containSubset([ + expect(this.lastLog.invoke('consoleProps').table[1]().data).to.containSubset([ { - 'Event Name': 'pointerdown', + 'Event Type': 'pointerdown', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': 'ctrl, shift', + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': 'ctrl, shift', }, { - 'Event Name': 'mousedown', + 'Event Type': 'mousedown', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': 'ctrl, shift', + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': 'ctrl, shift', }, { - 'Event Name': 'pointerup', + 'Event Type': 'pointerup', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': 'ctrl, shift', + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': 'ctrl, shift', }, { - 'Event Name': 'mouseup', + 'Event Type': 'mouseup', 'Target Element': { id: 'input' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': 'ctrl, shift', + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': 'ctrl, shift', }, { - 'Event Name': 'click', + 'Event Type': 'click', 'Target Element': { id: 'input' }, - 'Prevented Default?': true, - 'Stopped Propagation?': true, - 'Modifiers': 'ctrl, shift', + 'Prevented Default': true, + 'Stopped Propagation': true, + 'Active Modifiers': 'ctrl, shift', }, ]) @@ -2600,41 +2618,69 @@ describe('src/cy/commands/actions/click', () => { }) cy.contains('button').click().then(function () { - expect(this.lastLog.invoke('consoleProps').table[2]().data).to.containSubset([ + expect(this.lastLog.invoke('consoleProps').table[1]().data).to.containSubset([ + { + 'Event Type': 'pointerover', + 'Target Element': { id: 'button' }, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'mouseover', + 'Target Element': { id: 'button' }, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'pointermove', + 'Target Element': { id: 'button' }, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'mousemove', + 'Target Element': { id: 'button' }, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, { - 'Event Name': 'pointerdown', + 'Event Type': 'pointerdown', 'Target Element': { id: 'button' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'mousedown', + 'Event Type': 'mousedown', 'Target Element': { id: 'button' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'pointerup', + 'Event Type': 'pointerup', 'Target Element': { id: 'button' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'mouseup', + 'Event Type': 'mouseup', 'Target Element': { id: 'button' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'click', + 'Event Type': 'click', 'Target Element': '⚠️ not fired (element was detached)', - 'Prevented Default?': null, - 'Stopped Propagation?': null, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, ]) }) @@ -2649,41 +2695,41 @@ describe('src/cy/commands/actions/click', () => { }) cy.contains('button').click().then(function () { - expect(this.lastLog.invoke('consoleProps').table[2]().data).to.containSubset([ + expect(this.lastLog.invoke('consoleProps').table[1]().data).to.containSubset([ { - 'Event Name': 'pointerdown', + 'Event Type': 'pointerdown', 'Target Element': { id: 'button' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'mousedown', + 'Event Type': 'mousedown', 'Target Element': { id: 'button' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'pointerup', + 'Event Type': 'pointerup', 'Target Element': { id: 'tabindex' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'mouseup', + 'Event Type': 'mouseup', 'Target Element': { id: 'tabindex' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'click', + 'Event Type': 'click', 'Target Element': { id: 'dom' }, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, ]) }) @@ -3128,124 +3174,113 @@ describe('src/cy/commands/actions/click', () => { const tables = _.map(consoleProps.table, ((x) => x())) - expect(tables).to.containSubset([ - { - 'name': 'Mouse Move Events', - 'data': [ - { - 'Event Name': 'pointerover', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - }, - { - 'Event Name': 'mouseover', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - }, - { - 'Event Name': 'pointermove', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - }, - { - 'Event Name': 'mousemove', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - }, - ], - }, - { - 'name': 'Mouse Click Events', - 'data': [ - { - 'Event Name': 'pointerdown', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, - }, - { - 'Event Name': 'mousedown', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, - }, - { - 'Event Name': 'pointerup', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, - }, - { - 'Event Name': 'mouseup', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, - }, - { - 'Event Name': 'click', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, - }, - { - 'Event Name': 'pointerdown', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, - }, - { - 'Event Name': 'mousedown', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, - }, - { - 'Event Name': 'pointerup', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, - }, - { - 'Event Name': 'mouseup', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, - }, - { - 'Event Name': 'click', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, - }, - ], - }, - { - 'name': 'Mouse Double Click Event', - 'data': [ - { - 'Event Name': 'dblclick', - 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, - }, - ], - }, - ]) + expect(tables[0]).to.containSubset({ + name: 'Mouse Events', + data: [ + { + 'Event Type': 'pointerover', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + }, + { + 'Event Type': 'mouseover', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + }, + { + 'Event Type': 'pointermove', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + }, + { + 'Event Type': 'mousemove', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + }, + + { + 'Event Type': 'pointerdown', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'mousedown', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'pointerup', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'mouseup', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'click', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'pointerdown', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'mousedown', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'pointerup', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'mouseup', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'click', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + { + 'Event Type': 'dblclick', + 'Target Element': {}, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, + }, + ], + }) }) }) }) @@ -3567,76 +3602,68 @@ describe('src/cy/commands/actions/click', () => { expect(tables).to.containSubset([ { - 'name': 'Mouse Move Events', + 'name': 'Mouse Events', 'data': [ { - 'Event Name': 'pointerover', + 'Event Type': 'pointerover', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'mouseover', + 'Event Type': 'mouseover', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'pointermove', + 'Event Type': 'pointermove', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, { - 'Event Name': 'mousemove', + 'Event Type': 'mousemove', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, + 'Prevented Default': null, + 'Stopped Propagation': null, }, - ], - }, - { - 'name': 'Mouse Click Events', - 'data': [ + { - 'Event Name': 'pointerdown', + 'Event Type': 'pointerdown', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'mousedown', + 'Event Type': 'mousedown', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'pointerup', + 'Event Type': 'pointerup', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, { - 'Event Name': 'mouseup', + 'Event Type': 'mouseup', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, - ], - }, - { - 'name': 'Mouse Right Click Event', - 'data': [ + { - 'Event Name': 'contextmenu', + 'Event Type': 'contextmenu', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, ], }, @@ -4446,9 +4473,64 @@ describe('mouse state', () => { commandLogEl.find('.command-wrapper').click() - expect(spyTableName).calledWith('Mouse Move Events') - expect(spyTableName).calledWith('Mouse Click Events') - expect(spyTableData).calledTwice + expect(spyTableName).calledWith('Mouse Events') + expect(spyTableData).calledOnce + }) + }) + }) + + it('can print table of keys on dblclick', () => { + const spyTableName = cy.spy(top.console, 'groupCollapsed') + const spyTableData = cy.spy(top.console, 'table') + + cy.get('input:first').dblclick() + + cy.wrap(null, { timeout: 1000 }) + .should(() => { + spyTableName.reset() + spyTableData.reset() + + return withMutableReporterState(() => { + const commandLogEl = getCommandLogWithText('click') + + const reactCommandInstance = findReactInstance(commandLogEl.get(0)) + + reactCommandInstance.props.appState.isRunning = false + + commandLogEl.find('.command-wrapper').click() + + expect(spyTableName).calledWith('Mouse Events') + expect(spyTableData).calledOnce + expect(spyTableData.lastCall.args[0]).property('8').includes({ 'Event Type': 'click' }) + expect(spyTableData.lastCall.args[0]).property('13').includes({ 'Event Type': 'click' }) + expect(spyTableData.lastCall.args[0]).property('14').includes({ 'Event Type': 'dblclick' }) + }) + }) + }) + + it('can print table of keys on rightclick', () => { + const spyTableName = cy.spy(top.console, 'groupCollapsed') + const spyTableData = cy.spy(top.console, 'table') + + cy.get('input:first').rightclick() + + cy.wrap(null) + .should(() => { + spyTableName.reset() + spyTableData.reset() + + return withMutableReporterState(() => { + const commandLogEl = getCommandLogWithText('click') + + const reactCommandInstance = findReactInstance(commandLogEl.get(0)) + + reactCommandInstance.props.appState.isRunning = false + + commandLogEl.find('.command-wrapper').click() + + expect(spyTableName).calledWith('Mouse Events') + expect(spyTableData).calledOnce + expect(spyTableData.lastCall.args[0]).property('8').includes({ 'Event Type': 'contextmenu' }) }) }) }) diff --git a/packages/driver/test/cypress/integration/commands/actions/type_spec.js b/packages/driver/test/cypress/integration/commands/actions/type_spec.js index 94cbcc4296fd..1c50d84b1ffe 100644 --- a/packages/driver/test/cypress/integration/commands/actions/type_spec.js +++ b/packages/driver/test/cypress/integration/commands/actions/type_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: '', which: 91, keydown: true, modifiers: 'meta' }, - 2: { typed: '', 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 }) }) })