feat: create-cypress-tests wizard

.eslintignore

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

.gitignore

@@ -26,7 +26,7 @@ npm/**/cypress/screenshots
 # from example
 packages/example/app
 packages/example/build
-packages/example/cypress
+packages/example/cypress/integration
 
 # from server
 packages/server/.cy
@@ -39,6 +39,10 @@ packages/server/test/support/fixtures/server/libs
 /npm/react/bin/*
 /npm/react/cypress/videos
 
+# 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

circle.yml

@@ -941,9 +941,6 @@ jobs:
       - run:
           name: Build
           command: yarn workspace @cypress/react build
-      - run:
-          name: Run unit test
-          command: yarn workspace @cypress/react test:unit
       - run:
           name: Run tests
           command: yarn workspace @cypress/react test
@@ -984,7 +981,18 @@ jobs:
           name: Run e2e example tests
           command: yarn test
           working_directory: npm/react/<<parameters.path>>
-
+
+
+  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:
@@ -1813,6 +1821,10 @@ linux-workflow: &linux-workflow
         path: examples/webpack-options
         requires:
           - npm-react
+
+    - npm-create-cypress-tests:
+        requires:
+          - build
 
     - npm-eslint-plugin-dev:
         requires:

npm/create-cypress-tests/.eslintrc

@@ -0,0 +1,37 @@
+{
+  "plugins": [
+    "cypress",
+    "@cypress/dev"
+  ],
+  "extends": [
+    "plugin:@cypress/dev/general"
+  ],
+  "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 @@
+src

npm/create-cypress-tests/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "create-cypress-tests",
+  "version": "0.0.0",
+  "description": "Smart installation wizard",
+  "private": false,
+  "main": "index.js",
+  "scripts": {
+    "build": "yarn prepare-example && tsc -p ./tsconfig.json && chmod +x dist/src/index.js && node scripts/example copy-to ./dist/initial-template",
+    "prepare-example": "node scripts/example copy-to ./initial-template",
+    "test": "cross-env TS_NODE_PROJECT=./tsconfig.test.json mocha --config .mocharc.json './src/**/*.test.ts'"
+  },
+  "dependencies": {
+    "chalk": "4.1.0",
+    "cli-highlight": "2.1.4",
+    "commander": "6.1.0",
+    "find-up": "5.0.0",
+    "inquirer": "7.3.3",
+    "ora": "^5.1.0"
+  },
+  "devDependencies": {
+    "@types/inquirer": "7.3.1",
+    "@types/mock-fs": "4.10.0",
+    "@types/node": "9.6.49",
+    "@types/ora": "^3.2.0",
+    "mocha": "7.1.1",
+    "mock-fs": "4.13.0",
+    "typescript": "4.0.3"
+  },
+  "bin": {
+    "create-cypress-tests": "dist/src/index.js"
+  },
+  "license": "MIT",
+  "repository": "https://github.com/cypress-io/cypress.git",
+  "author": "Cypress.io team"
+}

npm/create-cypress-tests/scripts/example.js

@@ -0,0 +1,19 @@
+const fs = require('fs-extra')
+const chalk = require('chalk')
+const path = require('path')
+const program = require('commander')
+
+program
+.command('copy-to [destination]')
+.description('copy cypress/packages/example into destination')
+.action(async (destination) => {
+  const exampleFolder = path.resolve(__dirname, '..', '..', '..', 'packages', 'example')
+  const destinationPath = path.resolve(process.cwd(), destination)
+
+  await fs.remove(destinationPath)
+  await fs.copy(exampleFolder, destinationPath, { recursive: true })
+
+  console.log(`✅ Example was successfully created at ${chalk.cyan(destination)}`)
+})
+
+program.parse(process.argv)

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

@@ -0,0 +1,192 @@
+import { expect, use } from 'chai'
+import sinon, { SinonStub, SinonSpy } from 'sinon'
+import chalk from 'chalk'
+import mockFs from 'mock-fs'
+import highlight from 'cli-highlight'
+import { initComponentTesting } from './init-component-testing'
+import inquirer from 'inquirer'
+import sinonChai from 'sinon-chai'
+import childProcess from 'child_process'
+import { someOfSpyCallsIncludes } from '../test-utils'
+
+use(sinonChai)
+
+describe('init component tests script', () => {
+  let promptSpy: SinonStub<any> | null = null
+  let logSpy: SinonSpy | null = null
+  let processExitStub: SinonStub<any> | null = null
+  let execStub: SinonStub | null = null
+
+  beforeEach(() => {
+    logSpy = sinon.spy(global.console, 'log')
+    // @ts-ignores
+    execStub = sinon.stub(childProcess, 'exec').callsFake((command, callback) => callback())
+    processExitStub = sinon.stub(process, 'exit').callsFake(() => {
+      throw new Error(`${chalk.red('process.exit')} should not be called`)
+    })
+  })
+
+  afterEach(() => {
+    mockFs.restore()
+    logSpy?.restore()
+    promptSpy?.restore()
+    processExitStub?.restore()
+    execStub?.restore()
+  })
+
+  it('automatically suggests to the user which config to use', async () => {
+    mockFs({
+      '/cypress.json': '{}',
+      '/package.json': JSON.stringify({
+        dependencies: {
+          react: '^16.10.0',
+        },
+      }),
+      '/webpack.config.js': 'module.exports = { }',
+    }, { createCwd: true })
+
+    promptSpy = sinon.stub(inquirer, 'prompt').returns(Promise.resolve({
+      chosenTemplateName: 'create-react-app',
+      componentFolder: 'cypress/component',
+    }) as any)
+
+    await initComponentTesting({ config: {}, cypressConfigPath: '/', useYarn: true })
+    const [{ choices, message }] = (inquirer.prompt as any).args[0][0]
+
+    expect(choices[0]).to.equal('webpack')
+    expect(message).to.contain(
+      `Press ${chalk.inverse(' Enter ')} to continue with ${chalk.green(
+        'webpack',
+      )} configuration`,
+    )
+  })
+
+  it('determines more presumable configuration to suggest', async () => {
+    mockFs({
+      '/cypress.json': '{}',
+      // For next.js user will have babel config, but we want to suggest to use the closest config for the application code
+      '/babel.config.js': 'module.exports = { }',
+      '/package.json': JSON.stringify({ dependencies: { react: '^17.x', next: '^9.2.0' } }),
+    })
+
+    promptSpy = sinon.stub(inquirer, 'prompt').returns(Promise.resolve({
+      chosenTemplateName: 'next.js',
+      componentFolder: 'src',
+    }) as any)
+
+    await initComponentTesting({ config: {}, cypressConfigPath: '/', useYarn: true })
+
+    const [{ choices, message }] = (inquirer.prompt as any).args[0][0]
+
+    expect(choices[0]).to.equal('next.js')
+    expect(message).to.contain(
+      `Press ${chalk.inverse(' Enter ')} to continue with ${chalk.green(
+        'next.js',
+      )} configuration`,
+    )
+  })
+
+  it('Asks for framework if can not determine the right one', async () => {
+    mockFs({
+      '/cypress.json': '{}',
+      '/webpack.config.js': 'module.exports = { }',
+      '/package.json': JSON.stringify({ dependencies: { } }),
+    })
+
+    promptSpy = sinon.stub(inquirer, 'prompt')
+    .onCall(0)
+    .returns(Promise.resolve({
+      framework: 'vue',
+    }) as any)
+    .onCall(1)
+    .returns(Promise.resolve({
+      chosenTemplateName: 'webpack',
+      componentFolder: 'src',
+    }) as any)
+
+    await initComponentTesting({ config: {}, cypressConfigPath: '/', useYarn: true })
+
+    expect(
+      someOfSpyCallsIncludes(global.console.log, 'We were unable to automatically determine your framework 😿'),
+    ).to.be.true
+  })
+
+  it('Asks for framework if more than 1 option was auto detected', async () => {
+    mockFs({
+      '/cypress.json': '{}',
+      '/webpack.config.js': 'module.exports = { }',
+      '/package.json': JSON.stringify({ dependencies: { react: '*', vue: '*' } }),
+    })
+
+    promptSpy = sinon.stub(inquirer, 'prompt')
+    .onCall(0)
+    .returns(Promise.resolve({
+      framework: 'vue',
+    }) as any)
+    .onCall(1)
+    .returns(Promise.resolve({
+      chosenTemplateName: 'webpack',
+      componentFolder: 'src',
+    }) as any)
+
+    await initComponentTesting({ config: {}, cypressConfigPath: '/', useYarn: true })
+
+    expect(
+      someOfSpyCallsIncludes(global.console.log, `It looks like all these frameworks: ${chalk.yellow('react, vue')} are available from this directory.`),
+    ).to.be.true
+  })
+
+  it('suggest the right instruction based on user template choice', async () => {
+    mockFs({
+      '/package.json': JSON.stringify({
+        dependencies: {
+          react: '^16.0.0',
+        },
+      }),
+      '/cypress.json': '{}',
+    })
+
+    promptSpy = sinon.stub(inquirer, 'prompt').returns(Promise.resolve({
+      chosenTemplateName: 'create-react-app',
+      componentFolder: 'src',
+    }) as any)
+
+    await initComponentTesting({ config: {}, cypressConfigPath: '/', useYarn: true })
+    expect(
+      someOfSpyCallsIncludes(global.console.log, 'https://github.com/cypress-io/cypress/tree/develop/npm/react/examples/react-scripts'),
+    ).to.be.true
+  })
+
+  it('suggests right docs example and cypress.json config based on the `componentFolder` answer', async () => {
+    mockFs({
+      '/cypress.json': '{}',
+      '/package.json': JSON.stringify({
+        dependencies: {
+          react: '^16.0.0',
+        },
+      }),
+    })
+
+    sinon.stub(inquirer, 'prompt').returns(Promise.resolve({
+      chosenTemplateName: 'create-react-app',
+      componentFolder: 'cypress/component',
+    }) as any)
+
+    await initComponentTesting({ config: {}, cypressConfigPath: '/', useYarn: true })
+
+    const expectedCode = highlight(
+      JSON.stringify(
+        {
+          experimentalComponentTesting: true,
+          componentFolder: 'cypress/component',
+          testFiles: '**/*.spec.{js,ts,jsx,tsx}',
+        },
+        null,
+        2,
+      ),
+      { language: 'json' },
+    )
+
+    expect(global.console.log).to.be.calledWith(`\n${expectedCode}\n`)
+  })
+})