fix the banner content not displaying and write a test for this situa…

…tion

packages/app/src/specs/SpecsListBanners.cy.tsx

@@ -1,11 +1,12 @@
+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'
 import { SpecsListBannersFragment, SpecsListBannersFragmentDoc, UseCohorts_DetermineCohortDocument } from '../generated/graphql-test'
 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('<SpecsListBanners />', { viewportHeight: 260, defaultCommandTimeout: 1
         }
 
         const bannerTrueConditions: Record<string, DeepPartial<UserProjectStatusState>> = {
-          '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('<SpecsListBanners />', { 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('<SpecsListBanners />', { 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('<SpecsListBanners />', { 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('<SpecsListBanners />', { 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('<SpecsListBanners />', { 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('<SpecsListBanners />', { 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({

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(() => {

packages/app/src/specs/banners/ComponentTestingAvailableBanner.vue

@@ -16,7 +16,7 @@
   >
     <template #default="{ dismiss, bannerInstanceId }">
       <p class="pb-[16px] text-gray-700">
-        {{ t('specPage.banners.ct.content') }}
+        {{ t('specPage.banners.componentTesting.content') }}
       </p>
       <div class="flex flex-row items-center text-sm border-t border-gray-100 pt-[8px] -mb-[8px] -mx-[16px] px-[16px]">
         <Button
@@ -26,22 +26,22 @@
           class="mr-[16px]"
           @click="handlePrimary(bannerInstanceId)"
         >
-          {{ t('specPage.banners.ct.primaryAction') }}
+          {{ t('specPage.banners.componentTesting.primaryAction') }}
         </Button>
         <ExternalLink
           data-cy="docs-link"
           :href="docsLink"
           @click="handleDocsClick(bannerInstanceId)"
         >
-          <span class="font-medium">{{ t('specPage.banners.ct.secondaryAction') }}</span>
+          <span class="font-medium">{{ t('specPage.banners.componentTesting.secondaryAction') }}</span>
         </ExternalLink>
         <span class="flex-grow" />
         <ExternalLink
           data-cy="survey-link"
           :href="surveyLink"
           @click="handleSurveyClick(bannerInstanceId, dismiss)"
         >
-          <span class="font-medium">{{ t('specPage.banners.ct.dismissAction') }}</span>
+          <span class="font-medium">{{ t('specPage.banners.componentTesting.dismissAction') }}</span>
         </ExternalLink>
       </div>
     </template>
@@ -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) => {

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",