From d27e2494fa0733643538168c9f894b7c9c0c9148 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Thu, 10 Aug 2023 23:44:18 +1000
Subject: [PATCH] chore: protocol/mount before async (#27511)

Co-authored-by: David Kasper <dave.m.kasper@gmail.com>
---
 npm/mount-utils/src/index.ts                         |  2 +-
 .../topnav/VerticalBrowserListItems.vue              |  7 +------
 packages/frontend-shared/src/utils/sortBrowsers.ts   |  3 ---
 packages/launchpad/src/setup/OpenBrowserList.cy.tsx  | 11 ++++-------
 packages/launchpad/src/setup/OpenBrowserList.vue     | 12 +++---------
 5 files changed, 9 insertions(+), 26 deletions(-)
 delete mode 100644 packages/frontend-shared/src/utils/sortBrowsers.ts

diff --git a/npm/mount-utils/src/index.ts b/npm/mount-utils/src/index.ts
index 87ace86aa7af..4d00f3507161 100644
--- a/npm/mount-utils/src/index.ts
+++ b/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?.()
   })
 }
diff --git a/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue b/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
index d54f4eb544d8..96bb32b445d9 100644
--- a/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
+++ b/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)
diff --git a/packages/frontend-shared/src/utils/sortBrowsers.ts b/packages/frontend-shared/src/utils/sortBrowsers.ts
deleted file mode 100644
index d7e6e2bb799b..000000000000
--- a/packages/frontend-shared/src/utils/sortBrowsers.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function sortBrowsers (browsers) {
-  return browsers.sort((a, b) => a.displayName > b.displayName ? 1 : -1)
-}
diff --git a/packages/launchpad/src/setup/OpenBrowserList.cy.tsx b/packages/launchpad/src/setup/OpenBrowserList.cy.tsx
index 108d9bec4017..6be4b628920b 100644
--- a/packages/launchpad/src/setup/OpenBrowserList.cy.tsx
+++ b/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')
   })
 })
diff --git a/packages/launchpad/src/setup/OpenBrowserList.vue b/packages/launchpad/src/setup/OpenBrowserList.vue
index b54442c2ad45..cfce89971823 100644
--- a/packages/launchpad/src/setup/OpenBrowserList.vue
+++ b/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,11 +227,8 @@ 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)
@@ -240,9 +236,7 @@ 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) {