fix: change wording for spec creation (#25271)

Co-authored-by: Emily Rohrbough <[email protected]>
Closes undefined

Author: Manuel-Suarez-Abascal

npm/create-cypress-tests/README.md

@@ -44,7 +44,7 @@ Here is a list of available configuration options:
 
 `--use-npm` – use npm if yarn available
 `--ignore-typescript` – will not create typescript configuration if available 
-`--ignore-examples` – will create a 1 empty spec file (`cypress/integration/spec.js`) to start with
+`--ignore-examples` – will create a 1 template spec file (`cypress/integration/spec.js`) to start with
 `--component-tests` – will not ask should setup component testing or not
 
 ## License

npm/webpack-dev-server/cypress/e2e/react.cy.ts

@@ -129,7 +129,7 @@ for (const project of WEBPACK_REACT) {
 
       // 4. recreate spec, with same name as removed spec
       cy.findByTestId('new-spec-button').click()
-      cy.findByRole('button', { name: 'Create new empty spec' }).should('be.visible').click()
+      cy.findByRole('button', { name: 'Create new spec' }).should('be.visible').click()
 
       cy.findByRole('dialog').within(() => {
         cy.get('input').clear().type('src/App.cy.jsx')

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

@@ -31,15 +31,15 @@ describe('App: Spec List (Component)', () => {
     cy.get('[data-selected-spec="false"]').should('contain', 'foo')
   })
 
-  it('opens the "Create a new spec" modal after clicking the "New specs" button', () => {
+  it('opens the "Create new spec" modal after clicking the "New specs" button', () => {
     cy.get('[data-cy="standard-modal"]').should('not.exist')
     cy.get('[data-cy="new-spec-button"]').click()
     cy.get('[data-cy="standard-modal"]').get('h2').contains('Enter the path for your new spec')
     cy.get('button').get('[aria-label="Close"]').click()
     cy.get('[data-cy="standard-modal"]').should('not.exist')
   })
 
-  it('has the correct defaultSpecFileName in the "Create a new spec" modal', () => {
+  it('has the correct defaultSpecFileName in the "Create new spec" modal', () => {
     cy.findByTestId('standard-modal').should('not.exist')
     cy.findByTestId('new-spec-button').click()
     cy.get('input').get('[aria-label="Enter a relative path..."]').invoke('val').should('contain', getPathForPlatform('cypress/component-tests/ComponentName.spec.js'))

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

@@ -85,22 +85,22 @@ describe('App: Spec List (E2E)', () => {
       cy.findAllByTestId('spec-item').should('contain', 'dom-content.spec.js')
     })
 
-    it('opens the "Create a new spec" modal after clicking the "New specs" button', () => {
+    it('opens the "Create new spec" modal after clicking the "New specs" button', () => {
       cy.findByTestId('standard-modal').should('not.exist')
       cy.findByTestId('new-spec-button').click()
-      cy.findByTestId('standard-modal').get('h2').contains('Create a new spec')
+      cy.findByTestId('standard-modal').get('h2').contains('Create new spec')
       cy.get('button').contains('Scaffold example specs').should('be.visible')
-      cy.get('button').contains('Create new empty spec').should('be.visible')
+      cy.get('button').contains('Create new spec').should('be.visible')
       cy.get('button').get('[aria-label="Close"]').click()
       cy.findByTestId('standard-modal').should('not.exist')
     })
 
-    it('has the correct defaultSpecFileName in the "Create a new spec" modal', () => {
+    it('has the correct defaultSpecFileName in the "Create new spec" modal', () => {
       cy.findByTestId('standard-modal').should('not.exist')
       cy.findByTestId('new-spec-button').click()
-      cy.findByTestId('standard-modal').get('h2').contains('Create a new spec')
+      cy.findByTestId('standard-modal').get('h2').contains('Create new spec')
       cy.get('button').contains('Scaffold example specs').should('be.visible')
-      cy.get('button').contains('Create new empty spec').should('be.visible').click()
+      cy.get('button').contains('Create new spec').should('be.visible').click()
       cy.get('input').get('[aria-label="Enter a relative path..."]').invoke('val').should('contain', getPathForPlatform('cypress/e2e/spec.spec.js'))
       cy.get('button').get('[aria-label="Close"]').click()
     })

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

@@ -32,7 +32,7 @@ function testEmptySpecModal (fullDefaultSpecFileName: string, specName: string)
 
   describe('form behavior', () => {
     beforeEach(() => {
-      cy.findByRole('button', { name: 'Create new empty spec' }).should('be.visible').click()
+      cy.findByRole('button', { name: 'Create new spec' }).should('be.visible').click()
     })
 
     it('enter should call create spec function', () => {
@@ -68,7 +68,7 @@ function testEmptySpecModal (fullDefaultSpecFileName: string, specName: string)
 
   describe('text Input', () => {
     beforeEach(() => {
-      cy.findByRole('button', { name: 'Create new empty spec' }).should('be.visible').click()
+      cy.findByRole('button', { name: 'Create new spec' }).should('be.visible').click()
     })
 
     it('focuses text input and selects file name by default', () => {
@@ -86,7 +86,7 @@ function testEmptySpecModal (fullDefaultSpecFileName: string, specName: string)
 }
 
 describe('<CreateSpecModal />', () => {
-  context('create empty spec', () => {
+  context('create template spec', () => {
     context('e2e', () => {
       const defaultSpecName = 'spec'
       const defaultSpecFileName = 'cypress/e2e/spec.cy.js'
@@ -219,7 +219,7 @@ describe('<CreateSpecModal />', () => {
         />
       </div>))
 
-      cy.findByRole('button', { name: 'Create new empty spec' }).should('be.visible').click()
+      cy.findByRole('button', { name: 'Create new spec' }).should('be.visible').click()
 
       cy.focused().as('specNameInput')
 
@@ -296,7 +296,7 @@ describe('defaultSpecFileName', () => {
       },
     })
 
-    cy.findByText('Create new empty spec').click()
+    cy.get('[data-cy="card"]').contains('Create new spec').click()
     cy.get('input').invoke('val').should('contain', 'spec.cy.js')
 
     cy.percySnapshot()

packages/app/src/specs/CreateSpecModal.cy.tsx

@@ -72,8 +72,8 @@ describe('<NoSpecsPage />', { viewportHeight: 655, viewportWidth: 1032 }, () =>
 
       cy.contains(text.importFromScaffold.header).should('be.visible')
       cy.contains(text.importFromScaffold.description).should('be.visible')
-      cy.contains(text.importEmptySpec.header).should('be.visible')
-      cy.contains(text.importEmptySpec.description).should('be.visible')
+      cy.contains(text.importTemplateSpec.header).should('be.visible')
+      cy.contains(text.importTemplateSpec.description).should('be.visible')
       cy.percySnapshot()
     })
   })

packages/app/src/specs/NoSpecsPage.cy.tsx

@@ -6,8 +6,8 @@
           <Input
             v-model="specFile"
             :input-ref="inputRefFn"
-            :placeholder="t('createSpec.e2e.importEmptySpec.inputPlaceholder')"
-            :aria-label="t('createSpec.e2e.importEmptySpec.inputPlaceholder')"
+            :placeholder="t('createSpec.e2e.importTemplateSpec.inputPlaceholder')"
+            :aria-label="t('createSpec.e2e.importTemplateSpec.inputPlaceholder')"
             :has-error="hasError"
           >
             <template #prefix>
@@ -36,7 +36,7 @@
             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" />
-            {{ t('createSpec.e2e.importEmptySpec.specExtensionWarning') }}<span class="rounded bg-warning-200 py-2px px-8px text-warning-700">{{ recommendedFileName }}</span>
+            {{ t('createSpec.e2e.importTemplateSpec.specExtensionWarning') }}<span class="rounded bg-warning-200 py-2px px-8px text-warning-700">{{ recommendedFileName }}</span>
           </div>
 
           <div
@@ -241,7 +241,7 @@ watch(specFile, async (value) => {
   isValidSpecFile.value = result.data?.matchesSpecPattern ?? false
 }, { immediate: true })
 
-title.value = t('createSpec.e2e.importEmptySpec.chooseFilenameHeader')
+title.value = t('createSpec.e2e.importTemplateSpec.chooseFilenameHeader')
 
 const showExtensionWarning = computed(() => isValidSpecFile.value && !specFile.value.includes('.cy'))
 const recommendedFileName = computed(() => {
@@ -250,6 +250,6 @@ 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'))
+const invalidSpecWarning = computed(() => props.type === 'e2e' ? t('createSpec.e2e.importTemplateSpec.invalidSpecWarning') : t('createSpec.component.importTemplateSpec.invalidComponentWarning'))
 
 </script>

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

@@ -167,7 +167,7 @@ whenever(result, () => {
 })
 
 whenever(generatedSpecError, () => {
-  title.value = t('createSpec.component.importEmptySpec.header')
+  title.value = t('createSpec.component.importTemplateSpec.header')
 })
 
 const makeSpec = async ({ file, item }) => {

packages/app/src/specs/generators/component/ReactComponentGeneratorStepOne.vue

@@ -160,7 +160,7 @@ whenever(result, () => {
 })
 
 whenever(generatedSpecError, () => {
-  title.value = t('createSpec.component.importEmptySpec.header')
+  title.value = t('createSpec.component.importTemplateSpec.header')
 })
 
 const makeSpec = async (file) => {

packages/app/src/specs/generators/component/VueComponentGeneratorStepOne.vue

@@ -1,8 +1,8 @@
 <template>
   <CreateSpecCard
     :disabled="disabled"
-    :header="t('createSpec.e2e.importEmptySpec.header')"
-    :description="t('createSpec.e2e.importEmptySpec.description')"
+    :header="t('createSpec.e2e.importTemplateSpec.header')"
+    :description="t('createSpec.e2e.importTemplateSpec.description')"
     :icon="DocumentCodeIcon"
   />
 </template>

packages/app/src/specs/generators/empty/EmptyGeneratorCard.vue

@@ -253,7 +253,7 @@ export class ProjectActions {
     }
 
     // launchProject expects a spec when opening browser for url navigation.
-    // We give it an empty spec if none is passed so as to land on home page
+    // We give it an template spec if none is passed so as to land on home page
     const emptySpec: Cypress.Spec = {
       name: '',
       absolute: '',

packages/data-context/src/actions/ProjectActions.ts

@@ -2,7 +2,7 @@
 fileName: <%= fileName %>
 ---
 
-describe('empty spec', () => {
+describe('template spec', () => {
   it('passes', () => {
     cy.visit('https://example.cypress.io')
   })

packages/data-context/src/codegen/templates/empty-e2e/empty.ejs

@@ -124,7 +124,7 @@ describe('code-generator', () => {
           status: 'add',
           file: fileAbsolute,
           content: `${dedent`
-            describe('empty spec', () => {
+            describe('template spec', () => {
               it('passes', () => {
                 cy.visit('https://example.cypress.io')
               })

packages/data-context/test/unit/codegen/code-generator.spec.ts

@@ -64,7 +64,7 @@
     "noComponentsFound": "No components found",
     "unableToParseFile": "Unable to parse file",
     "updateSpecPattern": "Update spec pattern",
-    "newSpecModalTitle": "Create a new spec",
+    "newSpecModalTitle": "Create new spec",
     "successPage": {
       "header": "Great! The spec was successfully added",
       "runSpecButton": "Okay, run the spec",
@@ -95,9 +95,9 @@
         "specsAddedButton": "Okay, I got it!",
         "specsAddingHeader": "Adding specs..."
       },
-      "importEmptySpec": {
-        "header": "Create new empty spec",
-        "description": "We'll generate an empty spec file which can be used to start testing your application.",
+      "importTemplateSpec": {
+        "header": "Create new spec",
+        "description": "We'll generate a template spec file which can be used to start testing your application.",
         "chooseFilenameHeader": "Enter the path for your new spec",
         "inputPlaceholder": "Enter a relative path...",
         "invalidSpecWarning": "This path is invalid because it doesn't match the following ",
@@ -110,9 +110,9 @@
         "description": "Generate a basic component test for any of the components in this project.",
         "chooseAComponentHeader": "Choose a component"
       },
-      "importEmptySpec": {
-        "header": "Create a new spec",
-        "description": "We'll generate an empty spec file to start testing components.",
+      "importTemplateSpec": {
+        "header": "Create new spec",
+        "description": "We'll generate a template spec file which can be used to start testing your components.",
         "invalidComponentWarning": "We couldn't generate a valid path matching your custom "
       }
     }