From 3d0744c9d8919141ee46555ae6e2664b483aad3c Mon Sep 17 00:00:00 2001 From: Matthew Schile Date: Fri, 20 Dec 2024 15:43:36 -0700 Subject: [PATCH] updating tests --- .../cypress/component/support/ctSupport.ts | 40 +++++++++++++++++++ .../app/cypress/component/support/index.ts | 16 -------- .../runner/SpecRunnerHeaderOpenMode.cy.tsx | 5 +-- .../src/runner/SpecRunnerHeaderRunMode.cy.tsx | 6 +-- .../automation/AutomationMissing.cy.tsx | 4 +- .../specs/switcher/TestingTypeSwitcher.cy.tsx | 4 +- 6 files changed, 49 insertions(+), 26 deletions(-) diff --git a/packages/app/cypress/component/support/ctSupport.ts b/packages/app/cypress/component/support/ctSupport.ts index 737d9a58e0d9..935ec5b9d5c3 100644 --- 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> + } + } +} + export const StubWebsocket = new Proxy(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, + 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/component/support/index.ts b/packages/app/cypress/component/support/index.ts index 18d1ee68dad2..8b8fcfdda03a 100644 --- 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 index be1bb84a1d39..727bfc7dc7fc 100644 --- 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 index 283a8bbd09b8..7359c6a0e30a 100644 --- 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 index f2677d527f17..0b25d8299b1c 100644 --- 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 index 87e871d9a203..4b8fbe2f5faa 100644 --- 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') }) })