feat: Sort browsers list alphabetically (#20248)

Co-authored-by: Zachary Williams <ZachJW34@gmail.com>
Co-authored-by: Emily Rohrbough <emilyrohrbough@users.noreply.github.com>

packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts

@@ -21,11 +21,11 @@ describe('Cypress In Cypress', { viewportWidth: 1500 }, () => {
     cy.findByTestId('aut-url').should('not.exist')
     cy.findByTestId('select-browser').click()
 
-    cy.contains('Firefox').should('be.visible')
+    cy.contains('Canary').should('be.visible')
     cy.findByTestId('viewport').click()
 
     snapshotAUTPanel('browsers open')
-    cy.contains('Firefox').should('be.hidden')
+    cy.contains('Canary').should('be.hidden')
     cy.contains('The viewport determines the width and height of your application. By default the viewport will be 500px by 500px for Component Testing unless specified by a cy.viewport command.')
     .should('be.visible')
 

packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts

@@ -21,7 +21,9 @@ describe('Cypress In Cypress', { viewportWidth: 1500 }, () => {
     cy.findByTestId('playground-activator').should('be.visible')
     cy.findByTestId('select-browser').click()
 
-    cy.contains('Firefox').click()
+    cy.contains('Canary').should('be.visible')
+    cy.findByTestId('select-browser').click()
+    cy.get('[data-cy="viewport"]').click()
 
     cy.contains('Chrome 1')
     .focus()
@@ -29,9 +31,9 @@ describe('Cypress In Cypress', { viewportWidth: 1500 }, () => {
 
     snapshotAUTPanel('browsers open')
 
-    cy.contains('Firefox').should('be.hidden')
+    cy.contains('Canary').should('be.hidden')
 
-    cy.findByTestId('viewport').click()
+    cy.get('[data-cy="viewport"]').click()
     cy.contains('The viewport determines the width and height of your application. By default the viewport will be 1000px by 660px for End-to-end Testing unless specified by a cy.viewport command.')
     .should('be.visible')
 

packages/app/cypress/e2e/top-nav.cy.ts

@@ -70,22 +70,22 @@ describe('App Top Nav Workflows', () => {
         .should('exist')
 
         cy.get('@browserItems').eq(1)
-        .should('contain', 'Firefox')
-        .and('contain', 'Version 5.6.7')
-        .findByTestId('top-nav-browser-list-selected-item')
-        .should('not.exist')
-
-        cy.get('@browserItems').eq(2)
         .should('contain', 'Edge')
         .and('contain', 'Version 8.9.10')
         .findByTestId('top-nav-browser-list-selected-item')
         .should('not.exist')
 
-        cy.get('@browserItems').eq(3)
+        cy.get('@browserItems').eq(2)
         .should('contain', 'Electron')
         .and('contain', 'Version 12.13.14')
         .findByTestId('top-nav-browser-list-selected-item')
         .should('not.exist')
+
+        cy.get('@browserItems').eq(3)
+        .should('contain', 'Firefox')
+        .and('contain', 'Version 5.6.7')
+        .findByTestId('top-nav-browser-list-selected-item')
+        .should('not.exist')
       })
 
       it('performs mutations to update and relaunch browser', () => {

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

@@ -1,7 +1,7 @@
 <template>
   <template v-if="props.gql">
     <li
-      v-for="browser in props.gql.browsers"
+      v-for="browser of browsers"
       :key="browser.id"
       class="border-b border-transparent cursor-pointer flex border-b-gray-50 border-1px min-w-240px py-12px px-16px transition-colors duration-300 group focus-within-default"
       :class="{
@@ -75,9 +75,11 @@
 <script setup lang="ts">
 import { useI18n } from '@cy/i18n'
 import { VerticalBrowserListItemsFragment, VerticalBrowserListItems_SetBrowserDocument } from '../../generated/graphql'
+import { computed } from 'vue'
 import { gql, useMutation } from '@urql/vue'
 import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 import UnsupportedBrowserTooltip from './UnsupportedBrowserTooltip.vue'
+import sortBrowsers from '@packages/frontend-shared/src/utils/sortBrowsers'
 
 const { t } = useI18n()
 
@@ -118,6 +120,14 @@ const props = withDefaults(defineProps <{
   specPath: undefined,
 })
 
+const browsers = computed(() => {
+  if (!props.gql.browsers) {
+    return undefined
+  }
+
+  return sortBrowsers([...props.gql.browsers])
+})
+
 const setBrowser = useMutation(VerticalBrowserListItems_SetBrowserDocument)
 
 const handleBrowserChoice = async (browser) => {

packages/frontend-shared/src/utils/sortBrowsers.ts

@@ -0,0 +1,3 @@
+export default function sortBrowsers (browsers) {
+  return browsers.sort((a, b) => a.displayName > b.displayName ? 1 : -1)
+}

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

@@ -56,7 +56,7 @@ describe('<OpenBrowserList />', () => {
         </div>),
     })
 
-    cy.get('[data-cy-browser="firefox"]:nth(1) [data-cy="unsupported-browser-tooltip"]')
+    cy.get('[data-cy-browser="firefox"]:nth(2) [data-cy="unsupported-browser-tooltip"]')
     .trigger('mouseenter')
     .contains('Cypress does not support running Firefox Developer Edition version 69.')
 

packages/launchpad/src/setup/OpenBrowserList.vue

@@ -164,6 +164,7 @@ import ArrowRightIcon from '~icons/cy/arrow-right_x16'
 import StatusRunningIcon from '~icons/cy/status-running_x16'
 import { RadioGroup, RadioGroupOption, RadioGroupLabel } from '@headlessui/vue'
 import UnsupportedBrowserTooltip from '@packages/frontend-shared/src/gql-components/topnav/UnsupportedBrowserTooltip.vue'
+import sortBrowsers from '@packages/frontend-shared/src/utils/sortBrowsers'
 
 import type { OpenBrowserListFragment } from '../generated/graphql'
 import { OpenBrowserList_SetBrowserDocument } from '../generated/graphql'
@@ -223,7 +224,7 @@ const browsers = computed(() => {
     return undefined
   }
 
-  return [...props.gql.browsers].sort((a, b) => a.name === 'Electron' ? 1 : -1)
+  return sortBrowsers([...props.gql.browsers])
 })
 
 const setBrowser = useMutation(OpenBrowserList_SetBrowserDocument)