fix: test-recording instructions in Component Test mode (#21422)

Author: marktnoonan

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

@@ -1,6 +1,27 @@
 import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
 import type { SinonStub } from 'sinon'
 
+function scaffoldTestingTypeAndVisitRunsPage (testingType: 'e2e' | 'component') {
+  cy.scaffoldProject('cypress-in-cypress')
+  cy.openProject('cypress-in-cypress')
+  cy.startAppServer(testingType)
+
+  cy.loginUser()
+
+  // make sure there are no runs found for the project ID
+  cy.remoteGraphQLIntercept(async (obj) => {
+    if (obj.result.data?.cloudProjectBySlug) {
+      obj.result.data.cloudProjectBySlug.runs.nodes = []
+    }
+
+    return obj.result
+  })
+
+  cy.visitApp()
+
+  return cy.get('[href="#/runs"]').click()
+}
+
 describe('App: Runs', { viewportWidth: 1200 }, () => {
   context('Runs Page', () => {
     beforeEach(() => {
@@ -398,47 +419,40 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.findByText(defaultMessages.runs.connect.buttonProject).should('exist')
     })
 
-    it('displays how to record prompt when connected and no runs', () => {
-      cy.scaffoldProject('component-tests')
-      cy.openProject('component-tests')
-      cy.startAppServer('component')
-
-      cy.loginUser()
-      cy.remoteGraphQLIntercept(async (obj) => {
-        if (obj.result.data?.cloudProjectBySlug?.runs?.nodes) {
-          obj.result.data.cloudProjectBySlug.runs.nodes = []
-        }
+    it('displays how to record prompt when connected and no runs in Component Testing', () => {
+      scaffoldTestingTypeAndVisitRunsPage('component')
+      cy.contains(defaultMessages.runs.empty.title).should('be.visible')
+      cy.contains(defaultMessages.runs.empty.description).should('be.visible')
+      cy.contains('cypress run --component --record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa').should('be.visible')
+    })
 
-        return obj.result
-      })
+    it('displays how to record prompt when connected and no runs in E2E', () => {
+      scaffoldTestingTypeAndVisitRunsPage('e2e')
 
-      cy.visitApp()
-      cy.get('[href="#/runs"]').click()
-      cy.contains(defaultMessages.runs.empty.title)
-      cy.contains(defaultMessages.runs.empty.description)
-      cy.contains('--record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa')
+      cy.contains(defaultMessages.runs.empty.title).should('be.visible')
+      cy.contains(defaultMessages.runs.empty.description).should('be.visible')
+      cy.contains('cypress run --record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa').should('be.visible')
     })
 
-    it('displays a copy button', () => {
-      cy.scaffoldProject('component-tests')
-      cy.openProject('component-tests')
-      cy.startAppServer('component')
-
+    it('displays a copy button and copies correct command in Component Testing', () => {
+      scaffoldTestingTypeAndVisitRunsPage('component')
       cy.withCtx(async (ctx, o) => {
         o.sinon.stub(ctx.electronApi, 'copyTextToClipboard')
       })
 
-      cy.loginUser()
-      cy.remoteGraphQLIntercept(async (obj) => {
-        if (obj.result.data?.cloudProjectBySlug?.runs?.nodes) {
-          obj.result.data.cloudProjectBySlug.runs.nodes = []
-        }
+      cy.get('[data-cy="copy-button"]').click()
+      cy.contains('Copied!')
+      cy.withRetryableCtx((ctx) => {
+        expect(ctx.electronApi.copyTextToClipboard as SinonStub).to.have.been.calledWith('cypress run --component --record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa')
+      })
+    })
 
-        return obj.result
+    it('displays a copy button and copies correct command in E2E', () => {
+      scaffoldTestingTypeAndVisitRunsPage('e2e')
+      cy.withCtx(async (ctx, o) => {
+        o.sinon.stub(ctx.electronApi, 'copyTextToClipboard')
       })
 
-      cy.visitApp()
-      cy.get('[href="#/runs"]').click()
       cy.get('[data-cy="copy-button"]').click()
       cy.contains('Copied!')
       cy.withRetryableCtx((ctx) => {

packages/app/src/runs/RunsEmpty.vue

@@ -33,6 +33,7 @@ fragment RunsEmpty on CurrentProject {
   title
   projectId
   configFile
+  currentTestingType
   cloudProject {
     __typename
     ... on CloudProject {
@@ -58,7 +59,9 @@ const firstRecordKey = computed(() => {
     : '<record-key>'
 })
 const recordCommand = computed(() => {
-  return `cypress run --record --key ${firstRecordKey.value}`
+  const componentFlagOrSpace = props.gql.currentTestingType === 'component' ? ' --component ' : ' '
+
+  return `cypress run${componentFlagOrSpace}--record --key ${firstRecordKey.value}`
 })
 </script>
 

packages/frontend-shared/src/components/TerminalPrompt.cy.tsx

@@ -5,7 +5,7 @@ describe('<TerminalPrompt />', () => {
   it('renders without overflow', { viewportWidth: 800, viewportHeight: 120 }, () => {
     cy.mount(() => (
       <div class="p-6">
-        <TerminalPrompt projectFolderName="design-system" command="git add cypress.config.js"/>
+        <TerminalPrompt command="git add cypress.config.js"/>
       </div>
     ))
 
@@ -16,16 +16,14 @@ describe('<TerminalPrompt />', () => {
 
   it('overflows nicely', { viewportWidth: 800, viewportHeight: 120 }, () => {
     const command = 'yarn workspace @packages/frontend-shared cypress:run --record --key 123as4d56asda987das'
-    const projectFolderName = 'design-system'
 
     cy.mount(() => (
       <div class="p-6">
-        <TerminalPrompt projectFolderName={projectFolderName} command={command}/>
+        <TerminalPrompt command={command}/>
       </div>
     ))
 
     cy.contains(command)
-    cy.contains(projectFolderName)
     cy.contains('button', defaultMessages.clipboard.copy)
     .should('be.visible')
     .percySnapshot()

packages/frontend-shared/src/components/TerminalPrompt.vue

@@ -2,7 +2,7 @@
   <code class="border rounded flex font-normal border-gray-100 px-16px text-gray-700 leading-40px relative items-center whitespace-nowrap overflow-hidden">
     <i-cy-terminal_x16 class="flex-shrink-0 h-16px mr-8px w-16px icon-dark-gray-500 icon-light-gray-100" />
     <span class="mr-8px text-purple-500">
-      {{ projectFolderName }}<template v-if="projectFolderName">:~</template>$
+      $
     </span>
     {{ command }}
     <div class="font-sans opacity-gradient p-4px pl-32px top-0 right-0 bottom-0 absolute">
@@ -17,7 +17,6 @@
 import CopyButton from '../gql-components/CopyButton.vue'
 
 defineProps<{
-  projectFolderName?: string
   command: string
 }>()
 </script>