chore: updates for marktnoonan/16098

packages/app/src/main.ts

@@ -12,12 +12,6 @@ import Toast, { POSITION } from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
 import { createWebsocket, getRunnerConfigFromWindow } from './runner'
 
-// set a global so we can run
-// conditional code in the vite branch
-// so that the existing runner code
-// @ts-ignore
-window.__vite__ = true
-
 const app = createApp(App)
 
 const config = getRunnerConfigFromWindow()

packages/reporter/cypress/e2e/runnables.cy.ts

@@ -3,7 +3,9 @@ import { RootRunnable } from '../../src/runnables/runnables-store'
 import { itHandlesFileOpening } from '../support/utils'
 import type { BaseReporterProps } from '../../src/main'
 import type { RunnablesErrorModel } from '../../src/runnables/runnable-error'
+import appState from '../../src/lib/app-state'
 import { MobxRunnerStore } from '@packages/app/src/store'
+import scroller from '../../src/lib/scroller'
 
 const runnerStore = new MobxRunnerStore('e2e')
 
@@ -16,7 +18,7 @@ runnerStore.setSpec({
 describe('runnables', () => {
   let runner: EventEmitter
   let runnables: RootRunnable
-  let render: (renderProps?: Partial<BaseReporterProps>) => void
+  let render: (renderProps?: Partial<BaseReporterProps>, cypressMode?: 'run' | 'open') => void
   let start: (renderProps?: Partial<BaseReporterProps>) => Cypress.Chainable
 
   beforeEach(() => {
@@ -33,6 +35,8 @@ describe('runnables', () => {
           runner,
           studioEnabled: renderProps.studioEnabled || false,
           runnerStore,
+          scroller,
+          appState,
           ...renderProps,
         })
       })
@@ -184,14 +188,21 @@ describe('runnables', () => {
   })
 
   describe('runnable-header (unified)', () => {
+    let spy: Cypress.Agent<sinon.SinonSpy>
+
     beforeEach(() => {
-      cy.window().then((win) => win.__vite__ = true)
+      scroller.__setScrollThreholdMs(500)
+      spy = cy.spy(appState, 'temporarilySetAutoScrolling')
 
       start({
         runnerStore,
       })
     })
 
+    afterEach(() => {
+      scroller.__reset()
+    })
+
     it('contains name of spec and emits when clicked', () => {
       const selector = '.runnable-header a'
 
@@ -204,12 +215,24 @@ describe('runnables', () => {
     })
 
     it('adds a scroll listener in open mode', () => {
-      cy.get('[data-cy-scroll-listen]').should('have.attr', 'data-cy-scroll-listen', 'true')
+      appState.startRunning()
+      cy.get('.container')
+      .trigger('scroll')
+      .trigger('scroll')
+      .trigger('scroll').then(() => {
+        expect(spy).to.have.been.calledWith(false)
+      })
     })
 
     it('does not add a scroll listener in run mode', () => {
       render({}, 'run')
-      cy.get('[data-cy-scroll-listen]').should('have.attr', 'data-cy-scroll-listen', 'false')
+      appState.startRunning()
+      cy.get('.container')
+      .trigger('scroll')
+      .trigger('scroll')
+      .trigger('scroll').then(() => {
+        expect(spy).not.to.have.been.calledWith(false)
+      })
     })
   })
 })

packages/reporter/src/lib/scroller.ts

@@ -13,17 +13,17 @@
  - element distance from top of container
 */
 
-import { TimeoutID } from './types'
-
 export type UserScrollCallback = () => void
 
 const PADDING = 100
+const SCROLL_THRESHOLD_MS = 50
 
 export class Scroller {
   private _container: Element | null = null
   private _userScrollCount = 0
   private _userScroll = true
-  private _countUserScrollsTimeout?: TimeoutID
+  private _countUserScrollsTimeout?: number
+  private _userScrollThresholdMs = SCROLL_THRESHOLD_MS
 
   setContainer (container: Element, onUserScroll?: UserScrollCallback) {
     this._container = container
@@ -53,7 +53,7 @@ export class Scroller {
           onUserScroll()
         }
 
-        clearTimeout(this._countUserScrollsTimeout as TimeoutID)
+        clearTimeout(this._countUserScrollsTimeout)
         this._countUserScrollsTimeout = undefined
         this._userScrollCount = 0
 
@@ -62,10 +62,10 @@ export class Scroller {
 
       if (this._countUserScrollsTimeout) return
 
-      this._countUserScrollsTimeout = setTimeout(() => {
+      this._countUserScrollsTimeout = window.setTimeout(() => {
         this._countUserScrollsTimeout = undefined
         this._userScrollCount = 0
-      }, 50)
+      }, this._userScrollThresholdMs)
     })
   }
 
@@ -129,8 +129,20 @@ export class Scroller {
     this._container = null
     this._userScroll = true
     this._userScrollCount = 0
-    clearTimeout(this._countUserScrollsTimeout as TimeoutID)
+    clearTimeout(this._countUserScrollsTimeout)
     this._countUserScrollsTimeout = undefined
+    this._userScrollThresholdMs = SCROLL_THRESHOLD_MS
+  }
+
+  __setScrollThreholdMs (ms: number) {
+    const isCypressInCypress = document.defaultView !== top
+
+    // only allow this to be set in testing
+    if (!isCypressInCypress) {
+      return
+    }
+
+    this._userScrollThresholdMs = ms
   }
 }
 

packages/reporter/src/runnables/runnables.tsx

@@ -178,23 +178,14 @@ class Runnables extends Component<RunnablesProps> {
 
     let maybeHandleScroll: UserScrollCallback | undefined = undefined
 
-    const containerEl = this.refs.container as HTMLElement
-
     if (window.__CYPRESS_MODE__ === 'open') {
       // in open mode, listen for scroll events so that users can pause the command log auto-scroll
       // by manually scrolling the command log
-      containerEl.setAttribute('data-cy-scroll-listen', 'true')
       maybeHandleScroll = action('user:scroll:detected', () => {
         if (appState && appState.isRunning) {
           appState.temporarilySetAutoScrolling(false)
         }
       })
-    } else {
-      // in run mode, still add the data attribute so the tests have an explicit test locator,
-      // but do not do any scroll handling. No user is scrolling in run mode and it can
-      // cause problems in video recordings by incorrectly turning off autoscrolling,
-      // see issue https://github.com/cypress-io/cypress/issues/16098
-      containerEl.setAttribute('data-cy-scroll-listen', 'false')
     }
 
     // we need to always call scroller.setContainer, but the callback can be undefined