feat: add configured state to TestingTypeCard

packages/frontend-shared/src/locales/en-US.json

@@ -109,6 +109,10 @@
     },
     "configFile": {
       "createManually": "Create file manually"
+    },
+    "testingCard": {
+      "configured": "Configured",
+      "notConfigured": "Not Configured"
     }
   },
   "globalPage": {

packages/launchpad/src/setup/TestingTypeCard.vue

@@ -18,8 +18,21 @@
       v-html="description"
     />
     <div class="absolute left-0 right-0 flex justify-between bottom-30px px-30px">
-      <span class="flex items-center px-3 py-1 border rounded-full">
-        <i-oi-clock class="mr-2 text-gray-300 w-14px h-14px" />8 min
+      <span
+        v-if="configured"
+        class="flex items-center px-3 py-1 border text-jade-500 rounded-full"
+      >
+        <GrommetIcon
+          class="fill-current stroke-current text-jade-500"
+        />
+        {{ t('setupPage.testingCard.configured') }}
+      </span>
+      <span
+        v-else
+        class="flex items-center px-3 py-1 border rounded-full"
+      >
+        <GrommetIcon />
+        {{ t('setupPage.testingCard.notConfigured') }}
       </span>
       <span class="border rounded-full text-body-gray-400 w-32px h-32px flex items-center justify-center">
         <i-akar-icons-triangle-right class="h-24px w-24px" />
@@ -29,13 +42,18 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from '@cy/i18n'
 import type { TestingTypeEnum } from '../generated/graphql'
+import GrommetIcon from '@packages/frontend-shared/src/assets/icons/grommet.svg'
 import { TestingTypeIcons } from '../utils/icons'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   id: TestingTypeEnum
   title: string
   description: string
+  configured: boolean
 }>()
 
 const icon = TestingTypeIcons[props.id]

packages/launchpad/src/setup/TestingTypeCards.spec.tsx

@@ -2,25 +2,61 @@ import {
   TestingTypeCardsFragmentDoc,
 } from '../generated/graphql-test'
 import TestingTypeCards from './TestingTypeCards.vue'
+import { defaultMessages } from '@cy/i18n'
 
 describe('TestingTypeCards', () => {
-  it('renders correct label depending if testingType has been configured', () => {
+  it('renders correct label when no testingType has been configured', () => {
     cy.mountFragment(TestingTypeCardsFragmentDoc, {
       onResult: (result, ctx) => {
         if (result.app.activeProject) {
-          result.app.activeProject.isFirstTimeCT = false
+          result.app.activeProject.isFirstTimeCT = true
           result.app.activeProject.isFirstTimeE2E = true
         }
       },
       render: (gqlVal) => {
         return <TestingTypeCards gql={gqlVal} />
       },
     }).then(() => {
-      // CT has been configured so we should show "launch"
-      cy.contains('LAUNCH').should('be.visible')
+      cy.findAllByText(defaultMessages.setupPage.testingCard.notConfigured).should('have.length', 2)
+
+      // TODO: Pullout to i18n
+      cy.contains('Click here to configure end-to-end testing with Cypress.').should('be.visible')
+    })
+  })
 
-      // E2E has NOT been configured so we should show "setup"
-      // TODO - pull this from i18n when wizard text is moved into i18n
+  it('renders correct label when projects have been configured', () => {
+    cy.mountFragment(TestingTypeCardsFragmentDoc, {
+      onResult: (result, ctx) => {
+        if (result.app.activeProject) {
+          result.app.activeProject.isFirstTimeCT = false
+          result.app.activeProject.isFirstTimeE2E = false
+        }
+      },
+      render: (gqlVal) => {
+        return <TestingTypeCards gql={gqlVal} />
+      },
+    }).then(() => {
+      cy.findAllByText('LAUNCH').should('have.length', 2)
+      cy.findAllByText(defaultMessages.setupPage.testingCard.configured).should('have.length', 2)
+    })
+  })
+
+  it('renders correct label when one project has been configured and the other has not', () => {
+    cy.mountFragment(TestingTypeCardsFragmentDoc, {
+      onResult: (result, ctx) => {
+        if (result.app.activeProject) {
+          result.app.activeProject.isFirstTimeCT = false
+          result.app.activeProject.isFirstTimeE2E = true
+        }
+      },
+      render: (gqlVal) => {
+        return <TestingTypeCards gql={gqlVal} />
+      },
+    }).then(() => {
+      cy.findAllByText('LAUNCH').should('have.length', 1)
+      cy.findAllByText(defaultMessages.setupPage.testingCard.configured).should('have.length', 1)
+      cy.findAllByText(defaultMessages.setupPage.testingCard.notConfigured).should('have.length', 1)
+      // TODO: Pullout to i18n
       cy.contains('Click here to configure end-to-end testing with Cypress.').should('be.visible')
     })
   })

packages/launchpad/src/setup/TestingTypeCards.vue

@@ -5,6 +5,7 @@
       :id="ct.type"
       :title="ct.title"
       :description="firstTimeCT ? ct.description : 'LAUNCH'"
+      :configured="!firstTimeCT"
       role="button"
       @click="ctNextStep"
       @keyup.enter="ctNextStep"
@@ -16,6 +17,7 @@
       :id="e2e.type"
       :title="e2e.title"
       :description="firstTimeE2E ? e2e.description : 'LAUNCH'"
+      :configured="!firstTimeE2E"
       role="button"
       @click="e2eNextStep"
       @keyup.enter="e2eNextStep"