From 2057168f953358ccfef0b806cc19fcee6b98c3d2 Mon Sep 17 00:00:00 2001 From: Matthew Schile Date: Fri, 20 Dec 2024 16:12:52 -0700 Subject: [PATCH] test updates --- .../cypress/component/support/ctSupport.ts | 41 +------------------ .../e2e/support/browserIconCommands.ts | 41 +++++++++++++++++++ .../app/cypress/e2e/support/e2eSupport.ts | 5 ++- packages/app/cypress/e2e/top-nav.cy.ts | 12 +++--- 4 files changed, 52 insertions(+), 47 deletions(-) create mode 100644 packages/app/cypress/e2e/support/browserIconCommands.ts diff --git a/packages/app/cypress/component/support/ctSupport.ts b/packages/app/cypress/component/support/ctSupport.ts index 935ec5b9d5c3..c11655d1c99e 100644 --- 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> - } - } -} - export const StubWebsocket = new Proxy(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, - expectedSvgData: string, -) { - cy.then(() => { - let actualSvgData = '' - - subject.each((_, el) => { - actualSvgData += el.outerHTML - }) - - const actualNormalizedSvgData = actualSvgData - .replaceAll('>', '/>') - .replaceAll('>', '/>') - .replace(/.*<\/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 new file mode 100644 index 000000000000..3f189e362396 --- /dev/null +++ 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 index 97620266165a..7a8825a7b954 100644 --- 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,7 +21,7 @@ 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') }) } @@ -28,7 +29,7 @@ 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 index 52ec9e8d7b03..24d0d60b4a6b 100644 --- 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') })