fix: fix spec list header, "Create specs" prompt, add workspace recom…

…mended apollo extension (#18993)

* chore: add apollographql.vscode-apollo to extensions.json

* fix: show "Create spec" when there are no specs

* fix: display correct specslist header

.vscode/extensions.json

@@ -7,6 +7,9 @@
 
 	// List of extensions which are recommended for Cypress contributors using VS Code:
 	"recommendations": [
+		// Name: Apollo GraphQL
+		// Description: Rich editor support for GraphQL client and server development that seamlessly integrates with the Apollo platform
+		"apollographql.vscode-apollo",
 		// Name: ESLint
 		// Description: Integrates ESLint JavaScript into VS Code.
 		"dbaeumer.vscode-eslint",

packages/app/cypress/e2e/integration/index.spec.ts

@@ -0,0 +1,21 @@
+describe('Index', () => {
+  beforeEach(() => {
+    cy.setupE2E('component-tests')
+    cy.initializeApp()
+  })
+
+  context('with no specs', () => {
+    beforeEach(() => {
+      cy.visitApp()
+      cy.withCtx((ctx, o) => {
+        ctx.actions.file.removeFileInProject('cypress/integration/integration-spec.js')
+      })
+    })
+
+    it('shows "Create your first spec"', () => {
+    // after removing the default scaffolded spec, we should be prompted to create a first spec
+      cy.visitApp()
+      cy.contains('Create your first spec')
+    })
+  })
+})

packages/app/src/pages/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="query.data.value">
     <SpecsList
-      v-if="query.data.value.currentProject?.specs"
+      v-if="query.data.value.currentProject?.specs?.edges.length"
       :gql="query.data.value"
     />
     <CreateSpecPage

packages/app/src/specs/SpecsList.spec.tsx

@@ -1,44 +1,80 @@
 import SpecsList from './SpecsList.vue'
-import { Specs_SpecsListFragmentDoc, SpecNode_SpecsListFragment } from '../generated/graphql-test'
+import { Specs_SpecsListFragmentDoc, SpecNode_SpecsListFragment, TestingTypeEnum } from '../generated/graphql-test'
 
 const rowSelector = '[data-testid=specs-list-row]'
 const inputSelector = 'input'
 
+function mountWithTestingType (testingType: TestingTypeEnum) {
+  cy.mountFragment(Specs_SpecsListFragmentDoc, {
+    onResult: (ctx) => {
+      if (!ctx.currentProject) throw new Error('need current project')
+
+      ctx.currentProject.currentTestingType = testingType
+
+      return ctx
+    },
+    render: (gqlVal) => {
+      return <SpecsList gql={gqlVal} />
+    },
+  })
+}
+
 let specs: Array<SpecNode_SpecsListFragment> = []
 
 describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
-  beforeEach(() => {
-    cy.mountFragment(Specs_SpecsListFragmentDoc, {
-      onResult: (ctx) => {
-        specs = ctx.currentProject?.specs?.edges || []
-
-        return ctx
-      },
-      render: (gqlVal) => {
-        return <SpecsList gql={gqlVal} />
-      },
+  context('when testingType is unset', () => {
+    beforeEach(() => {
+      cy.mountFragment(Specs_SpecsListFragmentDoc, {
+        onResult: (ctx) => {
+          specs = ctx.currentProject?.specs?.edges || []
+
+          return ctx
+        },
+        render: (gqlVal) => {
+          return <SpecsList gql={gqlVal} />
+        },
+      })
     })
-  })
 
-  it('should filter specs', () => {
-    const spec = specs[0].node
+    it('should filter specs', () => {
+      const spec = specs[0].node
+
+      cy.get(inputSelector).type('garbage 🗑', { delay: 0 })
+      .get(rowSelector)
+      .should('not.exist')
+
+      cy.get(inputSelector).clear().type(spec.relative)
+      cy.get(rowSelector).first().should('contain', spec.relative.replace(`/${spec.fileName}${spec.specFileExtension}`, ''))
+      cy.get(rowSelector).last().should('contain', `${spec.fileName}${spec.specFileExtension}`)
+    })
+
+    it('should close directories', () => {
+      // close all directories
+      ['src', 'packages', 'frontend', '__test__', 'lib', 'tests'].forEach((dir) => {
+        cy.get('[data-cy="row-directory-depth-0"]').contains(dir).click()
+      })
+
+      cy.get('[data-cy="spec-item"]').should('not.exist')
+    })
+  })
 
-    cy.get(inputSelector).type('garbage 🗑', { delay: 0 })
-    .get(rowSelector)
-    .should('not.exist')
+  context('when testingType is e2e', () => {
+    beforeEach(() => {
+      mountWithTestingType('e2e')
+    })
 
-    cy.get(inputSelector).clear().type(spec.relative)
-    cy.get(rowSelector).first().should('contain', spec.relative.replace(`/${spec.fileName}${spec.specFileExtension}`, ''))
-    cy.get(rowSelector).last().should('contain', `${spec.fileName}${spec.specFileExtension}`)
+    it('should display the e2e testing header', () => {
+      cy.get('[data-cy="specs-testing-type-header"]').should('have.text', 'E2E Specs')
+    })
   })
 
-  it('should close directories', () => {
-    // close all directories
-    ['src', 'packages', 'frontend', '__test__', 'lib', 'tests'].forEach((dir) => {
-      cy.get('[data-cy="row-directory-depth-0"]').contains(dir).click()
+  context('when testingType is component', () => {
+    beforeEach(() => {
+      mountWithTestingType('component')
     })
 
-    // all directories closed; no specs should be showing.
-    cy.get('[data-cy="spec-item"]').should('not.exist')
+    it('should display the component testing header', () => {
+      cy.get('[data-cy="specs-testing-type-header"]').should('have.text', 'Component Specs')
+    })
   })
 })

packages/app/src/specs/SpecsList.vue

@@ -13,8 +13,12 @@
     />
 
     <div class="grid grid-cols-2 children:text-gray-800 children:font-medium">
-      <div class="flex justify-between items-center">
-        {{ t('specPage.componentSpecsHeader') }}
+      <div
+        class="flex justify-between items-center"
+        data-cy="specs-testing-type-header"
+      >
+        {{ props.gql.currentProject?.currentTestingType === 'component' ?
+          t('specPage.componentSpecsHeader') : t('specPage.e2eSpecsHeader') }}
       </div>
       <div class="flex justify-between items-center">
         <div>{{ t('specPage.gitStatusHeader') }}</div>
@@ -113,6 +117,7 @@ fragment Specs_SpecsList on Query {
   currentProject {
     id
     projectRoot
+    currentTestingType
     specs: specs(first: 100) {
       edges {
         ...SpecNode_SpecsList