From 4fd9ed46e24f4cdfa62a913b023430b05d1a4651 Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Mon, 13 Jun 2022 09:46:41 -0400
Subject: [PATCH 1/7] feat: Auto-focus and select file name for create new spec
 modal

---
 packages/app/src/specs/CreateSpecModal.cy.tsx | 11 ++++++++
 .../src/specs/generators/EmptyGenerator.vue   | 26 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/specs/CreateSpecModal.cy.tsx b/packages/app/src/specs/CreateSpecModal.cy.tsx
index ea0b567c83ae..76bff8bab600 100644
--- a/packages/app/src/specs/CreateSpecModal.cy.tsx
+++ b/packages/app/src/specs/CreateSpecModal.cy.tsx
@@ -44,6 +44,17 @@ describe('<CreateSpecModal />', () => {
     cy.get(modalSelector).should('be.visible')
 
     cy.percySnapshot()
+  }),
+  it('focuses text input and selects file name by default', () => {
+    cy.focused().as('specNameInput')
+
+    // focused should yield the input element since it should be auto-focused
+    cy.get('@specNameInput').invoke('val').should('equal', 'cypress/e2e/ComponentName.cy.js')
+
+    // only the file name should be focused, so backspacing should erase the whole file name
+    cy.get('@specNameInput').type('{backspace}')
+
+    cy.get('@specNameInput').invoke('val').should('equal', 'cypress/e2e/.cy.js')
   })
 
   describe('dismissing', () => {
diff --git a/packages/app/src/specs/generators/EmptyGenerator.vue b/packages/app/src/specs/generators/EmptyGenerator.vue
index ff54e2b1bf65..305f8a66397f 100644
--- a/packages/app/src/specs/generators/EmptyGenerator.vue
+++ b/packages/app/src/specs/generators/EmptyGenerator.vue
@@ -4,6 +4,7 @@
       <div class="p-24px w-720px">
         <Input
           v-model="specFile"
+          :input-ref="inputRefFn"
           :placeholder="t('createSpec.e2e.importEmptySpec.inputPlaceholder')"
           :aria-label="t('createSpec.e2e.importEmptySpec.inputPlaceholder')"
           :has-error="hasError"
@@ -123,7 +124,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, onMounted } from 'vue'
 import { useI18n } from '@packages/frontend-shared/src/locales/i18n'
 import Input from '@packages/frontend-shared/src/components/Input.vue'
 import Button from '@packages/frontend-shared/src/components/Button.vue'
@@ -180,6 +181,10 @@ const emits = defineEmits<{
 
 const { title } = useVModels(props, emits)
 
+const inputRef = ref<HTMLInputElement>()
+
+const inputRefFn = () => inputRef
+
 const specFile = ref(props.specFileName)
 
 const matches = useMutation(EmptyGenerator_MatchSpecFileDocument)
@@ -190,6 +195,25 @@ const hasError = computed(() => !isValidSpecFile.value && !!specFile.value)
 
 const result = ref<GeneratorSuccessFileFragment | null>(null)
 
+function getFileNameIndexes (inputValue: string, match: RegExpMatchArray): number[] {
+  return [match.index || 0, inputValue.indexOf(match[0]) + match[0].length]
+}
+
+onMounted(() => {
+  // Focus text input and try to pre-select file name
+  inputRef.value?.focus()
+
+  const fileNameRegex = /[ \w-]+(?=\.)/
+  const inputValue = inputRef.value?.value
+  const match = inputValue?.match(fileNameRegex)
+
+  if (inputValue && match) {
+    const [startSelectionIndex, endSelectionIndex] = getFileNameIndexes(inputValue, match)
+
+    inputRef.value?.setSelectionRange(startSelectionIndex, endSelectionIndex)
+  }
+})
+
 whenever(result, () => {
   title.value = t('createSpec.successPage.header')
   emits('updateTitle', t('createSpec.successPage.header'))

From 2c836a24db88f14a1474fc69882ddb75c16ace17 Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Mon, 13 Jun 2022 13:33:40 -0400
Subject: [PATCH 2/7] feat: Add comment for regex

---
 packages/app/src/specs/generators/EmptyGenerator.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/app/src/specs/generators/EmptyGenerator.vue b/packages/app/src/specs/generators/EmptyGenerator.vue
index 305f8a66397f..8264bef1469c 100644
--- a/packages/app/src/specs/generators/EmptyGenerator.vue
+++ b/packages/app/src/specs/generators/EmptyGenerator.vue
@@ -203,6 +203,8 @@ onMounted(() => {
   // Focus text input and try to pre-select file name
   inputRef.value?.focus()
 
+  // This regex matches a group of word characters, spaces, and '-' characters before a '.' character.
+  // For example 'path/to/spec/spec-name.cy.tsx' ---> 'spec-name'
   const fileNameRegex = /[ \w-]+(?=\.)/
   const inputValue = inputRef.value?.value
   const match = inputValue?.match(fileNameRegex)

From b3eab6d3088e76b5a22a57a2b245cf39ee7045d6 Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Mon, 13 Jun 2022 13:34:32 -0400
Subject: [PATCH 3/7] feat: Remove comma; add new line

---
 packages/app/src/specs/CreateSpecModal.cy.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/specs/CreateSpecModal.cy.tsx b/packages/app/src/specs/CreateSpecModal.cy.tsx
index 76bff8bab600..afd3adbbaa05 100644
--- a/packages/app/src/specs/CreateSpecModal.cy.tsx
+++ b/packages/app/src/specs/CreateSpecModal.cy.tsx
@@ -44,7 +44,8 @@ describe('<CreateSpecModal />', () => {
     cy.get(modalSelector).should('be.visible')
 
     cy.percySnapshot()
-  }),
+  })
+
   it('focuses text input and selects file name by default', () => {
     cy.focused().as('specNameInput')
 

From da055b9e14944a1706a4c7e376b60c353610d284 Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Mon, 13 Jun 2022 16:01:49 -0400
Subject: [PATCH 4/7] feat: Remove unnecessary function

---
 packages/app/src/specs/generators/EmptyGenerator.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/specs/generators/EmptyGenerator.vue b/packages/app/src/specs/generators/EmptyGenerator.vue
index 8264bef1469c..356dfc14a5a0 100644
--- a/packages/app/src/specs/generators/EmptyGenerator.vue
+++ b/packages/app/src/specs/generators/EmptyGenerator.vue
@@ -195,10 +195,6 @@ const hasError = computed(() => !isValidSpecFile.value && !!specFile.value)
 
 const result = ref<GeneratorSuccessFileFragment | null>(null)
 
-function getFileNameIndexes (inputValue: string, match: RegExpMatchArray): number[] {
-  return [match.index || 0, inputValue.indexOf(match[0]) + match[0].length]
-}
-
 onMounted(() => {
   // Focus text input and try to pre-select file name
   inputRef.value?.focus()
@@ -210,7 +206,8 @@ onMounted(() => {
   const match = inputValue?.match(fileNameRegex)
 
   if (inputValue && match) {
-    const [startSelectionIndex, endSelectionIndex] = getFileNameIndexes(inputValue, match)
+    const startSelectionIndex = match.index || 0
+    const endSelectionIndex = inputValue.indexOf(match[0]) + match[0].length
 
     inputRef.value?.setSelectionRange(startSelectionIndex, endSelectionIndex)
   }

From cfb75d4e5b381f80fe5d5cca73636d8e7d304547 Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Mon, 13 Jun 2022 16:21:33 -0400
Subject: [PATCH 5/7] feat: Remove unnecessary logic

---
 packages/app/src/specs/generators/EmptyGenerator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/src/specs/generators/EmptyGenerator.vue b/packages/app/src/specs/generators/EmptyGenerator.vue
index 356dfc14a5a0..c17e0d2cc03c 100644
--- a/packages/app/src/specs/generators/EmptyGenerator.vue
+++ b/packages/app/src/specs/generators/EmptyGenerator.vue
@@ -207,7 +207,7 @@ onMounted(() => {
 
   if (inputValue && match) {
     const startSelectionIndex = match.index || 0
-    const endSelectionIndex = inputValue.indexOf(match[0]) + match[0].length
+    const endSelectionIndex = startSelectionIndex + match[0].length
 
     inputRef.value?.setSelectionRange(startSelectionIndex, endSelectionIndex)
   }

From 5de7ed01272365a3b743400daca2adbb367b234b Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Tue, 14 Jun 2022 12:05:44 -0400
Subject: [PATCH 6/7] feat: Reference prop value rather than input ref value

---
 .../app/src/specs/generators/EmptyGenerator.vue    | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/specs/generators/EmptyGenerator.vue b/packages/app/src/specs/generators/EmptyGenerator.vue
index c17e0d2cc03c..e06ab095568a 100644
--- a/packages/app/src/specs/generators/EmptyGenerator.vue
+++ b/packages/app/src/specs/generators/EmptyGenerator.vue
@@ -196,20 +196,24 @@ const hasError = computed(() => !isValidSpecFile.value && !!specFile.value)
 const result = ref<GeneratorSuccessFileFragment | null>(null)
 
 onMounted(() => {
+  if (!inputRef?.value) {
+    return
+  }
+
   // Focus text input and try to pre-select file name
-  inputRef.value?.focus()
+  inputRef.value.focus()
 
   // This regex matches a group of word characters, spaces, and '-' characters before a '.' character.
   // For example 'path/to/spec/spec-name.cy.tsx' ---> 'spec-name'
   const fileNameRegex = /[ \w-]+(?=\.)/
-  const inputValue = inputRef.value?.value
-  const match = inputValue?.match(fileNameRegex)
+  const inputValue = props.specFileName
+  const match = inputValue.match(fileNameRegex)
 
-  if (inputValue && match) {
+  if (match) {
     const startSelectionIndex = match.index || 0
     const endSelectionIndex = startSelectionIndex + match[0].length
 
-    inputRef.value?.setSelectionRange(startSelectionIndex, endSelectionIndex)
+    inputRef.value.setSelectionRange(startSelectionIndex, endSelectionIndex)
   }
 })
 

From 50851bd064854d9f42ff87c2c26e782a2b678c5c Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Tue, 14 Jun 2022 16:27:48 -0400
Subject: [PATCH 7/7] feat: Add component test for unhappy path

---
 packages/app/src/specs/CreateSpecModal.cy.tsx | 100 +++++++++++++++---
 1 file changed, 88 insertions(+), 12 deletions(-)

diff --git a/packages/app/src/specs/CreateSpecModal.cy.tsx b/packages/app/src/specs/CreateSpecModal.cy.tsx
index afd3adbbaa05..2b79f7108c3f 100644
--- a/packages/app/src/specs/CreateSpecModal.cy.tsx
+++ b/packages/app/src/specs/CreateSpecModal.cy.tsx
@@ -46,18 +46,6 @@ describe('<CreateSpecModal />', () => {
     cy.percySnapshot()
   })
 
-  it('focuses text input and selects file name by default', () => {
-    cy.focused().as('specNameInput')
-
-    // focused should yield the input element since it should be auto-focused
-    cy.get('@specNameInput').invoke('val').should('equal', 'cypress/e2e/ComponentName.cy.js')
-
-    // only the file name should be focused, so backspacing should erase the whole file name
-    cy.get('@specNameInput').type('{backspace}')
-
-    cy.get('@specNameInput').invoke('val').should('equal', 'cypress/e2e/.cy.js')
-  })
-
   describe('dismissing', () => {
     it('is dismissed when you click outside', () => {
       cy.get(modalSelector)
@@ -76,6 +64,94 @@ describe('<CreateSpecModal />', () => {
   })
 })
 
+describe('Modal Text Input', () => {
+  it('focuses text input and selects file name by default', () => {
+    const show = ref(true)
+
+    cy.mount(() => (<div>
+      <CreateSpecModal
+        gql={{
+          currentProject: {
+            id: 'id',
+            currentTestingType: 'component',
+            configFile: 'cypress.config.js',
+            configFileAbsolutePath: '/path/to/cypress.config.js',
+            config: [{
+              field: 'e2e',
+              value: {
+                specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+              },
+            }, {
+              field: 'component',
+              value: {
+                specPattern: '**/*.cy.{js,jsx,ts,tsx}',
+              },
+            }],
+            specs: [],
+            fileExtensionToUse: 'js',
+            defaultSpecFileName: 'cypress/e2e/ComponentName.cy.js',
+          },
+        }}
+        show={show.value}
+        onClose={() => show.value = false}
+      />
+    </div>))
+
+    cy.focused().as('specNameInput')
+
+    // focused should yield the input element since it should be auto-focused
+    cy.get('@specNameInput').invoke('val').should('equal', 'cypress/e2e/ComponentName.cy.js')
+
+    // only the file name should be focused, so backspacing should erase the whole file name
+    cy.get('@specNameInput').type('{backspace}')
+
+    cy.get('@specNameInput').invoke('val').should('equal', 'cypress/e2e/.cy.js')
+  })
+
+  it('focuses text input but does not select if default file name does not match regex', () => {
+    const show = ref(true)
+
+    cy.mount(() => (<div>
+      <CreateSpecModal
+        gql={{
+          currentProject: {
+            id: 'id',
+            currentTestingType: 'component',
+            configFile: 'cypress.config.js',
+            configFileAbsolutePath: '/path/to/cypress.config.js',
+            config: [{
+              field: 'e2e',
+              value: {
+                specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+              },
+            }, {
+              field: 'component',
+              value: {
+                specPattern: '**/*.cy.{js,jsx,ts,tsx}',
+              },
+            }],
+            specs: [],
+            fileExtensionToUse: 'js',
+            defaultSpecFileName: 'this/path/does/not/produce/regex/match-',
+          },
+        }}
+        show={show.value}
+        onClose={() => show.value = false}
+      />
+    </div>))
+
+    cy.focused().as('specNameInput')
+
+    // focused should yield the input element since it should be auto-focused
+    cy.get('@specNameInput').invoke('val').should('equal', 'this/path/does/not/produce/regex/match-')
+
+    // nothing should be selected, so backspacing should only delete the last character in the file path
+    cy.get('@specNameInput').type('{backspace}')
+
+    cy.get('@specNameInput').invoke('val').should('equal', 'this/path/does/not/produce/regex/match')
+  })
+})
+
 describe('playground', () => {
   it('can be opened and closed via the show prop', () => {
     const show = ref(false)