fix: do not magically set user preferences for auto-scroll

cli/CHANGELOG.md

@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 12.8.1`
+
+_Released 03/14/2023 (PENDING)_
+
+**Bugfixes:**
+
+- Fixed a regression in Cypress [10](https://docs.cypress.io/guides/references/changelog#10-0-0) where the reporter auto-scroll configuration inside user preferences was unintentionally being toggled off. User's must now explicitly enable/disable auto-scroll under user preferences, which is enabled by default. Fixes [#24171](https://github.com/cypress-io/cypress/issues/24171).
+
 ## 12.8.0
 
 _Released 03/14/2023_

packages/reporter/cypress/e2e/unit/events.cy.ts

@@ -350,7 +350,7 @@ describe('events', () => {
     })
 
     it('emits save:state on save:state', () => {
-      appState.autoScrollingEnabled = false
+      appState.autoScrollingUserPref = false
       appState.isSpecsListOpen = true
       events.emit('save:state')
       expect(runner.emit).to.have.been.calledWith('save:state', {

packages/reporter/src/lib/app-state.ts

@@ -22,6 +22,7 @@ const defaults: DefaultAppState = {
 }
 
 class AppState {
+  @observable autoScrollingUserPref = true
   @observable autoScrollingEnabled = true
   @observable isSpecsListOpen = false
   @observable isPaused = defaults.isPaused
@@ -69,6 +70,14 @@ class AppState {
     this.setAutoScrolling(!this.autoScrollingEnabled)
   }
 
+  /**
+   * Toggles the auto-scrolling user preference to true|false. This method should only be called from the
+   * preferences menu itself.
+   */
+  toggleAutoScrollingUserPref () {
+    this.setAutoScrollingUserPref(!this.autoScrollingUserPref)
+  }
+
   toggleSpecList () {
     this.isSpecsListOpen = !this.isSpecsListOpen
   }
@@ -88,6 +97,19 @@ class AppState {
     }
   }
 
+  /**
+   * Sets the auto scroll user preference to true|false.
+   * When this preference is set, it overrides any temporary auto scrolling behaviors that may be in effect.
+   * @param {boolean | null | undefined} isEnabled - whether or not auto scroll should be enabled or disabled.
+   * If not a boolean, this method is a no-op.
+   */
+  setAutoScrollingUserPref (isEnabled?: boolean | null) {
+    if (isEnabled != null) {
+      this.autoScrollingUserPref = isEnabled
+      this.setAutoScrolling(isEnabled)
+    }
+  }
+
   setStudioActive (studioActive: boolean) {
     this.studioActive = studioActive
   }

packages/reporter/src/lib/events.ts

@@ -194,7 +194,8 @@ const events: Events = {
 
     localBus.on('save:state', () => {
       runner.emit('save:state', {
-        autoScrollingEnabled: appState.autoScrollingEnabled,
+        // the "autoScrollingEnabled" key refers to the preference value itself, not the "autoScrollingEnabled" variable stored in application state
+        autoScrollingEnabled: appState.autoScrollingUserPref,
         isSpecsListOpen: appState.isSpecsListOpen,
       })
     })

packages/reporter/src/lib/shortcuts.ts

@@ -37,7 +37,7 @@ class Shortcuts {
       case 'n': events.emit('next')
         break
       case 'a': action('set:scrolling', () => {
-        appState.setAutoScrolling(!appState.autoScrollingEnabled)
+        appState.toggleAutoScrollingUserPref()
         events.emit('save:state')
       })()
 

packages/reporter/src/main.tsx

@@ -114,7 +114,8 @@ class Reporter extends Component<SingleReporterProps> {
     }
 
     action('set:scrolling', () => {
-      appState.setAutoScrolling(autoScrollingEnabled)
+      // set the initial enablement of auto scroll configured inside the user preferences when the app is loaded
+      appState.setAutoScrollingUserPref(autoScrollingEnabled)
     })()
 
     action('set:specs:list', () => {

packages/reporter/src/preferences/testing-preferences.tsx

@@ -15,8 +15,8 @@ const TestingPreferences = observer(({
   events = defaultEvents,
   appState,
 }: Props) => {
-  const toggleAutoScrolling = () => {
-    appState.toggleAutoScrolling()
+  const toggleAutoScrollingUserPref = () => {
+    appState.toggleAutoScrollingUserPref()
     events.emit('save:state')
   }
 
@@ -31,8 +31,8 @@ const TestingPreferences = observer(({
           Auto-scrolling
           <Switch
             data-cy="auto-scroll-switch"
-            value={appState.autoScrollingEnabled}
-            onUpdate={action('toggle:auto:scrolling', toggleAutoScrolling)}
+            value={appState.autoScrollingUserPref}
+            onUpdate={action('toggle:auto:scrolling', toggleAutoScrollingUserPref)}
           />
         </div>
         <div>