From 0ebd42a93dc64f54c65df6d146ece709ac932eed Mon Sep 17 00:00:00 2001 From: Ben Kucera <14625260+Bkucera@users.noreply.github.com> Date: Mon, 4 Nov 2019 19:00:51 -0500 Subject: [PATCH 1/4] merge all events in one table, cleanup keyboard events --- .../driver/src/cy/commands/actions/click.js | 88 ++--- .../driver/src/cy/commands/actions/type.js | 39 +-- packages/driver/src/cy/keyboard.ts | 2 +- packages/driver/src/cy/mouse.js | 8 +- .../commands/actions/click_spec.js | 326 ++++++++++-------- .../integration/commands/actions/type_spec.js | 20 +- 6 files changed, 232 insertions(+), 251 deletions(-) diff --git a/packages/driver/src/cy/commands/actions/click.js b/packages/driver/src/cy/commands/actions/click.js index d747f4f66e81..6c7077a514cb 100644 --- a/packages/driver/src/cy/commands/actions/click.js +++ b/packages/driver/src/cy/commands/actions/click.js @@ -5,45 +5,16 @@ 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 name either from the keyname, or from the sole object key name + const eventName = (typeof key === 'string') ? key.slice(0, -5) : val.type + if (val.skipped) { const reason = val.skipped return { - 'Event Name': key.slice(0, -5), + 'Event Name': eventName, 'Target Element': reason, 'Prevented Default?': null, 'Stopped Propagation?': null, @@ -52,7 +23,7 @@ const formatMouseEvents = (events) => { } return { - 'Event Name': key.slice(0, -5), + 'Event Name': eventName, 'Target Element': val.el, 'Prevented Default?': val.preventedDefault, 'Stopped Propagation?': val.stoppedPropagation, @@ -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.clickEvents[0], formatMouseEvents), - formatMouseEvents(domEvents.clickEvents[1], formatMouseEvents) + formatMouseEvents(domEvents.moveEvents.events), + formatMouseEvents(domEvents.clickEvents[0]), + formatMouseEvents(domEvents.clickEvents[1]), + formatMouseEvents({ + dblclickProps: domEvents.dblclickProps, + }) ), } }, - 3: () => { - return { - name: 'Mouse Double Click Event', - data: formatMouseEvents({ - dblclickProps: domEvents.dblclickProps, - }), - } - }, } }, }) @@ -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..6febef220e86 100644 --- a/packages/driver/src/cy/commands/actions/type.js +++ b/packages/driver/src/cy/commands/actions/type.js @@ -36,33 +36,33 @@ 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 - } - - if (key) { - obj.typed = key - - if (which) { - obj.which = which - } + const obj = table[id] = { + 'Typed': key || null, + Modifiers: modifiers || null, + 'Events Fired': '', + PreventedDefault: null, + 'Event.code': event.code, + 'Event.which': event.which || null, + 'Event.target': event.target, } 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.PreventedDefault = true + } } // transform table object into object with zero based index as keys @@ -86,11 +86,10 @@ module.exports = function (Commands, Cypress, cy, state, config) { 'table': { // mouse events tables will take up slots 1 and 2 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 +270,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..a883e980ce6f 100644 --- a/packages/driver/src/cy/keyboard.ts +++ b/packages/driver/src/cy/keyboard.ts @@ -898,7 +898,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 ecc52dbc0a94..c3fb2821467b 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 ab467f449d79..46cf18a5589c 100644 --- a/packages/driver/test/cypress/integration/commands/actions/click_spec.js +++ b/packages/driver/test/cypress/integration/commands/actions/click_spec.js @@ -455,7 +455,7 @@ describe('src/cy/commands/actions/click', () => { }) $btn.on('click', () => { - fail('should not have gotten click') + fail('btn should not have gotten click') }) cy.contains('button').click() @@ -2245,7 +2245,7 @@ describe('src/cy/commands/actions/click', () => { const consoleProps = this.lastLog.invoke('consoleProps') expect(consoleProps.table[1]()).to.containSubset({ - 'name': 'Mouse Move Events', + 'name': 'Events', 'data': [ { 'Event Name': 'pointerover', @@ -2271,12 +2271,6 @@ describe('src/cy/commands/actions/click', () => { 'Prevented Default?': false, 'Stopped Propagation?': false, }, - ], - }) - - expect(consoleProps.table[2]()).to.containSubset({ - name: 'Mouse Click Events', - data: [ { 'Event Name': 'pointerdown', 'Target Element': { id: 'input' }, @@ -2316,7 +2310,7 @@ 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', 'Target Element': { id: 'input' }, @@ -2355,7 +2349,7 @@ 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 Name': 'pointerdown', 'Target Element': { id: 'input' }, @@ -2409,11 +2403,7 @@ 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': 'Events', 'data': [ { 'Event Name': 'pointerdown', @@ -2460,7 +2450,7 @@ 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', 'Target Element': { id: 'input' }, @@ -2514,7 +2504,7 @@ 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', 'Target Element': { id: 'button' }, @@ -2563,7 +2553,7 @@ 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', 'Target Element': { id: 'button' }, @@ -3042,124 +3032,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 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, + }, + + { + '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, + }, + { + 'Event Name': 'dblclick', + 'Target Element': {}, + 'Prevented Default?': false, + 'Stopped Propagation?': false, + 'Modifiers': null, + }, + ], + }) }) }) }) @@ -3481,7 +3460,7 @@ describe('src/cy/commands/actions/click', () => { expect(tables).to.containSubset([ { - 'name': 'Mouse Move Events', + 'name': 'Events', 'data': [ { 'Event Name': 'pointerover', @@ -3507,11 +3486,7 @@ describe('src/cy/commands/actions/click', () => { 'Prevented Default?': false, 'Stopped Propagation?': false, }, - ], - }, - { - 'name': 'Mouse Click Events', - 'data': [ + { 'Event Name': 'pointerdown', 'Target Element': {}, @@ -3540,11 +3515,7 @@ describe('src/cy/commands/actions/click', () => { 'Stopped Propagation?': false, 'Modifiers': null, }, - ], - }, - { - 'name': 'Mouse Right Click Event', - 'data': [ + { 'Event Name': 'contextmenu', 'Target Element': {}, @@ -4359,9 +4330,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 Name': 'click' }) + expect(spyTableData.lastCall.args[0]).property('13').includes({ 'Event Name': 'click' }) + expect(spyTableData.lastCall.args[0]).property('14').includes({ 'Event Name': '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 Name': '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..8a798e14448b 100644 --- a/packages/driver/test/cypress/integration/commands/actions/type_spec.js +++ b/packages/driver/test/cypress/integration/commands/actions/type_spec.js @@ -4321,16 +4321,16 @@ describe('src/cy/commands/actions/type', () => { 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: { typed: '', which: 91, text: undefined, Events: 'keydown', modifiers: 'meta' }, + 2: { typed: '', which: 18, Events: ['keydown'], modifiers: 'alt, meta' }, + 3: { typed: 'f', which: 70, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, + 4: { typed: 'o', which: 79, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, + 5: { typed: 'o', which: 79, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, + 6: { typed: '{enter}', which: 13, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, + 7: { typed: 'b', which: 66, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, + 8: { typed: '{leftArrow}', which: 37, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, + 9: { typed: '{del}', which: 46, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, + 10: { typed: '{enter}', which: 13, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, } expect(table.data).to.deep.eq(expectedTable) From 3661e0618376bb13c3d4508e3795d0e581b6e22d Mon Sep 17 00:00:00 2001 From: Ben Kucera <14625260+Bkucera@users.noreply.github.com> Date: Tue, 5 Nov 2019 12:17:35 -0500 Subject: [PATCH 2/4] fix tests --- .../driver/src/cy/commands/actions/type.js | 2 +- .../commands/actions/click_spec.js | 6 +-- .../integration/commands/actions/type_spec.js | 48 +++++++++---------- 3 files changed, 27 insertions(+), 29 deletions(-) diff --git a/packages/driver/src/cy/commands/actions/type.js b/packages/driver/src/cy/commands/actions/type.js index 6febef220e86..aa89606b55c0 100644 --- a/packages/driver/src/cy/commands/actions/type.js +++ b/packages/driver/src/cy/commands/actions/type.js @@ -84,7 +84,7 @@ 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 2: () => { return { 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 46cf18a5589c..62e58c41028b 100644 --- a/packages/driver/test/cypress/integration/commands/actions/click_spec.js +++ b/packages/driver/test/cypress/integration/commands/actions/click_spec.js @@ -2245,7 +2245,7 @@ describe('src/cy/commands/actions/click', () => { const consoleProps = this.lastLog.invoke('consoleProps') expect(consoleProps.table[1]()).to.containSubset({ - 'name': 'Events', + 'name': 'Mouse Events', 'data': [ { 'Event Name': 'pointerover', @@ -2403,7 +2403,7 @@ describe('src/cy/commands/actions/click', () => { expect(_.map(consoleProps.table, (x) => x())).to.containSubset([ { - 'name': 'Events', + 'name': 'Mouse Events', 'data': [ { 'Event Name': 'pointerdown', @@ -3460,7 +3460,7 @@ describe('src/cy/commands/actions/click', () => { expect(tables).to.containSubset([ { - 'name': 'Events', + 'name': 'Mouse Events', 'data': [ { 'Event Name': 'pointerover', 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 8a798e14448b..be47a0bcfe10 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,38 @@ 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, text: undefined, Events: 'keydown', modifiers: 'meta' }, - 2: { typed: '', which: 18, Events: ['keydown'], modifiers: 'alt, meta' }, - 3: { typed: 'f', which: 70, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, - 4: { typed: 'o', which: 79, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, - 5: { typed: 'o', which: 79, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, - 6: { typed: '{enter}', which: 13, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, - 7: { typed: 'b', which: 66, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, - 8: { typed: '{leftArrow}', which: 37, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, - 9: { typed: '{del}', which: 46, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, - 10: { typed: '{enter}', which: 13, Events: ['keydown', 'keyup'], modifiers: 'alt, meta' }, + 1: { Typed: '', 'Event.which': 91, 'Events Fired': 'keydown', Modifiers: 'meta', 'Event.code': 'MetaLeft', PreventedDefault: null, 'Event.target': $input[0] }, + 2: { Typed: '', 'Event.which': 18, 'Events Fired': 'keydown', Modifiers: 'alt, meta', 'Event.code': 'AltLeft', PreventedDefault: null, 'Event.target': $input[0] }, + 3: { Typed: 'f', 'Event.which': 70, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'KeyF', PreventedDefault: null, 'Event.target': $input[0] }, + 4: { Typed: 'o', 'Event.which': 79, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'KeyO', PreventedDefault: null, 'Event.target': $input[0] }, + 5: { Typed: 'o', 'Event.which': 79, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'KeyO', PreventedDefault: null, 'Event.target': $input[0] }, + 6: { Typed: '{enter}', 'Event.which': 13, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'Enter', PreventedDefault: null, 'Event.target': $input[0] }, + 7: { Typed: 'b', 'Event.which': 66, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'KeyB', PreventedDefault: null, 'Event.target': $input[0] }, + 8: { Typed: '{leftArrow}', 'Event.which': 37, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'ArrowLeft', PreventedDefault: null, 'Event.target': $input[0] }, + 9: { Typed: '{del}', 'Event.which': 46, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'Delete', PreventedDefault: null, 'Event.target': $input[0] }, + 10: { Typed: '{enter}', 'Event.which': 13, 'Events Fired': 'keydown, keyup, keyup, keyup', Modifiers: 'alt, meta', 'Event.code': 'Enter', PreventedDefault: null, 'Event.target': $input[0] }, } + // uncomment for debugging + // _.each(table.data, (v, i)=>expect(v).eq(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', 'Event.which': 70, 'Events Fired': 'keydown, keypress, textInput, input, keyup', Modifiers: null, 'Event.code': 'KeyF', PreventedDefault: null, 'Event.target': $el[0] }, }) }) }) @@ -4352,14 +4351,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', 'Event.which': 70, 'PreventedDefault': true, 'Events Fired': 'keydown, keyup', Modifiers: null, 'Event.code': 'KeyF', 'Event.target': $el[0] }, }) }) }) @@ -5284,10 +5283,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 }) }) }) From f5e5d9cb8cda41cdd14af86fce1da6b11f8b562b Mon Sep 17 00:00:00 2001 From: Ben Kucera <14625260+Bkucera@users.noreply.github.com> Date: Wed, 6 Nov 2019 13:47:12 -0500 Subject: [PATCH 3/4] reorder table columns, address feedback --- .../driver/src/cy/commands/actions/click.js | 18 +- .../driver/src/cy/commands/actions/type.js | 18 +- packages/driver/src/cy/keyboard.ts | 4 +- .../commands/actions/click_spec.js | 514 ++++++++++-------- .../integration/commands/actions/type_spec.js | 30 +- 5 files changed, 325 insertions(+), 259 deletions(-) diff --git a/packages/driver/src/cy/commands/actions/click.js b/packages/driver/src/cy/commands/actions/click.js index f90ad13b4f8a..f6e0cb7f5a58 100644 --- a/packages/driver/src/cy/commands/actions/click.js +++ b/packages/driver/src/cy/commands/actions/click.js @@ -7,27 +7,27 @@ const $actionability = require('../../actionability') const formatMouseEvents = (events) => { return _.map(events, (val, key) => { - // get event name either from the keyname, or from the sole object key name + // 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': eventName, + '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': eventName, + '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, } }) } diff --git a/packages/driver/src/cy/commands/actions/type.js b/packages/driver/src/cy/commands/actions/type.js index aa89606b55c0..af15898c2a7d 100644 --- a/packages/driver/src/cy/commands/actions/type.js +++ b/packages/driver/src/cy/commands/actions/type.js @@ -43,14 +43,20 @@ module.exports = function (Commands, Cypress, cy, state, config) { const modifiers = $Keyboard.modifiersToString(keyboard.getActiveModifiers(state)) + const formatEventDetails = (obj) => { + return `{ ${(Object.keys(obj) + .filter((v) => Boolean(obj[v])) + .map((v) => `${v}: ${obj[v]}`)) + .join(', ') + } }` + } const obj = table[id] = { 'Typed': key || null, - Modifiers: modifiers || null, + 'Target Element': event.target, 'Events Fired': '', - PreventedDefault: null, - 'Event.code': event.code, - 'Event.which': event.which || null, - 'Event.target': event.target, + 'Details': formatEventDetails({ code: event.code, which: event.which }), + 'Prevented Default': null, + 'Active Modifiers': modifiers || null, } return obj @@ -61,7 +67,7 @@ module.exports = function (Commands, Cypress, cy, state, config) { row['Events Fired'] += row['Events Fired'] ? `, ${event.type}` : event.type if (!value) { - row.PreventedDefault = true + row['Prevented Default'] = true } } diff --git a/packages/driver/src/cy/keyboard.ts b/packages/driver/src/cy/keyboard.ts index a883e980ce6f..0bee6121d30e 100644 --- a/packages/driver/src/cy/keyboard.ts +++ b/packages/driver/src/cy/keyboard.ts @@ -159,7 +159,7 @@ const getFormattedKeyString = (details: KeyDetails) => { foundKeyString = keyToModifierMap[details.key] if (foundKeyString) { - return `<${foundKeyString}>` + return `{${foundKeyString}}` } return details.key @@ -747,6 +747,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) }) } 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 16b2d4987eb6..bc42444ef498 100644 --- a/packages/driver/test/cypress/integration/commands/actions/click_spec.js +++ b/packages/driver/test/cypress/integration/commands/actions/click_spec.js @@ -2334,58 +2334,58 @@ describe('src/cy/commands/actions/click', () => { '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, }, { - '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, }, ], }) @@ -2398,34 +2398,34 @@ describe('src/cy/commands/actions/click', () => { cy.get('input:first').click().then(function () { 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, }, ]) }) @@ -2437,34 +2437,62 @@ describe('src/cy/commands/actions/click', () => { cy.get('input:first').click().then(function () { expect(this.lastLog.invoke('consoleProps').table[1]().data).to.containSubset([ { - 'Event Name': 'pointerdown', + '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 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, }, ]) }) @@ -2492,39 +2520,39 @@ describe('src/cy/commands/actions/click', () => { '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, }, ], }, @@ -2538,43 +2566,43 @@ describe('src/cy/commands/actions/click', () => { cy.get('input:first').type('{ctrl}{shift}', { release: false }).click().then(function () { 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', }, ]) @@ -2592,39 +2620,67 @@ describe('src/cy/commands/actions/click', () => { cy.contains('button').click().then(function () { expect(this.lastLog.invoke('consoleProps').table[1]().data).to.containSubset([ { - 'Event Name': 'pointerdown', + '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 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, }, ]) }) @@ -2641,39 +2697,39 @@ describe('src/cy/commands/actions/click', () => { cy.contains('button').click().then(function () { 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, }, ]) }) @@ -3122,106 +3178,106 @@ describe('src/cy/commands/actions/click', () => { 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, }, { - '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, }, { - '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, }, { - 'Event Name': 'dblclick', + 'Event Type': 'dblclick', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, ], }) @@ -3549,65 +3605,65 @@ describe('src/cy/commands/actions/click', () => { '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, }, { - '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': 'contextmenu', + 'Event Type': 'contextmenu', 'Target Element': {}, - 'Prevented Default?': false, - 'Stopped Propagation?': false, - 'Modifiers': null, + 'Prevented Default': null, + 'Stopped Propagation': null, + 'Active Modifiers': null, }, ], }, @@ -4445,9 +4501,9 @@ describe('mouse state', () => { expect(spyTableName).calledWith('Mouse Events') expect(spyTableData).calledOnce - expect(spyTableData.lastCall.args[0]).property('8').includes({ 'Event Name': 'click' }) - expect(spyTableData.lastCall.args[0]).property('13').includes({ 'Event Name': 'click' }) - expect(spyTableData.lastCall.args[0]).property('14').includes({ 'Event Name': 'dblclick' }) + 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' }) }) }) }) @@ -4474,7 +4530,7 @@ describe('mouse state', () => { expect(spyTableName).calledWith('Mouse Events') expect(spyTableData).calledOnce - expect(spyTableData.lastCall.args[0]).property('8').includes({ 'Event Name': 'contextmenu' }) + 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 be47a0bcfe10..b3441ac346a8 100644 --- a/packages/driver/test/cypress/integration/commands/actions/type_spec.js +++ b/packages/driver/test/cypress/integration/commands/actions/type_spec.js @@ -4318,21 +4318,23 @@ describe('src/cy/commands/actions/type', () => { expect(table.name).to.eq('Keyboard Events') const expectedTable = { - 1: { Typed: '', 'Event.which': 91, 'Events Fired': 'keydown', Modifiers: 'meta', 'Event.code': 'MetaLeft', PreventedDefault: null, 'Event.target': $input[0] }, - 2: { Typed: '', 'Event.which': 18, 'Events Fired': 'keydown', Modifiers: 'alt, meta', 'Event.code': 'AltLeft', PreventedDefault: null, 'Event.target': $input[0] }, - 3: { Typed: 'f', 'Event.which': 70, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'KeyF', PreventedDefault: null, 'Event.target': $input[0] }, - 4: { Typed: 'o', 'Event.which': 79, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'KeyO', PreventedDefault: null, 'Event.target': $input[0] }, - 5: { Typed: 'o', 'Event.which': 79, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'KeyO', PreventedDefault: null, 'Event.target': $input[0] }, - 6: { Typed: '{enter}', 'Event.which': 13, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'Enter', PreventedDefault: null, 'Event.target': $input[0] }, - 7: { Typed: 'b', 'Event.which': 66, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'KeyB', PreventedDefault: null, 'Event.target': $input[0] }, - 8: { Typed: '{leftArrow}', 'Event.which': 37, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'ArrowLeft', PreventedDefault: null, 'Event.target': $input[0] }, - 9: { Typed: '{del}', 'Event.which': 46, 'Events Fired': 'keydown, keyup', Modifiers: 'alt, meta', 'Event.code': 'Delete', PreventedDefault: null, 'Event.target': $input[0] }, - 10: { Typed: '{enter}', 'Event.which': 13, 'Events Fired': 'keydown, keyup, keyup, keyup', Modifiers: 'alt, meta', 'Event.code': 'Enter', PreventedDefault: null, 'Event.target': $input[0] }, + 1: { 'Details': '{ code: MetaLeft, which: 91 }', Typed: '{meta}', 'Events Fired': 'keydown', 'Active Modifiers': 'meta', 'Prevented Default': null, 'Target Element': $input[0] }, + 2: { 'Details': '{ code: AltLeft, which: 18 }', Typed: '{alt}', '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: '{meta}', 'Events Fired': 'keyup', 'Active Modifiers': 'alt', 'Prevented Default': null, 'Target Element': $input[0] }, + 12: { 'Details': '{ code: AltLeft, which: 18 }', Typed: '{alt}', 'Events Fired': 'keyup', 'Active Modifiers': null, 'Prevented Default': null, 'Target Element': $input[0] }, } // uncomment for debugging - // _.each(table.data, (v, i)=>expect(v).eq(expectedTable[i])) - expect(table.data).to.deep.eq(expectedTable) + // _.each(table.data, (v, i) => expect(v).containSubset(expectedTable[i])) + expect(table.data).to.containSubset(expectedTable) }) }) @@ -4341,7 +4343,7 @@ describe('src/cy/commands/actions/type', () => { const table = this.lastLog.invoke('consoleProps').table[2]() expect(table.data).to.deep.eq({ - 1: { Typed: 'f', 'Event.which': 70, 'Events Fired': 'keydown, keypress, textInput, input, keyup', Modifiers: null, 'Event.code': 'KeyF', PreventedDefault: null, 'Event.target': $el[0] }, + 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] }, }) }) }) @@ -4358,7 +4360,7 @@ describe('src/cy/commands/actions/type', () => { console.table(table.data, table.columns) expect(table.data).to.deep.eq({ - 1: { Typed: 'f', 'Event.which': 70, 'PreventedDefault': true, 'Events Fired': 'keydown, keyup', Modifiers: null, 'Event.code': 'KeyF', 'Event.target': $el[0] }, + 1: { Typed: 'f', 'Events Fired': 'keydown, keyup', 'Active Modifiers': null, Details: '{ code: KeyF, which: 70 }', 'Prevented Default': true, 'Target Element': $el[0] }, }) }) }) From 165206ef5ddb001e084eb35fae2ed0bbafacfc94 Mon Sep 17 00:00:00 2001 From: Ben Kucera <14625260+Bkucera@users.noreply.github.com> Date: Wed, 6 Nov 2019 14:13:26 -0500 Subject: [PATCH 4/4] set Typed col to user passed input --- packages/driver/src/cy/keyboard.ts | 9 ++++++--- .../integration/commands/actions/type_spec.js | 12 ++++++------ 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/driver/src/cy/keyboard.ts b/packages/driver/src/cy/keyboard.ts index 0bee6121d30e..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 } 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 b3441ac346a8..1c50d84b1ffe 100644 --- a/packages/driver/test/cypress/integration/commands/actions/type_spec.js +++ b/packages/driver/test/cypress/integration/commands/actions/type_spec.js @@ -4318,23 +4318,23 @@ describe('src/cy/commands/actions/type', () => { expect(table.name).to.eq('Keyboard Events') const expectedTable = { - 1: { 'Details': '{ code: MetaLeft, which: 91 }', Typed: '{meta}', 'Events Fired': 'keydown', 'Active Modifiers': 'meta', 'Prevented Default': null, 'Target Element': $input[0] }, - 2: { 'Details': '{ code: AltLeft, which: 18 }', Typed: '{alt}', 'Events Fired': 'keydown', 'Active Modifiers': 'alt, meta', 'Prevented Default': null, 'Target Element': $input[0] }, + 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] }, + 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: '{meta}', 'Events Fired': 'keyup', 'Active Modifiers': 'alt', 'Prevented Default': null, 'Target Element': $input[0] }, - 12: { 'Details': '{ code: AltLeft, which: 18 }', Typed: '{alt}', 'Events Fired': 'keyup', 'Active Modifiers': null, '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.containSubset(expectedTable) + expect(table.data).to.deep.eq(expectedTable) }) })