Create interactive installation wizard (#433)

Author: dmtrKovalenko

.gitignore

@@ -8,4 +8,5 @@ package-lock.json
 .nyc_output
 coverage
 *.generated.css
-.next
+.next
+bin

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch init script",
+      "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
+      "skipFiles": ["<node_internals>/**"],
+      "cwd": "${workspaceRoot}",
+      "program": "${workspaceFolder}/init/init.ts",
+      "outFiles": ["${workspaceFolder}/**/*.js"]
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest Current File",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "args": ["--runInBand", "${fileBasenameNoExtension}"],
+      "sourceMaps": true,
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true
+    }
+  ]
+}

README.md

@@ -70,6 +70,16 @@ Requires [Node](https://nodejs.org/en/) version 8 or above.
 npm install --save-dev cypress cypress-react-unit-test
 ```
 
+## Init
+
+You can use our command line wizard to give you instructions on configuring this plugin. It will try to determine which framework or bundling tool you are using and give you instructions on right configuration.
+
+```sh
+cypress-react-unit-test init
+```
+
+Or continue with manual installation:
+
 1. Include this plugin from your project's `cypress/support/index.js`
 
 ```js

__mocks__/fs.js

@@ -0,0 +1,3 @@
+// __mocks__/fs.js
+process.chdir('/')
+module.exports = require('memfs').fs

circle.yml

@@ -25,14 +25,17 @@ workflows:
             - run:
                 name: Build folder 🏗
                 command: npm run build
+            - run:
+                name: Run unit tests 👷
+                command: npm run test:unit
 
       - cypress/run:
           name: Example A11y
           requires:
             - Install
           executor: cypress/base-12
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/a11y
@@ -45,9 +48,9 @@ workflows:
             - Install
           executor: cypress/base-12
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
-          no-workspace: true
+          no-workspace: false
           working_directory: examples/using-babel
           command: npm test
           store_artifacts: true
@@ -58,7 +61,7 @@ workflows:
             - Install
           executor: cypress/base-12
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/using-babel-typescript
@@ -71,7 +74,7 @@ workflows:
             - Install
           executor: cypress/base-12
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/react-scripts
@@ -91,7 +94,7 @@ workflows:
             - Install
           executor: cypress/base-12
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/nextjs
@@ -113,7 +116,7 @@ workflows:
           requires:
             - Install
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/react-scripts-folder
@@ -133,7 +136,7 @@ workflows:
             - Install
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
           executor: cypress/base-12
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/tailwind
@@ -155,7 +158,7 @@ workflows:
             - Install
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
           executor: cypress/base-12
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/webpack-file
@@ -175,7 +178,7 @@ workflows:
             - Install
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
           executor: cypress/base-12
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/webpack-options
@@ -197,7 +200,7 @@ workflows:
           # because we will use native Sass dependency
           executor: cypress/base-12
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/sass-and-ts
@@ -217,7 +220,7 @@ workflows:
             - Install
           executor: cypress/base-12
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/snapshots
@@ -230,7 +233,7 @@ workflows:
           requires:
             - Install
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/visual-sudoku
@@ -246,7 +249,7 @@ workflows:
           requires:
             - Install
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/visual-testing-with-applitools
@@ -268,7 +271,7 @@ workflows:
           requires:
             - Install
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/visual-testing-with-percy
@@ -283,7 +286,7 @@ workflows:
           requires:
             - Install
           # each example installs "cypress-react-unit-test" as a local dependency (symlink)
-          install-command: npm install
+          install-command: npm install  --no-bin-links
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/visual-testing-with-happo

docs/recipes.md

@@ -124,3 +124,37 @@ When loading your `.babelrc` settings, `cypress-react-unit-test` sets `BABEL_ENV
 ```
 
 See [examples/using-babel](examples/using-babel) folder for full example.
+
+### Using rollup config
+
+If you are using rollup for bundling – we can use it as well for the bundling. Check the example:
+
+```js
+// // cypress/plugins/index.js
+const rollupPreprocessor = require('@bahmutov/cy-rollup')
+
+module.exports = (on, config) => {
+  on(
+    'file:preprocessor',
+    rollupPreprocessor({
+      // this is the default value
+      configFile: 'rollup.config.js',
+    }),
+  )
+
+  require('@cypress/code-coverage/task')(on, config)
+}
+```
+
+But make sure that several rollup plugins are required in order to bundle the code for cypress.
+
+```js
+// bundle node_modules
+nodeResolve(),
+// process commonjs modules
+commonjs(),
+// required for react (prop-types) sources
+replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
+```
+
+See [examples/rollup](examples/rollup) folder for full example.

init/Template.ts

@@ -0,0 +1,11 @@
+export interface Template<T = unknown> {
+  message: string
+  getExampleUrl: ({ componentFolder }: { componentFolder: string }) => string
+  recommendedComponentFolder: string
+  test(rootPath: string): { success: boolean; payload?: T }
+  getPluginsCode: (
+    payload: T | null,
+    options: { cypressProjectRoot: string },
+  ) => string
+  printHelper?: () => void
+}

init/findPackageJson.ts

@@ -0,0 +1,88 @@
+import path from 'path'
+import fs from 'fs'
+import findUp from 'find-up'
+
+type PackageJsonLike = {
+  name?: string
+  scripts?: Record<string, string>
+  dependencies?: Record<string, string>
+  devDependencies?: Record<string, string>
+  [key: string]: unknown
+}
+
+type FindPackageJsonResult =
+  | {
+      packageData: PackageJsonLike
+      filename: string
+      done: false
+    }
+  | {
+      packageData: undefined
+      filename: undefined
+      done: true
+    }
+
+/**
+ * Return the parsed package.json that we find in a parent folder.
+ *
+ * @returns {Object} Value, filename and indication if the iteration is done.
+ */
+export function createFindPackageJsonIterator(rootPath = process.cwd()) {
+  function scanForPackageJson(cwd: string): FindPackageJsonResult {
+    const packageJsonPath = findUp.sync('package.json', { cwd })
+    if (!packageJsonPath) {
+      return {
+        packageData: undefined,
+        filename: undefined,
+        done: true,
+      }
+    }
+
+    const packageData = JSON.parse(
+      fs.readFileSync(packageJsonPath, {
+        encoding: 'utf-8',
+      }),
+    )
+
+    return {
+      packageData,
+      filename: packageJsonPath,
+      done: false,
+    }
+  }
+
+  return {
+    map: <TPayload>(
+      cb: (
+        data: PackageJsonLike,
+        packageJsonPath: string,
+      ) => { continue: boolean; payload?: TPayload },
+    ) => {
+      let stepPathToScan = rootPath
+
+      while (true) {
+        const result = scanForPackageJson(stepPathToScan)
+
+        if (result.done) {
+          // didn't find the package.json
+          return { success: false }
+        }
+
+        if (result.packageData) {
+          const cbResult = cb(result.packageData, result.filename)
+          if (!cbResult.continue) {
+            return { success: true, payload: cbResult.payload }
+          }
+        }
+
+        const nextStepPathToScan = path.resolve(stepPathToScan, '..')
+        if (nextStepPathToScan === stepPathToScan) {
+          // we are at the root. Give up
+          return { success: false }
+        }
+
+        stepPathToScan = nextStepPathToScan
+      }
+    },
+  }
+}