diff --git a/docs/env.md b/docs/env.md index 7d03b13b4c..6fe58c0520 100644 --- a/docs/env.md +++ b/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", diff --git a/packages/@vue/cli-plugin-e2e-cypress/README.md b/packages/@vue/cli-plugin-e2e-cypress/README.md index a1494eb74d..f724ec5380 100644 --- a/packages/@vue/cli-plugin-e2e-cypress/README.md +++ b/packages/@vue/cli-plugin-e2e-cypress/README.md @@ -8,32 +8,24 @@ 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`. - Options: - - ``` - --url run e2e tests against given url instead of auto-starting dev server - -s, --spec runs a specific spec file. defaults to "all" - ``` + 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. - 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`. + 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 (headless only) runs a specific spec file. defaults to "all" ``` - 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. + Additionally, [all Cypress CLI options for `cypress run` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-run). ## Configuration @@ -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 ``` diff --git a/packages/@vue/cli-plugin-e2e-cypress/__tests__/cypressPlugin.spec.js b/packages/@vue/cli-plugin-e2e-cypress/__tests__/cypressPlugin.spec.js index 5298bc4481..7557c15704 100644 --- a/packages/@vue/cli-plugin-e2e-cypress/__tests__/cypressPlugin.spec.js +++ b/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`) }) diff --git a/packages/@vue/cli-plugin-e2e-cypress/generator/index.js b/packages/@vue/cli-plugin-e2e-cypress/generator/index.js index c5c92b5eb0..b6978919c1 100644 --- a/packages/@vue/cli-plugin-e2e-cypress/generator/index.js +++ b/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' } }) } diff --git a/packages/@vue/cli-plugin-e2e-cypress/index.js b/packages/@vue/cli-plugin-e2e-cypress/index.js index d0055857f7..175da907a0 100644 --- a/packages/@vue/cli-plugin-e2e-cypress/index.js +++ b/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' } diff --git a/packages/@vue/cli-plugin-e2e-nightwatch/README.md b/packages/@vue/cli-plugin-e2e-nightwatch/README.md index bf8f6c7e0b..9931c0bcb7 100644 --- a/packages/@vue/cli-plugin-e2e-nightwatch/README.md +++ b/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 ``` diff --git a/packages/@vue/cli-plugin-e2e-nightwatch/__tests__/nightwatchPlugin.spec.js b/packages/@vue/cli-plugin-e2e-nightwatch/__tests__/nightwatchPlugin.spec.js index e4ca0ccec3..d94491e958 100644 --- a/packages/@vue/cli-plugin-e2e-nightwatch/__tests__/nightwatchPlugin.spec.js +++ b/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`) }) diff --git a/packages/@vue/cli-plugin-e2e-nightwatch/generator/index.js b/packages/@vue/cli-plugin-e2e-nightwatch/generator/index.js index 3f8ec04488..d63516d406 100644 --- a/packages/@vue/cli-plugin-e2e-nightwatch/generator/index.js +++ b/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' } }) } diff --git a/packages/@vue/cli-plugin-e2e-nightwatch/index.js b/packages/@vue/cli-plugin-e2e-nightwatch/index.js index bb8668508d..5454f53047 100644 --- a/packages/@vue/cli-plugin-e2e-nightwatch/index.js +++ b/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' } diff --git a/packages/@vue/cli-plugin-typescript/__tests__/tsPluginE2e.spec.js b/packages/@vue/cli-plugin-typescript/__tests__/tsPluginE2e.spec.js index 2fe322afdd..9f573fab02 100644 --- a/packages/@vue/cli-plugin-typescript/__tests__/tsPluginE2e.spec.js +++ b/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`) }) diff --git a/packages/@vue/cli-plugin-typescript/__tests__/tsPluginUnit.spec.js b/packages/@vue/cli-plugin-typescript/__tests__/tsPluginUnit.spec.js index 88d4664019..6e0f558565 100644 --- a/packages/@vue/cli-plugin-typescript/__tests__/tsPluginUnit.spec.js +++ b/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`) }) diff --git a/packages/@vue/cli-plugin-unit-jest/README.md b/packages/@vue/cli-plugin-unit-jest/README.md index 8b793209b3..c74d4d5a98 100644 --- a/packages/@vue/cli-plugin-unit-jest/README.md +++ b/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 `/(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] ` + Usage: `vue-cli-service test:unit [options] ` 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 ``` diff --git a/packages/@vue/cli-plugin-unit-jest/__tests__/jestGenerator.spec.js b/packages/@vue/cli-plugin-unit-jest/__tests__/jestGenerator.spec.js index bf460701f8..30f6d6967d 100644 --- a/packages/@vue/cli-plugin-unit-jest/__tests__/jestGenerator.spec.js +++ b/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') diff --git a/packages/@vue/cli-plugin-unit-jest/__tests__/jestPlugin.spec.js b/packages/@vue/cli-plugin-unit-jest/__tests__/jestPlugin.spec.js index 4130aad9c2..dfbd034731 100644 --- a/packages/@vue/cli-plugin-unit-jest/__tests__/jestPlugin.spec.js +++ b/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 } diff --git a/packages/@vue/cli-plugin-unit-jest/generator/index.js b/packages/@vue/cli-plugin-unit-jest/generator/index.js index 550e26c321..fa4f222c80 100644 --- a/packages/@vue/cli-plugin-unit-jest/generator/index.js +++ b/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': [ - '/(tests/unit/**/*.spec.(ts|tsx|js)|**/__tests__/*.(ts|tsx|js))' + '/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))' ] } diff --git a/packages/@vue/cli-plugin-unit-jest/index.js b/packages/@vue/cli-plugin-unit-jest/index.js index 01cf34da0f..d659854df7 100644 --- a/packages/@vue/cli-plugin-unit-jest/index.js +++ b/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] ', + usage: 'vue-cli-service test:unit [options] ', options: { '--watch': 'run tests in watch mode' }, @@ -34,5 +34,5 @@ module.exports = api => { } module.exports.defaultModes = { - test: 'test' + 'test:unit': 'test' } diff --git a/packages/@vue/cli-plugin-unit-mocha/README.md b/packages/@vue/cli-plugin-unit-mocha/README.md index 02b1e91d31..d680b8133c 100644 --- a/packages/@vue/cli-plugin-unit-mocha/README.md +++ b/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 ``` diff --git a/packages/@vue/cli-plugin-unit-mocha/__tests__/mochaGenerator.spec.js b/packages/@vue/cli-plugin-unit-mocha/__tests__/mochaGenerator.spec.js index eadd2069ef..3d92dad0ba 100644 --- a/packages/@vue/cli-plugin-unit-mocha/__tests__/mochaGenerator.spec.js +++ b/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') diff --git a/packages/@vue/cli-plugin-unit-mocha/__tests__/mochaPlugin.spec.js b/packages/@vue/cli-plugin-unit-mocha/__tests__/mochaPlugin.spec.js index 8fca865427..fdca6b364d 100644 --- a/packages/@vue/cli-plugin-unit-mocha/__tests__/mochaPlugin.spec.js +++ b/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`) }) diff --git a/packages/@vue/cli-plugin-unit-mocha/generator/index.js b/packages/@vue/cli-plugin-unit-mocha/generator/index.js index 40fa7490a8..a64523690c 100644 --- a/packages/@vue/cli-plugin-unit-mocha/generator/index.js +++ b/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' } }) diff --git a/packages/@vue/cli-plugin-unit-mocha/index.js b/packages/@vue/cli-plugin-unit-mocha/index.js index 29277ff93f..a86778457a 100644 --- a/packages/@vue/cli-plugin-unit-mocha/index.js +++ b/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 ', @@ -75,5 +75,5 @@ module.exports = api => { } module.exports.defaultModes = { - test: 'test' + 'test:unit': 'test' }