fix: moving away from runner and disconnecting websockets stops listening for changes to webpack build (#21281)

packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts

@@ -192,4 +192,59 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
       cy.get('#unified-runner').should('have.css', 'height', '333px')
     })
   })
+
+  it('moves away from runner and back, disconnects websocket and reconnects it correctly', () => {
+    cy.openProject('cypress-in-cypress')
+    cy.startAppServer('component')
+
+    cy.visitApp()
+    cy.contains('TestComponent.spec').click()
+    cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
+    cy.get('.passed > .num').should('contain', 1)
+    cy.get('.failed > .num').should('contain', '--')
+
+    cy.get('[href="#/runs"]').click()
+    cy.get('[data-cy="app-header-bar"]').findByText('Runs').should('be.visible')
+
+    cy.get('[href="#/specs"]').click()
+    cy.get('[data-cy="app-header-bar"]').findByText('Specs').should('be.visible')
+
+    cy.contains('TestComponent.spec').click()
+    cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
+
+    cy.window().then((win) => {
+      const connected = () => win.ws?.connected
+
+      win.ws?.close()
+
+      cy.wrap({
+        connected,
+      }).invoke('connected').should('be.false')
+
+      win.ws?.connect()
+
+      cy.wrap({
+        connected,
+      }).invoke('connected').should('be.true')
+    })
+
+    cy.withCtx((ctx, o) => {
+      ctx.actions.file.writeFileInProject(o.path, `
+import React from 'react'
+import { mount } from '@cypress/react'
+
+describe('TestComponent', () => {
+  it('renders the new test component', () => {
+    mount(<div>Component Test</div>)
+
+    cy.contains('Component Test').should('be.visible')
+  })
+})
+`)
+    }, { path: getPathForPlatform('src/TestComponent.spec.jsx') })
+
+    cy.get('[data-model-state="passed"]').should('contain', 'renders the new test component')
+    cy.get('.passed > .num').should('contain', 1)
+    cy.get('.failed > .num').should('contain', '--')
+  })
 })

packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts

@@ -191,4 +191,51 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.contains('new-file.spec').click()
     cy.get('[data-model-state="passed"]').should('contain', 'expected true to be true')
   })
+
+  it('moves away from runner and back, disconnects websocket and reconnects it correctly', () => {
+    cy.visitApp()
+    cy.contains('dom-content.spec').click()
+    cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
+    cy.get('.passed > .num').should('contain', 1)
+    cy.get('.failed > .num').should('contain', '--')
+
+    cy.get('[href="#/runs"]').click()
+    cy.get('[data-cy="app-header-bar"]').findByText('Runs').should('be.visible')
+
+    cy.get('[href="#/specs"]').click()
+    cy.get('[data-cy="app-header-bar"]').findByText('Specs').should('be.visible')
+
+    cy.contains('dom-content.spec').click()
+    cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
+
+    cy.window().then((win) => {
+      const connected = () => win.ws?.connected
+
+      win.ws?.close()
+
+      cy.wrap({
+        connected,
+      }).invoke('connected').should('be.false')
+
+      win.ws?.connect()
+
+      cy.wrap({
+        connected,
+      }).invoke('connected').should('be.true')
+    })
+
+    cy.withCtx((ctx, o) => {
+      ctx.actions.file.writeFileInProject(o.path, `
+describe('Dom Content', () => {
+  it('renders the new test content', () => {
+    cy.visit('cypress/e2e/dom-content.html')
+  })
+})
+`)
+    }, { path: getPathForPlatform('cypress/e2e/dom-content.spec.js') })
+
+    cy.get('[data-model-state="passed"]').should('contain', 'renders the new test content')
+    cy.get('.passed > .num').should('contain', 1)
+    cy.get('.failed > .num').should('contain', '--')
+  })
 })

packages/app/src/runner/event-manager.ts

@@ -65,6 +65,14 @@ export class EventManager {
   }
 
   addGlobalListeners (state: MobxRunnerStore, options: AddGlobalListenerOptions) {
+    // Moving away from the runner turns off all websocket listeners. addGlobalListeners adds them back
+    // but connect is added when the websocket is created elsewhere so we need to add it back.
+    if (!this.ws.hasListeners('connect')) {
+      this.ws.on('connect', () => {
+        this.ws.emit('runner:connected')
+      })
+    }
+
     const rerun = () => {
       if (!this) {
         // if the tests have been reloaded
@@ -132,10 +140,6 @@ export class EventManager {
       rerun()
     })
 
-    this.ws.on('specs:changed', ({ specs, testingType }) => {
-      state.setSpecs(specs)
-    })
-
     this.ws.on('dev-server:hmr:error', (error) => {
       Cypress.stop()
       this.localBus.emit('script:error', error)

packages/server/lib/project-base.ts

@@ -405,10 +405,6 @@ export class ProjectBase<TServer extends Server> extends EE {
     this.ctx.setAppSocketServer(io)
   }
 
-  changeToUrl (url) {
-    this.server.changeToUrl(url)
-  }
-
   async closeBrowserTabs () {
     return this.server.socket.closeBrowserTabs()
   }

packages/server/lib/server-base.ts

@@ -576,10 +576,6 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
     return this._socket && this._socket.end()
   }
 
-  changeToUrl (url) {
-    return this._socket && this._socket.changeToUrl(url)
-  }
-
   async sendFocusBrowserMessage () {
     this._socket && await this._socket.sendFocusBrowserMessage()
   }
@@ -623,8 +619,4 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
 
     return this.httpsProxy.connect(req, socket, head)
   }
-
-  sendSpecList (specs: Cypress.Cypress['spec'][], testingType: Cypress.TestingType) {
-    return this.socket.sendSpecList(specs, testingType)
-  }
 }

packages/server/lib/socket-base.ts

@@ -567,10 +567,6 @@ export class SocketBase {
     return this._io?.emit('tests:finished')
   }
 
-  changeToUrl (url) {
-    return this.toRunner('change:to:url', url)
-  }
-
   async closeBrowserTabs () {
     if (this._sendCloseBrowserTabsMessage) {
       await this._sendCloseBrowserTabsMessage()
@@ -596,8 +592,4 @@ export class SocketBase {
   close () {
     return this._io?.close()
   }
-
-  sendSpecList (specs, testingType: Cypress.TestingType) {
-    this.toRunner('specs:changed', { specs, testingType })
-  }
 }