From 59493e255dbfd9b3cffc1666fc2c45767cb3ca64 Mon Sep 17 00:00:00 2001 From: Jennifer Shehane Date: Thu, 19 Dec 2024 13:17:22 -0500 Subject: [PATCH] fix the banner content not displaying and write a test for this situation --- .../app/src/specs/SpecsListBanners.cy.tsx | 37 +++++++++++++------ packages/app/src/specs/SpecsListBanners.vue | 5 ++- .../ComponentTestingAvailableBanner.vue | 10 ++--- .../frontend-shared/src/locales/en-US.json | 2 +- 4 files changed, 34 insertions(+), 20 deletions(-) diff --git a/packages/app/src/specs/SpecsListBanners.cy.tsx b/packages/app/src/specs/SpecsListBanners.cy.tsx index b78bd3f49009..ff1db90b119e 100644 --- a/packages/app/src/specs/SpecsListBanners.cy.tsx +++ b/packages/app/src/specs/SpecsListBanners.cy.tsx @@ -1,3 +1,5 @@ +import { camelCase, assignIn, set } from 'lodash' +import { defaultMessages } from '@cy/i18n' import SpecsListBanners from './SpecsListBanners.vue' import { ref } from 'vue' import type { Ref } from 'vue' @@ -5,7 +7,6 @@ import { SpecsListBannersFragment, SpecsListBannersFragmentDoc, UseCohorts_Deter import interval from 'human-interval' import { CloudUserStubs, CloudProjectStubs } from '@packages/graphql/test/stubCloudTypes' import { AllowedState, BannerIds } from '@packages/types' -import { assignIn, set } from 'lodash' import { UserProjectStatusStore, useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store' import type { UserProjectStatusState } from '@packages/frontend-shared/src/store/user-project-status-store' @@ -120,19 +121,19 @@ describe('', { viewportHeight: 260, defaultCommandTimeout: 1 } const bannerTrueConditions: Record> = { - 'login-banner': {}, - 'create-organization-banner': { + 'login': {}, + 'create-organization': { user: { isLoggedIn: true, isOrganizationLoaded: true }, }, - 'connect-project-banner': { + 'connect-project': { user: { isLoggedIn: true, isMemberOfOrganization: true }, project: { isConfigLoaded: true }, }, - 'record-banner': { + 'record': { user: { isLoggedIn: true, isMemberOfOrganization: true }, project: { isProjectConnected: true, hasNoRecordedRuns: true, hasNonExampleSpec: true, isConfigLoaded: true }, }, - 'component-testing-banner': { + 'component-testing': { testingType: 'e2e', user: { isLoggedIn: true, isMemberOfOrganization: true }, project: { isProjectConnected: true, hasNonExampleSpec: true, isConfigLoaded: true, hasDetectedCtFramework: true }, @@ -153,7 +154,19 @@ describe('', { viewportHeight: 260, defaultCommandTimeout: 1 } }) - cy.get(`[data-cy="${bannerTestId}"]`).should('be.visible') + cy.get(`[data-cy="${bannerTestId}-banner"]`) + .should('be.visible') + + // The ct title has dynamic content and seems complicated to set here, so ignoring + if (defaultMessages.specPage.banners.componentTesting.title) { + // @ts-expect-error + delete defaultMessages.specPage.banners.componentTesting.title + } + + cy.wrap(Object.entries(defaultMessages.specPage.banners[camelCase(bannerTestId)])).each((entry) => { + // @ts-expect-error + cy.contains(entry[1]).should('be.visible') + }) }) it('should be preempted by spec not found banner', () => { @@ -382,7 +395,7 @@ describe('', { viewportHeight: 260, defaultCommandTimeout: 1 } as any, } - validateSmartNotificationBehaviors(BannerIds.ACI_082022_LOGIN, 'login-banner', gql) + validateSmartNotificationBehaviors(BannerIds.ACI_082022_LOGIN, 'login', gql) }) describe('create organization', () => { @@ -404,7 +417,7 @@ describe('', { viewportHeight: 260, defaultCommandTimeout: 1 cy.gqlStub.Query.cloudViewer = gql.cloudViewer as any }) - validateSmartNotificationBehaviors(BannerIds.ACI_082022_CREATE_ORG, 'create-organization-banner', gql) + validateSmartNotificationBehaviors(BannerIds.ACI_082022_CREATE_ORG, 'create-organization', gql) }) describe('connect project', () => { @@ -423,7 +436,7 @@ describe('', { viewportHeight: 260, defaultCommandTimeout: 1 } as any, } - validateSmartNotificationBehaviors(BannerIds.ACI_082022_CONNECT_PROJECT, 'connect-project-banner', gql) + validateSmartNotificationBehaviors(BannerIds.ACI_082022_CONNECT_PROJECT, 'connect-project', gql) }) describe('record', () => { @@ -456,7 +469,7 @@ describe('', { viewportHeight: 260, defaultCommandTimeout: 1 cy.gqlStub.Query.cloudViewer = gql.cloudViewer as any }) - validateSmartNotificationBehaviors(BannerIds.ACI_082022_RECORD, 'record-banner', gql) + validateSmartNotificationBehaviors(BannerIds.ACI_082022_RECORD, 'record', gql) }) describe('component testing', () => { @@ -525,7 +538,7 @@ describe('', { viewportHeight: 260, defaultCommandTimeout: 1 ) validateCloseControl() - validateSmartNotificationBehaviors(BannerIds.CT_052023_AVAILABLE, 'component-testing-banner', gql) + validateSmartNotificationBehaviors(BannerIds.CT_052023_AVAILABLE, 'component-testing', gql) it('should not render when another smart banner has been dismissed within two days', () => { userProjectStatusStore.setBannersState({ diff --git a/packages/app/src/specs/SpecsListBanners.vue b/packages/app/src/specs/SpecsListBanners.vue index abac3a7f08a2..cffcb6bf8c19 100644 --- a/packages/app/src/specs/SpecsListBanners.vue +++ b/packages/app/src/specs/SpecsListBanners.vue @@ -285,13 +285,14 @@ const bannerCohortOptions: BannerCohortOptions = { const cohortBuilder = useCohorts() -const getCohortForBanner = async (bannerId: BannerId) => { +const getCohortForBanner = (bannerId: BannerId) => { const cohortConfig: CohortConfig = { name: bannerId, options: bannerCohortOptions[bannerId] || [], } - return await cohortBuilder.getCohort(cohortConfig) + // tslint:disable-next-line:no-floating-promises + return cohortBuilder.getCohort(cohortConfig) } const currentCohortOption = computed(() => { diff --git a/packages/app/src/specs/banners/ComponentTestingAvailableBanner.vue b/packages/app/src/specs/banners/ComponentTestingAvailableBanner.vue index b3b75b72d704..0b6d8ab7543c 100644 --- a/packages/app/src/specs/banners/ComponentTestingAvailableBanner.vue +++ b/packages/app/src/specs/banners/ComponentTestingAvailableBanner.vue @@ -16,7 +16,7 @@ > @@ -89,7 +89,7 @@ const props = defineProps<{ const { t } = useI18n() const bannerId = BannerIds.CT_052023_AVAILABLE -const title = computed(() => t('specPage.banners.ct.title', [props.framework?.name])) +const title = computed(() => t('specPage.banners.componentTesting.title', [props.framework?.name])) const iconFromType = computed(() => FrameworkBundlerLogos[props.framework?.type]) const handlePrimary = async (bannerInstanceId: string) => { diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json index 572adb0646d4..b05f8afb34dc 100644 --- a/packages/frontend-shared/src/locales/en-US.json +++ b/packages/frontend-shared/src/locales/en-US.json @@ -219,7 +219,7 @@ "title": "Record your first run", "content": "Record a run to see your test results in Cypress Cloud. You can then optimize your test suite, debug failing and flaky tests, and integrate with your favorite tools." }, - "ct": { + "componentTesting": { "title": "{0} component testing is available for this project", "content": "You can now use Cypress to develop and test individual components without running your whole application. Generate the config in just a few clicks.", "primaryAction": "Quick setup",