From 569197c4fbbd6bce16b008a829b6c38e29cf89b0 Mon Sep 17 00:00:00 2001
From: Matt Schile <mschile@cypress.io>
Date: Thu, 18 May 2023 16:30:18 -0600
Subject: [PATCH] chore: adding support for page:loading event (#26779)

---
 packages/app/src/runner/events/capture-protocol.ts  |  6 ++++++
 packages/driver/types/internal-types-lite.d.ts      |  2 ++
 packages/server/lib/cloud/protocol.ts               |  4 ++++
 packages/server/lib/socket-base.ts                  |  2 ++
 .../fixtures/cloud/protocol/test-protocol.ts        |  1 +
 packages/server/test/unit/cloud/protocol_spec.ts    | 13 +++++++++++++
 packages/types/src/protocol.ts                      |  1 +
 system-tests/lib/protocolStub.ts                    |  1 +
 8 files changed, 30 insertions(+)

diff --git a/packages/app/src/runner/events/capture-protocol.ts b/packages/app/src/runner/events/capture-protocol.ts
index e5a83a2bb0d8..934223821c86 100644
--- a/packages/app/src/runner/events/capture-protocol.ts
+++ b/packages/app/src/runner/events/capture-protocol.ts
@@ -46,4 +46,10 @@ export const addCaptureProtocolListeners = (Cypress: Cypress.Cypress) => {
 
     Cypress.backend('protocol:url:changed', { url, timestamp })
   })
+
+  Cypress.on('page:loading', (loading) => {
+    const timestamp = performance.timeOrigin + performance.now()
+
+    Cypress.backend('protocol:page:loading', { loading, timestamp })
+  })
 }
diff --git a/packages/driver/types/internal-types-lite.d.ts b/packages/driver/types/internal-types-lite.d.ts
index cf04224d20fc..7eb042f62dbe 100644
--- a/packages/driver/types/internal-types-lite.d.ts
+++ b/packages/driver/types/internal-types-lite.d.ts
@@ -19,6 +19,7 @@ declare namespace Cypress {
     (action: 'before:screenshot', fn: (config: {}, fn: () => void) => void)
     (action: 'after:screenshot', config: {})
     (action: 'command:failed', fn: (command: CommandQueue, error: Error) => void): Cypress
+    (action: 'page:loading', fn: (loading: boolean) => void)
   }
 
   interface Backend {
@@ -28,6 +29,7 @@ declare namespace Cypress {
     (task: 'protocol:test:before:run:async', attributes: any): Promise<void>
     (task: 'protocol:test:after:run', attributes: any): Promise<void>
     (task: 'protocol:url:changed', input: any): Promise<void>
+    (task: 'protocol:page:loading', input: any): Promise<void>
   }
 
   interface cy {
diff --git a/packages/server/lib/cloud/protocol.ts b/packages/server/lib/cloud/protocol.ts
index 83f71b7ea6fa..ac7154026708 100644
--- a/packages/server/lib/cloud/protocol.ts
+++ b/packages/server/lib/cloud/protocol.ts
@@ -154,6 +154,10 @@ export class ProtocolManager implements ProtocolManagerShape {
     this.invokeSync('urlChanged', input)
   }
 
+  pageLoading (input: any): void {
+    this.invokeSync('pageLoading', input)
+  }
+
   async uploadCaptureArtifact (uploadUrl: string) {
     const dbPath = this._dbPath
 
diff --git a/packages/server/lib/socket-base.ts b/packages/server/lib/socket-base.ts
index 88556f610b5a..ec402c5f775b 100644
--- a/packages/server/lib/socket-base.ts
+++ b/packages/server/lib/socket-base.ts
@@ -470,6 +470,8 @@ export class SocketBase {
               return this.protocolManager?.viewportChanged(args[0])
             case 'protocol:url:changed':
               return this.protocolManager?.urlChanged(args[0])
+            case 'protocol:page:loading':
+              return this.protocolManager?.pageLoading(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.ts b/packages/server/test/support/fixtures/cloud/protocol/test-protocol.ts
index e55fd28dec28..4ec28d0a7454 100644
--- a/packages/server/test/support/fixtures/cloud/protocol/test-protocol.ts
+++ b/packages/server/test/support/fixtures/cloud/protocol/test-protocol.ts
@@ -31,6 +31,7 @@ export class AppCaptureProtocol implements ProtocolManagerShape {
   commandLogChanged = (log) => {}
   viewportChanged = (input) => {}
   urlChanged = (input) => {}
+  pageLoading = (input) => {}
   sendErrors (errors) {
     return Promise.resolve()
   }
diff --git a/packages/server/test/unit/cloud/protocol_spec.ts b/packages/server/test/unit/cloud/protocol_spec.ts
index 78c03dea2d42..adfd1451550b 100644
--- a/packages/server/test/unit/cloud/protocol_spec.ts
+++ b/packages/server/test/unit/cloud/protocol_spec.ts
@@ -235,4 +235,17 @@ describe('lib/cloud/protocol', () => {
 
     expect(protocol.urlChanged).to.be.calledWith(input)
   })
+
+  it('should be able to handle the page loading', () => {
+    sinon.stub(protocol, 'pageLoading')
+
+    const input = {
+      loading: true,
+      timestamp: 1234,
+    }
+
+    protocolManager.pageLoading(input)
+
+    expect(protocol.pageLoading).to.be.calledWith(input)
+  })
 })
diff --git a/packages/types/src/protocol.ts b/packages/types/src/protocol.ts
index 9d118e372578..72f42a7a0d84 100644
--- a/packages/types/src/protocol.ts
+++ b/packages/types/src/protocol.ts
@@ -23,6 +23,7 @@ export interface AppCaptureProtocolCommon {
   afterTest(test: Record<string, any>): void
   afterSpec (): Promise<void>
   connectToBrowser (cdpClient: CDPClient): Promise<void>
+  pageLoading (input: any): void
 }
 
 export interface AppCaptureProtocolInterface extends AppCaptureProtocolCommon {
diff --git a/system-tests/lib/protocolStub.ts b/system-tests/lib/protocolStub.ts
index e55fd28dec28..4ec28d0a7454 100644
--- a/system-tests/lib/protocolStub.ts
+++ b/system-tests/lib/protocolStub.ts
@@ -31,6 +31,7 @@ export class AppCaptureProtocol implements ProtocolManagerShape {
   commandLogChanged = (log) => {}
   viewportChanged = (input) => {}
   urlChanged = (input) => {}
+  pageLoading = (input) => {}
   sendErrors (errors) {
     return Promise.resolve()
   }