updating tests

cypress-io · Dec 20, 2024 · 3d0744c · 3d0744c
1 parent cfac1e9
commit 3d0744c
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 26 deletions.
diff --git a/packages/app/cypress/component/support/ctSupport.ts b/packages/app/cypress/component/support/ctSupport.ts
@@ -2,6 +2,16 @@ import { AutIframe } from '../../../src/runner/aut-iframe'
 import { EventManager } from '../../../src/runner/event-manager'
 import type { Socket } from '@packages/socket/lib/browser'
 
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      verifyBrowserIconSvg(
+        expectedSvgData: string
+      ): Chainable<JQuery<HTMLElement>>
+    }
+  }
+}
+
 export const StubWebsocket = new Proxy<Socket>(Object.create(null), {
   get: (obj, prop) => {
     throw Error(`Cannot access ${String(prop)} on StubWebsocket!`)
@@ -49,3 +59,33 @@ export const createTestAutIframe = (eventManager = createEventManager()) => {
     null, // CypressJQuery, shouldn't be using driver in component tests anyway
   )
 }
+
+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,
+)
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/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/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/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/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')
   })
 })