fix: component spec creation with spec pattern

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

@@ -156,7 +156,7 @@ describe('App: Index', () => {
 
           //Shows extension warning
           cy.get('@enterSpecInput').clear().type('cypress/e2e/MyTest.spec.j')
-          cy.intercept('mutation-EmptyGeneratorCardStepOne_MatchSpecFile', (req) => {
+          cy.intercept('mutation-EmptyGenerator_MatchSpecFile', (req) => {
             if (req.body.variables.specFile === 'cypress/e2e/MyTest.spec.jx') {
               req.on('before:response', (res) => {
                 res.body.data.matchesSpecPattern = true
@@ -652,7 +652,7 @@ describe('App: Index', () => {
 
         cy.findByTestId('file-match-indicator').should('contain', '0 Matches')
         cy.findByRole('button', { name: 'cypress.config.js' })
-        cy.findByTestId('spec-pattern').should('contain', 'src/**/*.cy.{js,jsx}')
+        cy.findByTestId('spec-pattern').should('contain', 'src/specs-folder/*.cy.{js,jsx}')
 
         cy.contains('button', defaultMessages.createSpec.updateSpecPattern)
         cy.findByRole('button', { name: 'New Spec', exact: false })
@@ -687,6 +687,87 @@ describe('App: Index', () => {
           .and('contain', defaultMessages.createSpec.component.importFromStory.description)
         })
       })
+
+      it('shows create first spec page with create from component option and goes back if it is cancel', () => {
+        cy.findByRole('button', { name: 'New Spec', exact: false }).click()
+
+        cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
+          cy.findAllByTestId('card').eq(0)
+          .should('have.attr', 'tabindex', '0')
+          .and('contain', defaultMessages.createSpec.component.importFromComponent.description).click()
+        })
+
+        cy.get('[data-cy=file-list-row]').first().click()
+
+        cy.get('input').invoke('val').should('eq', 'src/App.cy.jsx')
+        cy.contains(defaultMessages.createSpec.component.importEmptySpec.header)
+
+        cy.contains(defaultMessages.components.button.cancel).click()
+
+        cy.contains(defaultMessages.createSpec.newSpecModalTitle)
+      })
+
+      it('shows create first spec page with create from component option', () => {
+        cy.findByRole('button', { name: 'New Spec', exact: false }).click()
+
+        cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
+          cy.findAllByTestId('card').eq(0)
+          .should('have.attr', 'tabindex', '0')
+          .and('contain', defaultMessages.createSpec.component.importFromComponent.description).click()
+        })
+
+        cy.get('[data-cy=file-list-row]').first().click()
+
+        cy.get('input').invoke('val').should('eq', 'src/App.cy.jsx')
+        cy.contains(defaultMessages.createSpec.component.importEmptySpec.header)
+        cy.contains(defaultMessages.createSpec.component.importEmptySpec.invalidComponentWarning)
+        cy.get('input').clear()
+        cy.contains(defaultMessages.createSpec.component.importEmptySpec.invalidComponentWarning).should('not.exist')
+        cy.contains('button', defaultMessages.createSpec.createSpec).should('be.disabled')
+
+        cy.get('input').clear().type('src/specs-folder/MyTest.cy.jsx')
+        cy.contains('button', defaultMessages.createSpec.createSpec).should('not.be.disabled').click()
+        cy.contains('h2', defaultMessages.createSpec.successPage.header)
+
+        cy.get('[data-cy="file-row"]').contains('src/specs-folder/MyTest.cy.jsx').click()
+
+        cy.findByRole('dialog', { name: defaultMessages.createSpec.successPage.header }).as('SuccessDialog').within(() => {
+          cy.findByRole('link', {
+            name: 'Okay, run the spec',
+          }).should('have.attr', 'href', '#/specs/runner?file=src/specs-folder/MyTest.cy.jsx')
+        })
+      })
+
+      it('shows create first spec page with create from story option', () => {
+        cy.findByRole('button', { name: 'New Spec', exact: false }).click()
+
+        cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
+          cy.findAllByTestId('card').eq(1)
+          .should('have.attr', 'tabindex', '0')
+          .and('contain', defaultMessages.createSpec.component.importFromStory.description).click()
+        })
+
+        cy.get('[data-cy=file-list-row]').first().click()
+
+        cy.get('input').invoke('val').should('eq', 'src/stories/Button.stories.cy.jsx')
+        cy.contains(defaultMessages.createSpec.component.importEmptySpec.header)
+        cy.contains(defaultMessages.createSpec.component.importEmptySpec.invalidComponentWarning)
+        cy.get('input').clear()
+        cy.contains(defaultMessages.createSpec.component.importEmptySpec.invalidComponentWarning).should('not.exist')
+        cy.contains('button', defaultMessages.createSpec.createSpec).should('be.disabled')
+
+        cy.get('input').clear().type('src/specs-folder/Button.stories.cy.jsx')
+        cy.contains('button', defaultMessages.createSpec.createSpec).should('not.be.disabled').click()
+        cy.contains('h2', defaultMessages.createSpec.successPage.header)
+
+        cy.get('[data-cy="file-row"]').contains('src/specs-folder/Button.stories.cy.jsx').click()
+
+        cy.findByRole('dialog', { name: defaultMessages.createSpec.successPage.header }).as('SuccessDialog').within(() => {
+          cy.findByRole('link', {
+            name: 'Okay, run the spec',
+          }).should('have.attr', 'href', '#/specs/runner?file=src/specs-folder/Button.stories.cy.jsx')
+        })
+      })
     })
 
     describe('Code Generation', () => {

packages/app/src/pages/Specs/Runner.vue

@@ -47,7 +47,7 @@ const isRunMode = window.__CYPRESS_MODE__ === 'run'
 // requests, which is what we want.
 const query = useQuery({
   query: SpecPageContainerDocument,
-  requestPolicy: 'cache-and-network',
+  requestPolicy: 'cache-only',
   pause: isRunMode && window.top === window,
 })
 

packages/app/src/specs/CreateSpecModal.vue

@@ -20,7 +20,9 @@
         :key="generator.id"
         v-model:title="title"
         :code-gen-glob="codeGenGlob"
-        :gql="props.gql"
+        :gql="props.gql.currentProject"
+        type="e2e"
+        spec-file-name="cypress/e2e/filename.cy.js"
         @restart="currentGeneratorId = undefined"
         @close="close"
       />
@@ -61,9 +63,9 @@ const emits = defineEmits<{
 gql`
 fragment CreateSpecModal on Query {
   ...CreateSpecCards
-  ...EmptyGeneratorCardStepOne
   currentProject {
     id
+    ...EmptyGenerator
     ...ComponentGeneratorStepOne_codeGenGlob
     ...StoryGeneratorStepOne_codeGenGlob
   }

packages/app/src/specs/generators/empty/EmptyGeneratorCardStepOne.vue → packages/app/src/specs/generators/EmptyGenerator.vue

@@ -14,23 +14,23 @@
         </Input>
 
         <div
-          v-if="hasError && props.gql.currentProject"
+          v-if="hasError && props.gql"
         >
           <div
             class="rounded flex font-medium bg-error-100 p-16px text-error-600 gap-8px items-center"
           >
             <i-cy-errored-outline_x16 class="icon-dark-error-600" />
-            <span>{{ t('createSpec.e2e.importEmptySpec.invalidSpecWarning') }}<b>specPattern</b>.</span>
+            <span>{{ invalidSpecWarning }}<b>specPattern</b>.</span>
           </div>
 
           <div class="mt-16px">
             <SpecPatterns
-              :gql="props.gql.currentProject"
+              :gql="props.gql"
             />
           </div>
         </div>
         <div
-          v-else-if="showExtensionWarning"
+          v-else-if="showExtensionWarning && props.type === 'e2e'"
           class="rounded flex font-medium bg-warning-100 mt-16px p-16px text-warning-600 gap-8px items-center"
         >
           <i-cy-errored-outline_x16 class="icon-dark-warning-600" />
@@ -98,39 +98,40 @@ import Input from '@packages/frontend-shared/src/components/Input.vue'
 import Button from '@packages/frontend-shared/src/components/Button.vue'
 import { useVModels, whenever } from '@vueuse/core'
 import { gql, useMutation } from '@urql/vue'
-import SpecPatterns from '../../../components/SpecPatterns.vue'
-import { EmptyGeneratorCardStepOneFragment, EmptyGeneratorCardStepOne_MatchSpecFileDocument, EmptyGeneratorCardStepOne_GenerateSpecDocument, GeneratorSuccessFragment } from '../../../generated/graphql'
+import SpecPatterns from '../../components/SpecPatterns.vue'
+import { EmptyGeneratorFragment, EmptyGenerator_MatchSpecFileDocument, EmptyGenerator_GenerateSpecDocument, GeneratorSuccessFileFragment } from '../../generated/graphql'
 import StandardModalFooter from '@packages/frontend-shared/src/components/StandardModalFooter.vue'
-import GeneratorSuccess from '../GeneratorSuccess.vue'
+import GeneratorSuccess from './GeneratorSuccess.vue'
 import TestResultsIcon from '~icons/cy/test-results_x24.svg'
 import PlusButtonIcon from '~icons/cy/add-large_x16.svg'
 
 const props = defineProps<{
   title: string,
-  gql: EmptyGeneratorCardStepOneFragment
+  gql: EmptyGeneratorFragment
+  type: 'e2e' | 'component' | 'story'
+  specFileName: string
+  erroredCodegenCandidate?: string
 }>()
 
 const { t } = useI18n()
 
 gql`
-fragment EmptyGeneratorCardStepOne on Query {
-  currentProject {
-    id
-    config
-    ...SpecPatterns
-  }
+fragment EmptyGenerator on CurrentProject {
+  id
+  config
+  ...SpecPatterns
 }
 `
 
 gql`
-mutation EmptyGeneratorCardStepOne_MatchSpecFile($specFile: String!) {
+mutation EmptyGenerator_MatchSpecFile($specFile: String!) {
   matchesSpecPattern (specFile: $specFile) 
 }
 `
 
 gql`
-mutation EmptyGeneratorCardStepOne_generateSpec($codeGenCandidate: String!, $type: CodeGenType!) {
-  generateSpecFromSource(codeGenCandidate: $codeGenCandidate, type: $type) {
+mutation EmptyGenerator_generateSpec($codeGenCandidate: String!, $type: CodeGenType!, $erroredCodegenCandidate: String) {
+  generateSpecFromSource(codeGenCandidate: $codeGenCandidate, type: $type, erroredCodegenCandidate: $erroredCodegenCandidate) {
     ...GeneratorSuccess
   }
 }`
@@ -140,28 +141,30 @@ const emits = defineEmits<{
   (event: 'update:description', value: string): void
   (event: 'restart'): void
   (event: 'close'): void
+  (event: 'updateTitle', value: string): void
 }>()
 
 const { title } = useVModels(props, emits)
 
-const specFile = ref('cypress/e2e/filename.cy.js')
+const specFile = ref(props.specFileName)
 
-const matches = useMutation(EmptyGeneratorCardStepOne_MatchSpecFileDocument)
-const writeFile = useMutation(EmptyGeneratorCardStepOne_GenerateSpecDocument)
+const matches = useMutation(EmptyGenerator_MatchSpecFileDocument)
+const writeFile = useMutation(EmptyGenerator_GenerateSpecDocument)
 
 const isValidSpecFile = ref(true)
 const hasError = computed(() => !isValidSpecFile.value && !!specFile.value)
 
-const result = ref<GeneratorSuccessFragment | null>(null)
+const result = ref<GeneratorSuccessFileFragment | null>(null)
 
 whenever(result, () => {
   title.value = t('createSpec.successPage.header')
+  emits('updateTitle', t('createSpec.successPage.header'))
 })
 
 const createSpec = async () => {
-  const { data } = await writeFile.executeMutation({ codeGenCandidate: specFile.value, type: 'e2e' })
+  const { data } = await writeFile.executeMutation({ codeGenCandidate: specFile.value, type: props.type, erroredCodegenCandidate: props.erroredCodegenCandidate ?? null })
 
-  result.value = data?.generateSpecFromSource ?? null
+  result.value = data?.generateSpecFromSource?.generatedSpecResult?.__typename === 'ScaffoldedFile' ? data?.generateSpecFromSource?.generatedSpecResult : null
 }
 
 watch(specFile, async (value) => {
@@ -178,4 +181,7 @@ const recommendedFileName = computed(() => {
 
   return `{filename}.cy.${split[split.length - 1]}`
 })
+
+const invalidSpecWarning = computed(() => props.type === 'e2e' ? t('createSpec.e2e.importEmptySpec.invalidSpecWarning') : t('createSpec.component.importEmptySpec.invalidComponentWarning'))
+
 </script>

packages/app/src/specs/generators/GeneratorSuccess.vue

@@ -32,10 +32,11 @@
 import ShikiHighlight from '@cy/components/ShikiHighlight.vue'
 import Collapsible from '@cy/components/Collapsible.vue'
 import { gql } from '@urql/core'
-import type { GeneratorSuccessFragment } from '../../generated/graphql'
+import type { GeneratorSuccessFileFragment } from '../../generated/graphql'
+import { ref } from 'vue'
 
 gql`
-fragment GeneratorSuccess on ScaffoldedFile {
+fragment GeneratorSuccessFile on ScaffoldedFile {
   file {
     id
     fileName
@@ -47,7 +48,26 @@ fragment GeneratorSuccess on ScaffoldedFile {
 }
 `
 
+gql`
+fragment GeneratorSuccess on GenerateSpecResponse {
+  # Used to update the cache after a spec is created, so when the user tries to
+  # run it, it already exists
+  currentProject {
+    id
+    specs {
+      id
+      ...SpecNode_InlineSpecList
+    }
+  }
+  generatedSpecResult {
+    ... on ScaffoldedFile {
+      ...GeneratorSuccessFile
+    }
+  }
+}
+`
+
 defineProps<{
-  file: GeneratorSuccessFragment['file']
+  file: GeneratorSuccessFileFragment['file']
 }>()
 </script>