test updates

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

Hide file tree

Showing 4 changed files with 52 additions and 47 deletions.
diff --git a/packages/app/cypress/component/support/ctSupport.ts b/packages/app/cypress/component/support/ctSupport.ts
@@ -1,17 +1,8 @@
 import { AutIframe } from '../../../src/runner/aut-iframe'
 import { EventManager } from '../../../src/runner/event-manager'
+import '../../e2e/support/browserIconCommands'
 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!`)
@@ -59,33 +50,3 @@ 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/e2e/support/browserIconCommands.ts b/packages/app/cypress/e2e/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/app/cypress/e2e/support/e2eSupport.ts b/packages/app/cypress/e2e/support/e2eSupport.ts
@@ -1,4 +1,5 @@
 import '@packages/frontend-shared/cypress/support/e2e'
+import './browserIconCommands'
 import 'cypress-real-events/support'
 import './execute-spec'
 
@@ -20,15 +21,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')
       })