feat: create-cypress-tests installation wizard (#9563)

* Remove unused stuff

* Fix eslint errors

* Use local cypress running script

* Fix dependency resolution

* Revert "Fix dependency resolution"

This reverts commit 01a70be.

* Add @cypress/react CI

* Properly resolve @types pacakges

* Run tests with mocha

* Fix cypress tests

* Fix or skip some specs

* Add retries to the card-spec.js

* Remove jest mocks

* Run e2e examples on CI

* Fix yarn cache key

* Fix e2e examples jobs

* Rename cypress-react-unit-test with @cypress/react

* Fix circleci.yml

* Revert "Fix e2e examples jobs"

This reverts commit efcc7c4.

* Revert " Rename cypress-react-unit-test with @cypress/react"

This reverts commit 4febfcc.

* Replce cypress-react-unit-test with @cypress/react

* Persist build artifacts

* Fix working directory paths circle.yml

* Fix more CI

* adding yarn.lock files

* Make package.json for  folder

* Remove .npmrc

* Update circle.yml

* Remove unused files

* Copy plugins files to the "dist" folder

* Fix links to the github repos

* Move init wizard from npm/react/init to npm/wizard

* Move init wizard from npm/react/init to npm/wizard

* Implement initial vue template

* Run wizard tests on CI

* Refactor continue: bool to success: bool for better code readability

* Fix circleci.yml

* Use only absolute paths for tests

* Stub process.exit calls

* Remove useless comments

* Add installation cypress to the wizard logic

* More improvements

* Include packages/examples/cypress into git

* Commit new files

* Use packages/example as SST for generated files

* Last improvements for wizard

* Update packages/server/lib/scaffold.js

* Rename wizard to create-cypress-tests

* Fix circleci config

* Fix snapshot tests

* Run all create-cypress-tests on ci

* Do not install plugins and scaffold files from kitchensink

* Ignore integration/examples folder for packages/example

* Run create-cypress-tests-tests on CI

* Add copy example cross-platform script

* Use copy example script in tests

* feat: create-cypress-tests auto-inject config (#9116)

* Implement the basic babel code transformation for configs

* Add more tests for edge-cases

* Add snapshot tests for autogenerated code for each template

* Add git status guard

* Add git status guard

* Fix last test

* Fix tests

* Revert changes for packages/example

* Revert changes for packages/example/tsconfig.json

* Prepeare package for the release

* Fix inquirer name

* v0.0.125

* v0.0.127

* v0.0.128

* v0.0.130

* v0.0.131

* Add more UX features

* Add vue-cli template

* Make src as default folder for vue-cli template

* Revert dev-time changes

* Run appveyour windows build

* Run full appveyour build

* Fix circle.yml

* Update plugins

* Join paths for windows

* Revert example/lib changes

* Fix tests

* Revert unnecessary changes

* Implement dev-server dependency installation

* Update npm/create-cypress-tests/README.md

* Include webpack-options template in dist

Co-authored-by: Jessica Sachs <jess@jessicasachs.io>

.eslintignore

@@ -42,3 +42,7 @@ npm/webpack-preprocessor/examples/use-babelrc/cypress/integration/spec.js
 **/.git
 
 /npm/react/bin/*
+/npm/react/**/coverage
+**/.next/**
+/npm/create-cypress-tests/initial-template
+/npm/create-cypress-tests/**/*.template.*

.gitignore

@@ -48,6 +48,10 @@ packages/server/test/support/fixtures/server/libs
 # from runner-ct
 /packages/runner-ct/cypress/screenshots
 
+# from npm/create-cypress-tests
+/npm/create-cypress-tests/initial-template
+/npm/create-cypress-tests/src/test-output
+
 # Building app binary
 scripts/support
 package-lock.json

appveyor.yml

@@ -4,6 +4,7 @@ branches:
     - develop
     - sem-next-ver
     - /win*/
+    - feature/cross-platform-wizard
 
 # https://www.appveyor.com/docs/lang/nodejs-iojs/
 environment:

circle.yml

@@ -1129,6 +1129,17 @@ jobs:
           path: npm/react/test_results
       - store-npm-logs
 
+
+  npm-create-cypress-tests:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run: yarn workspace create-cypress-tests build
+      - run:
+          name: Run unit test
+          command: yarn workspace create-cypress-tests test 
+
   npm-eslint-plugin-dev:
     <<: *defaults
     steps:
@@ -1758,6 +1769,9 @@ linux-workflow: &linux-workflow
     - npm-react:
         requires:
           - build
+    - npm-create-cypress-tests:
+        requires:
+          - build
     - npm-eslint-plugin-dev:
         requires:
           - build

npm/create-cypress-tests/.eslintrc

@@ -0,0 +1,38 @@
+{
+  "plugins": [
+    "cypress",
+    "@cypress/dev"
+  ],
+  "extends": [
+    "plugin:@cypress/dev/general",
+    "plugin:@cypress/dev/tests"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "cypress/globals": true
+  },
+  "rules": {
+    "no-console": "off",
+    "mocha/no-global-tests": "off",
+    "@typescript-eslint/no-unused-vars": "off"
+  },
+  "overrides": [
+    {
+      "files": [
+        "lib/*"
+      ],
+      "rules": {
+        "no-console": 1
+      }
+    },
+    {
+      "files": [
+        "**/*.json"
+      ],
+      "rules": {
+        "quotes": "off",
+        "comma-dangle": "off"
+      }
+    }
+  ]
+}

npm/create-cypress-tests/.mocharc.json

@@ -0,0 +1,7 @@
+{
+  "watch-ignore": [
+    "node_modules"
+  ],
+  "require": "ts-node/register",
+  "exit": true
+}

npm/create-cypress-tests/.npmignore

@@ -0,0 +1,4 @@
+./src/
+./initial-template/
+scripts/
+__snapshots__/

npm/create-cypress-tests/README.md

@@ -0,0 +1,52 @@
+# Create Cypress Tests 
+
+Installs and injects all the required configuration to run cypress tests.
+
+## Quick overview
+
+```
+cd my-app
+npx create-cypress-test 
+npx cypress open
+```
+
+![demo](./demo.gif)
+
+## Package manager
+
+This wizard will automatically determine which package do you use. If `yarn` available as global dependency it will use yarn to install dependencies and create lock file. 
+
+If you need to use `npm` over `yarn` you can do the following
+
+```
+npx create-cypress-tests --use-npm
+```
+
+By the way you can use yarn to run the installation wizard 😉
+
+```
+yarn create cypress-tests
+```
+
+## Typescript 
+
+This package will also automatically determine if typescript if available in this project and inject the required typescript configuration for cypress. If you are starting a new project and want to create typescript configuration, please do the following:
+
+```
+npm init
+npm install typescript
+npx create-cypress-tests 
+```
+
+## Configuration 
+
+Here is a list of available configuration options: 
+
+`--use-npm` – use npm if yarn available
+`--ignore-typescript` – will not create typescript configuration if available 
+`--ignore-examples` – will create a 1 empty spec file (`cypress/integration/spec.js`) to start with
+`--component-tests` – will not ask should setup component testing or not
+
+## License
+
+The project is licensed under the terms of [MIT license](../../LICENSE)

npm/create-cypress-tests/__snapshots__/babel.test.ts.js

@@ -0,0 +1,10 @@
+exports['babel installation template correctly generates plugins config 1'] = `
+const preprocessor = require('@cypress/react/plugins/babel');
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+`

npm/create-cypress-tests/__snapshots__/init-component-testing.test.ts.js

@@ -0,0 +1,50 @@
+exports['Injects guessed next.js template cypress.json'] = `
+const preprocessor = require("@cypress/react/plugins/next");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+
+`
+
+exports['Injects guessed next.js template plugins/index.js'] = `
+const preprocessor = require("@cypress/react/plugins/next");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+
+`
+
+exports['Injects guessed next.js template support/index.js'] = `
+import "@cypress/react/support";
+
+`
+
+exports['Injected overridden webpack template cypress.json'] = `
+const preprocessor = require("@cypress/react/plugins/react-scripts");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+
+`
+
+exports['Injected overridden webpack template plugins/index.js'] = `
+const preprocessor = require("@cypress/react/plugins/react-scripts");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+
+`
+
+exports['Injected overridden webpack template support/index.js'] = `
+import "./commands.js";
+import "@cypress/react/support";
+
+`

npm/create-cypress-tests/__snapshots__/next.test.ts.js

@@ -0,0 +1,10 @@
+exports['next.js install template correctly generates plugins config 1'] = `
+const preprocessor = require('@cypress/react/plugins/next');
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+`

npm/create-cypress-tests/__snapshots__/react-scripts.test.ts.js

@@ -0,0 +1,10 @@
+exports['create-react-app install template correctly generates plugins config 1'] = `
+const preprocessor = require('@cypress/react/plugins/react-scripts');
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+`

npm/create-cypress-tests/__snapshots__/reactWebpackFile.test.ts.js

@@ -0,0 +1,24 @@
+exports['webpack-file install template correctly generates plugins config when webpack config path is missing 1'] = `
+const preprocessor = require("@cypress/react/plugins/load-webpack");
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  // TODO replace with valid webpack config path
+  config.env.webpackFilename = './webpack.config.js';
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+`
+
+exports['webpack-file install template correctly generates plugins config when webpack config path is provided 1'] = `
+const preprocessor = require("@cypress/react/plugins/load-webpack");
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  config.env.webpackFilename = 'config/webpack.config.js';
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+`

npm/create-cypress-tests/__snapshots__/rollup.test.ts.js

@@ -0,0 +1,32 @@
+exports['rollup-file install template correctly generates plugins config when webpack config path is missing 1'] = `
+const rollupPreprocessor = require("@bahmutov/cy-rollup");
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  on('file:preprocessor', rollupPreprocessor({
+    // TODO replace with valid rollup config path
+    configFile: 'rollup.config.js'
+  }));
+
+  require('@cypress/code-coverage/task')(on, config);
+
+  return config; // IMPORTANT to return the config object
+};
+`
+
+exports['rollup-file install template correctly generates plugins config when webpack config path is provided 1'] = `
+const rollupPreprocessor = require("@bahmutov/cy-rollup");
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  on('file:preprocessor', rollupPreprocessor({
+    configFile: 'config/rollup.config.js'
+  }));
+
+  require('@cypress/code-coverage/task')(on, config);
+
+  return config; // IMPORTANT to return the config object
+};
+`

npm/create-cypress-tests/__snapshots__/vueCli.test.ts.js

@@ -0,0 +1,11 @@
+exports['vue webpack-file install template correctly generates plugins for vue-cli-service 1'] = `
+const preprocessor = require("@cypress/vue/dist/plugins/webpack");
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  preprocessor(on, config); // IMPORTANT return the config object
+
+  return config;
+};
+`

npm/create-cypress-tests/__snapshots__/vueVite.test.ts.js

@@ -0,0 +1,13 @@
+exports['vue: vite template correctly generates plugins config 1'] = `
+const {
+  startDevServer
+} = require("@cypress/vite-dev-server");
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  on("dev-server:start", async options => startDevServer({
+    options
+  }));
+};
+`

npm/create-cypress-tests/__snapshots__/vueWebpackFile.test.ts.js

@@ -0,0 +1,24 @@
+exports['vue webpack-file install template correctly generates plugins config when webpack config path is missing 1'] = `
+const {
+  onFilePreprocessor
+} = require('@cypress/vue/dist/preprocessor/webpack');
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  // TODO replace with valid webpack config path
+  on('file:preprocessor', onFilePreprocessor('./webpack.config.js'));
+};
+`
+
+exports['vue webpack-file install template correctly generates plugins config when webpack config path is provided 1'] = `
+const {
+  onFilePreprocessor
+} = require('@cypress/vue/dist/preprocessor/webpack');
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  on('file:preprocessor', onFilePreprocessor('build/webpack.config.js'));
+};
+`

npm/create-cypress-tests/__snapshots__/webpackOptions.test.ts.js

@@ -0,0 +1,34 @@
+exports['webpack-options template correctly generates plugins config 1'] = `
+const webpackPreprocessor = require("@cypress/webpack-preprocessor");
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  /** @type import("webpack").Configuration */
+  const webpackConfig = {
+    resolve: {
+      extensions: ['.js', '.ts', '.jsx', '.tsx']
+    },
+    mode: 'development',
+    devtool: false,
+    output: {
+      publicPath: '/',
+      chunkFilename: '[name].bundle.js'
+    },
+    // TODO: update with valid configuration for your app
+    module: {
+      rules: [{
+        test: /\\.(js|jsx|mjs|ts|tsx)$/,
+        loader: 'babel-loader',
+        options: { ...babelConfig,
+          cacheDirectory: path.resolve(__dirname, '..', '..', '.babel-cache')
+        }
+      }]
+    }
+  };
+  on('dev-server:start', options => startDevServer({
+    options,
+    webpackConfig
+  }));
+};
+`