misc: update browser icons (#30790)

cypress-io · Jan 7, 2025 · 558906f · 558906f · cypress-bot · Jan 7, 2025
1 parent 0ddb119
commit 558906f
Show file tree

Hide file tree

Showing 29 changed files with 263 additions and 327 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.17.1
+
+_Released 12/31/2024 (PENDING)_
+
+**Misc:**
+
+- Updated to use Cypress design system browser icons. Addressed in [#30790](https://github.com/cypress-io/cypress/pull/30790).
+
 ## 13.17.0
 
 _Released 12/17/2024_

diff --git a/packages/app/cypress/component/support/index.ts b/packages/app/cypress/component/support/index.ts
@@ -1,22 +1,6 @@
 /// <reference path="../../../../frontend-shared/cypress/support/component.ts" />
 import '../../../../frontend-shared/cypress/support/component.ts'
 import { registerMountFn } from '@packages/frontend-shared/cypress/support/common'
-// ***********************************************************
-// This example support/index.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
 
 import { createRouter } from '../../../src/router/router'
 import { createPinia } from '../../../src/store'

diff --git a/packages/app/cypress/e2e/support/e2eSupport.ts b/packages/app/cypress/e2e/support/e2eSupport.ts
@@ -20,15 +20,15 @@ beforeEach(() => {
 function e2eTestingTypeIsSelected () {
   cy.findByTestId('specs-testing-type-header').within(() => {
     cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('have.attr', 'aria-selected', 'true')
-    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('not.have.attr', 'aria-selected')
+    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'false')
   })
 }
 
 Cypress.Commands.add('verifyE2ESelected', e2eTestingTypeIsSelected)
 
 function ctTestingTypeIsSelected () {
   cy.findByTestId('specs-testing-type-header').within(() => {
-    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('not.have.attr', 'aria-selected')
+    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('have.attr', 'aria-selected', 'false')
     cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'true')
   })
 }

diff --git a/packages/app/cypress/e2e/top-nav.cy.ts b/packages/app/cypress/e2e/top-nav.cy.ts
@@ -3,6 +3,7 @@ import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
 import { CYPRESS_REMOTE_MANIFEST_URL, NPM_CYPRESS_REGISTRY_URL } from '@packages/types'
 import type Sinon from 'sinon'
 import { dayjs } from '../../src/runs/utils/day'
+import { cyBrowserMozillaFirefoxX16, cyBrowserChromeX16 } from '@cypress-design/icon-registry'
 
 const pkg = require('@packages/root')
 
@@ -40,9 +41,9 @@ describe('App Top Nav Workflows', () => {
         cy.visitApp()
         cy.specsPageIsVisible()
 
-        cy.findByTestId('top-nav-active-browser-icon')
-        .should('have.attr', 'src')
-        .and('contain', 'firefox')
+        cy.findByTestId('top-nav-active-browser-icon').children()
+        .verifyBrowserIconSvg(cyBrowserMozillaFirefoxX16.data)
+        .get('title').should('contain', 'Firefox')
 
         cy.findByTestId('top-nav-active-browser').should('contain', 'Firefox 6')
       })
@@ -63,8 +64,9 @@ describe('App Top Nav Workflows', () => {
       })
 
       it('shows the current browser in the top nav browser list button', () => {
-        cy.findByTestId('top-nav-active-browser-icon')
-        .should('have.attr', 'src')
+        cy.findByTestId('top-nav-active-browser-icon').children()
+        .verifyBrowserIconSvg(cyBrowserChromeX16.data)
+        .get('title').should('contain', 'Chrome')
 
         cy.findByTestId('top-nav-active-browser').should('contain', 'Chrome 1')
       })

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -21,10 +21,10 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-button": "^0.11.6",
-    "@cypress-design/vue-icon": "^0.26.0",
-    "@cypress-design/vue-statusicon": "^0.5.7",
-    "@cypress-design/vue-tabs": "^0.5.1",
+    "@cypress-design/vue-button": "^1.1.0",
+    "@cypress-design/vue-icon": "^1.6.0",
+    "@cypress-design/vue-statusicon": "^1.0.0",
+    "@cypress-design/vue-tabs": "^1.2.2",
     "@faker-js/faker": "8.4.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",

diff --git a/packages/app/src/debug/LayeredBrowserIcons.cy.tsx b/packages/app/src/debug/LayeredBrowserIcons.cy.tsx
@@ -1,8 +1,7 @@
 import LayeredBrowserIcons from './LayeredBrowserIcons.vue'
-import type { BrowserType } from './LayeredBrowserIcons.vue'
 
 describe('<LayeredBrowserIcons/>', () => {
-  const browsers: BrowserType[] = ['CHROME', 'CHROME BETA', 'CANARY', 'CHROME CANARY', 'CHROME FOR TESTING', 'CUSTOM CHROME FOR TESTING', 'CHROMIUM', 'CUSTOM CHROMIUM', 'EDGE', 'EDGE BETA', 'EDGE CANARY', 'EDGE DEV', 'ELECTRON', 'FIREFOX', 'FIREFOX DEVELOPER EDITION', 'FIREFOX NIGHTLY', 'WEBKIT']
+  const browsers: string[] = ['CHROME', 'CHROME BETA', 'CANARY', 'CHROME CANARY', 'CHROME FOR TESTING', 'CUSTOM CHROME FOR TESTING', 'CHROMIUM', 'CUSTOM CHROMIUM', 'EDGE', 'EDGE BETA', 'EDGE CANARY', 'EDGE DEV', 'ELECTRON', 'FIREFOX', 'FIREFOX DEVELOPER EDITION', 'FIREFOX NIGHTLY', 'WEBKIT']
 
   it('mounts correctly for single browser', () => {
     browsers.forEach((ele) => {

diff --git a/packages/app/src/debug/LayeredBrowserIcons.vue b/packages/app/src/debug/LayeredBrowserIcons.vue
@@ -20,22 +20,10 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import {
-  IconBrowserChrome,
-  IconBrowserChromeBeta,
-  IconBrowserChromeCanary,
-  IconBrowserMozillaFirefox,
-  IconBrowserEdge,
-  IconBrowserWebkit,
-  IconBrowserElectronLight,
-  IconGeneralGlobe,
-} from '@cypress-design/vue-icon'
-
-// Note: These browser names should map to the list of logoPaths found at https://github.com/cypress-io/cypress-services/blob/develop/packages/common/src/logos/getLogoPath.ts
-export type BrowserType = 'CHROME' | 'CHROME BETA' | 'CANARY' | 'CHROME CANARY' | 'CHROME FOR TESTING' | 'CUSTOM CHROME FOR TESTING' | 'CHROMIUM' | 'CUSTOM CHROMIUM' | 'EDGE' | 'EDGE BETA' | 'EDGE CANARY' | 'EDGE DEV' | 'ELECTRON' | 'FIREFOX' | 'FIREFOX DEVELOPER EDITION' | 'FIREFOX NIGHTLY' | 'WEBKIT'
+import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 
 interface LayeredProps {
-  browsers: BrowserType[]
+  browsers: string[]
 }
 
 const props = defineProps<LayeredProps>()
@@ -44,7 +32,7 @@ const results = computed(() => {
   if (props.browsers) {
     return props.browsers.map((browserType) => {
       return {
-        icon: BROWSER_MAP[browserType] || IconGeneralGlobe,
+        icon: allBrowsersIcons[browserType?.toLowerCase()] || allBrowsersIcons.generic,
         name: `browser-icon-${browserType.toLowerCase().replaceAll(' ', '_')}`,
       }
     })
@@ -53,25 +41,4 @@ const results = computed(() => {
   return []
 })
 
-// TODO: Add correct icons for firefox, edge, and chromium
-const BROWSER_MAP: Record<BrowserType, any> = {
-  'CHROME': IconBrowserChrome,
-  'CHROME BETA': IconBrowserChromeBeta,
-  'CANARY': IconBrowserChromeCanary,
-  'CHROME CANARY': IconBrowserChromeCanary,
-  'CHROME FOR TESTING': IconBrowserChrome,
-  'CUSTOM CHROME FOR TESTING': IconBrowserChrome,
-  'CHROMIUM': IconGeneralGlobe,
-  'CUSTOM CHROMIUM': IconGeneralGlobe,
-  'EDGE': IconBrowserEdge,
-  'EDGE BETA': IconBrowserEdge,
-  'EDGE CANARY': IconBrowserEdge,
-  'EDGE DEV': IconBrowserEdge,
-  'ELECTRON': IconBrowserElectronLight,
-  'FIREFOX': IconBrowserMozillaFirefox,
-  'FIREFOX DEVELOPER EDITION': IconBrowserMozillaFirefox,
-  'FIREFOX NIGHTLY': IconBrowserMozillaFirefox,
-  'WEBKIT': IconBrowserWebkit,
-}
-
 </script>
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
@@ -2,8 +2,8 @@ import SpecRunnerHeaderOpenMode from './SpecRunnerHeaderOpenMode.vue'
 import { useAutStore } from '../store'
 import { SpecRunnerHeaderFragment, SpecRunnerHeaderFragmentDoc } from '../generated/graphql-test'
 import { createEventManager, createTestAutIframe } from '../../cypress/component/support/ctSupport'
-import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 import { ExternalLink_OpenExternalDocument } from '@packages/frontend-shared/src/generated/graphql'
+import { cyGeneralGlobeX16 } from '@cypress-design/icon-registry'
 
 function renderWithGql (gqlVal: SpecRunnerHeaderFragment) {
   const eventManager = createEventManager()
@@ -227,8 +227,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
 
     cy.findByTestId('select-browser').contains('Fake Browser')
 
-    cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.generic)
-
+    cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
     cy.findByTestId('viewport').contains('500x500')
   })
 

diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
@@ -63,11 +63,11 @@
         :disabled="autStore.isRunning"
       >
         <template #heading>
-          <img
+          <component
+            :is="allBrowsersIcons[selectedBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
             class="min-w-[16px] w-[16px]"
-            :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
             :alt="selectedBrowser.displayName"
-          >
+          />
           {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
         </template>
 

diff --git a/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
@@ -1,6 +1,6 @@
 import SpecRunnerHeaderRunMode from './SpecRunnerHeaderRunMode.vue'
 import { useAutStore } from '../store'
-import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
+import { cyGeneralGlobeX16, cyBrowserChromeX16 } from '@cypress-design/icon-registry'
 
 const browser = {
   displayName: 'Chrome',
@@ -70,7 +70,7 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
 
       cy.mount(<SpecRunnerHeaderRunMode />)
 
-      cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.Chrome)
+      cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyBrowserChromeX16.data)
       cy.get('[data-cy="select-browser"] > button').should('be.disabled')
     })
   })
@@ -86,7 +86,7 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
 
       cy.mount(<SpecRunnerHeaderRunMode />)
 
-      cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.generic)
+      cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
       cy.get('[data-cy="select-browser"] > button').should('be.disabled')
     })
   })

diff --git a/packages/app/src/runner/SpecRunnerHeaderRunMode.vue b/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
@@ -29,12 +29,12 @@
         :disabled="autStore.isRunning"
       >
         <template #heading>
-          <img
+          <component
+            :is="allBrowsersIcons[selectedBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
             v-if="selectedBrowser.displayName"
             class="min-w-[16px] w-[16px]"
             alt=""
-            :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
-          > {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
+          /> {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
         </template>
       </SpecRunnerDropdown>
       <SpecRunnerDropdown

diff --git a/packages/app/src/runner/automation/AutomationMissing.cy.tsx b/packages/app/src/runner/automation/AutomationMissing.cy.tsx
@@ -1,6 +1,6 @@
-import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 import { AutomationMissingFragmentDoc, VerticalBrowserListItems_SetBrowserDocument } from '../../generated/graphql-test'
 import AutomationMissing from './AutomationMissing.vue'
+import { cyGeneralGlobeX16 } from '@cypress-design/icon-registry'
 
 describe('AutomationMissing', () => {
   it('should render', () => {
@@ -50,7 +50,7 @@ describe('AutomationMissing', () => {
       },
     })
 
-    cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.generic)
+    cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
     cy.percySnapshot()
   })
 })
diff --git a/packages/app/src/runner/automation/AutomationMissing.vue b/packages/app/src/runner/automation/AutomationMissing.vue
@@ -19,10 +19,10 @@
           data-cy="select-browser"
         >
           <template #heading>
-            <img
+            <component
+              :is="allBrowsersIcons[selectedBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
               class="min-w-[16px] w-[16px]"
-              :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
-            >
+            />
             {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
           </template>
 

diff --git a/packages/app/src/runs/RunCard.vue b/packages/app/src/runs/RunCard.vue
@@ -122,7 +122,7 @@
             :aria-label="t(props.debugEnabled ? 'runs.card.debugDescription' : 'runs.card.noDebugAvailable', { runNumber: run.runNumber })"
             @click="onDebugClick"
           >
-            <IconTechnologyDebugger
+            <IconObjectBug
               aria-hidden="true"
               class="h-[16px] w-[16px] mr-2 shrink-0"
             />
@@ -155,7 +155,7 @@ import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 import UserAvatar from '@cy/gql-components/topnav/UserAvatar.vue'
 import { RunCardFragment, RunCard_ChangeDocument, RunCard_ShowDebugForCloudRunDocument } from '../generated/graphql'
 import { useRunDateTimeInterval } from '../debug/useRunDateTimeInterval'
-import { IconTechnologyDebugger, IconTimeClock, IconTechnologyBranchH } from '@cypress-design/vue-icon'
+import { IconObjectBug, IconTimeClock, IconTechnologyBranchH } from '@cypress-design/vue-icon'
 import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
 
 const { t } = useI18n()

diff --git a/packages/app/src/specs/switcher/TestingTypeSwitcher.cy.tsx b/packages/app/src/specs/switcher/TestingTypeSwitcher.cy.tsx
@@ -37,7 +37,7 @@ describe('<TestingTypeSwitcher />', () => {
     />)
 
     cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('have.attr', 'aria-selected', 'true')
-    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('not.have.attr', 'aria-selected')
+    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'false')
   })
 
   it('selects current testing type when it is component', () => {
@@ -50,7 +50,7 @@ describe('<TestingTypeSwitcher />', () => {
       onSelectTestingType={stub}
     />)
 
-    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('not.have.attr', 'aria-selected')
+    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('have.attr', 'aria-selected', 'false')
     cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'true')
   })
 })
diff --git a/packages/frontend-shared/cypress/support/browserIconCommands.ts b/packages/frontend-shared/cypress/support/browserIconCommands.ts
@@ -0,0 +1,41 @@
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      verifyBrowserIconSvg(
+        expectedSvgData: string
+      ): Chainable<JQuery<HTMLElement>>
+    }
+  }
+}
+
+function verifyBrowserIconSvg (
+  subject: JQuery<HTMLElement>,
+  expectedSvgData: string,
+) {
+  cy.then(() => {
+    let actualSvgData = ''
+
+    subject.each((_, el) => {
+      actualSvgData += el.outerHTML
+    })
+
+    const actualNormalizedSvgData = actualSvgData
+    .replaceAll('></path>', '/>')
+    .replaceAll('></circle>', '/>')
+    .replace(/<title>.*<\/title>/, '')
+
+    const expectedNormalizedSvgData = expectedSvgData.replace(/<defs>.*<\/defs>/, '')
+
+    expect(actualNormalizedSvgData).to.equal(expectedNormalizedSvgData)
+
+    return subject
+  })
+}
+
+Cypress.Commands.add(
+  'verifyBrowserIconSvg',
+  { prevSubject: true },
+  verifyBrowserIconSvg,
+)
+
+export {}
diff --git a/packages/frontend-shared/cypress/support/component.ts b/packages/frontend-shared/cypress/support/component.ts
@@ -3,6 +3,7 @@ import { registerMountFn, addVueCommand } from './common'
 import '../../src/styles/shared.scss'
 import 'tailwindcss/tailwind.css'
 import 'cypress-real-events/support'
+import './browserIconCommands'
 import { installCustomPercyCommand } from './customPercyCommand'
 import { addNetworkCommands } from './onlineNetwork'
 import { GQLStubRegistry } from './mock-graphql/stubgql-Registry'

diff --git a/packages/frontend-shared/cypress/support/e2e.ts b/packages/frontend-shared/cypress/support/e2e.ts
@@ -19,6 +19,7 @@ import i18n from '../../src/locales/en-US.json'
 import { addNetworkCommands } from './onlineNetwork'
 import { logInternal } from './utils'
 import { tabUntil } from './tab-until'
+import './browserIconCommands'
 
 configure({ testIdAttribute: 'data-cy' })
 

diff --git a/packages/frontend-shared/package.json b/packages/frontend-shared/package.json
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@antfu/utils": "^0.7.8",
-    "@cypress-design/css": "^0.13.3",
+    "@cypress-design/css": "^1.0.0",
     "@faker-js/faker": "8.4.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
@@ -45,7 +45,6 @@
     "@vueuse/core": "7.2.2",
     "autoprefixer": "^10.4.19",
     "axe-core": "4.4.1",
-    "browser-logos": "github:alrra/browser-logos",
     "combine-properties": "0.1.0",
     "cross-env": "6.0.3",
     "cypress-plugin-tab": "1.0.5",