chore: update packages/example deployment script and cleanup package/example (#25091)

Co-authored-by: Bill Glesias <bglesias@gmail.com>

Author: emilyrohrbough

npm/create-cypress-tests/scripts/example.js

@@ -13,9 +13,13 @@ program
   await fs.remove(destinationPath)
   await fs.copy(exampleFolder, destinationPath, { recursive: true })
 
-  console.log(`✅ Example was successfully created at ${chalk.cyan(destination)}`)
+  console.log(`✅ E2E Examples were successfully created at ${chalk.cyan(destination)}`)
 
-  await fs.copy(path.join(__dirname, 'example-tsconfig.json'), path.join(destination, 'tsconfig.json'))
+  await fs.copy(path.join(__dirname, 'examples', 'cypress'), path.join(destination))
+
+  console.log(`✅ Cypress Setup was successfully created at ${chalk.cyan(destination)}`)
+
+  await fs.copy(path.join(__dirname, 'examples', 'tsconfig.json'), path.join(destination, 'tsconfig.json'))
 
   console.log(`✅ tsconfig.json was created for ${chalk.cyan(destination)}`)
 })

packages/example/cypress/fixtures/example.json renamed to npm/create-cypress-tests/scripts/examples/cypress/fixtures/example.json

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

packages/example/cypress/support/commands.js renamed to npm/create-cypress-tests/scripts/examples/cypress/support/commands.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

npm/create-cypress-tests/scripts/examples/cypress/support/component.js

@@ -81,11 +81,13 @@ describe('App: Specs', () => {
             'cypress_api',
             'files',
             'location',
+            'misc',
             'navigation',
             'network_requests',
             'querying',
             'spies_stubs_clocks',
             'storage',
+            'traversal',
             'utilities',
             'viewport',
             'waiting',
@@ -114,10 +116,7 @@ describe('App: Specs', () => {
               additionalIgnorePattern: [],
             })).map((spec) => spec.relative)
 
-            // Validate that all expected paths have been generated within the data context
-            expect(generatedSpecPaths.filter((path) => {
-              return options.expectedScaffoldPathsForPlatform.includes(path)
-            })).to.have.lengthOf(options.expectedScaffoldPathsForPlatform.length)
+            expect(generatedSpecPaths).to.include.members(options.expectedScaffoldPathsForPlatform)
           }, { expectedScaffoldPathsForPlatform })
 
           // cy.percySnapshot() // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435

npm/create-cypress-tests/scripts/examples/cypress/support/e2e.js

@@ -56,7 +56,7 @@
 
 <script lang="ts" setup>
 import { gql, useMutation } from '@urql/vue'
-import { ScaffoldGeneratorStepOne_ScaffoldIntegrationDocument } from '../../../generated/graphql'
+import { ScaffoldGeneratorStepOne_E2eExamplesDocument } from '../../../generated/graphql'
 import { computed, onMounted } from 'vue'
 import { buildSpecTree } from '../../../specs/tree/useCollapsibleTree'
 import { useCollapsibleTree } from '../../tree/useCollapsibleTree'
@@ -68,8 +68,8 @@ import type { FoundSpec } from '@packages/types/src'
 const { t } = useI18n()
 
 gql`
-mutation ScaffoldGeneratorStepOne_scaffoldIntegration {
-  scaffoldIntegration {
+mutation ScaffoldGeneratorStepOne_e2eExamples {
+  e2eExamples {
     file {
       id
       absolute
@@ -89,15 +89,15 @@ const emits = defineEmits<{
   (event: 'close'): void
 }>()
 
-const mutation = useMutation(ScaffoldGeneratorStepOne_ScaffoldIntegrationDocument)
+const mutation = useMutation(ScaffoldGeneratorStepOne_E2eExamplesDocument)
 
 onMounted(async () => {
   emits('update:title', t('createSpec.e2e.importFromScaffold.specsAddingHeader'))
   await mutation.executeMutation({})
   emits('update:title', t('createSpec.e2e.importFromScaffold.specsAddedHeader'))
 })
 
-const scaffoldedFiles = computed(() => mutation.data.value?.scaffoldIntegration || [])
+const scaffoldedFiles = computed(() => mutation.data.value?.e2eExamples || [])
 const specTree = computed(() => {
   const files: FoundSpec[] = scaffoldedFiles.value.map((res) => {
     return {

npm/create-cypress-tests/scripts/example-tsconfig.json renamed to npm/create-cypress-tests/scripts/examples/tsconfig.json

@@ -129,13 +129,13 @@ export class CodegenActions {
     return path.join(projectRoot, 'cypress', 'e2e')
   }
 
-  async scaffoldIntegration (): Promise<NexusGenObjects['ScaffoldedFile'][]> {
+  async e2eExamples (): Promise<NexusGenObjects['ScaffoldedFile'][]> {
     const projectRoot = this.ctx.currentProject
 
     assert(projectRoot, `Cannot create spec without currentProject.`)
 
     const results = await codeGenerator(
-      { templateDir: templates['scaffoldIntegration'], target: this.defaultE2EPath },
+      { templateDir: templates['e2eExamples'], target: this.defaultE2EPath },
       {},
     )
 

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

@@ -415,7 +415,7 @@ export class ProjectActions {
 
     switch (this.ctx.coreData.currentTestingType) {
       case 'e2e':
-        return hasNonExampleSpec(templates.scaffoldIntegration, specs)
+        return hasNonExampleSpec(templates.e2eExamples, specs)
       case 'component':
         return specs.length > 0
       case null: