fix(launchpad): support default export (#20383)

Co-authored-by: David Munechika <david.munechika@gatech.edu>
Co-authored-by: ElevateBart <ledouxb@gmail.com>
Co-authored-by: Barthélémy Ledoux <bart@cypress.io>

packages/data-context/__snapshots__/codegen.spec.ts.js

@@ -7,7 +7,7 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./')(on, config)
+      return require('./cypress/plugins/index.js')(on, config)
     },
   },
 })
@@ -22,7 +22,7 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./')(on, config)
+      return require('./cypress/plugins/index.js')(on, config)
     },
     baseUrl: 'localhost:3000',
   },
@@ -38,7 +38,7 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./')(on, config)
+      return require('./cypress/plugins/index.js')(on, config)
     },
   },
 })
@@ -54,7 +54,7 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./')(on, config)
+      return require('./cypress/plugins/index.js')(on, config)
     },
     retries: 2,
     baseUrl: 'localhost:300',
@@ -71,7 +71,22 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./')(on, config)
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+  },
+})
+
+`
+
+exports['cypress.config.js generation should handle export default in plugins file 1'] = `
+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').default(on, config)
     },
   },
 })
@@ -86,7 +101,7 @@ module.exports = defineConfig({
     // 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)
+      return require('./cypress/plugins/index.js')(on, config)
     },
   },
 })

packages/data-context/package.json

@@ -14,6 +14,7 @@
     "test-unit": "mocha -r @packages/ts/register --config ./test/.mocharc.js"
   },
   "dependencies": {
+    "@babel/parser": "7.13.0",
     "@storybook/csf-tools": "^6.4.0-alpha.38",
     "@urql/core": "2.3.1",
     "@urql/exchange-execute": "1.1.0",
@@ -46,6 +47,7 @@
     "wonka": "^4.0.15"
   },
   "devDependencies": {
+    "@babel/types": "7.17.0",
     "@packages/config": "0.0.0-development",
     "@packages/errors": "0.0.0-development",
     "@packages/example": "0.0.0-development",

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

@@ -9,8 +9,10 @@ import { substitute } from './autoRename'
 import { supportFileRegexps } from './regexps'
 import type { MigrationFile } from '../MigrationDataSource'
 import { toPosix } from '../../util'
-
 import Debug from 'debug'
+import dedent from 'dedent'
+import { hasDefaultExport } from './parserUtils'
+
 const debug = Debug('cypress:data-context:sources:migration:codegen')
 
 type ConfigOptions = {
@@ -54,7 +56,10 @@ export interface CreateConfigOptions {
 }
 
 export async function createConfigString (cfg: OldCypressConfig, options: CreateConfigOptions) {
-  return createCypressConfig(reduceConfig(cfg), await getPluginRelativePath(cfg, options.projectRoot), options)
+  const newConfig = reduceConfig(cfg)
+  const relativePluginPath = await getPluginRelativePath(cfg, options.projectRoot)
+
+  return createCypressConfig(newConfig, relativePluginPath, options)
 }
 
 interface FileToBeMigratedManually {
@@ -172,7 +177,7 @@ function createCypressConfig (config: ConfigOptions, pluginPath: string, options
   const globalString = Object.keys(config.global).length > 0 ? `${formatObjectForConfig(config.global)},` : ''
   const componentString = options.hasComponentTesting ? createComponentTemplate(config.component) : ''
   const e2eString = options.hasE2ESpec
-    ? createE2eTemplate(pluginPath, options.hasPluginsFile, config.e2e)
+    ? createE2ETemplate(pluginPath, options, config.e2e)
     : ''
 
   if (defineConfigAvailable(options.projectRoot)) {
@@ -202,18 +207,33 @@ function formatObjectForConfig (obj: Record<string, unknown>) {
   return JSON.stringify(obj, null, 2).replace(/^[{]|[}]$/g, '') // remove opening and closing {}
 }
 
-function createE2eTemplate (pluginPath: string, hasPluginsFile: boolean, options: Record<string, unknown>) {
-  const requirePlugins = `return require('./${pluginPath}')(on, config)`
+function createE2ETemplate (pluginPath: string, createConfigOptions: CreateConfigOptions, options: Record<string, unknown>) {
+  if (!createConfigOptions.hasPluginsFile) {
+    return dedent`
+      e2e: {
+        setupNodeEvents(on, config) {}
+      }
+    `
+  }
+
+  const pluginFile = fs.readFileSync(path.join(createConfigOptions.projectRoot, pluginPath), 'utf8')
+  const relPluginsPath = path.normalize(`'./${pluginPath}'`)
 
-  const setupNodeEvents = `// We've imported your old cypress plugins here.
+  const requirePlugins = hasDefaultExport(pluginFile)
+    ? `return require(${relPluginsPath}).default(on, config)`
+    : `return require(${relPluginsPath})(on, config)`
+
+  const setupNodeEvents = dedent`
+  // We've imported your old cypress plugins here.
   // You may want to clean this up later by importing these.
   setupNodeEvents(on, config) {
-    ${hasPluginsFile ? requirePlugins : ''}
+    ${requirePlugins}
   }`
 
-  return `e2e: {
-    ${setupNodeEvents},${formatObjectForConfig(options)}
-  },`
+  return dedent`
+    e2e: {
+      ${setupNodeEvents},${formatObjectForConfig(options)}
+    },`
 }
 
 function createComponentTemplate (options: Record<string, unknown>) {

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

@@ -0,0 +1,47 @@
+import { parse, ParserOptions } from '@babel/parser'
+import { visit } from 'recast'
+import type * as bt from '@babel/types'
+
+const babelParserOptions: ParserOptions = {
+  sourceType: 'module',
+  strictMode: false,
+  tokens: true,
+  plugins: [
+    'decorators-legacy',
+    'doExpressions',
+    'objectRestSpread',
+    'classProperties',
+    'classPrivateProperties',
+    'classPrivateMethods',
+    'exportDefaultFrom',
+    'exportNamespaceFrom',
+    'asyncGenerators',
+    'functionBind',
+    'functionSent',
+    'dynamicImport',
+    'numericSeparator',
+    'optionalChaining',
+    'importMeta',
+    'bigInt',
+    'optionalCatchBinding',
+    'throwExpressions',
+    'nullishCoalescingOperator',
+    'typescript',
+  ],
+}
+
+export function hasDefaultExport (src: string): boolean {
+  const ast = parse(src, babelParserOptions) as bt.File
+
+  let hasDefault = false
+
+  visit(ast, {
+    visitExportDefaultDeclaration () {
+      hasDefault = true
+
+      return false
+    },
+  })
+
+  return hasDefault
+}

packages/data-context/test/unit/helper.ts

@@ -1,5 +1,6 @@
 // necessary to have mocha types working correctly
 import 'mocha'
+import path from 'path'
 import { e2eProjectDirs } from '@packages/frontend-shared/cypress/e2e/support/e2eProjectDirs'
 import Fixtures from '@tooling/system-tests/lib/fixtures'
 import { DataContext, DataContextConfig } from '../../src'
@@ -8,6 +9,10 @@ import type { BrowserApiShape } from '../../src/sources/BrowserDataSource'
 import type { AppApiShape, AuthApiShape, ElectronApiShape, LocalSettingsApiShape, ProjectApiShape } from '../../src/actions'
 import { InjectedConfigApi } from '../../src/data'
 
+export function getSystemTestProject (project: typeof e2eProjectDirs[number]) {
+  return path.join(__dirname, '..', '..', '..', '..', 'system-tests', 'projects', project)
+}
+
 export async function scaffoldMigrationProject (project: typeof e2eProjectDirs[number]) {
   Fixtures.removeProject(project)