refactor: rename test commands

BREAKING CHANGE: `cli-plugin-unit-jest` and `cli-plugin-unit-mocha` now register
"test:unit" command and script instead of "test"; `cli-plugin-e2e-cypress` now
register "test:e2e" with optional `--headless` flag instead of "e2e" and
"e2e:open"; `cli-plugin-e2e-nightwatch` now register "test:e2e" instead of "e2e".

close #876, close #878

docs/env.md

@@ -30,14 +30,14 @@ Loaded variables will become available to all `vue-cli-service` commands, plugin
 **Mode** is an important concept in Vue CLI projects. By default, there are three modes in a Vue CLI project:
 
 - `development` is used by `vue-cli-service serve`
-- `production` is used by `vue-cli-service build`
-- `test` is used by `vue-cli-service test`
+- `production` is used by `vue-cli-service build` and `vue-cli-service test:e2e`
+- `test` is used by `vue-cli-service test:unit`
 
 Note that a mode is different from `NODE_ENV`, as a mode can contain multiple environment variables. That said, each mode does set `NODE_ENV` to the same value by default - for example, `NODE_ENV` will be set to `"development"` in development mode.
 
 You can set environment variables only available to a certain mode by postfixing the `.env` file. For example, if you create a file named `.env.development` in your project root, then the variables declared in that file will only be loaded in development mode.
 
-Passing the `--mode` option flag with [build command](https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#build) will use that mode's environment variables in the build. For example, if you want to use development variables in the build command, add this to your package.json scripts:
+You can overwrite the default mode used for a command by passing the `--mode` option flag. For example, if you want to use development variables in the build command, add this to your `package.json` scripts:
 
 ```
 "dev-build": "vue-cli-service build --mode development",

packages/@vue/cli-plugin-e2e-cypress/README.md

@@ -8,33 +8,25 @@ Cypress offers a rich interactive interface for running E2E tests, but currently
 
 ## Injected Commands
 
-- **`vue-cli-service e2e`**
+- **`vue-cli-service test:e2e`**
 
-  run e2e tests headlessly with `cypress run`.
+  Run e2e tests with `cypress run`.
+
+  By default it launches Cypress in interactive mode with a GUI. If you want to run the tests in headless mode (e.g. for CI), you can do so with the `--headless` option.
+
+  The command automatically starts a server in production mode to run the e2e tests against. If you want to run the tests multiple times without having to restart the server every time, you can start the server with `vue-cli-service serve --mode production` in one terminal, and then run e2e tests against that server using the `--url` option.
 
   Options:
 
   ```
+  --headless run in headless mode without GUI
+  --mode     specify the mode the dev server should run in. (default: production)
   --url      run e2e tests against given url instead of auto-starting dev server
-  -s, --spec runs a specific spec file. defaults to "all"
+  -s, --spec (headless only) runs a specific spec file. defaults to "all"
   ```
 
   Additionally, [all Cypress CLI options for `cypress run` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-run).
 
-- **`vue-cli-service e2e:open`**
-
-  run e2e tests in interactive mode with `cypress open`.
-
-  Options:
-
-  ```
-  --url      run e2e tests against given url instead of auto-starting dev server
-  ```
-
-  Additionally, [all Cypress CLI options for `cypress open` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-open).
-
-  Both commands automatically starts a server in production mode to run the e2e tests against. If you want to run the tests multiple times without having to restart the server every time, you can start the server with `vue-cli-service serve --mode production` in one terminal, and then run e2e tests against that server using the `--url` option.
-
 ## Configuration
 
 We've pre-configured Cypress to place most of the e2e testing related files under `<projectRoot>/tests/e2e`. You can also check out [how to configure Cypress via `cypress.json`](https://docs.cypress.io/guides/references/configuration.html#Options).
@@ -42,6 +34,5 @@ We've pre-configured Cypress to place most of the e2e testing related files unde
 ## Installing in an Already Created Project
 
 ``` sh
-npm install -D @vue/cli-plugin-e2e-cypress
-vue invoke e2e-cypress
+vue add e2e-cypress
 ```

packages/@vue/cli-plugin-e2e-cypress/__tests__/cypressPlugin.spec.js

@@ -14,5 +14,5 @@ test('should work', async () => {
   config.videoRecording = false
   await project.write('cypress.json', JSON.stringify(config))
 
-  await project.run(`vue-cli-service e2e`)
+  await project.run(`vue-cli-service test:e2e --headless`)
 })

packages/@vue/cli-plugin-e2e-cypress/generator/index.js

@@ -6,8 +6,7 @@ module.exports = api => {
 
   api.extendPackage({
     scripts: {
-      e2e: 'vue-cli-service e2e',
-      'e2e:open': 'vue-cli-service e2e:open'
+      'test:e2e': 'vue-cli-service test:e2e'
     }
   })
 }

packages/@vue/cli-plugin-e2e-cypress/index.js

@@ -1,3 +1,5 @@
+const chalk = require('chalk')
+
 function removeArg (rawArgs, arg) {
   const matchRE = new RegExp(`^--${arg}`)
   const equalRE = new RegExp(`^--${arg}=`)
@@ -8,71 +10,54 @@ function removeArg (rawArgs, arg) {
 }
 
 module.exports = (api, options) => {
-  const chalk = require('chalk')
-
-  function run (command, args, rawArgs) {
-    removeArg(rawArgs, 'url')
-    removeArg(rawArgs, 'mode')
-
-    const serverPromise = args.url
-      ? Promise.resolve({ url: args.url })
-      : api.service.run('serve')
-
-    return serverPromise.then(({ url, server }) => {
-      const { info } = require('@vue/cli-shared-utils')
-      info(`Starting e2e tests...`)
-
-      const cyArgs = [
-        command, // open or run
-        '--config', `baseUrl=${url}`,
-        ...rawArgs
-      ]
-
-      const execa = require('execa')
-      const cypressBinPath = require.resolve('cypress/bin/cypress')
-      const runner = execa(cypressBinPath, cyArgs, { stdio: 'inherit' })
-      if (server) {
-        runner.on('exit', () => server.close())
-        runner.on('error', () => server.close())
-      }
-
-      if (process.env.VUE_CLI_TEST) {
-        runner.on('exit', code => {
-          process.exit(code)
-        })
-      }
-
-      return runner
-    })
-  }
-
-  const commandOptions = {
-    '--mode': 'specify the mode the dev server should run in. (default: production)',
-    '--url': 'run e2e tests against given url instead of auto-starting dev server'
-  }
-
-  api.registerCommand('e2e', {
-    description: 'run e2e tests headlessly with `cypress run`',
-    usage: 'vue-cli-service e2e [options]',
-    options: Object.assign({
-      '-s, --spec': 'runs a specific spec file. defaults to "all"'
-    }, commandOptions),
+  api.registerCommand('test:e2e', {
+    description: 'run e2e tests with Cypress',
+    usage: 'vue-cli-service test:e2e [options]',
+    options: {
+      '--headless': 'run in headless mode without GUI',
+      '--mode': 'specify the mode the dev server should run in. (default: production)',
+      '--url': 'run e2e tests against given url instead of auto-starting dev server',
+      '-s, --spec': '(headless only) runs a specific spec file. defaults to "all"'
+    },
     details:
       `All Cypress CLI options are also supported:\n` +
       chalk.yellow(`https://docs.cypress.io/guides/guides/command-line.html#cypress-run`)
-  }, (args, rawArgs) => run('run', args, rawArgs))
+  }, async (args, rawArgs) => {
+    removeArg(rawArgs, 'headless')
+    removeArg(rawArgs, 'mode')
+    removeArg(rawArgs, 'url')
 
-  api.registerCommand('e2e:open', {
-    description: 'run e2e tests in interactive mode with `cypress open`',
-    usage: 'vue-cli-service e2e:open [options]',
-    options: commandOptions,
-    details:
-      `All Cypress CLI options are supported:\n` +
-      chalk.yellow(`https://docs.cypress.io/guides/guides/command-line.html#cypress-open`)
-  }, (args, rawArgs) => run('open', args, rawArgs))
+    const { info } = require('@vue/cli-shared-utils')
+    info(`Starting e2e tests...`)
+
+    const { url, server } = args.url
+      ? { url: args.url }
+      : await api.service.run('serve')
+
+    const cyArgs = [
+      args.headless ? 'run' : 'open', // open or run
+      '--config', `baseUrl=${url}`,
+      ...rawArgs
+    ]
+
+    const execa = require('execa')
+    const cypressBinPath = require.resolve('cypress/bin/cypress')
+    const runner = execa(cypressBinPath, cyArgs, { stdio: 'inherit' })
+    if (server) {
+      runner.on('exit', () => server.close())
+      runner.on('error', () => server.close())
+    }
+
+    if (process.env.VUE_CLI_TEST) {
+      runner.on('exit', code => {
+        process.exit(code)
+      })
+    }
+
+    return runner
+  })
 }
 
 module.exports.defaultModes = {
-  e2e: 'production',
-  'e2e:open': 'production'
+  'test:e2e': 'production'
 }

packages/@vue/cli-plugin-e2e-nightwatch/README.md

@@ -4,7 +4,7 @@
 
 ## Injected Commands
 
-- **`vue-cli-service e2e`**
+- **`vue-cli-service test:e2e`**
 
   run e2e tests with [NightwatchJS](nightwatchjs.org).
 
@@ -18,6 +18,8 @@
   -f, --filter glob to filter tests by filename
   ```
 
+  > Note: this plugin currently uses Nightwatch v0.9.x. We are waiting for Nightwatch 1.0 to stabilize before upgrading.
+
   Additionally, [all Nightwatch CLI options are also supported](https://github.com/nightwatchjs/nightwatch/blob/master/lib/runner/cli/cli.js).
 
 ## Configuration
@@ -31,6 +33,5 @@ Consult Nightwatch docs for [configuration options](http://nightwatchjs.org/gett
 ## Installing in an Already Created Project
 
 ``` sh
-npm install -D @vue/cli-plugin-e2e-nightwatch
-vue invoke e2e-nightwatch
+vue add e2e-nightwatch
 ```

packages/@vue/cli-plugin-e2e-nightwatch/__tests__/nightwatchPlugin.spec.js

@@ -9,5 +9,5 @@ test('should work', async () => {
       '@vue/cli-plugin-e2e-nightwatch': {}
     }
   })
-  await project.run(`vue-cli-service e2e`)
+  await project.run(`vue-cli-service test:e2e`)
 })

packages/@vue/cli-plugin-e2e-nightwatch/generator/index.js

@@ -5,7 +5,7 @@ module.exports = api => {
 
   api.extendPackage({
     scripts: {
-      e2e: 'vue-cli-service e2e'
+      'test:e2e': 'vue-cli-service test:e2e'
     }
   })
 }

packages/@vue/cli-plugin-e2e-nightwatch/index.js

@@ -8,9 +8,9 @@ function removeArg (rawArgs, arg) {
 }
 
 module.exports = (api, options) => {
-  api.registerCommand('e2e', {
+  api.registerCommand('test:e2e', {
     description: 'run e2e tests with nightwatch',
-    usage: 'vue-cli-service e2e [options]',
+    usage: 'vue-cli-service test:e2e [options]',
     options: {
       '--url': 'run e2e tests against given url instead of auto-starting dev server',
       '--config': 'use custom nightwatch config file (overrides internals)',
@@ -70,5 +70,5 @@ module.exports = (api, options) => {
 }
 
 module.exports.defaultModes = {
-  e2e: 'production'
+  'test:e2e': 'production'
 }

packages/@vue/cli-plugin-typescript/__tests__/tsPluginE2e.spec.js

@@ -10,15 +10,15 @@ test('cypress', async () => {
       '@vue/cli-plugin-e2e-cypress': {}
     }
   })
-  await project.run(`vue-cli-service e2e`)
+  await project.run(`vue-cli-service test:e2e --headless`)
 })
 
 test('nightwatch', async () => {
   const project = await create('ts-e2e-nightwatch', {
     plugins: {
       '@vue/cli-plugin-typescript': {},
-      '@vue/cli-plugin-e2e-cypress': {}
+      '@vue/cli-plugin-e2e-nightwatch': {}
     }
   })
-  await project.run(`vue-cli-service e2e`)
+  await project.run(`vue-cli-service test:e2e`)
 })

packages/@vue/cli-plugin-typescript/__tests__/tsPluginUnit.spec.js

@@ -9,7 +9,7 @@ test('mocha', async () => {
       '@vue/cli-plugin-unit-mocha': {}
     }
   })
-  await project.run(`vue-cli-service test`)
+  await project.run(`vue-cli-service test:unit`)
 })
 
 test('jest', async () => {
@@ -19,7 +19,7 @@ test('jest', async () => {
       '@vue/cli-plugin-unit-jest': {}
     }
   })
-  await project.run(`vue-cli-service test`)
+  await project.run(`vue-cli-service test:unit`)
 })
 
 test('jest w/ babel', async () => {
@@ -30,5 +30,5 @@ test('jest w/ babel', async () => {
       '@vue/cli-plugin-unit-jest': {}
     }
   })
-  await project.run(`vue-cli-service test`)
+  await project.run(`vue-cli-service test:unit`)
 })

packages/@vue/cli-plugin-unit-jest/README.md

@@ -4,14 +4,14 @@
 
 ## Injected Commands
 
-- **`vue-cli-service test`**
+- **`vue-cli-service test:unit`**
 
-  Run unit tests with Jest. Default files matches are:
+  Run unit tests with Jest. Default `testMatch` is `<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))` which matches:
 
-  - Any files in `tests/unit` that end in `.spec.(js|ts)`;
-  - Any js/ts files inside `__tests__` directories.
+  - Any files in `tests/unit` that end in `.spec.(js|jsx|ts|tsx)`;
+  - Any js(x)/ts(x) files inside `__tests__` directories.
 
-  Usage: `vue-cli-service test [options] <regexForTestFiles>`
+  Usage: `vue-cli-service test:unit [options] <regexForTestFiles>`
 
   All [Jest command line options](https://facebook.github.io/jest/docs/en/cli.html) are also supported.
 
@@ -22,6 +22,5 @@ Jest can be configured via `jest.config.js` in your project root, or the `jest`
 ## Installing in an Already Created Project
 
 ``` sh
-npm install -D @vue/cli-plugin-unit-jest
-vue invoke unit-jest
+vue add unit-jest
 ```

packages/@vue/cli-plugin-unit-jest/__tests__/jestGenerator.spec.js

@@ -15,7 +15,7 @@ test('base', async () => {
     }
   ])
 
-  expect(pkg.scripts.test).toBeTruthy()
+  expect(pkg.scripts['test:unit']).toBe('vue-cli-service test:unit')
   expect(pkg.devDependencies).toHaveProperty('@vue/test-utils')
   expect(pkg.devDependencies).toHaveProperty('babel-jest')
   expect(files['tests/unit/.eslintrc.js']).toMatch('jest: true')

packages/@vue/cli-plugin-unit-jest/__tests__/jestPlugin.spec.js

@@ -9,7 +9,7 @@ test('should work', async () => {
       '@vue/cli-plugin-unit-jest': {}
     }
   })
-  await project.run(`vue-cli-service test`)
+  await project.run(`vue-cli-service test:unit`)
 })
 
 test('should respect jest testMatch config', async () => {
@@ -26,7 +26,7 @@ test('should respect jest testMatch config', async () => {
 
   let result
   try {
-    await project.run(`vue-cli-service test`)
+    await project.run(`vue-cli-service test:unit`)
   } catch (e) {
     result = e
   }
@@ -50,7 +50,7 @@ test('should respect jest.config.js testMatch config', async () => {
 
   let result
   try {
-    await project.run(`vue-cli-service test`)
+    await project.run(`vue-cli-service test:unit`)
   } catch (e) {
     result = e
   }

packages/@vue/cli-plugin-unit-jest/generator/index.js

@@ -2,7 +2,7 @@ module.exports = api => {
   api.render('./template')
   api.extendPackage({
     scripts: {
-      test: 'vue-cli-service test'
+      'test:unit': 'vue-cli-service test:unit'
     },
     devDependencies: {
       '@vue/test-utils': '^1.0.0-beta.10'
@@ -31,7 +31,7 @@ module.exports = api => {
       'jest-serializer-vue'
     ],
     'testMatch': [
-      '<rootDir>/(tests/unit/**/*.spec.(ts|tsx|js)|**/__tests__/*.(ts|tsx|js))'
+      '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
     ]
   }
 

packages/@vue/cli-plugin-unit-jest/index.js

@@ -1,7 +1,7 @@
 module.exports = api => {
-  api.registerCommand('test', {
+  api.registerCommand('test:unit', {
     description: 'run unit tests with jest',
-    usage: 'vue-cli-service test [options] <regexForTestFiles>',
+    usage: 'vue-cli-service test:unit [options] <regexForTestFiles>',
     options: {
       '--watch': 'run tests in watch mode'
     },
@@ -34,5 +34,5 @@ module.exports = api => {
 }
 
 module.exports.defaultModes = {
-  test: 'test'
+  'test:unit': 'test'
 }

packages/@vue/cli-plugin-unit-mocha/README.md

@@ -4,14 +4,14 @@
 
 ## Injected Commands
 
-- **`vue-cli-service test`**
+- **`vue-cli-service test:unit`**
 
   Run unit tests with [mocha-webpack](https://github.com/zinserjan/mocha-webpack) + [chai](http://chaijs.com/).
 
   **Note the tests are run inside Node.js with browser environment simulated with JSDOM.**
 
   ```
-  Usage: vue-cli-service test [options] [...files]
+  Usage: vue-cli-service test:unit [options] [...files]
 
   Options:
 
@@ -31,6 +31,5 @@
 ## Installing in an Already Created Project
 
 ``` sh
-npm install -D @vue/cli-plugin-unit-mocha
-vue invoke unit-mocha
+vue add unit-mocha
 ```

packages/@vue/cli-plugin-unit-mocha/__tests__/mochaGenerator.spec.js

@@ -15,7 +15,7 @@ test('base', async () => {
     }
   ])
 
-  expect(pkg.scripts.test).toBeTruthy()
+  expect(pkg.scripts['test:unit']).toBe('vue-cli-service test:unit')
   expect(pkg.devDependencies).toHaveProperty('@vue/test-utils')
   expect(files['tests/unit/.eslintrc.js']).toMatch('mocha: true')
 

packages/@vue/cli-plugin-unit-mocha/__tests__/mochaPlugin.spec.js

@@ -9,5 +9,5 @@ test('should work', async () => {
       '@vue/cli-plugin-unit-mocha': {}
     }
   })
-  await project.run(`vue-cli-service test`)
+  await project.run(`vue-cli-service test:unit`)
 })

packages/@vue/cli-plugin-unit-mocha/generator/index.js

@@ -9,7 +9,7 @@ module.exports = api => {
   api.extendPackage({
     devDependencies,
     scripts: {
-      test: 'vue-cli-service test'
+      'test:unit': 'vue-cli-service test:unit'
     }
   })
 

packages/@vue/cli-plugin-unit-mocha/index.js

@@ -22,9 +22,9 @@ module.exports = api => {
     }
   })
 
-  api.registerCommand('test', {
+  api.registerCommand('test:unit', {
     description: 'run unit tests with mocha-webpack',
-    usage: 'vue-cli-service test [options] [...files]',
+    usage: 'vue-cli-service test:unit [options] [...files]',
     options: {
       '--watch, -w': 'run in watch mode',
       '--grep, -g': 'only run tests matching <pattern>',
@@ -75,5 +75,5 @@ module.exports = api => {
 }
 
 module.exports.defaultModes = {
-  test: 'test'
+  'test:unit': 'test'
 }