From 75ec48cd801d96eb3ccfc6b35cf2207a40acfaa9 Mon Sep 17 00:00:00 2001
From: Cesar Avitia <cesar@cypress.io>
Date: Wed, 9 Feb 2022 18:01:07 -0700
Subject: [PATCH 1/5] fix ui issues

---
 .../__snapshots__/migration.spec.ts.js           | 12 ++++++++++++
 .../data-context/src/sources/migration/utils.ts  |  6 +++++-
 packages/frontend-shared/src/locales/en-US.json  | 15 ++++++++-------
 .../launchpad/src/migration/OptOutModalStep1.vue | 13 +++++++++++++
 .../src/migration/RenameSpecsManual.vue          | 16 ++++++++++++++--
 .../src/migration/fragments/MigrationStep.vue    |  3 ++-
 6 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/packages/data-context/__snapshots__/migration.spec.ts.js b/packages/data-context/__snapshots__/migration.spec.ts.js
index 6751a1d6058b..01889df8a6aa 100644
--- a/packages/data-context/__snapshots__/migration.spec.ts.js
+++ b/packages/data-context/__snapshots__/migration.spec.ts.js
@@ -4,6 +4,8 @@ const { defineConfig } = require('cypress')
 module.exports = defineConfig({
   viewportWidth: 300,
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
       return require('./cypress/plugins/index.js')(on, config)
     },
@@ -17,6 +19,8 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
       return require('./cypress/plugins/index.js')(on, config)
     },
@@ -31,6 +35,8 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
       return require('./cypress/plugins/index.js')(on, config)
     },
@@ -45,6 +51,8 @@ const { defineConfig } = require('cypress')
 module.exports = defineConfig({
   viewportWidth: 300,
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
       return require('./cypress/plugins/index.js')(on, config)
     },
@@ -60,6 +68,8 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
       return require('./cypress/plugins/index.js')(on, config)
     },
@@ -73,6 +83,8 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
       return require('./path/to/plugin/file')(on, config)
     },
diff --git a/packages/data-context/src/sources/migration/utils.ts b/packages/data-context/src/sources/migration/utils.ts
index c22546e96976..cdec56483f6b 100644
--- a/packages/data-context/src/sources/migration/utils.ts
+++ b/packages/data-context/src/sources/migration/utils.ts
@@ -197,7 +197,9 @@ function formatObjectForConfig (obj: Record<string, unknown>) {
 function createE2eTemplate (pluginPath: string, hasPluginsFile: boolean, options: Record<string, unknown>) {
   const requirePlugins = `return require('.${path.sep}${pluginPath}')(on, config)`
 
-  const setupNodeEvents = `setupNodeEvents(on, config) {
+  const setupNodeEvents = `// We've imported your old cypress plugins here.
+  // You may want to clean this up later by importing these.
+  setupNodeEvents(on, config) {
     ${hasPluginsFile ? requirePlugins : ''}
   }`
 
@@ -208,6 +210,8 @@ function createE2eTemplate (pluginPath: string, hasPluginsFile: boolean, options
 
 function createComponentTemplate (options: Record<string, unknown>) {
   return `component: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {},${formatObjectForConfig(options)}
   },`
 }
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index 1d46ed47d3a2..e30f60bc51c5 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -496,7 +496,7 @@
   "migration": {
     "before": "Before",
     "after": "After",
-    "heresWhy": "here's why",
+    "heresWhy": "here's why:",
     "renameAuto": {
       "title": "We'll automatically rename your specs in this step",
       "changeButton": "change",
@@ -511,8 +511,9 @@
           "line1": "Cypress now supports the ability to create new spec files from within the UI for both E2E and component specs.",
           "line2": "All new spec files created within Cypress will use the default pattern of: ",
           "line3": "We want to rename your existing specs so that they have a consistent filename pattern for both E2E and component testing.",
-          "line4": "We've changed the placement of component specs to be next to their source files (e.g. src/Button.jsx and src/Button.cy.jsx)",
-          "line5": "The new default pattern of {0} prevents targeting conflicts with other testing frameworks. (e.g. Jest)",
+          "line4": "All documentation and example code will be using: ",
+          "line5": "We've changed the placement of component specs to be next to their source files (e.g. src/Button.jsx and src/Button.cy.jsx)",
+          "line6": "The new default pattern of {0} prevents targeting conflicts with other testing frameworks. (e.g. Jest)",
           "buttonProceed": "I still want to change the spec file extension",
           "buttonCancel": "Cancel, keep the default extension"
         },
@@ -539,7 +540,7 @@
       "changedSupportFile": "We've renamed the E2E support file from:"
     },
     "configFile": {
-      "title": "We need to move the Cypress configuration file",
+      "title": "We need to migrate to the new Cypress configuration file",
       "changedDefault": "We've changed the default Cypress config file from:",
       "customOptions": "We've set a custom {specPattern} option based on your {options}.",
       "willConvert": "We'll automatically create a new {jsFile} file and seed it with your options from your existing {jsonFile}."
@@ -555,13 +556,13 @@
       "title": "Migration Helper",
       "description": "Complete the steps below to migrate your project to Cypress 10",
       "step1": {
-        "title": "Automatically rename existing specs",
+        "title": "Rename existing specs",
         "description": "In this step, we'll automatically rename and move your existing spec files.",
         "button": "Rename these specs for me",
         "buttonSkip": "Skip renaming specs"
       },
       "step2": {
-        "title": "Manually move your existing component specs",
+        "title": "Move your existing component specs",
         "description": "In this step, you'll manually move your existing component specs to their new default location.",
         "buttonWait": "Waiting for you to move your component specs...",
         "buttonDone": "I have moved my component specs",
@@ -573,7 +574,7 @@
         "button": "Rename the support file for me"
       },
       "step4": {
-        "title": "Automatically migrate the Cypress configuration file",
+        "title": "Migrate to the new Cypress configuration file",
         "description": "In this step, we'll automatically migrate your existing cypress configuration to the new Cypress configuration file.",
         "button": "Migrate the configuration for me"
       },
diff --git a/packages/launchpad/src/migration/OptOutModalStep1.vue b/packages/launchpad/src/migration/OptOutModalStep1.vue
index 0bee5b998573..d47d513640b7 100644
--- a/packages/launchpad/src/migration/OptOutModalStep1.vue
+++ b/packages/launchpad/src/migration/OptOutModalStep1.vue
@@ -28,6 +28,9 @@
       </MigrationListItem>
       <MigrationListItem>
         {{ t('migration.renameAuto.modals.step1.line4') }}
+        <CodeTag class="text-jade-500">
+          [filename].cy.[ext]
+        </CodeTag>
       </MigrationListItem>
       <MigrationListItem>
         <i18n-t
@@ -39,6 +42,16 @@
           </CodeTag>
         </i18n-t>
       </MigrationListItem>
+      <MigrationListItem>
+        <i18n-t
+          scope="global"
+          keypath="migration.renameAuto.modals.step1.line6"
+        >
+          <CodeTag class="text-jade-500">
+            [filename].cy.[ext]
+          </CodeTag>
+        </i18n-t>
+      </MigrationListItem>
     </MigrationList>
     <template #footer>
       <div class="flex gap-16px">
diff --git a/packages/launchpad/src/migration/RenameSpecsManual.vue b/packages/launchpad/src/migration/RenameSpecsManual.vue
index 3996d7a101da..8c905aaf3434 100644
--- a/packages/launchpad/src/migration/RenameSpecsManual.vue
+++ b/packages/launchpad/src/migration/RenameSpecsManual.vue
@@ -12,6 +12,16 @@
           </CodeTag>
         </i18n-t>
       </MigrationListItem>
+      <MigrationListItem>
+        <i18n-t
+          scope="global"
+          keypath="migration.renameManual.addedSpecPattern"
+        >
+          <CodeTag class="text-jade-500">
+            specPattern
+          </CodeTag>
+        </i18n-t>
+      </MigrationListItem>
       <MigrationListItem>
         <i18n-t
           scope="global"
@@ -38,9 +48,11 @@
           :class="{'border-t': index > 0}"
         >
           <template v-if="file.moved">
-            <span>✅</span>
+            <i-cy-status-pass-duotone_x24
+              class="h-16px w-16px"
+            />
             <span
-              class="text-gray-400 line-through"
+              class="text-gray-600 line-through pl-8px"
               data-cy="moved"
             >
               {{ file.relative }}
diff --git a/packages/launchpad/src/migration/fragments/MigrationStep.vue b/packages/launchpad/src/migration/fragments/MigrationStep.vue
index 5bef13fb8d74..64a360d71b44 100644
--- a/packages/launchpad/src/migration/fragments/MigrationStep.vue
+++ b/packages/launchpad/src/migration/fragments/MigrationStep.vue
@@ -21,7 +21,8 @@
         />
         <div
           v-else
-          class="rounded-full bg-gray-100 h-24px text-center w-24px"
+          class="rounded-full h-24px text-center w-24px"
+          :class="step.isCurrentStep ? 'bg-indigo-100 text-indigo-600': 'bg-gray-100 text-gray-600'"
         >
           {{ step.index }}
         </div>

From e57a903071cf350a461ecf764f30b8ca91ef4365 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Thu, 10 Feb 2022 20:47:09 +1000
Subject: [PATCH 2/5] correct workflow for component testing

---
 packages/data-context/package.json            |  2 +-
 .../src/sources/migration/shouldShowSteps.ts  | 26 ++++++++++++-----
 .../src/sources/migration/utils.ts            |  2 +-
 .../test/unit/code-generator.spec.ts          |  2 +-
 .../sources/migration/shouldShowSteps.spec.ts |  4 +--
 .../launchpad/cypress/e2e/migration.cy.ts     | 29 +++++--------------
 .../README.md                                 |  4 +--
 .../expected-cypress.config.js                |  4 ++-
 .../expected-cypress.config.js                |  2 ++
 .../migration-component-testing/README.md     |  4 +--
 .../expected-cypress.config.js                |  4 ++-
 .../expected-cypress.config.js                |  4 +++
 .../README.md                                 |  4 +--
 .../expected-cypress.config.js                |  6 +++-
 .../expected-cypress.config.js                |  2 ++
 .../expected-cypress.config.js                |  2 ++
 .../expected-cypress.config.js                |  2 ++
 .../expected-cypress.config.js                |  2 ++
 .../expected-cypress.config.js                |  2 ++
 .../expected-cypress.config.ts                |  2 ++
 system-tests/projects/migration/README.md     |  2 +-
 .../migration/expected-cypress.config.js      |  6 +++-
 22 files changed, 73 insertions(+), 44 deletions(-)

diff --git a/packages/data-context/package.json b/packages/data-context/package.json
index 43cf7f932f70..4ac1a2e3b86f 100644
--- a/packages/data-context/package.json
+++ b/packages/data-context/package.json
@@ -11,7 +11,7 @@
     "tslint": "tslint --config ../ts/tslint.json --project .",
     "clean": "rimraf './{src,test}/**/*.js'",
     "test": "yarn test-unit",
-    "test-unit": "mocha -r @packages/ts/register {test/unit/**/*.spec.ts,test/unit/*.spec.ts} --config ./test/.mocharc.js --exit"
+    "test-unit": "mocha -r @packages/ts/register 'test/unit/**/*.spec.ts' --config ./test/.mocharc.js --exit"
   },
   "dependencies": {
     "@storybook/csf-tools": "^6.4.0-alpha.38",
diff --git a/packages/data-context/src/sources/migration/shouldShowSteps.ts b/packages/data-context/src/sources/migration/shouldShowSteps.ts
index 83bc61b7145a..da3300f2de65 100644
--- a/packages/data-context/src/sources/migration/shouldShowSteps.ts
+++ b/packages/data-context/src/sources/migration/shouldShowSteps.ts
@@ -73,6 +73,18 @@ export async function shouldShowAutoRenameStep (projectRoot: string, config: Old
   return specsToAutoMigrate.integration.length > 0 || specsToAutoMigrate.component.length > 0
 }
 
+async function anyComponentSpecsExist (projectRoot: string, config: OldCypressConfig) {
+  const componentFolder = getComponentFolder(config)
+
+  if (componentFolder === false) {
+    return false
+  }
+
+  const componentTestFiles = getComponentTestFilesGlobs(config)
+
+  return hasSpecFiles(projectRoot, componentFolder, componentTestFiles)
+}
+
 async function anyIntegrationSpecsExist (projectRoot: string, config: OldCypressConfig) {
   const integrationFolder = getIntegrationFolder(config)
 
@@ -117,18 +129,18 @@ export async function shouldShowRenameSupport (projectRoot: string, config: OldC
   return supportFile.includes(defaultSupportFile)
 }
 
-// if they have component testing configured, they will need to
+// if they have component testing configured using the defaults, they will need to
 // rename/move their specs.
-function shouldShowRenameManual (projectRoot: string, config: OldCypressConfig) {
+async function shouldShowRenameManual (projectRoot: string, config: OldCypressConfig) {
   const componentFolder = getComponentFolder(config)
 
-  if (componentFolder === false) {
+  const usingAllDefaults = componentFolder === 'cypress/component' && isDefaultTestFiles(config, 'component')
+
+  if (componentFolder === false || !usingAllDefaults) {
     return false
   }
 
-  const componentTestFiles = getComponentTestFilesGlobs(config)
-
-  return hasSpecFiles(projectRoot, componentFolder, componentTestFiles)
+  return anyComponentSpecsExist(projectRoot, config)
 }
 
 // All projects must move from cypress.json to cypress.config.js!
@@ -163,7 +175,7 @@ export async function getStepsForMigration (
 
     // if we are showing rename manual, this implies
     // component testing is configured.
-    if (step === 'setupComponent' && steps.includes('renameManual')) {
+    if (step === 'setupComponent' && await anyComponentSpecsExist(projectRoot, config)) {
       steps.push(step)
     }
   }
diff --git a/packages/data-context/src/sources/migration/utils.ts b/packages/data-context/src/sources/migration/utils.ts
index cdec56483f6b..706685701d52 100644
--- a/packages/data-context/src/sources/migration/utils.ts
+++ b/packages/data-context/src/sources/migration/utils.ts
@@ -416,7 +416,7 @@ function getSpecPattern (cfg: OldCypressConfig, testType: TestingType) {
   const customComponentFolder = cfg.component?.componentFolder ?? cfg.componentFolder ?? null
 
   if (testType === 'component' && customComponentFolder) {
-    return specPattern
+    return `${customComponentFolder}/${specPattern}`
   }
 
   if (testType === 'e2e') {
diff --git a/packages/data-context/test/unit/code-generator.spec.ts b/packages/data-context/test/unit/code-generator.spec.ts
index 8ae7fb39f1ba..ddae44c8cf71 100644
--- a/packages/data-context/test/unit/code-generator.spec.ts
+++ b/packages/data-context/test/unit/code-generator.spec.ts
@@ -244,7 +244,7 @@ describe('code-generator', () => {
     }).not.throw()
   })
 
-  it('should generate from scaffoldIntegration', async () => {
+  xit('should generate from scaffoldIntegration', async () => {
     const target = path.join(tmpPath, 'scaffold-integration')
     const action: Action = {
       templateDir: templates.scaffoldIntegration,
diff --git a/packages/data-context/test/unit/sources/migration/shouldShowSteps.spec.ts b/packages/data-context/test/unit/sources/migration/shouldShowSteps.spec.ts
index 192904e4de05..650d3bfb3fe1 100644
--- a/packages/data-context/test/unit/sources/migration/shouldShowSteps.spec.ts
+++ b/packages/data-context/test/unit/sources/migration/shouldShowSteps.spec.ts
@@ -102,7 +102,7 @@ describe('getStepsForMigration', () => {
     const config = fs.readJsonSync(path.join(cwd, 'cypress.json'))
 
     const actual = await getStepsForMigration(cwd, config)
-    const expected: Step[] = ['renameAuto', 'renameManual', 'renameSupport', 'configFile', 'setupComponent']
+    const expected: Step[] = ['renameAuto', 'renameSupport', 'configFile', 'setupComponent']
 
     expect(actual).to.eql(expected)
   })
@@ -122,7 +122,7 @@ describe('getStepsForMigration', () => {
     const config = fs.readJsonSync(path.join(cwd, 'cypress.json'))
 
     const actual = await getStepsForMigration(cwd, config)
-    const expected: Step[] = ['renameManual', 'configFile', 'setupComponent']
+    const expected: Step[] = ['configFile', 'setupComponent']
 
     expect(actual).to.eql(expected)
   })
diff --git a/packages/launchpad/cypress/e2e/migration.cy.ts b/packages/launchpad/cypress/e2e/migration.cy.ts
index d2d289561038..50ce03564531 100644
--- a/packages/launchpad/cypress/e2e/migration.cy.ts
+++ b/packages/launchpad/cypress/e2e/migration.cy.ts
@@ -1,5 +1,4 @@
 import type { e2eProjectDirs } from '@packages/frontend-shared/cypress/e2e/support/e2eProjectDirs'
-import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
 
 const renameAutoStep = `[data-cy="migration-step renameAuto"]`
 const renameManualStep = `[data-cy="migration-step renameManual"]`
@@ -27,7 +26,7 @@ function startMigrationFor (project: typeof e2eProjectDirs[number]) {
 }
 
 function skipCTMigration () {
-  cy.contains(`I'll do this later`).click()
+  cy.contains('Continue to next step').click()
 }
 
 function migrateAndVerifyConfig (configExtension: 'js' | 'ts' = 'js') {
@@ -72,19 +71,12 @@ describe('Full migration flow for each project', () => {
     startMigrationFor('migration-component-testing')
     // custom testFiles - cannot auto
     cy.get(renameAutoStep).should('not.exist')
-    cy.get(renameManualStep).should('exist')
+    cy.get(renameManualStep).should('not.exist')
     // supportFile is false - cannot migrate
     cy.get(renameSupportStep).should('not.exist')
     cy.get(setupComponentStep).should('exist')
     cy.get(configFileStep).should('exist')
 
-    // needs some time for the CT migration tool to kick in
-    cy.wait(1000)
-    // Migration workflow
-    cy.contains('src/button.spec.js')
-    cy.contains('src/input-spec.tsx')
-
-    skipCTMigration()
     migrateAndVerifyConfig()
     finishMigrationAndContinue()
   })
@@ -171,7 +163,7 @@ describe('Full migration flow for each project', () => {
     startMigrationFor('migration-e2e-component-default-test-files')
     // default testFiles - auto
     cy.get(renameAutoStep).should('exist')
-    cy.get(renameManualStep).should('exist')
+    cy.get(renameManualStep).should('not.exist')
     // supportFile is false - cannot migrate
     cy.get(renameSupportStep).should('exist')
     cy.get(setupComponentStep).should('exist')
@@ -180,11 +172,9 @@ describe('Full migration flow for each project', () => {
     // Migration workflow
     // before auto migration
     cy.contains('cypress/custom-integration/foo.spec.ts')
-    cy.contains('cypress/custom-component/button.spec.js')
 
     // after auto migration
     cy.contains('cypress/custom-integration/foo.cy.ts')
-    cy.contains('cypress/custom-component/button.cy.js')
 
     runAutoRename()
 
@@ -200,7 +190,6 @@ describe('Full migration flow for each project', () => {
       })
     })
 
-    skipCTMigration()
     renameSupport()
     migrateAndVerifyConfig()
     finishMigrationAndContinue()
@@ -394,7 +383,7 @@ describe('Full migration flow for each project', () => {
     // cannot rename anything automatically here, testFiles are customized
     cy.get(renameAutoStep).should('not.exist')
 
-    cy.get(renameManualStep).should('exist')
+    cy.get(renameManualStep).should('not.exist')
 
     // no supportFile rename for CT
     cy.get(renameSupportStep).should('not.exist')
@@ -402,7 +391,6 @@ describe('Full migration flow for each project', () => {
     cy.get(setupComponentStep).should('exist')
     cy.get(configFileStep).should('exist')
 
-    skipCTMigration()
     migrateAndVerifyConfig()
     finishMigrationAndContinue()
   })
@@ -511,15 +499,14 @@ describe('Migration', { viewportWidth: 1200 }, () => {
 
     // all steps
     cy.get(renameAutoStep).should('exist')
-    cy.get(renameManualStep).should('exist')
+    cy.get(renameManualStep).should('not.exist')
     cy.get(renameSupportStep).should('exist')
     cy.get(setupComponentStep).should('exist')
     cy.get(configFileStep).should('exist')
 
-    runAutoRename()
-    cy.findByText(`I'll do this later`).click()
-    cy.findByText(defaultMessages.migration.wizard.step3.button).click()
-    cy.findByText(defaultMessages.migration.wizard.step4.button).click()
+    cy.get('button').contains('Rename these specs for me').scrollIntoView().click()
+    cy.findByText('Rename the support file for me').click()
+    cy.findByText('Migrate the configuration for me').click()
 
     cy.withCtx(async (ctx) => {
       const configStats = await ctx.actions.file.checkIfFileExists('cypress.config.js')
diff --git a/system-tests/projects/migration-component-testing-customized/README.md b/system-tests/projects/migration-component-testing-customized/README.md
index 6dcab4abfb16..41029bbf9c2d 100644
--- a/system-tests/projects/migration-component-testing-customized/README.md
+++ b/system-tests/projects/migration-component-testing-customized/README.md
@@ -7,7 +7,7 @@ The following migration steps will be used during this migration:
 Steps:
 
 - [ ] automatic file rename
-- [x] manual file rename
+- [ ] manual file rename
 - [ ] rename support
 - [x] update config file
 - [x] setup component testing
@@ -18,7 +18,7 @@ Not used.
 
 ## Manual Files
 
-The user will need to rename and/or move their only component specs, `button.spec.js` and `input-spec.tsx`, to their new location. As long as these files are removed, this step is considered complete. We do not verify where it went, or what the new name and and extension are.
+Since the user has a custom componentFolder and testFiles pattern, we won't ask them to migrate away. We only do this if they are using the defaults.
 
 ## Rename supportFile
 
diff --git a/system-tests/projects/migration-component-testing-customized/expected-cypress.config.js b/system-tests/projects/migration-component-testing-customized/expected-cypress.config.js
index 0e97973e129c..8c382ac4e504 100644
--- a/system-tests/projects/migration-component-testing-customized/expected-cypress.config.js
+++ b/system-tests/projects/migration-component-testing-customized/expected-cypress.config.js
@@ -2,7 +2,9 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   component: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {},
-    specPattern: '**/*spec.{js,tsx}',
+    specPattern: 'src/**/*spec.{js,tsx}',
   },
 })
diff --git a/system-tests/projects/migration-component-testing-defaults/expected-cypress.config.js b/system-tests/projects/migration-component-testing-defaults/expected-cypress.config.js
index 2ae2ceee3cae..6cd61287ff58 100644
--- a/system-tests/projects/migration-component-testing-defaults/expected-cypress.config.js
+++ b/system-tests/projects/migration-component-testing-defaults/expected-cypress.config.js
@@ -2,6 +2,8 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   component: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {},
   },
 })
diff --git a/system-tests/projects/migration-component-testing/README.md b/system-tests/projects/migration-component-testing/README.md
index 89b13dcc4de3..a2ffad210c5e 100644
--- a/system-tests/projects/migration-component-testing/README.md
+++ b/system-tests/projects/migration-component-testing/README.md
@@ -7,7 +7,7 @@ The following migration steps will be used during this migration:
 Steps:
 
 - [ ] automatic file rename
-- [x] manual file rename
+- [ ] manual file rename
 - [ ] rename support
 - [x] update config file
 - [x] setup component testing
@@ -18,7 +18,7 @@ Not used. This is only used for E2E projects with a default `testFiles` or `inte
 
 ## Manual Files
 
-The user will need to rename and/or move their only component specs, `button.spec.js` and `input-spec.tsx`, to their new location. As long as these files are removed, this step is considered complete. We do not verify where it went, or what the new name and and extension are.
+We will not require manual migration, because the user is not using the default componentFolder or testFiles.
 
 ## Rename supportFile
 
diff --git a/system-tests/projects/migration-component-testing/expected-cypress.config.js b/system-tests/projects/migration-component-testing/expected-cypress.config.js
index 0e97973e129c..8c382ac4e504 100644
--- a/system-tests/projects/migration-component-testing/expected-cypress.config.js
+++ b/system-tests/projects/migration-component-testing/expected-cypress.config.js
@@ -2,7 +2,9 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   component: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {},
-    specPattern: '**/*spec.{js,tsx}',
+    specPattern: 'src/**/*spec.{js,tsx}',
   },
 })
diff --git a/system-tests/projects/migration-e2e-component-default-everything/expected-cypress.config.js b/system-tests/projects/migration-e2e-component-default-everything/expected-cypress.config.js
index a1cf3f4854cf..f2bf280292d2 100644
--- a/system-tests/projects/migration-e2e-component-default-everything/expected-cypress.config.js
+++ b/system-tests/projects/migration-e2e-component-default-everything/expected-cypress.config.js
@@ -2,11 +2,15 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {
       return require('./cypress/plugins/index.js')(on, config)
     },
   },
   component: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {},
   },
 })
diff --git a/system-tests/projects/migration-e2e-component-default-test-files/README.md b/system-tests/projects/migration-e2e-component-default-test-files/README.md
index d5d2bbcb78e1..68f8d2d33bf7 100644
--- a/system-tests/projects/migration-e2e-component-default-test-files/README.md
+++ b/system-tests/projects/migration-e2e-component-default-test-files/README.md
@@ -5,7 +5,7 @@ A project with E2E and CT, both using custom folders. Everything else default.
 The following migration steps will be used during this migration:
 
 - [x] automatic folder rename of cypress/integration to cypress/e2e
-- [x] manual file rename
+- [ ] manual file rename
 - [x] rename support
 - [x] update config file
 - [x] setup component testing
@@ -21,7 +21,7 @@ Unless the user skips this step, after this step, the filesystem will be:
 
 ## Manual Files
 
-The user will need to rename and/or move their only component spec, `button.cy.js` to its new location.
+No manual migration, since the user has a non default componentFolder.
 
 ## Rename supportFile
 
diff --git a/system-tests/projects/migration-e2e-component-default-test-files/expected-cypress.config.js b/system-tests/projects/migration-e2e-component-default-test-files/expected-cypress.config.js
index 06d1d70d8b81..05e4615a3699 100644
--- a/system-tests/projects/migration-e2e-component-default-test-files/expected-cypress.config.js
+++ b/system-tests/projects/migration-e2e-component-default-test-files/expected-cypress.config.js
@@ -2,13 +2,17 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {
       return require('./cypress/plugins/index.js')(on, config)
     },
     specPattern: 'cypress/custom-integration/**/*.cy.{js,jsx,ts,tsx}',
   },
   component: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {},
-    specPattern: '**/*.cy.{js,jsx,ts,tsx}',
+    specPattern: 'cypress/custom-component/**/*.cy.{js,jsx,ts,tsx}',
   },
 })
diff --git a/system-tests/projects/migration-e2e-custom-integration/expected-cypress.config.js b/system-tests/projects/migration-e2e-custom-integration/expected-cypress.config.js
index fe5b204c66ec..78a2cadb373b 100644
--- a/system-tests/projects/migration-e2e-custom-integration/expected-cypress.config.js
+++ b/system-tests/projects/migration-e2e-custom-integration/expected-cypress.config.js
@@ -2,6 +2,8 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {
       return require('./cypress/plugins/index.js')(on, config)
     },
diff --git a/system-tests/projects/migration-e2e-custom-test-files/expected-cypress.config.js b/system-tests/projects/migration-e2e-custom-test-files/expected-cypress.config.js
index 25dfb92237be..c44f6cbcc68e 100644
--- a/system-tests/projects/migration-e2e-custom-test-files/expected-cypress.config.js
+++ b/system-tests/projects/migration-e2e-custom-test-files/expected-cypress.config.js
@@ -2,6 +2,8 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {
       return require('./cypress/plugins/index.js')(on, config)
     },
diff --git a/system-tests/projects/migration-e2e-defaults/expected-cypress.config.js b/system-tests/projects/migration-e2e-defaults/expected-cypress.config.js
index 884fd557c5b6..294e9513923d 100644
--- a/system-tests/projects/migration-e2e-defaults/expected-cypress.config.js
+++ b/system-tests/projects/migration-e2e-defaults/expected-cypress.config.js
@@ -2,6 +2,8 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {
       return require('./cypress/plugins/index.js')(on, config)
     },
diff --git a/system-tests/projects/migration-e2e-fully-custom/expected-cypress.config.js b/system-tests/projects/migration-e2e-fully-custom/expected-cypress.config.js
index 980ed77f720d..578dcb9e02eb 100644
--- a/system-tests/projects/migration-e2e-fully-custom/expected-cypress.config.js
+++ b/system-tests/projects/migration-e2e-fully-custom/expected-cypress.config.js
@@ -2,6 +2,8 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {
       return require('./src/the-plugins-file.js')(on, config)
     },
diff --git a/system-tests/projects/migration-e2e-no-plugins-support-file/expected-cypress.config.js b/system-tests/projects/migration-e2e-no-plugins-support-file/expected-cypress.config.js
index 4e444c0228dc..4ae35a3ce5ca 100644
--- a/system-tests/projects/migration-e2e-no-plugins-support-file/expected-cypress.config.js
+++ b/system-tests/projects/migration-e2e-no-plugins-support-file/expected-cypress.config.js
@@ -2,6 +2,8 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {},
   },
 })
diff --git a/system-tests/projects/migration-typescript-project/expected-cypress.config.ts b/system-tests/projects/migration-typescript-project/expected-cypress.config.ts
index 7731714530f3..6a3497e6615e 100644
--- a/system-tests/projects/migration-typescript-project/expected-cypress.config.ts
+++ b/system-tests/projects/migration-typescript-project/expected-cypress.config.ts
@@ -2,6 +2,8 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {
       return require('./cypress/plugins/index.ts')(on, config)
     },
diff --git a/system-tests/projects/migration/README.md b/system-tests/projects/migration/README.md
index 218e04bbd89b..6128d55517b6 100644
--- a/system-tests/projects/migration/README.md
+++ b/system-tests/projects/migration/README.md
@@ -5,7 +5,7 @@ This is the "kitchen sink" of migrations. It has E2E and Component Testing, a bu
 The following migration steps will be used during this migration:
 
 - [x] automatic folder rename of cypress/integration to cypress/e2e
-- [x] manual file rename
+- [ ] manual file rename
 - [x] rename support
 - [x] update config file
 - [x] setup component testing
diff --git a/system-tests/projects/migration/expected-cypress.config.js b/system-tests/projects/migration/expected-cypress.config.js
index 85e4c82f300b..fed22e8136ca 100644
--- a/system-tests/projects/migration/expected-cypress.config.js
+++ b/system-tests/projects/migration/expected-cypress.config.js
@@ -5,6 +5,8 @@ module.exports = defineConfig({
   defaultCommandTimeout: 5000,
   fixturesFolder: false,
   e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {
       return require('./cypress/plugins/index.ts')(on, config)
     },
@@ -14,9 +16,11 @@ module.exports = defineConfig({
     specPattern: 'cypress/e2e/**/*.spec.{tsx,js}',
   },
   component: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
     setupNodeEvents (on, config) {},
     slowTestThreshold: 5000,
     retries: 1,
-    specPattern: '**/*.spec.{tsx,js}',
+    specPattern: 'src/**/*.spec.{tsx,js}',
   },
 })

From 577a77ced2ebf271a6e87ec98d92452b63482a33 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Thu, 10 Feb 2022 21:52:38 +1000
Subject: [PATCH 3/5] update tests

---
 packages/data-context/test/unit/util/migration.spec.ts | 6 +++---
 packages/launchpad/cypress/e2e/migration.cy.ts         | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/data-context/test/unit/util/migration.spec.ts b/packages/data-context/test/unit/util/migration.spec.ts
index ef462f771303..2bfb7bf0b310 100644
--- a/packages/data-context/test/unit/util/migration.spec.ts
+++ b/packages/data-context/test/unit/util/migration.spec.ts
@@ -295,7 +295,7 @@ describe('reduceConfig', () => {
     const config = { testFiles: '**/**.cy.js', componentFolder: 'src', integrationFolder: 'cypress/integration' }
     const newConfig = reduceConfig(config)
 
-    expect(newConfig.component.specPattern).to.eq(config.testFiles)
+    expect(newConfig.component.specPattern).to.eq('src/**/**.cy.js')
     expect(newConfig.e2e.specPattern).to.eq(`${config.integrationFolder}/${config.testFiles}`)
   })
 
@@ -311,7 +311,7 @@ describe('reduceConfig', () => {
     }
     const newConfig = reduceConfig(config)
 
-    expect(newConfig.component.specPattern).to.eq(config.testFiles)
+    expect(newConfig.component.specPattern).to.eq('src/**/**.cy.js')
     expect(newConfig.e2e.specPattern).to.eq(`${config.e2e.integrationFolder}/${config.testFiles}`)
   })
 
@@ -336,7 +336,7 @@ describe('reduceConfig', () => {
     }
     const newConfig = reduceConfig(config)
 
-    expect(newConfig.component.specPattern).to.eq(config.testFiles)
+    expect(newConfig.component.specPattern).to.eq(`higher/specificity/**/**.cy.js`)
     expect(newConfig.e2e.specPattern).to.eq(`${config.e2e.integrationFolder}/${config.testFiles}`)
   })
 
diff --git a/packages/launchpad/cypress/e2e/migration.cy.ts b/packages/launchpad/cypress/e2e/migration.cy.ts
index 50ce03564531..8ae7f98cf240 100644
--- a/packages/launchpad/cypress/e2e/migration.cy.ts
+++ b/packages/launchpad/cypress/e2e/migration.cy.ts
@@ -26,7 +26,7 @@ function startMigrationFor (project: typeof e2eProjectDirs[number]) {
 }
 
 function skipCTMigration () {
-  cy.contains('Continue to next step').click()
+  cy.contains(`I'll do this later`).click()
 }
 
 function migrateAndVerifyConfig (configExtension: 'js' | 'ts' = 'js') {

From ae16f30a8ce6acff66e26311673b9fa432116bbf Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Fri, 11 Feb 2022 14:14:27 +1000
Subject: [PATCH 4/5] fix test

---
 packages/data-context/test/unit/code-generator.spec.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/data-context/test/unit/code-generator.spec.ts b/packages/data-context/test/unit/code-generator.spec.ts
index ddae44c8cf71..36875822c520 100644
--- a/packages/data-context/test/unit/code-generator.spec.ts
+++ b/packages/data-context/test/unit/code-generator.spec.ts
@@ -244,10 +244,12 @@ describe('code-generator', () => {
     }).not.throw()
   })
 
-  xit('should generate from scaffoldIntegration', async () => {
+  it('should generate from scaffoldIntegration', async () => {
     const target = path.join(tmpPath, 'scaffold-integration')
     const action: Action = {
-      templateDir: templates.scaffoldIntegration,
+      // TODO(lachlan): once cypress-kitchesink is using e2e instead of integration,  remove
+      // this replace.
+      templateDir: templates.scaffoldIntegration.replace('e2e', 'integration'),
       target,
     }
 

From 319fb4b06c55da7b64df40a163c18f8b12e4dfb3 Mon Sep 17 00:00:00 2001
From: Cesar Avitia <cesar@cypress.io>
Date: Mon, 14 Feb 2022 11:10:46 -0700
Subject: [PATCH 5/5] remove e2e rename

---
 packages/data-context/test/unit/code-generator.spec.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/data-context/test/unit/code-generator.spec.ts b/packages/data-context/test/unit/code-generator.spec.ts
index 36875822c520..8ae7fb39f1ba 100644
--- a/packages/data-context/test/unit/code-generator.spec.ts
+++ b/packages/data-context/test/unit/code-generator.spec.ts
@@ -247,9 +247,7 @@ describe('code-generator', () => {
   it('should generate from scaffoldIntegration', async () => {
     const target = path.join(tmpPath, 'scaffold-integration')
     const action: Action = {
-      // TODO(lachlan): once cypress-kitchesink is using e2e instead of integration,  remove
-      // this replace.
-      templateDir: templates.scaffoldIntegration.replace('e2e', 'integration'),
+      templateDir: templates.scaffoldIntegration,
       target,
     }