feat: support ct/e2e specific overrides in cypress.json

cli/schema/cypress.schema.json

@@ -276,6 +276,16 @@
       "type": "boolean",
       "default": false,
       "description": "Enables including elements within the shadow DOM when using querying commands (e.g. cy.get(), cy.find()). Can be set globally in cypress.json, per-suite or per-test in the test configuration object, or programmatically with Cypress.config()"
+    },
+    "component": {
+      "type": "object",
+      "default": {},
+      "description": "Any component runner specific overrides"
+    },
+    "e2e": {
+      "type": "object",
+      "default": {},
+      "description": "Any e2e runner specific overrides"
     }
   }
 }

cli/types/cypress.d.ts

@@ -8,7 +8,7 @@ declare namespace Cypress {
   type RequestBody = string | object
   type ViewportOrientation = 'portrait' | 'landscape'
   type PrevSubject = 'optional' | 'element' | 'document' | 'window'
-  type PluginConfig = (on: PluginEvents, config: PluginConfigOptions) => void | ConfigOptions | Promise<ConfigOptions>
+  type PluginConfig = (on: PluginEvents, config: PluginConfigOptions, mode: 'e2e' | 'component') => void | ConfigOptions | Promise<ConfigOptions>
 
   interface CommandOptions {
     prevSubject: boolean | PrevSubject | PrevSubject[]

npm/react/cypress/component/viewport-spec.jsx

@@ -31,7 +31,7 @@ describe('cy.viewport', () => {
       minima libero vel? Nam sequi iusto quod fugit vel rerum eligendi beatae voluptatibus numquam.
     </p>)
 
-    expect(getComputedStyle(window.parent.document.querySelector('iframe').parentElement).transform).to.contain('matrix(0.8')
+    expect(getComputedStyle(window.parent.document.querySelector('iframe').parentElement).transform).to.contain('matrix(1')
     cy.viewport(2000, 200).should(() => {
       expect(getComputedStyle(window.parent.document.querySelector('iframe').parentElement).transform).not.to.contain('matrix(1')
     })

npm/react/cypress/plugins/index.js

@@ -60,7 +60,11 @@ const webpackConfig = {
 /**
  * @type Cypress.PluginConfig
  */
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
+  if (mode !== 'component') {
+    throw Error('This is an component project. mode should be `component`.')
+  }
+
   on('dev-server:start', (options) => {
     return startDevServer({ options, webpackConfig, disableLazyCompilation: false })
   })

npm/vue/cypress/plugins/index.js

@@ -5,7 +5,11 @@ const webpackConfig = require('../../webpack.config')
 /**
  * @type Cypress.PluginConfig
  */
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
+  if (mode !== 'component') {
+    throw Error('This is a component testing project. mode should be `component`.')
+  }
+
   require('@cypress/code-coverage/task')(on, config)
   on('dev-server:start', (options) => startDevServer({ options, webpackConfig }))
 

packages/server-ct/src/project-ct.ts

@@ -47,7 +47,7 @@ export class ProjectCt extends ProjectBase<ServerCt> {
     this.server.socket.changeToUrl(targetUrl)
   }
 
-  open (options) {
+  open (options: Record<string, unknown>) {
     this._server = new ServerCt()
 
     return super.open(options, {
@@ -85,6 +85,7 @@ export class ProjectCt extends ProjectBase<ServerCt> {
     return plugins.init(allowedCfg, {
       projectRoot: this.projectRoot,
       configFile: settings.pathToConfigFile(this.projectRoot, options),
+      mode: options.mode,
     })
     .then((modifiedCfg) => {
       debug('plugin config yielded: %o', modifiedCfg)

packages/server/lib/open_project.js

@@ -328,7 +328,7 @@ const moduleFactory = () => {
       debug('opening project %s', path)
       debug('and options %o', options)
 
-      return openProject.open(options)
+      return openProject.open({ ...options, mode: args.testingType })
       .return(this)
     },
   }

packages/server/lib/plugins/child/run_plugins.js

@@ -37,7 +37,13 @@ const getDefaultPreprocessor = function (config) {
 
 let plugins
 
-const load = (ipc, config, pluginsFile) => {
+/**
+ * @param {EventEmitter} ipc
+ * @param {object} config
+ * @param {string} pluginsFile
+ * @param {'component' | 'e2e'} string
+ */
+const load = (ipc, config, pluginsFile, mode) => {
   debug('run plugins function')
 
   let eventIdCount = 0
@@ -87,7 +93,7 @@ const load = (ipc, config, pluginsFile) => {
   .try(() => {
     debug('run plugins function')
 
-    return plugins(register, config)
+    return plugins(register, config, mode)
   })
   .tap(() => {
     if (!registeredEventsByName['file:preprocessor']) {
@@ -192,10 +198,10 @@ const runPlugins = (ipc, pluginsFile, projectRoot) => {
     return
   }
 
-  ipc.on('load', (config) => {
+  ipc.on('load', (config, mode) => {
     debug('plugins load file "%s"', pluginsFile)
     debug('passing config %o', config)
-    load(ipc, config, pluginsFile)
+    load(ipc, config, pluginsFile, mode)
   })
 
   ipc.on('execute', (event, ids, args) => {

packages/server/lib/plugins/index.js

@@ -113,7 +113,7 @@ const init = (config, options) => {
       version: pkg.version,
     })
 
-    ipc.send('load', config)
+    ipc.send('load', config, options.mode)
 
     ipc.on('loaded', (newCfg, registrations) => {
       _.omit(config, 'projectRoot', 'configFile')

packages/server/lib/project-e2e.ts

@@ -14,7 +14,7 @@ export class ProjectE2E extends ProjectBase<ServerE2E> {
     return 'e2e'
   }
 
-  open (options) {
+  open (options: Record<string, unknown>) {
     this._server = new ServerE2E()
 
     return super.open(options, {
@@ -59,6 +59,7 @@ export class ProjectE2E extends ProjectBase<ServerE2E> {
     return plugins.init(cfg, {
       projectRoot: this.projectRoot,
       configFile: settings.pathToConfigFile(this.projectRoot, options),
+      mode: options.mode,
       onError (err) {
         debug('got plugins error', err.stack)
 

packages/server/lib/util/settings.js

@@ -93,6 +93,10 @@ module.exports = {
     }, _.cloneDeep(obj))
   },
 
+  isComponentTesting (options = {}) {
+    return options.experimentalComponentTesting || options.componentTesting || options.testingType === 'component'
+  },
+
   configFile (options = {}) {
     return options.configFile === false ? false : (options.configFile || 'cypress.json')
   },
@@ -151,6 +155,16 @@ module.exports = {
     .catch({ code: 'ENOENT' }, () => {
       return this._write(file, {})
     }).then((json = {}) => {
+      if (this.isComponentTesting(options) && 'component' in json) {
+        json = { ...json, ...json.component }
+        delete json.component
+      }
+
+      if (!this.isComponentTesting(options) && 'e2e' in json) {
+        json = { ...json, ...json.e2e }
+        delete json.e2e
+      }
+
       const changed = this._applyRewriteRules(json)
 
       // if our object is unchanged

packages/server/test/integration/plugins_spec.js

@@ -26,6 +26,7 @@ describe('lib/plugins', () => {
 
     const options = {
       onWarning,
+      mode: 'e2e',
     }
 
     return plugins.init(projectConfig, options)

packages/server/test/support/fixtures/projects/chrome-browser-preferences/cypress/plugins/index.js

@@ -3,7 +3,11 @@ const { expect } = require('chai')
 const fse = require('fs-extra')
 const path = require('path')
 
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
+  if (mode !== 'e2e') {
+    throw Error('This is an e2e project. mode should be `e2e`.')
+  }
+
   const parentPid = process.ppid
   let { PATH_TO_CHROME_PROFILE } = config.env
 

packages/server/test/support/fixtures/projects/component-tests/cypress/plugins/index.js

@@ -13,7 +13,11 @@ const webpackConfig = {
 /**
  * @type Cypress.PluginConfig
  */
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
+  if (mode !== 'e2e') {
+    throw Error('This is an e2e project. mode should be `e2e`.')
+  }
+
   require('@cypress/code-coverage/task')(on, config)
   on('dev-server:start', (options) => startDevServer({ options, webpackConfig }))
 

packages/server/test/support/fixtures/projects/e2e/cypress/plugins/index.js

@@ -11,7 +11,11 @@ const { useFixedFirefoxResolution } = require('../../../utils')
 /**
  * @type {Cypress.PluginConfig}
  */
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
+  if (mode !== 'e2e') {
+    throw Error('This is an e2e project. mode should be `e2e`.')
+  }
+
   let performance = {
     track: () => Promise.resolve(),
   }

packages/server/test/support/fixtures/projects/firefox-memory/cypress/plugins/index.js

@@ -20,7 +20,11 @@ let timings = []
 let rss = []
 let intervalId
 
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
+  if (mode !== 'e2e') {
+    throw Error('This is an e2e project. mode should be `e2e`.')
+  }
+
   on('task', {
     'console' (...args) {
       console.log(...args)

packages/server/test/support/fixtures/projects/plugin-before-browser-launch-deprecation/cypress/plugins/index.js

@@ -109,7 +109,11 @@ const getHandlersByType = (type) => {
   }
 }
 
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
+  if (mode !== 'e2e') {
+    throw Error('This is an e2e project. mode should be `e2e`.')
+  }
+
   const beforeBrowserLaunchHandler = config.env.BEFORE_BROWSER_LAUNCH_HANDLER
 
   if (!beforeBrowserLaunchHandler) {

packages/server/test/support/fixtures/projects/plugin-config-version/cypress/plugins/index.js

@@ -1,6 +1,10 @@
 const semver = require('semver')
 
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
+  if (mode !== 'e2e') {
+    throw Error('This is an e2e project. mode should be `e2e`.')
+  }
+
   if (!semver.valid(config.version)) {
     throw new Error('config.version is invalid')
   }

packages/server/test/support/fixtures/projects/plugin-config/cypress/plugins/index.js

@@ -1,4 +1,8 @@
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
+  if (mode !== 'e2e') {
+    throw Error('This is an e2e project. mode should be `e2e`.')
+  }
+
   return new Promise((resolve) => {
     setTimeout(resolve, 100)
   })

packages/server/test/support/fixtures/projects/plugin-event-deprecated/cypress/plugins/index.js

@@ -1,4 +1,8 @@
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
+  if (mode !== 'e2e') {
+    throw Error('This is an e2e project. mode should be `e2e`.')
+  }
+
   if (config.env.NO_MUTATE_RETURN) {
     on('before:browser:launch', (browser, options) => {
       // this will emit a warning

packages/server/test/support/fixtures/projects/read-only-project-root/cypress/plugins/index.js

@@ -1,7 +1,11 @@
 const fs = require('fs')
 const { expect } = require('chai')
 
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
+  if (mode !== 'e2e') {
+    throw Error('This is an e2e project. mode should be `e2e`.')
+  }
+
   expect(process.geteuid()).to.not.eq(0)
   console.log('✅ not running as root')
 

packages/server/test/support/fixtures/projects/retries-2/cypress/plugins/index.js

@@ -5,7 +5,11 @@ const { useFixedFirefoxResolution } = require('../../../utils')
 /**
  * @type {Cypress.PluginConfig}
  */
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
+  if (mode !== 'e2e') {
+    throw Error('This is an e2e project. mode should be `e2e`.')
+  }
+
   on('before:browser:launch', (browser, options) => {
     useFixedFirefoxResolution(browser, options, config)
 

packages/server/test/unit/settings_spec.js

@@ -111,6 +111,42 @@ describe('lib/settings', () => {
         })
       })
 
+      it('promises cypress.json and merges CT specific properties for via testingType: component', function () {
+        return this.setup({ a: 'b', component: { a: 'c' } })
+        .then(() => {
+          return settings.read(projectRoot, { testingType: 'component' })
+        }).then((obj) => {
+          expect(obj).to.deep.eq({ a: 'c' })
+        })
+      })
+
+      it('promises cypress.json and merges CT specific properties for via componentTesting: true', function () {
+        return this.setup({ a: 'b', component: { a: 'c' } })
+        .then(() => {
+          return settings.read(projectRoot, { componentTesting: true })
+        }).then((obj) => {
+          expect(obj).to.deep.eq({ a: 'c' })
+        })
+      })
+
+      it('promises cypress.json and merges CT specific properties for via experimentalComponentTesting: true', function () {
+        return this.setup({ a: 'b', component: { a: 'c' } })
+        .then(() => {
+          return settings.read(projectRoot, { experimentalComponentTesting: true })
+        }).then((obj) => {
+          expect(obj).to.deep.eq({ a: 'c' })
+        })
+      })
+
+      it('promises cypress.json and merges e2e specific properties', function () {
+        return this.setup({ a: 'b', e2e: { a: 'c' } })
+        .then(() => {
+          return settings.read(projectRoot)
+        }).then((obj) => {
+          expect(obj).to.deep.eq({ a: 'c' })
+        })
+      })
+
       it('renames commandTimeout -> defaultCommandTimeout', function () {
         return this.setup({ commandTimeout: 30000, foo: 'bar' })
         .then(() => {