From a11a376a54ca2a9d935a8601265edc3533f6906f Mon Sep 17 00:00:00 2001 From: Matt Schile Date: Tue, 18 Apr 2023 09:29:55 -0600 Subject: [PATCH] chore: adding viewport:changed to protocol (#26508) --- packages/app/src/runner/event-manager.ts | 8 ++--- .../app/src/runner/events/capture-protocol.ts | 33 +++++++++++++++++++ packages/app/src/runner/events/telemetry.ts | 2 +- .../driver/types/internal-types-lite.d.ts | 12 +++++++ packages/server/lib/cloud/protocol.ts | 8 +++++ packages/server/lib/socket-base.ts | 2 ++ .../fixtures/cloud/protocol/test-protocol.js | 2 ++ .../server/test/unit/cloud/protocol_spec.ts | 16 +++++++++ packages/types/src/protocol.ts | 2 ++ 9 files changed, 78 insertions(+), 7 deletions(-) create mode 100644 packages/app/src/runner/events/capture-protocol.ts diff --git a/packages/app/src/runner/event-manager.ts b/packages/app/src/runner/event-manager.ts index 05414298eceb..0696b5395350 100644 --- a/packages/app/src/runner/event-manager.ts +++ b/packages/app/src/runner/event-manager.ts @@ -15,6 +15,7 @@ import { getAutIframeModel } from '.' import { handlePausing } from './events/pausing' import { addTelemetryListeners } from './events/telemetry' import { telemetry } from '@packages/telemetry/src/browser' +import { addCaptureProtocolListeners } from './events/capture-protocol' export type CypressInCypressMochaEvent = Array>> @@ -462,6 +463,7 @@ export class EventManager { _addListeners () { addTelemetryListeners(Cypress) + addCaptureProtocolListeners(Cypress) Cypress.on('message', (msg, data, cb) => { this.ws.emit('client:request', msg, data, cb) @@ -503,7 +505,6 @@ export class EventManager { this._interceptStudio(displayProps) this.reporterBus.emit('reporter:log:add', displayProps) - Cypress.backend('protocol:command:log:added', displayProps) }) Cypress.on('log:changed', (log) => { @@ -517,7 +518,6 @@ export class EventManager { this._interceptStudio(displayProps) this.reporterBus.emit('reporter:log:state:changed', displayProps) - Cypress.backend('protocol:command:log:changed', displayProps) }) // TODO: MOVE BACK INTO useEventManager. Verify this works @@ -620,8 +620,6 @@ export class EventManager { }) } - await Cypress.backend('protocol:test:before:run:async', attributes) - Cypress.primaryOriginCommunicator.toAllSpecBridges('test:before:run:async', ...args) }) @@ -631,8 +629,6 @@ export class EventManager { if (this.studioStore.isOpen && attributes.state !== 'passed') { this.studioStore.testFailed() } - - Cypress.backend('protocol:test:after:run', attributes) }) handlePausing(this.getCypress, this.reporterBus) diff --git a/packages/app/src/runner/events/capture-protocol.ts b/packages/app/src/runner/events/capture-protocol.ts new file mode 100644 index 000000000000..0444a3113084 --- /dev/null +++ b/packages/app/src/runner/events/capture-protocol.ts @@ -0,0 +1,33 @@ +export const addCaptureProtocolListeners = (Cypress: Cypress.Cypress) => { + Cypress.on('log:added', (log) => { + const displayProps = Cypress.runner.getDisplayPropsForLog(log) + + Cypress.backend('protocol:command:log:added', displayProps) + }) + + Cypress.on('log:changed', (log) => { + const displayProps = Cypress.runner.getDisplayPropsForLog(log) + + Cypress.backend('protocol:command:log:changed', displayProps) + }) + + Cypress.on('viewport:changed', (viewport) => { + const timestamp = performance.timeOrigin + performance.now() + + Cypress.backend('protocol:viewport:changed', { + viewport: { + width: viewport.viewportWidth, + height: viewport.viewportHeight, + }, + timestamp, + }) + }) + + Cypress.on('test:before:run:async', async (attributes) => { + await Cypress.backend('protocol:test:before:run:async', attributes) + }) + + Cypress.on('test:after:run', (attributes) => { + Cypress.backend('protocol:test:after:run', attributes) + }) +} diff --git a/packages/app/src/runner/events/telemetry.ts b/packages/app/src/runner/events/telemetry.ts index 37088c959b72..a4391268543a 100644 --- a/packages/app/src/runner/events/telemetry.ts +++ b/packages/app/src/runner/events/telemetry.ts @@ -1,6 +1,6 @@ import { telemetry } from '@packages/telemetry/src/browser' -export const addTelemetryListeners = (Cypress) => { +export const addTelemetryListeners = (Cypress: Cypress.Cypress) => { Cypress.on('test:before:run', (attributes, test) => { // we emit the 'test:before:run' events within various driver tests try { diff --git a/packages/driver/types/internal-types-lite.d.ts b/packages/driver/types/internal-types-lite.d.ts index 5f0aed8797f5..531e795b72a7 100644 --- a/packages/driver/types/internal-types-lite.d.ts +++ b/packages/driver/types/internal-types-lite.d.ts @@ -4,6 +4,10 @@ // All of the types needed by packages/app, without any of the additional APIs used in the driver only declare namespace Cypress { + interface Cypress { + runner: any + } + interface Actions { (action: 'internal:window:load', fn: (details: InternalWindowLoadDetails) => void) (action: 'net:stubbing:event', frame: any) @@ -15,6 +19,14 @@ declare namespace Cypress { (action: 'after:screenshot', config: {}) } + interface Backend { + (task: 'protocol:command:log:added', log: any): Promise + (task: 'protocol:command:log:changed', log: any): Promise + (task: 'protocol:viewport:changed', input: any): Promise + (task: 'protocol:test:before:run:async', attributes: any): Promise + (task: 'protocol:test:after:run', attributes: any): Promise + } + interface cy { /** * If `as` is chained to the current command, return the alias name used. diff --git a/packages/server/lib/cloud/protocol.ts b/packages/server/lib/cloud/protocol.ts index 4d409edc2e18..ebfe8be21c9a 100644 --- a/packages/server/lib/cloud/protocol.ts +++ b/packages/server/lib/cloud/protocol.ts @@ -125,6 +125,14 @@ class ProtocolManagerImpl implements ProtocolManager { this.protocol?.commandLogChanged(log) } + + viewportChanged (input: any): void { + if (!this.protocolEnabled()) { + return + } + + this.protocol?.viewportChanged(input) + } } export default ProtocolManagerImpl diff --git a/packages/server/lib/socket-base.ts b/packages/server/lib/socket-base.ts index ef1025c8feb2..45f3a72bd601 100644 --- a/packages/server/lib/socket-base.ts +++ b/packages/server/lib/socket-base.ts @@ -466,6 +466,8 @@ export class SocketBase { return this.protocolManager?.commandLogAdded(args[0]) case 'protocol:command:log:changed': return this.protocolManager?.commandLogChanged(args[0]) + case 'protocol:viewport:changed': + return this.protocolManager?.viewportChanged(args[0]) case 'telemetry': return (telemetry.exporter() as OTLPTraceExporterCloud)?.send(args[0], () => {}, (err) => { debug('error exporting telemetry data from browser %s', err) diff --git a/packages/server/test/support/fixtures/cloud/protocol/test-protocol.js b/packages/server/test/support/fixtures/cloud/protocol/test-protocol.js index 1017e082150c..c8b67019406f 100644 --- a/packages/server/test/support/fixtures/cloud/protocol/test-protocol.js +++ b/packages/server/test/support/fixtures/cloud/protocol/test-protocol.js @@ -11,6 +11,7 @@ const AppCaptureProtocol = class { this.beforeTest = this.beforeTest.bind(this) this.commandLogAdded = this.commandLogAdded.bind(this) this.commandLogChanged = this.commandLogChanged.bind(this) + this.viewportChanged = this.viewportChanged.bind(this) } connectToBrowser (cdpClient) { @@ -22,6 +23,7 @@ const AppCaptureProtocol = class { beforeTest (test) {} commandLogAdded (log) {} commandLogChanged (log) {} + viewportChanged (input) {} } module.exports = { diff --git a/packages/server/test/unit/cloud/protocol_spec.ts b/packages/server/test/unit/cloud/protocol_spec.ts index 532afb1e034b..70706022a4b2 100644 --- a/packages/server/test/unit/cloud/protocol_spec.ts +++ b/packages/server/test/unit/cloud/protocol_spec.ts @@ -167,4 +167,20 @@ describe('lib/cloud/protocol', () => { expect(protocol.commandLogChanged).to.be.calledWith(log) }) + + it('should be able to handle changing the viewport', () => { + sinon.stub(protocol, 'viewportChanged') + + const input = { + viewport: { + width: 100, + height: 200, + }, + timestamp: 1234, + } + + protocolManager.viewportChanged(input) + + expect(protocol.viewportChanged).to.be.calledWith(input) + }) }) diff --git a/packages/types/src/protocol.ts b/packages/types/src/protocol.ts index fecde580fee2..db717b206c98 100644 --- a/packages/types/src/protocol.ts +++ b/packages/types/src/protocol.ts @@ -22,6 +22,7 @@ export interface AppCaptureProtocolInterface { afterTest(test: Record): void commandLogAdded (log: any): void commandLogChanged (log: any): void + viewportChanged (input: any): void } export interface ProtocolManager { @@ -35,4 +36,5 @@ export interface ProtocolManager { afterTest(test: Record): void commandLogAdded (log: any): void commandLogChanged (log: any): void + viewportChanged (input: any): void }