fix: do not show incorrectly support file migration step (#22015)

* fix: do not show incorrectly support file migration step

* Add supportFile

* Delete supportFile

* Update regexp

* Update comment

Co-authored-by: Matt Henkes <mjhenkes@gmail.com>

packages/data-context/src/sources/migration/codegen.ts

@@ -11,7 +11,7 @@ import { toPosix } from '../../util'
 import Debug from 'debug'
 import dedent from 'dedent'
 import { hasDefaultExport } from './parserUtils'
-import { LegacyCypressConfigJson, legacyIntegrationFolder } from '..'
+import { isDefaultSupportFile, LegacyCypressConfigJson, legacyIntegrationFolder } from '..'
 import { parse } from '@babel/parser'
 import generate from '@babel/generator'
 import _ from 'lodash'
@@ -421,7 +421,7 @@ export function reduceConfig (cfg: LegacyCypressConfigJson, options: CreateConfi
         // If the supportFile is set, but is the same value as the default one; where
         // we migrate it, we do not want to put the legacy value in the migrated config.
         // It can be .ts or .js
-        if (_.isNil(val) || !_.isBoolean(val) && val.match(/^cypress\/support($|\/index($|\.(ts|js)$))/)) {
+        if (isDefaultSupportFile(val)) {
           return acc
         }
 

packages/data-context/src/sources/migration/index.ts

@@ -8,3 +8,4 @@ export * from './legacyOptions'
 export * from './parserUtils'
 export * from './regexps'
 export * from './shouldShowSteps'
+export * from './utils'

packages/data-context/src/sources/migration/shouldShowSteps.ts

@@ -1,7 +1,7 @@
 import globby from 'globby'
 import path from 'path'
 import { MIGRATION_STEPS } from '@packages/types'
-import { applyMigrationTransform, getSpecs, legacyIntegrationFolder, tryGetDefaultLegacySupportFile } from '.'
+import { applyMigrationTransform, getSpecs, isDefaultSupportFile, legacyIntegrationFolder, tryGetDefaultLegacySupportFile } from '.'
 import type { LegacyCypressConfigJson } from '..'
 
 export const defaultTestFilesGlob = '**/*.{js,ts,jsx,tsx,coffee,cjsx}'
@@ -117,7 +117,6 @@ export async function shouldShowRenameSupport (projectRoot: string, config: Lega
     return false
   }
 
-  const defaultSupportFile = 'cypress/support/index.'
   let supportFile = config.e2e?.supportFile ?? config.supportFile
 
   if (supportFile === undefined) {
@@ -136,7 +135,7 @@ export async function shouldShowRenameSupport (projectRoot: string, config: Lega
 
   // if the support file is custom, we don't show the rename step
   // only if the support file matches the default do we show the rename step
-  return supportFile.includes(defaultSupportFile)
+  return isDefaultSupportFile(supportFile)
 }
 
 // if they have component testing configured using the defaults, they will need to

packages/data-context/src/sources/migration/utils.ts

@@ -0,0 +1,9 @@
+import _ from 'lodash'
+
+export const isDefaultSupportFile = (supportFile: string) => {
+  if (_.isNil(supportFile) || !_.isBoolean(supportFile) && supportFile.match(/(^|\.+\/)cypress\/support($|\/index($|\.(ts|js|coffee)$))/)) {
+    return true
+  }
+
+  return false
+}

packages/data-context/test/unit/sources/migration/codegen.spec.ts

@@ -529,6 +529,8 @@ describe('reduceConfig', () => {
     expect(reduceConfig({ supportFile: 'cypress/support' }, options).e2e.supportFile).to.not.exist
     expect(reduceConfig({ supportFile: 'cypress/support/index' }, options).e2e.supportFile).to.not.exist
     expect(reduceConfig({ supportFile: 'cypress/support/index.js' }, options).e2e.supportFile).to.not.exist
+    expect(reduceConfig({ supportFile: './cypress/support/index.js' }, options).e2e.supportFile).to.not.exist
+    expect(reduceConfig({ supportFile: '../cypress/support/index.js' }, options).e2e.supportFile).to.not.exist
   })
 
   it('should exclude the pluginsFile', () => {

packages/launchpad/cypress/e2e/migration.cy.ts

@@ -503,6 +503,40 @@ describe('Full migration flow for each project', { retries: { openMode: 0, runMo
     checkOutcome()
   })
 
+  it('completes journey for migration-e2e-custom-supportFile', () => {
+    startMigrationFor('migration-e2e-custom-supportFile')
+    // default testFiles but custom integration - can rename automatically
+    cy.get(renameAutoStep).should('exist')
+    // no CT
+    cy.get(renameManualStep).should('not.exist')
+    // supportFile is custom - cannot rename
+    cy.get(renameSupportStep).should('not.exist')
+    cy.get(setupComponentStep).should('not.exist')
+    cy.get(configFileStep).should('exist')
+
+    // Migration workflow
+    // before auto migration
+    cy.contains('cypress/integration/basic.spec.js')
+
+    // after auto migration
+    cy.contains('cypress/e2e/basic.cy.js')
+
+    runAutoRename()
+
+    cy.withRetryableCtx(async (ctx) => {
+      const specs = ['cypress/e2e/basic.cy.js']
+
+      for (const spec of specs) {
+        const stats = await ctx.file.checkIfFileExists(ctx.path.join(spec))
+
+        expect(stats).to.not.be.null
+      }
+    })
+
+    migrateAndVerifyConfig()
+    checkOutcome()
+  })
+
   it('completes journey for migration-e2e-custom-supportFile-default-value', () => {
     startMigrationFor('migration-e2e-custom-supportFile-default-value')
     // default testFiles but custom integration - can rename automatically

system-tests/projects/migration-e2e-custom-supportFile/README.md

@@ -0,0 +1,32 @@
+## Migration E2E Custom SupportFile
+
+An e2e project with a custom `supportFile` named `src/platform/testing/e2e/cypress/support/index.js`. It includes
+the default value on the path but is not the default.
+
+The following migration steps will be used during this migration:
+
+- [x] automatic file rename
+- [ ] manual file rename
+- [] rename support
+- [x] update config file
+- [ ] setup component testing
+
+
+## Automatic Migration
+
+Unless the user skips this step, after this step, the filesystem will be:
+
+| Before | After|
+|---|---|
+| `src/basic.test.js` | `src/basic.cy.js` |
+
+## Manual Files
+
+This step is not used.
+
+## Update Config
+
+We can migrate to the new `cypress.config.js`. The expected output is in `expected-cypress.config.js`. The main points are:
+
+
+The expected output is in [`expected-cypress.config.js`](./expected-cypress.config.js).

system-tests/projects/migration-e2e-custom-supportFile/cypress.json

@@ -0,0 +1,3 @@
+{
+  "supportFile": "src/platform/testing/e2e/cypress/support/index.js"
+}

system-tests/projects/migration-e2e-custom-supportFile/expected-cypress.config.js

@@ -0,0 +1,12 @@
+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)
+    },
+    supportFile: 'src/platform/testing/e2e/cypress/support/index.js',
+  },
+})

system-tests/projects/migration-e2e-custom-supportFile/src/platform/testing/e2e/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

system-tests/projects/migration-e2e-custom-supportFile/src/platform/testing/e2e/cypress/support/index.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')