chore: protocol/mount before async (#27511)

Co-authored-by: David Kasper <dave.m.kasper@gmail.com>

npm/mount-utils/src/index.ts

@@ -57,7 +57,7 @@ export function setupHooks (optionalCallback?: Function) {
   })
 
   // @ts-ignore
-  Cypress.on('test:before:run', () => {
+  Cypress.on('test:before:after:run:async', () => {
     optionalCallback?.()
   })
 }

packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue

@@ -87,7 +87,6 @@ import { computed } from 'vue'
 import { gql, useMutation } from '@urql/vue'
 import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 import Tooltip from '../../components/Tooltip.vue'
-import sortBrowsers from '@packages/frontend-shared/src/utils/sortBrowsers'
 
 const { t } = useI18n()
 
@@ -129,11 +128,7 @@ const props = withDefaults(defineProps <{
 })
 
 const browsers = computed(() => {
-  if (!props.gql.browsers) {
-    return undefined
-  }
-
-  return sortBrowsers([...props.gql.browsers])
+  return (props.gql.browsers ?? []).slice().sort((a, b) => a.displayName > b.displayName ? 1 : -1)
 })
 
 const setBrowser = useMutation(VerticalBrowserListItems_SetBrowserDocument)

packages/launchpad/src/setup/OpenBrowserList.cy.tsx

@@ -128,15 +128,10 @@ describe('<OpenBrowserList />', () => {
 
     cy.contains('button', defaultMessages.openBrowser.running.replace('{browser}', 'Electron')).should('be.disabled')
     cy.contains('button', defaultMessages.openBrowser.focus).should('not.exist')
+    cy.get('[aria-checked="true"]').contains('Electron')
   })
 
-  // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23099
-  it('throws when activeBrowser is null', { retries: 15 }, (done) => {
-    cy.once('uncaught:exception', (err) => {
-      expect(err.message).to.include('Missing activeBrowser in selectedBrowserId')
-      done()
-    })
-
+  it('throws when activeBrowser is null', () => {
     cy.mountFragment(OpenBrowserListFragmentDoc, {
       onResult: (res) => {
         res.activeBrowser = null
@@ -150,5 +145,7 @@ describe('<OpenBrowserList />', () => {
           </div>)
       },
     })
+
+    cy.get('[aria-checked="true"]').should('not.exist')
   })
 })

packages/launchpad/src/setup/OpenBrowserList.vue

@@ -166,7 +166,6 @@ import ArrowRightIcon from '~icons/cy/arrow-right_x16'
 import StatusRunningIcon from '~icons/cy/status-running_x16'
 import { RadioGroup, RadioGroupOption, RadioGroupLabel } from '@headlessui/vue'
 import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
-import sortBrowsers from '@packages/frontend-shared/src/utils/sortBrowsers'
 
 import type { OpenBrowserListFragment } from '../generated/graphql'
 import { OpenBrowserList_SetBrowserDocument, OpenBrowserList_BrowserStatusChangeDocument } from '../generated/graphql'
@@ -228,21 +227,16 @@ const emit = defineEmits<{
 const { t } = useI18n()
 
 const browsers = computed(() => {
-  if (!props.gql.browsers) {
-    return undefined
-  }
-
-  return sortBrowsers([...props.gql.browsers])
+  // Need to slice(). `sort()` mutates, and props are supposed to be `readonly`.
+  return (props.gql.browsers ?? []).slice().sort((a, b) => a.displayName > b.displayName ? 1 : -1)
 })
 
 const setBrowser = useMutation(OpenBrowserList_SetBrowserDocument)
 
 const selectedBrowserId = computed({
   get: () => {
     // NOTE: The activeBrowser is set during project initialization. It should always be defined.
-    if (!props.gql.activeBrowser) throw new Error('Missing activeBrowser in selectedBrowserId')
-
-    return props.gql.activeBrowser.id
+    return props.gql.activeBrowser?.id
   },
   set (browserId) {
     if (browserId) {