feat: e2e nightwatch

Author: yyx990803

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

@@ -0,0 +1,11 @@
+module.exports = api => {
+  api.render('./template', {
+    hasTS: api.hasPlugin('typescript')
+  })
+
+  api.extendPackage({
+    scripts: {
+      e2e: 'vue-cli-service e2e'
+    }
+  })
+}

packages/@vue/cli-plugin-e2e-nightwatch/generator/template/test/e2e/custom-assertions/elementCount.js

@@ -0,0 +1,18 @@
+// A custom Nightwatch assertion.
+// The assertion name is the filename.
+// Example usage:
+//
+//   browser.assert.elementCount(selector, count)
+//
+// For more information on custom assertions see:
+// http://nightwatchjs.org/guide#writing-custom-assertions
+
+exports.assertion = function (selector, count) {
+  this.message = `Testing if element <${selector}> has count: ${count}`
+  this.expected = count
+  this.pass = val => val === count
+  this.value = res => res.value
+  this.command = cb => this.api.execute(function (selector) {
+    return document.querySelectorAll(selector).length
+  }, [selector], cb)
+}

packages/@vue/cli-plugin-e2e-nightwatch/generator/template/test/e2e/specs/test.js

@@ -0,0 +1,14 @@
+// For authoring Nightwatch tests, see
+// http://nightwatchjs.org/guide#usage
+
+module.exports = {
+  'default e2e tests': browser => {
+    browser
+      .url(process.env.VUE_DEV_SERVER_URL)
+      .waitForElementVisible('#app', 5000)
+      .assert.elementPresent('.hello')
+      .assert.containsText('h1', 'Welcome to Your Vue.js <%- hasTS ? '+ TypeScript ' : '' %>App')
+      .assert.elementCount('img', 1)
+      .end()
+  }
+}

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

@@ -0,0 +1,42 @@
+module.exports = (api, options) => {
+  api.registerCommand('e2e', {
+    description: 'run e2e tests with nightwatch',
+    options: {
+      '--url': 'run e2e tests against given url instead of auto-starting dev server',
+      '-e, --env': 'specify comma-delimited browser envs to run in (default: chrome)',
+      '-t, --test': 'sepcify a test to run by name',
+      '-f, --filter': 'glob to filter tests by filename'
+    },
+    usage: 'vue-cli-service e2e [options]'
+  }, (args, rawArgs) => {
+    if (args.url) {
+      const i = rawArgs.findIndex(arg => /^--url/.test(arg))
+      rawArgs = rawArgs.splice(i, 2)
+    }
+
+    const serverPromise = args.url
+      ? Promise.resolve({ url: args.url })
+      : api.service.run('serve', { mode: 'production' })
+
+    return serverPromise.then(({ server, url }) => {
+      // expose dev server url to tests
+      process.env.VUE_DEV_SERVER_URL = url
+      // expose user options to config file
+      process.env.VUE_NIGHTWATCH_USER_OPTIONS = JSON.stringify(options.nightwatch || {})
+
+      rawArgs.push('--config', require.resolve('./nightwatch.config.js'))
+      if (rawArgs.indexOf('--env') === -1) {
+        rawArgs.push('--env', 'chrome')
+      }
+
+      const execa = require('execa')
+      const nightWatchBinPath = require.resolve('nightwatch/bin/nightwatch')
+      const runner = execa(nightWatchBinPath, rawArgs, { stdio: 'inherit' })
+      if (server) {
+        runner.on('exit', () => server.close())
+        runner.on('error', () => server.close())
+      }
+      return runner
+    })
+  })
+}

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

@@ -0,0 +1,36 @@
+// http://nightwatchjs.org/gettingstarted#settings-file
+
+const deepmerge = require('deepmerge')
+const userOptions = JSON.parse(process.env.VUE_NIGHTWATCH_USER_OPTIONS || '{}')
+
+module.exports = deepmerge({
+  src_folders: ['test/e2e/specs'],
+  output_folder: 'test/e2e/reports',
+  custom_assertions_path: ['test/e2e/custom-assertions'],
+
+  selenium: {
+    start_process: true,
+    server_path: require('selenium-server').path,
+    host: '127.0.0.1',
+    port: 4444,
+    cli_args: {
+      'webdriver.chrome.driver': require('chromedriver').path
+    }
+  },
+
+  test_settings: {
+    default: {
+      selenium_port: 4444,
+      selenium_host: 'localhost',
+      silent: true
+    },
+
+    chrome: {
+      desiredCapabilities: {
+        browserName: 'chrome',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    }
+  }
+}, userOptions)

packages/@vue/cli-plugin-e2e-nightwatch/package.json

@@ -20,5 +20,12 @@
   "homepage": "https://github.com/vuejs/vue-cli/packages/@vue/cli-plugin-e2e-nightwatch#readme",
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "chromedriver": "^2.34.1",
+    "deepmerge": "^2.0.1",
+    "execa": "^0.9.0",
+    "nightwatch": "^0.9.19",
+    "selenium-server": "^3.8.1"
   }
 }

packages/@vue/cli-plugin-typescript/generator/index.js

@@ -109,10 +109,11 @@ module.exports = (api, {
   // delete all js files that have a ts file of the same name
   // and simply rename other js files to ts
   const jsRE = /\.js$/
+  const e2eRE = /^test\/e2e\//
   const convertLintFlags = require('../lib/convertLintFlags')
   api.postProcessFiles(files => {
     for (const file in files) {
-      if (jsRE.test(file)) {
+      if (jsRE.test(file) && !e2eRE.test(file)) {
         const tsFile = file.replace(jsRE, '.ts')
         if (!files[tsFile]) {
           files[tsFile] = convertLintFlags(files[file])

packages/@vue/cli-service/generator/template/.gitignore

@@ -1,12 +1,7 @@
 .DS_Store
 node_modules
 /dist
-<%_ if (options.coverage) { _%>
-
-# test coverage files
-/test/unit/coverage/
-<%_ } _%>
-<%_ if (options.e2e === 'nightwatch') { _%>
+<%_ if (rootOptions.plugins && rootOptions.plugins['@vue/cli-plugin-e2e-nightwatch']) { _%>
 
 # e2e reports & log
 /test/e2e/reports/

packages/@vue/cli-service/lib/commands/serve.js

@@ -47,11 +47,8 @@ module.exports = (api, options) => {
     const host = args.host || process.env.HOST || projectDevServerOptions.host || defaults.host
     portfinder.basePort = args.port || process.env.PORT || projectDevServerOptions.port || defaults.port
 
-    portfinder.getPort((err, port) => {
-      if (err) {
-        return error(err)
-      }
-
+    const portPromise = portfinder.getPortPromise()
+    return portPromise.then(port => new Promise((resolve, reject) => {
       const webpackConfig = api.resolveWebpackConfig()
 
       const urls = prepareURLs(
@@ -114,6 +111,13 @@ module.exports = (api, options) => {
           if (args.open || projectDevServerOptions.open) {
             openBrowser(urls.localUrlForBrowser)
           }
+
+          // resolve returned Promise
+          // so other commands can do api.service.run('serve').then(...)
+          resolve({
+            server,
+            url: urls.localUrlForBrowser
+          })
         } else if (process.env.VUE_CLI_TEST) {
           // signal for test to check HMR
           console.log('App updated')
@@ -182,7 +186,7 @@ module.exports = (api, options) => {
           return error(err)
         }
       })
-    })
+    }))
   })
 }
 

packages/@vue/cli/lib/Creator.js

@@ -184,7 +184,7 @@ module.exports = class Creator {
       saveOptions(options, true /* replace */)
     }
 
-    debug('vue:cli-ptions')(options)
+    debug('vue:cli-options')(options)
     return options
   }
 

packages/@vue/cli/lib/promptModules/e2e.js

@@ -1,2 +1,34 @@
 module.exports = cli => {
+  cli.injectFeature({
+    name: 'E2E Testing',
+    value: 'e2e',
+    short: 'E2E'
+  })
+
+  cli.injectPrompt({
+    name: 'e2e',
+    when: answers => answers.features.includes('e2e'),
+    type: 'list',
+    message: 'Pick a E2E testing solution:',
+    choices: [
+      {
+        name: 'Cypress (Chrome only)',
+        value: 'cypress',
+        short: 'Cypress'
+      },
+      {
+        name: 'Nightwatch (Selenium-based)',
+        value: 'nightwatch',
+        short: 'Nightwatch'
+      }
+    ]
+  })
+
+  cli.onPromptComplete((answers, options) => {
+    if (answers.e2e === 'cypress') {
+      options.plugins['@vue/cli-plugin-e2e-cypress'] = {}
+    } else if (answers.e2e === 'nightwatch') {
+      options.plugins['@vue/cli-plugin-e2e-nightwatch'] = {}
+    }
+  })
 }