internal: (studio) add socket listeners (#31470)

Author: mschile

packages/app/src/studio/studio-app-types.ts

@@ -1,5 +1,7 @@
 export interface StudioPanelProps {
   canAccessStudioAI: boolean
+  useStudioEventManager?: StudioEventManagerShape
+  useStudioAIStream?: StudioAIStreamShape
 }
 
 export type StudioPanelShape = (props: StudioPanelProps) => JSX.Element
@@ -9,3 +11,27 @@ export interface StudioAppDefaultShape {
   // transferred to the Cypress app
   StudioPanel: StudioPanelShape
 }
+
+export type CypressInternal = Cypress.Cypress &
+CyEventEmitter & {
+  state: (key: string) => any
+}
+
+export interface StudioEventManagerProps {
+  Cypress: CypressInternal
+}
+
+export type RunnerStatus = 'running' | 'finished'
+
+export type StudioEventManagerShape = (props: StudioEventManagerProps) => {
+  runnerStatus: RunnerStatus
+  testBlock: string | null
+}
+
+export interface StudioAIStreamProps {
+  canAccessStudioAI: boolean
+  AIOutputRef: { current: HTMLTextAreaElement | null }
+  runnerStatus: RunnerStatus
+}
+
+export type StudioAIStreamShape = (props: StudioAIStreamProps) => void

packages/server/lib/cloud/studio.ts

@@ -1,5 +1,6 @@
 import type { StudioErrorReport, StudioManagerShape, StudioStatus, StudioServerDefaultShape, StudioServerShape, ProtocolManagerShape, StudioCloudApi } from '@packages/types'
 import type { Router } from 'express'
+import type { Socket } from 'socket.io'
 import fetch from 'cross-fetch'
 import pkg from '@packages/root'
 import os from 'os'
@@ -61,6 +62,12 @@ export class StudioManager implements StudioManagerShape {
     }
   }
 
+  addSocketListeners (socket: Socket): void {
+    if (this._studioServer) {
+      this.invokeSync('addSocketListeners', { isEssential: true }, socket)
+    }
+  }
+
   async canAccessStudioAI (browser: Cypress.Browser): Promise<boolean> {
     return (await this.invokeAsync('canAccessStudioAI', { isEssential: true }, browser)) ?? false
   }

packages/server/lib/socket-base.ts

@@ -407,6 +407,8 @@ export class SocketBase {
           return socket.emit('dev-server:on-spec-updated')
         })
 
+        getCtx().coreData.studio?.addSocketListeners(socket)
+
         socket.on('studio:init', async (cb) => {
           try {
             const { canAccessStudioAI } = await options.onStudioInit()

packages/server/package.json

@@ -201,6 +201,7 @@
     "request-promise": "4.2.6",
     "sinon": "17.0.1",
     "snap-shot-it": "7.9.10",
+    "socket.io": "4.0.1",
     "ssestream": "1.0.1",
     "supertest": "4.0.2",
     "supertest-session": "4.0.0",

packages/server/test/support/fixtures/cloud/studio/test-studio.ts

@@ -1,17 +1,25 @@
-import type { StudioServerShape, StudioServerDefaultShape, StudioBrowser } from '@packages/types'
+/// <reference types="cypress" />
+
+import type { StudioServerShape, StudioServerDefaultShape } from '@packages/types'
 import type Database from 'better-sqlite3'
 import type { Router } from 'express'
+import type { Socket } from '@packages/socket'
 
 class StudioServer implements StudioServerShape {
   initializeRoutes (router: Router): void {
-
+    // This is a test implementation that does nothing
   }
 
-  canAccessStudioAI (browser: StudioBrowser): Promise<boolean> {
+  canAccessStudioAI (browser: Cypress.Browser): Promise<boolean> {
     return Promise.resolve(true)
   }
 
+  addSocketListeners (socket: Socket): void {
+    // This is a test implementation that does nothing
+  }
+
   setProtocolDb (db: Database.Database): void {
+    // This is a test implementation that does nothing
   }
 }
 

packages/server/test/unit/cloud/studio_spec.ts

@@ -172,6 +172,31 @@ describe('lib/cloud/studio', () => {
     })
   })
 
+  describe('addSocketListeners', () => {
+    it('calls addSocketListeners on the studio server', () => {
+      sinon.stub(studio, 'addSocketListeners')
+      const mockSocket = { id: 'test-socket' } as any
+
+      studioManager.addSocketListeners(mockSocket)
+
+      expect(studio.addSocketListeners).to.be.calledWith(mockSocket)
+    })
+
+    it('does not call addSocketListeners when studio server is not defined', () => {
+      // Set _studioServer to undefined
+      (studioManager as any)._studioServer = undefined
+
+      // Create a spy on invokeSync to verify it's not called
+      const invokeSyncSpy = sinon.spy(studioManager, 'invokeSync')
+
+      const mockSocket = { id: 'test-socket' } as any
+
+      studioManager.addSocketListeners(mockSocket)
+
+      expect(invokeSyncSpy).to.not.be.called
+    })
+  })
+
   describe('setProtocolDb', () => {
     it('sets the protocol database on the studio server', () => {
       const mockDb = { test: 'db' }

packages/server/test/unit/socket_spec.js

@@ -74,6 +74,14 @@ describe('lib/socket', () => {
           screenshotsFolder: this.cfg.screenshotsFolder,
         })
 
+        // Create a mock studio object with addSocketListeners method
+        const mockStudio = {
+          addSocketListeners: sinon.stub(),
+        }
+
+        // Set the studio in the context
+        ctx.coreData.studio = mockStudio
+
         this.server.startWebsockets(this.automation, this.cfg, this.options)
         this.socket = this.server._socket
 
@@ -580,6 +588,14 @@ describe('lib/socket', () => {
       })
     })
 
+    context('studio.addSocketListeners', () => {
+      it('calls addSocketListeners on studio when socket connects', function () {
+        // The socket connection was already established in the beforeEach so
+        // we can just verify that addSocketListeners was called
+        expect(ctx.coreData.studio.addSocketListeners).to.be.called
+      })
+    })
+
     context('#isRunnerSocketConnected', function () {
       it('returns false when runner is not connected', function () {
         expect(this.socket.isRunnerSocketConnected()).to.eq(false)

packages/types/package.json

@@ -19,6 +19,7 @@
     "better-sqlite3": "11.5.0",
     "devtools-protocol": "0.0.1413303",
     "express": "4.21.0",
+    "socket.io": "4.0.1",
     "typescript": "~5.4.5"
   },
   "files": [

packages/types/src/studio/studio-server-types.ts

@@ -3,6 +3,7 @@
 import type { Router } from 'express'
 import type { AxiosInstance } from 'axios'
 import type Database from 'better-sqlite3'
+import type { Socket } from 'socket.io'
 
 interface RetryOptions {
   maxAttempts: number
@@ -34,6 +35,12 @@ export interface StudioServerShape {
   initializeRoutes(router: Router): void
   canAccessStudioAI(browser: Cypress.Browser): Promise<boolean>
   setProtocolDb(database: Database.Database): void
+  addSocketListeners(socket: Socket): void
+}
+
+export interface StudioRouteOptions extends StudioServerOptions {
+  router: Router
+  getProtocolDb: () => Database.Database | undefined
 }
 
 export interface StudioServerDefaultShape {