fix: migration ui differences

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

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",

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

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)}
   },`
 }
@@ -412,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') {

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

@@ -247,7 +247,9 @@ describe('code-generator', () => {
   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,
     }
 

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

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

packages/frontend-shared/src/locales/en-US.json

@@ -503,7 +503,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",
@@ -518,8 +518,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"
         },
@@ -546,7 +547,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}."
@@ -562,13 +563,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": "Continue to next step",
@@ -580,7 +581,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"
       },

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"]`
@@ -72,19 +71,12 @@ describe('Full migration flow for each project', { retries: { openMode: 2, runMo
     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', { retries: { openMode: 2, runMo
     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', { retries: { openMode: 2, runMo
     // 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', { retries: { openMode: 2, runMo
       })
     })
 
-    skipCTMigration()
     renameSupport()
     migrateAndVerifyConfig()
     finishMigrationAndContinue()
@@ -394,15 +383,14 @@ describe('Full migration flow for each project', { retries: { openMode: 2, runMo
     // 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')
 
     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')

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