chore: update packages/example deployment script and cleanup package/…

…example (#25091)

Co-authored-by: Bill Glesias <[email protected]>

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)}`)
 })

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

@@ -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')

npm/create-cypress-tests/scripts/examples/cypress/support/e2e.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')

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

@@ -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

packages/app/src/specs/generators/scaffold/ScaffoldGeneratorStepOne.vue

@@ -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 {

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

@@ -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/data-context/src/actions/ProjectActions.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:

packages/data-context/src/codegen/templates.ts

@@ -8,5 +8,5 @@ export default {
   vueComponent: getPath('./templates/vue-component'),
   componentEmpty: getPath('./templates/empty-component'),
   e2e: getPath('./templates/empty-e2e'),
-  scaffoldIntegration: cypressEx.getPathToE2E(),
+  e2eExamples: cypressEx.getPathToE2E(),
 } as const

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

@@ -319,10 +319,10 @@ describe('code-generator', () => {
     expect(() => babelParse(fileContent)).not.throw()
   })
 
-  it('should generate from scaffoldIntegration', async () => {
+  it('should generate from e2eExamples', async () => {
     const target = path.join(tmpPath, 'scaffold-integration')
     const action: Action = {
-      templateDir: templates.scaffoldIntegration,
+      templateDir: templates.e2eExamples,
       target,
     }
 
@@ -368,12 +368,12 @@ describe('code-generator', () => {
     it('should return true after adding new spec file', async () => {
       const target = path.join(tmpPath, 'spec-check')
 
-      const checkBeforeScaffolding = await hasNonExampleSpec(templates.scaffoldIntegration, [])
+      const checkBeforeScaffolding = await hasNonExampleSpec(templates.e2eExamples, [])
 
       expect(checkBeforeScaffolding, 'expected having no spec files to show no non-example specs').to.be.false
 
       const scaffoldExamplesAction: Action = {
-        templateDir: templates.scaffoldIntegration,
+        templateDir: templates.e2eExamples,
         target,
       }
 
@@ -389,7 +389,7 @@ describe('code-generator', () => {
 
       const specs = addTemplatesAsSpecs(scaffoldResults)
 
-      const checkAfterScaffolding = await hasNonExampleSpec(templates.scaffoldIntegration, specs)
+      const checkAfterScaffolding = await hasNonExampleSpec(templates.e2eExamples, specs)
 
       expect(checkAfterScaffolding, 'expected only having template files to show no non-example specs').to.be.false
 
@@ -404,7 +404,7 @@ describe('code-generator', () => {
 
       const specsWithGenerated = [...specs, ...addTemplatesAsSpecs(generatedTest)]
 
-      const checkAfterTemplate = await hasNonExampleSpec(templates.scaffoldIntegration, specsWithGenerated)
+      const checkAfterTemplate = await hasNonExampleSpec(templates.e2eExamples, specsWithGenerated)
 
       expect(checkAfterTemplate, 'expected check after adding a new spec to indicate there are now non-example specs').to.be.true
     })

packages/example/README.md

@@ -1,27 +1,30 @@
+# Example
 
-## Scaffold config files 
+This package is responsible for copying the `cypress/e2e` and `app` files from [`cypress-example-kitchensink`](https://github.com/cypress-io/cypress-example-kitchensink) into the cypress repository.
 
-The `cypress/plugins/index.js`, `cypress/support/*` and `cypress/tsconfig.json` from this package are used for user scaffolding in `packages/server` and `npm/create-cypress-tests`. This configuration files are by default injected when user instals Cypress.
+The `cypress/e2e` tests, pulled into this package from the [kitchen sink app](https://github.com/cypress-io/cypress-example-kitchensink), are used for scaffolding user's e2e tests in `packages/data-context` and in `npm/create-cypress-tests`.
 
-## Examples
+The `app` content, pulled into this package from the [kitchen sink app](https://github.com/cypress-io/cypress-example-kitchensink), is published to `cypress-io/cypress` repository's Github page, [https://example.cypress.io](https://example.cypress.io).
 
-This repo contains the source code for pushing out [https://example.cypress.io](https://example.cypress.io).
+## Updating Content
 
-The actual example repo you're probably looking for is [the kitchen sink app here](https://github.com/cypress-io/cypress-example-kitchensink).
-
-**THERE'S LIKELY NO REASON YOU NEED TO EDIT ANY OF THE CODE ON THIS REPO.**
+**THERE'S LIKELY NO REASON YOU NEED TO EDIT ANY OF THE CODE IN THIS PACKAGE.**
 
 - Want to edit the `example` tests? -> edit it [here](https://github.com/cypress-io/cypress-example-kitchensink/blob/master/cypress/e2e) instead.
 - Want to edit the actual [https://example.cypress.io](https://example.cypress.io) website? edit it [here](https://github.com/cypress-io/cypress-example-kitchensink/tree/master/app) instead.
 
-## Updating the `example` app
+## Major Version Bumps of Cypress
+
+If any of the breaking changes in the next major release requires updates to Cypress commands or APIs, verify the site content in `cypress-example-kitchensink` is up-to-date and that all examples that will be scaffolded can successfully run with the breaking change.
 
-After [releasing a new version](https://github.com/cypress-io/cypress-example-kitchensink/blob/master/CONTRIBUTING.md#deployment) on the [`cypress-example-kitchen-sink` repo](https://github.com/cypress-io/cypress-example-kitchensink/tree/master/cypress/e2e/2-advanced-examples), you now want to update the `example`'s dependency to match the newly released version.
+## Using a new version of `cypress-example-kitchen-sink`
+
+When a commit is merged into `master`, a new version of the [`cypress-example-kitchen-sink` repo](https://github.com/cypress-io/cypress-example-kitchensink/tree/master/cypress/e2e/2-advanced-examples) is released [automatically to npm](https://github.com/cypress-io/cypress-example-kitchensink/blob/master/CONTRIBUTING.md#deployment). When this happens, you will need to update the `example`'s dependency to match the newly released version.
 
 1. Bump the `cypress-example-kitchensink` `devDependency` within this package's [`package.json`](https://github.com/cypress-io/cypress/blob/develop/packages/example/package.json).
 
 2. Run `yarn` and `yarn workspace @packages/example` to build the app and spec files.
-CONTRIBUTING
+
 3. Create a new pull-request following this repo's [pull request instructions](CONTRIBUTING.md#pull-requests).
 
 ## Building
@@ -32,7 +35,7 @@ After running `yarn` you must build the app + spec files.
 yarn workspace @packages/example build
 ```
 
-This copies the src files from [`cypress-example-kitchensink`](https://github.com/cypress-io/cypress-example-kitchensink), modifies them to point to `https://example.cypress.io` and creates the `example` tests.
+This copies the `cypress/e2e` and files from [`cypress-example-kitchensink`](https://github.com/cypress-io/cypress-example-kitchensink), modifies them to point to `https://example.cypress.io` and creates the `example` tests.
 
 ## Deploying
 

packages/example/bin/build.js

@@ -1,28 +1,29 @@
 #!/usr/bin/env node
 
+/* eslint-disable no-console */
+
 const resolvePkg = require('resolve-pkg')
 const { join } = require('path')
 const fs = require('fs-extra')
 const path = require('path')
-const glob = require('glob')
-const util = require('util')
 const childProcess = require('child_process')
 
 const EXAMPLE_DIR = path.join(__dirname, '..')
-const globAsync = util.promisify(glob)
 
-async function build() {
+async function build () {
   await Promise.all([
     fs.remove(path.join(EXAMPLE_DIR, 'app')),
-    fs.remove(path.join(EXAMPLE_DIR, 'cypress'))
+    fs.remove(path.join(EXAMPLE_DIR, 'cypress')),
   ])
+
   await Promise.all([
     fs.copy(join(resolvePkg('cypress-example-kitchensink'), 'app'), path.join(EXAMPLE_DIR, 'app')),
     fs.copy(join(resolvePkg('cypress-example-kitchensink'), 'cypress'), path.join(EXAMPLE_DIR, 'cypress')),
   ])
+
   childProcess.execSync('node ./bin/convert.js', {
     cwd: EXAMPLE_DIR,
-    stdio: 'inherit'
+    stdio: 'inherit',
   })
 }
 

packages/example/cypress.config.js

@@ -1,4 +1,3 @@
 module.exports = {
-  "projectId": "2pz86o"
+  'projectId': '2pz86o',
 }
-

packages/example/gulpfile.js

@@ -1,5 +1,4 @@
 const gulp = require('gulp')
-const ghPages = require('gulp-gh-pages')
 const gulpClean = require('gulp-clean')
 const RevAll = require('gulp-rev-all')
 
@@ -26,13 +25,6 @@ const clean = () => {
   .pipe(gulpClean())
 }
 
-const pushGhPages = () => {
-  return gulp.src('build/**/*')
-  .pipe(ghPages())
-}
-
 const build = gulp.series(clean, gulp.parallel(assets, cname))
 
 exports.build = build
-
-exports.deploy = gulp.series(build, pushGhPages)

packages/example/index.d.ts

@@ -1 +1 @@
-export { default } from './lib/example'
+export { default } from './lib/example'

packages/example/lib/example.d.ts

@@ -1,9 +1,5 @@
 declare const example: {
-  getPathToExamples(): Promise<string[]>;
-  getPathToE2E(): string;
-  getPathToPlugins(): string;
-  getPathToTsConfig(): string;
-  getPathToFixture(): string;
+  getPathToE2E(): string
 }
 
-export default example;
+export default example