feat: Deprecate run-ct / open-ct, and update all examples to use --ct instead

cli/__snapshots__/cli_spec.js

@@ -18,10 +18,10 @@ exports['shows help for open --foo 1'] = `
   Options:
     -b, --browser <browser-path>     path to a custom browser to be added to the
                                      list of available browsers in Cypress
+    --component                      runs component tests
     -c, --config <config>            sets configuration values. separate multiple
                                      values with a comma. overrides any value in
                                      cypress.json.
-    --ct, --component                runs component tests
     -C, --config-file <config-file>  path to JSON file where configuration values
                                      are set. defaults to "cypress.json". pass
                                      "false" to disable.
@@ -66,7 +66,7 @@ exports['shows help for run --foo 1'] = `
   Options:
     -b, --browser <browser-name-or-path>       runs Cypress in the browser with the given name. if a filesystem path is supplied, Cypress will attempt to use the browser at that path.
     --ci-build-id <id>                         the unique identifier for a run on your CI provider. typically a "BUILD_ID" env var. this value is automatically detected for most CI providers
-    --ct, --component                          runs component tests
+    --component                                runs component tests
     -c, --config <config>                      sets configuration values. separate multiple values with a comma. overrides any value in cypress.json.
     -C, --config-file <config-file>            path to JSON file where configuration values are set. defaults to "cypress.json". pass "false" to disable.
     --e2e                                      runs end to end tests
@@ -218,7 +218,9 @@ exports['cli help command shows help 1'] = `
     open [options]     Opens Cypress in the interactive GUI.
     run [options]      Runs Cypress tests from the CLI without the GUI
     open-ct [options]  Opens Cypress component testing interactive mode.
-    run-ct [options]   Runs all Cypress Component Testing suites
+                       Deprecated: use "open --component"
+    run-ct [options]   Runs all Cypress component testing suites. Deprecated:
+                       use "run --component"
     install [options]  Installs the Cypress executable matching this package's
                        version
     verify [options]   Verifies that Cypress is installed correctly and
@@ -256,7 +258,9 @@ exports['cli help command shows help for -h 1'] = `
     open [options]     Opens Cypress in the interactive GUI.
     run [options]      Runs Cypress tests from the CLI without the GUI
     open-ct [options]  Opens Cypress component testing interactive mode.
-    run-ct [options]   Runs all Cypress Component Testing suites
+                       Deprecated: use "open --component"
+    run-ct [options]   Runs all Cypress component testing suites. Deprecated:
+                       use "run --component"
     install [options]  Installs the Cypress executable matching this package's
                        version
     verify [options]   Verifies that Cypress is installed correctly and
@@ -294,7 +298,9 @@ exports['cli help command shows help for --help 1'] = `
     open [options]     Opens Cypress in the interactive GUI.
     run [options]      Runs Cypress tests from the CLI without the GUI
     open-ct [options]  Opens Cypress component testing interactive mode.
-    run-ct [options]   Runs all Cypress Component Testing suites
+                       Deprecated: use "open --component"
+    run-ct [options]   Runs all Cypress component testing suites. Deprecated:
+                       use "run --component"
     install [options]  Installs the Cypress executable matching this package's
                        version
     verify [options]   Verifies that Cypress is installed correctly and
@@ -333,7 +339,9 @@ exports['cli unknown command shows usage and exits 1'] = `
     open [options]     Opens Cypress in the interactive GUI.
     run [options]      Runs Cypress tests from the CLI without the GUI
     open-ct [options]  Opens Cypress component testing interactive mode.
-    run-ct [options]   Runs all Cypress Component Testing suites
+                       Deprecated: use "open --component"
+    run-ct [options]   Runs all Cypress component testing suites. Deprecated:
+                       use "run --component"
     install [options]  Installs the Cypress executable matching this package's
                        version
     verify [options]   Verifies that Cypress is installed correctly and
@@ -458,7 +466,9 @@ exports['cli CYPRESS_INTERNAL_ENV allows and warns when staging environment 1']
     open [options]     Opens Cypress in the interactive GUI.
     run [options]      Runs Cypress tests from the CLI without the GUI
     open-ct [options]  Opens Cypress component testing interactive mode.
-    run-ct [options]   Runs all Cypress Component Testing suites
+                       Deprecated: use "open --component"
+    run-ct [options]   Runs all Cypress component testing suites. Deprecated:
+                       use "run --component"
     install [options]  Installs the Cypress executable matching this package's
                        version
     verify [options]   Verifies that Cypress is installed correctly and

cli/lib/cli.js

@@ -250,7 +250,7 @@ const addCypressRunCommand = (program) => {
   .description('Runs Cypress tests from the CLI without the GUI')
   .option('-b, --browser <browser-name-or-path>', text('browserRunMode'))
   .option('--ci-build-id <id>', text('ciBuildId'))
-  .option('--ct, --component', text('component'))
+  .option('--component', text('component'))
   .option('-c, --config <config>', text('config'))
   .option('-C, --config-file <config-file>', text('configFile'))
   .option('--e2e', text('e2e'))
@@ -389,8 +389,8 @@ module.exports = {
     .usage('[options]')
     .description('Opens Cypress in the interactive GUI.')
     .option('-b, --browser <browser-path>', text('browserOpenMode'))
+    .option('--component', text('component'))
     .option('-c, --config <config>', text('config'))
-    .option('--ct, --component', text('component'))
     .option('-C, --config-file <config-file>', text('configFile'))
     .option('-d, --detached [bool]', text('detached'), coerceFalse)
     .option('--e2e', text('e2e'))
@@ -419,7 +419,7 @@ module.exports = {
     program
     .command('open-ct')
     .usage('[options]')
-    .description('Opens Cypress component testing interactive mode.')
+    .description('Opens Cypress component testing interactive mode. Deprecated: use "open --component"')
     .option('-b, --browser <browser-path>', text('browserOpenMode'))
     .option('-c, --config <config>', text('config'))
     .option('-C, --config-file <config-file>', text('configFile'))
@@ -431,6 +431,17 @@ module.exports = {
     .option('--dev', text('dev'), coerceFalse)
     .action((opts) => {
       debug('opening Cypress')
+
+      const msg = `
+      ${logSymbols.warning} Warning: open-ct is deprecated and will be removed in a future release.
+
+      Use \`open --component\` instead.
+      `
+
+      logger.log()
+      logger.warn(stripIndent(msg))
+      logger.log()
+
       require('./exec/open')
       .start({ ...util.parseOpts(opts), testingType: 'component' })
       .catch(util.logErrorExit1)
@@ -439,7 +450,7 @@ module.exports = {
     program
     .command('run-ct')
     .usage('[options]')
-    .description('Runs all Cypress Component Testing suites')
+    .description('Runs all Cypress component testing suites. Deprecated: use "run --component"')
     .option('-b, --browser <browser-name-or-path>', text('browserRunMode'))
     .option('--ci-build-id <id>', text('ciBuildId'))
     .option('-c, --config <config>', text('config'))
@@ -462,6 +473,16 @@ module.exports = {
     .option('--dev', text('dev'), coerceFalse)
     .action((opts) => {
       debug('running Cypress run-ct')
+
+      const msg = `
+      ${logSymbols.warning} Warning: run-ct is deprecated and will be removed in a future release.
+      Use \`run --component\` instead.
+      `
+
+      logger.warn()
+      logger.warn(stripIndent(msg))
+      logger.warn()
+
       require('./exec/run')
       .start({ ...util.parseOpts(opts), testingType: 'component' })
       .then(util.exit)

cli/test/lib/cli_spec.js

@@ -629,12 +629,24 @@ describe('cli', () => {
     })
 
     it('spawns server with correct args for component-testing', () => {
+      this.exec('open --component --dev')
+      expect(spawn.start.firstCall.args[0]).to.include('--testing-type')
+      expect(spawn.start.firstCall.args[0]).to.include('component')
+    })
+
+    it('spawns server with correct args for depricated component-testing command', () => {
       this.exec('open-ct --dev')
       expect(spawn.start.firstCall.args[0]).to.include('--testing-type')
       expect(spawn.start.firstCall.args[0]).to.include('component')
     })
 
     it('runs server with correct args for component-testing', () => {
+      this.exec('run --component --dev')
+      expect(spawn.start.firstCall.args[0]).to.include('--testing-type')
+      expect(spawn.start.firstCall.args[0]).to.include('component')
+    })
+
+    it('runs server with correct args for depricated component-testing command', () => {
       this.exec('run-ct --dev')
       expect(spawn.start.firstCall.args[0]).to.include('--testing-type')
       expect(spawn.start.firstCall.args[0]).to.include('component')

cli/test/lib/exec/run_spec.js

@@ -197,8 +197,8 @@ describe('exec run', function () {
       })
     })
 
-    it('spawns with --testing-type component when given --ct', function () {
-      return run.start({ ct: true })
+    it('spawns with --testing-type component when given --component', function () {
+      return run.start({ component: true })
       .then(() => {
         expect(spawn.start).to.be.calledWith(['--run-project', process.cwd(), '--testing-type', 'component'])
       })

cli/types/cypress.d.ts

@@ -143,7 +143,7 @@ declare namespace Cypress {
 
   /**
    * Spec type for the given test. "integration" is the default, but
-   * tests run using `open-ct` will be "component"
+   * tests run using `open --component` will be "component"
    *
    * @see https://on.cypress.io/experiments
    */

npm/angular/package.json

@@ -7,8 +7,8 @@
   "scripts": {
     "build": "tsc --project tsconfig.lib.json",
     "watch": "tsc --project tsconfig.lib.json -w",
-    "cy:open": "node ../../scripts/cypress.js open-ct",
-    "cy:run": "node ../../scripts/cypress.js run-ct",
+    "cy:open": "node ../../scripts/cypress.js open --component",
+    "cy:run": "node ../../scripts/cypress.js run --component",
     "ng": "ng",
     "app-start": "ng serve",
     "app-build": "ng build",

npm/create-cypress-tests/src/main.ts

@@ -64,8 +64,8 @@ function printCypressCommandsHelper (options: { shouldSetupComponentTesting: boo
   printCommand('cypress run', 'Runs tests in headless mode.')
 
   if (options.shouldSetupComponentTesting) {
-    printCommand('cypress open-ct', 'Opens cypress component-testing web app.')
-    printCommand('cypress run-ct', 'Runs component testing in headless mode.')
+    printCommand('cypress open --component', 'Opens Cypress component testing interactive mode.')
+    printCommand('cypress run-ct', 'Runs all Cypress component testing suites.')
   }
 }
 

npm/design-system/package.json

@@ -8,9 +8,9 @@
     "build-prod": "yarn build",
     "build-storybook": "build-storybook",
     "build-style-types": "tsm \"src/css/derived/*.scss\" --nameFormat none --exportType default",
-    "cy:open": "node ../../scripts/cypress.js open-ct --project ${PWD}",
+    "cy:open": "node ../../scripts/cypress.js open --component --project ${PWD}",
     "cy:open:debug": "node --inspect-brk ../../scripts/start.js --component-testing --project ${PWD}",
-    "cy:run": "node ../../scripts/cypress.js run-ct --project ${PWD}",
+    "cy:run": "node ../../scripts/cypress.js run --component --project ${PWD}",
     "cy:run:debug": "node --inspect-brk ../../scripts/start.js --component-testing --run-project ${PWD}",
     "storybook": "start-storybook -p 6006",
     "test": "yarn cy:run",

npm/react/examples/a11y/package.json

@@ -3,8 +3,8 @@
   "description": "Testing component accessibility",
   "private": true,
   "scripts": {
-    "cy:open": "node ../../../../scripts/cypress open-ct",
-    "test": "node ../../../../scripts/cypress run-ct"
+    "cy:open": "node ../../../../scripts/cypress open --component",
+    "test": "node ../../../../scripts/cypress run --component"
   },
   "devDependencies": {
     "@cypress/react": "file:../../dist",

npm/react/examples/craco/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "cy:open": "node ../../../../scripts/cypress open-ct",
-    "test": "node ../../../../scripts/cypress run-ct",
+    "cy:open": "node ../../../../scripts/cypress open --component",
+    "test": "node ../../../../scripts/cypress run --component",
     "start": "craco start",
     "build": "craco build"
   },

npm/react/examples/find-webpack/README.md

@@ -71,7 +71,7 @@ Most tests will start with `mount` from `@cypress/react`. This is similar to `re
 Open the component testing runner with:
 
 ```sh
-yarn cypress open-ct
+yarn cypress open --component
 ```
 
 And select the spec to run.
@@ -80,7 +80,7 @@ And select the spec to run.
 
 Try making a change - the tests will re-run instantly. You not only immediately know if the test passed or failed, but be able to visually inspect and debug any changes.
 
-You can run all the specs with `yarn cypress run-ct`. This is useful for executing all the specs in a CI environment, or one last check before you commit and push your code!
+You can run all the specs with `yarn cypress run --component`. This is useful for executing all the specs in a CI environment, or one last check before you commit and push your code!
 
 ## Discussion
 
@@ -90,13 +90,13 @@ Cypress Component Testing is an alternative to a jsdom based testing environment
 - Visual. You can see exactly what is rendered. No more scrolling through a cryptic terminal log to figure out what is rendered or to debug - just open the devtools and browse the DOM.
 - Powered by Cypress - the most popular and reliable E2E testing tool out there.
 
-It also doubles as a *design environment*. You can see the component as you develop it, and hot reload give you a near instance feedback loop. It can potentially take the place of not only your Jest based test infrastructure, but your Storybook based design infrastructure as well. 
+It also doubles as a *design environment*. You can see the component as you develop it, and hot reload give you a near instance feedback loop. It can potentially take the place of not only your Jest based test infrastructure, but your Storybook based design infrastructure as well.
 
 Cypress Component Testing is still in alpha but the product is quickly evolving and promises to change the landscape of Component Testing.
 
 ## Conclusion
 
-Cypress Component Testing brings everything that is great about Cypress to Component Testing. Since the underlying adapters are built on libraries like Webpack, you don't need to throw away your entire test suite - incremental migration is more than possible. 
+Cypress Component Testing brings everything that is great about Cypress to Component Testing. Since the underlying adapters are built on libraries like Webpack, you don't need to throw away your entire test suite - incremental migration is more than possible.
 
 The visual aspect united testing and design in a single tool. My days of grepping a messy console output to figure out what the user will see are over - I can see exactly what the component will look like as my tests run.
 

npm/react/examples/find-webpack/package.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "cy:open": "node ../../../../scripts/cypress open-ct",
-    "test": "node ../../../../scripts/cypress run-ct"
+    "cy:open": "node ../../../../scripts/cypress open --component",
+    "test": "node ../../../../scripts/cypress run --component"
   },
   "dependencies": {
     "@types/react": "^17.0.0",

npm/react/examples/nextjs-webpack-5/package.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "cy:open": "node ../../../../scripts/cypress open-ct",
+    "cy:open": "node ../../../../scripts/cypress open --component",
     "dev": "next",
     "start": "next start",
-    "test": "node ../../../../scripts/cypress run-ct"
+    "test": "node ../../../../scripts/cypress run --component"
   },
   "dependencies": {
     "next": "10.1.3",

npm/react/examples/nextjs/package.json

@@ -6,11 +6,11 @@
     "build": "next build",
     "build:static": "next build && next out",
     "check-coverage": "check-coverage components/Search.jsx && check-coverage pages/index.js && check-coverage pages/router.js",
-    "cy:open": "node ../../../../scripts/cypress open-ct",
+    "cy:open": "node ../../../../scripts/cypress open --component",
     "dev": "next",
     "only-covered": "only-covered components/Search.jsx pages/index.js pages/router.js",
     "start": "next start",
-    "test": "node ../../../../scripts/cypress run-ct"
+    "test": "node ../../../../scripts/cypress run --component"
   },
   "devDependencies": {
     "@cypress/react": "file:../../dist",

npm/react/examples/react-scripts-folder/package.json

@@ -5,9 +5,9 @@
   "private": true,
   "scripts": {
     "check-coverage": "check-coverage src/App.js src/calc.js src/Child.js",
-    "cy:open": "node ../../../../scripts/cypress open-ct",
+    "cy:open": "node ../../../../scripts/cypress open --component",
     "only-covered": "only-covered src/App.js src/calc.js src/Child.js",
-    "test": "node ../../../../scripts/cypress run-ct"
+    "test": "node ../../../../scripts/cypress run --component"
   },
   "devDependencies": {
     "@cypress/react": "file:../../dist",

npm/react/examples/react-scripts-typescript/package.json

@@ -1,9 +1,9 @@
 {
   "private": true,
   "scripts": {
-    "cy:open": "node ../../../../scripts/cypress open-ct",
+    "cy:open": "node ../../../../scripts/cypress open --component",
     "start": "react-scripts start",
-    "test": "node ../../../../scripts/cypress run-ct"
+    "test": "node ../../../../scripts/cypress run --component"
   },
   "dependencies": {
     "react": "^17.0.1",

npm/react/examples/react-scripts/package.json

@@ -4,10 +4,10 @@
   "private": true,
   "scripts": {
     "check-coverage": "check-coverage src/App.js src/calc.js src/Child.js src/services.js src/RemotePizza.js cypress/fixtures/add.js",
-    "cy:open": "node ../../../../scripts/cypress open-ct",
+    "cy:open": "node ../../../../scripts/cypress open --component",
     "only-covered": "only-covered src/App.js src/calc.js src/Child.js src/services.js src/RemotePizza.js cypress/fixtures/add.js",
     "start": "react-scripts start",
-    "test": "node ../../../../scripts/cypress run-ct"
+    "test": "node ../../../../scripts/cypress run --component"
   },
   "devDependencies": {
     "@cypress/react": "file:../../dist",

npm/react/examples/sass-and-ts/package.json

@@ -4,9 +4,9 @@
   "private": true,
   "scripts": {
     "check-coverage": "check-coverage src/App.tsx",
-    "cy:open": "node ../../../../scripts/cypress open-ct",
+    "cy:open": "node ../../../../scripts/cypress open --component",
     "only-covered": "only-covered src/App.tsx",
-    "test": "node ../../../../scripts/cypress run-ct"
+    "test": "node ../../../../scripts/cypress run --component"
   },
   "dependencies": {
     "sass-loader": "10.0.2"

npm/react/examples/snapshots/package.json

@@ -4,9 +4,9 @@
   "private": true,
   "scripts": {
     "check-coverage": "check-coverage src/App.js",
-    "cy:open": "node ../../../../scripts/cypress open-ct",
+    "cy:open": "node ../../../../scripts/cypress open --component",
     "only-covered": "only-covered src/App.js",
-    "test": "node ../../../../scripts/cypress run-ct"
+    "test": "node ../../../../scripts/cypress run --component"
   },
   "devDependencies": {
     "@cypress/react": "file:../../dist",

npm/react/examples/tailwind/package.json

@@ -5,9 +5,9 @@
   "scripts": {
     "build:css": "tailwindcss build src/styles/tailwind.css -o src/styles/main.generated.css",
     "precy:open": "npm run build:css",
-    "cy:open": "node ../../../../scripts/cypress open-ct",
+    "cy:open": "node ../../../../scripts/cypress open --component",
     "pretest": "npm run build:css",
-    "test": "node ../../../../scripts/cypress run-ct"
+    "test": "node ../../../../scripts/cypress run --component"
   },
   "devDependencies": {
     "@cypress/react": "file:../../dist",