fix: correct invalid stored preference for in-app notifications (#27237)

cli/CHANGELOG.md

@@ -5,6 +5,7 @@ _Released 07/18/2023 (PENDING)_
 
 **Bugfixes:**
 
+- Fixed invalid stored preference when enabling in-app notifications that could cause the application to crash.  Fixes [#27228](https://github.com/cypress-io/cypress/issues/27228).
 - Fixed an issue with the Typescript types of [`cy.screenshot()`](https://docs.cypress.io/api/commands/screenshot). Fixed in [#27130](https://github.com/cypress-io/cypress/pull/27130).
 
 ## 12.17.0

packages/app/src/settings/device/NotificationSettings.vue

@@ -101,7 +101,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { gql, useMutation } from '@urql/vue'
 import { useI18n } from '@cy/i18n'
 import Switch from '@packages/frontend-shared/src/components/Switch.vue'
@@ -157,7 +157,14 @@ const switches = [
   },
 ]
 
-const listRef = ref(props.gql.localSettings.preferences.notifyWhenRunCompletes)
+const listRef = ref()
+
+// allow for gql value to load when navigating straight here from EnableNotificationsBanner
+watchEffect(() => {
+  if (!listRef.value) {
+    listRef.value = props.gql.localSettings.preferences.notifyWhenRunCompletes
+  }
+})
 
 const statuses = [
   { id: 'passed', label: t('settingsPage.notifications.passed') },

packages/data-context/src/actions/LocalSettingsActions.ts

@@ -1,9 +1,12 @@
-import { AllowedState, defaultPreferences, Editor } from '@packages/types'
+import { AllowedState, defaultPreferences, Editor, NotifyCompletionStatuses } from '@packages/types'
 import pDefer from 'p-defer'
 import _ from 'lodash'
+import Debug from 'debug'
 
 import type { DataContext } from '..'
 
+const debug = Debug('cypress:data-context:actions:LocalSettingsActions')
+
 export interface LocalSettingsApiShape {
   getAvailableEditors(): Promise<Editor[]>
 
@@ -47,6 +50,8 @@ export class LocalSettingsActions {
       return
     }
 
+    debug('refresh local settings')
+
     const dfd = pDefer<Editor[]>()
 
     this.ctx.coreData.localSettings.refreshing = dfd.promise
@@ -60,6 +65,19 @@ export class LocalSettingsActions {
       ...(await this.ctx._apis.localSettingsApi.getPreferences()),
     }
 
+    const preferences = this.ctx.coreData.localSettings.preferences
+
+    // Fix bad value for notifyWhenRunCompletes.  See https://github.com/cypress-io/cypress/issues/27228
+    if (typeof preferences.notifyWhenRunCompletes === 'boolean') {
+      if (preferences.notifyWhenRunCompletes === true) {
+        preferences.notifyWhenRunCompletes = [...NotifyCompletionStatuses]
+      } else {
+        preferences.notifyWhenRunCompletes = []
+      }
+
+      await this.ctx._apis.localSettingsApi.setPreferences(preferences)
+    }
+
     dfd.resolve()
   }
 }

packages/data-context/src/sources/VersionsDataSource.ts

@@ -129,6 +129,8 @@ export class VersionsDataSource {
       return pkg.version
     }
 
+    debug('#getLatestVersion')
+
     const preferences = await this.ctx.localSettingsApi.getPreferences()
     const notificationPreferences: ('started' | 'failing' | 'passed' | 'failed' | 'cancelled' | 'errored')[] = [
       ...preferences.notifyWhenRunCompletes ?? [],

packages/data-context/test/unit/actions/LocalSettingsActions.spec.ts

@@ -0,0 +1,64 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { LocalSettingsActions } from '../../../src/actions/LocalSettingsActions'
+import { createTestDataContext } from '../helper'
+import type { DataContext } from '../../../src'
+import { NotifyCompletionStatuses } from '@packages/types'
+
+describe('LocalSettingsActions', () => {
+  let ctx: DataContext
+  let actions: LocalSettingsActions
+
+  beforeEach(() => {
+    sinon.restore()
+
+    ctx = createTestDataContext('open')
+
+    actions = new LocalSettingsActions(ctx)
+  })
+
+  context('refreshLocalSettings', () => {
+    context('notifyWhenRunCompletes', () => {
+      it('should fix false value', async () => {
+        ctx._apis.localSettingsApi.getPreferences = sinon.stub().resolves({
+        //@ts-ignore
+          notifyWhenRunCompletes: false,
+        })
+
+        await actions.refreshLocalSettings()
+
+        expect(ctx.coreData.localSettings.preferences.notifyWhenRunCompletes).to.eql([])
+      })
+
+      it('should fix true value', async () => {
+        ctx._apis.localSettingsApi.getPreferences = sinon.stub().resolves({
+        //@ts-ignore
+          notifyWhenRunCompletes: true,
+        })
+
+        await actions.refreshLocalSettings()
+
+        expect(ctx.coreData.localSettings.preferences.notifyWhenRunCompletes).to.eql([...NotifyCompletionStatuses])
+      })
+
+      it('should leave value alone if value is an array', async () => {
+        ctx._apis.localSettingsApi.getPreferences = sinon.stub().resolves({
+        //@ts-ignore
+          notifyWhenRunCompletes: ['errored'],
+        })
+
+        await actions.refreshLocalSettings()
+
+        expect(ctx.coreData.localSettings.preferences.notifyWhenRunCompletes).to.eql(['errored'])
+      })
+
+      it('should pass through default value if not set ', async () => {
+        ctx._apis.localSettingsApi.getPreferences = sinon.stub().resolves({})
+
+        await actions.refreshLocalSettings()
+
+        expect(ctx.coreData.localSettings.preferences.notifyWhenRunCompletes).to.eql(['failed'])
+      })
+    })
+  })
+})

packages/data-context/test/unit/helper.ts

@@ -51,6 +51,8 @@ export function createTestDataContext (mode: DataContextConfig['mode'] = 'run',
         majorVersionWelcomeDismissed: { [MAJOR_VERSION_FOR_CONTENT]: 123456 },
         notifyWhenRunCompletes: ['failed'],
       }),
+      getAvailableEditors: sinon.stub(),
+      setPreferences: sinon.stub(),
     } as unknown as LocalSettingsApiShape,
     authApi: {
       logIn: sinon.stub().throws('not stubbed'),

packages/types/src/preferences.ts

@@ -1,6 +1,8 @@
 import type { BannersState, Editor, MajorVersionWelcomeDismissed } from '.'
 
-export type NotifyWhenRunCompletes = 'passed' | 'failed' | 'cancelled' | 'errored'
+export const NotifyCompletionStatuses = ['passed', 'failed', 'cancelled', 'errored'] as const
+
+export type NotifyWhenRunCompletes = typeof NotifyCompletionStatuses[number]
 
 export const defaultPreferences: AllowedState = {
   autoScrollingEnabled: true,