feat: Implement testing type switch promos

cli/CHANGELOG.md

@@ -1,8 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
-## 12.13.1
+## 12.14.0
 
 _Released 06/06/2023 (PENDING)_
 
+**Features:**
+
+- A new testing type switcher has been added to the Spec Explorer to make it easier to move between E2E and Component Testing. An informational overview of each type is displayed if it isn't configured in your project to help newcomers to each testing type. Addresses [#26448](https://github.com/cypress-io/cypress/issues/26448), [#26836](https://github.com/cypress-io/cypress/issues/26836) and [#26837](https://github.com/cypress-io/cypress/issues/26837).
+
 **Bugfixes:**
 
 - Fixes issue not detecting Angular 16 dependencies in launchpad. Addresses [#26852](https://github.com/cypress-io/cypress/issues/26852)

packages/app/cypress/e2e/runs.cy.ts

@@ -331,7 +331,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       moveToRunsPage()
       cy.findByText(defaultMessages.runs.connect.buttonProject).click()
       cy.contains('button', defaultMessages.runs.connect.modal.selectProject.createProject).click()
-      cy.findByText(defaultMessages.runs.connectSuccessAlert.title, { timeout: 10000 }).should('be.visible')
+      cy.findByText(defaultMessages.runs.connectSuccessAlert.title, { timeout: 10000 }).scrollIntoView().should('be.visible')
 
       cy.withCtx(async (ctx) => {
         const config = await ctx.project.getConfig()

packages/app/cypress/e2e/specs_list_e2e.cy.ts

@@ -41,7 +41,7 @@ describe('App: Spec List (E2E)', () => {
     })
 
     cy.visitApp()
-    cy.contains('E2E specs')
+    cy.verifyE2ESelected()
   }
 
   const clearSearchAndType = (search: string) => {
@@ -67,10 +67,6 @@ describe('App: Spec List (E2E)', () => {
       cy.findByTestId('app-header-bar').findByText('Specs').should('be.visible')
     })
 
-    it('shows the "E2E specs" label as the header for the Spec Name column', () => {
-      cy.findByTestId('specs-testing-type-header').should('contain', 'E2E specs')
-    })
-
     it('shows a git status for each spec', () => {
       cy.findAllByTestId('git-info-row').each((row) => {
         cy.wrap(row).find('svg').should('have.length', 1)

packages/app/cypress/e2e/specs_list_flaky.cy.ts

@@ -93,7 +93,7 @@ describe('App: Spec List - Flaky Indicator', () => {
     })
 
     cy.visitApp()
-    cy.contains('E2E specs')
+    cy.verifyE2ESelected()
   })
 
   it('shows the "Flaky" badge on specs considered flaky', () => {

packages/app/cypress/e2e/specs_list_switcher.cy.ts

@@ -0,0 +1,95 @@
+describe('App: Spec List Testing Type Switcher', () => {
+  context('ct unconfigured', () => {
+    beforeEach(() => {
+      cy.scaffoldProject('cypress-in-cypress')
+      cy.openProject('cypress-in-cypress')
+
+      cy.withCtx(async (ctx, o) => {
+        const config = await ctx.file.readFileInProject('cypress.config.js')
+        const newCypressConfig = config.replace(`component:`, `_component:`)
+
+        await ctx.actions.file.writeFileInProject('cypress.config.js', newCypressConfig)
+      })
+
+      cy.startAppServer('e2e')
+
+      cy.visitApp()
+      cy.verifyE2ESelected()
+    })
+
+    it('switches testing types', () => {
+      cy.findByTestId('testing-type-switch').within(() => {
+        cy.findByText('Component').click()
+      })
+
+      cy.verifyCtSelected()
+
+      cy.contains('Component testing is not set up for this project')
+
+      cy.findByTestId('testing-type-setup-button').should('be.visible')
+    })
+  })
+
+  context('e2e unconfigured', () => {
+    beforeEach(() => {
+      cy.scaffoldProject('cypress-in-cypress')
+      cy.openProject('cypress-in-cypress')
+
+      cy.withCtx(async (ctx, o) => {
+        const config = await ctx.file.readFileInProject('cypress.config.js')
+        const newCypressConfig = config.replace(`e2e:`, `_e2e:`)
+
+        await ctx.actions.file.writeFileInProject('cypress.config.js', newCypressConfig)
+      })
+
+      cy.startAppServer('component')
+
+      cy.visitApp()
+      cy.verifyCtSelected()
+    })
+
+    it('switches testing types', () => {
+      cy.findByTestId('testing-type-switch').within(() => {
+        cy.findByText('E2E').click()
+      })
+
+      cy.contains('End-to-end testing is not set up for this project')
+
+      cy.findByTestId('testing-type-setup-button').should('be.visible')
+    })
+  })
+
+  context('both testing types configured', () => {
+    beforeEach(() => {
+      cy.scaffoldProject('cypress-in-cypress')
+      cy.findBrowsers()
+      cy.openProject('cypress-in-cypress')
+
+      cy.startAppServer('component')
+
+      cy.visitApp()
+      cy.verifyCtSelected()
+    })
+
+    it('displays expected switch content', () => {
+      cy.findByTestId('unconfigured-icon').should('not.exist')
+
+      cy.withCtx((ctx, o) => {
+        o.sinon.stub(ctx.actions.project, 'setAndLoadCurrentTestingType')
+        o.sinon.stub(ctx.actions.project, 'reconfigureProject').resolves()
+      })
+
+      cy.findByTestId('testing-type-switch').within(() => {
+        cy.findByText('E2E').click()
+      })
+
+      cy.verifyE2ESelected()
+
+      cy.withCtx((ctx) => {
+        expect(ctx.coreData.app.relaunchBrowser).eq(true)
+        expect(ctx.actions.project.setAndLoadCurrentTestingType).to.have.been.calledWith('e2e')
+        expect(ctx.actions.project.reconfigureProject).to.have.been.called
+      })
+    })
+  })
+})

packages/app/cypress/e2e/support/e2eSupport.ts

@@ -16,3 +16,21 @@ beforeEach(() => {
   // @ts-ignore - dynamically defined during tests using
   expect(window.top?.getEventManager().autDestroyedCount).to.be.undefined
 })
+
+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')
+  })
+}
+
+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', 'Component').should('have.attr', 'aria-selected', 'true')
+  })
+}
+
+Cypress.Commands.add('verifyCtSelected', ctTestingTypeIsSelected)

packages/app/cypress/e2e/support/execute-spec.ts

@@ -18,6 +18,8 @@ declare global {
        *
        */
       waitForSpecToFinish(expectedResults?: ExpectedResults, timeout?: number): void
+      verifyE2ESelected(): void
+      verifyCtSelected(): void
     }
   }
 }

packages/app/cypress/e2e/top-nav.cy.ts

@@ -699,7 +699,7 @@ describe('Growth Prompts Can Open Automatically', () => {
     )
 
     cy.visitApp()
-    cy.contains('E2E specs')
+    cy.verifyE2ESelected()
     cy.wait(1000)
     cy.contains('Configure CI').should('be.visible')
   })
@@ -717,7 +717,7 @@ describe('Growth Prompts Can Open Automatically', () => {
     )
 
     cy.visitApp()
-    cy.contains('E2E specs')
+    cy.verifyE2ESelected()
     cy.wait(1000)
     cy.contains('Configure CI').should('not.exist')
   })

packages/app/package.json

@@ -20,9 +20,10 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-button": "0.9.2",
-    "@cypress-design/vue-icon": "0.22.2",
-    "@cypress-design/vue-statusicon": "0.4.3",
+    "@cypress-design/vue-button": "^0.10.1",
+    "@cypress-design/vue-icon": "^0.23.1",
+    "@cypress-design/vue-statusicon": "^0.4.7",
+    "@cypress-design/vue-tabs": "^0.5.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/iconify": "2.1.2",

packages/app/src/components/promo/Promo.vue

@@ -47,11 +47,12 @@ const props = defineProps<{
   campaign: string
   medium: string
   cohort?: string
+  instanceId?: string
 }>()
 
 const promoSeenMutation = useMutation(Promo_PromoSeenDocument)
 
-const promoInstanceId = nanoid()
+const promoInstanceId = props.instanceId || nanoid()
 
 useQuery({ query: PromoDocument })
 .then((queryResult) => {

packages/app/src/components/promo/PromoCard.vue

@@ -1,27 +1,54 @@
 <template>
-  <div class="grid grid-cols-[480px] xl:grid-cols-[300px_470px] p-[40px] gap-y-[16px] gap-x-[100px]">
+  <div
+    class="p-[40px]"
+    :class="gridClasses"
+  >
     <div>
       <h2 class="text-xl font-semibold text-gray-900">
         {{ title }}
       </h2>
-      <p class="text-grey-700">
+      <p class="text-gray-700">
         {{ body }}
       </p>
       <slot name="content" />
     </div>
-    <div class="row-end-[span_2] xl:col-start-2">
+    <div
+      v-if="slots.image"
+      class="row-end-[span_2] xl:col-start-2"
+    >
       <slot name="image" />
     </div>
-    <div class="self-end">
+    <div
+      v-if="slots.action"
+      class="self-end"
+    >
       <slot name="action" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { computed, useSlots } from 'vue'
+
 defineProps<{
   title: string
   body: string
 }>()
 
+const slots = useSlots()
+
+const gridClasses = computed(() => {
+  const classes = ['grid', 'grid-cols-[480px]', 'gap-y-[16px]']
+
+  // If `image` is defined then lay out side-by-side on xl viewport,
+  // otherwise it should flow vertically
+  if (slots.image) {
+    classes.push('xl:grid-cols-[300px_470px]', 'gap-x-[100px]')
+  } else {
+    classes.push('xl:grid-cols-[744px]')
+  }
+
+  return classes
+})
+
 </script>