feat: e2e cypress

AWodrich · Jan 25, 2018 · 8a3ac7e · 8a3ac7e
1 parent d57208d
commit 8a3ac7e
Show file tree

Hide file tree

Showing 11 changed files with 411 additions and 18 deletions.
diff --git a/packages/@vue/cli-plugin-e2e-cypress/generator/index.js b/packages/@vue/cli-plugin-e2e-cypress/generator/index.js
@@ -0,0 +1,12 @@
+module.exports = api => {
+  api.render('./template', {
+    hasTS: api.hasPlugin('typescript')
+  })
+
+  api.extendPackage({
+    scripts: {
+      e2e: 'vue-cli-service e2e',
+      'e2e:open': 'vue-cli-service e2e:open'
+    }
+  })
+}
diff --git a/packages/@vue/cli-plugin-e2e-cypress/generator/template/cypress.json b/packages/@vue/cli-plugin-e2e-cypress/generator/template/cypress.json
@@ -0,0 +1,3 @@
+{
+  "pluginsFile": "test/e2e/plugins/index.js"
+}
diff --git a/packages/@vue/cli-plugin-e2e-cypress/generator/template/test/e2e/plugins/index.js b/packages/@vue/cli-plugin-e2e-cypress/generator/template/test/e2e/plugins/index.js
@@ -0,0 +1,10 @@
+// https://docs.cypress.io/guides/guides/plugins-guide.html
+
+module.exports = (on, config) => {
+  config.fixturesFolder = 'test/e2e/fixtures'
+  config.integrationFolder = 'test/e2e/specs'
+  config.screenshotsFolder = 'test/e2e/screenshots'
+  config.videosFolder = 'test/e2e/videos'
+  config.supportFile = 'test/e2e/support/index.js'
+  return config
+}
diff --git a/packages/@vue/cli-plugin-e2e-cypress/generator/template/test/e2e/specs/test.js b/packages/@vue/cli-plugin-e2e-cypress/generator/template/test/e2e/specs/test.js
@@ -0,0 +1,8 @@
+// https://docs.cypress.io/api/introduction/api.html
+
+describe('My First Test', () => {
+  it('Visits the Kitchen Sink', () => {
+    cy.visit(Cypress.env('VUE_DEV_SERVER_URL'))
+    cy.contains('h1', 'Welcome to Your Vue.js <%- hasTS ? '+ TypeScript ' : '' %>App')
+  })
+})
diff --git a/packages/@vue/cli-plugin-e2e-cypress/generator/template/test/e2e/support/commands.js b/packages/@vue/cli-plugin-e2e-cypress/generator/template/test/e2e/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/packages/@vue/cli-plugin-e2e-cypress/generator/template/test/e2e/support/index.js b/packages/@vue/cli-plugin-e2e-cypress/generator/template/test/e2e/support/index.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/packages/@vue/cli-plugin-e2e-cypress/index.js b/packages/@vue/cli-plugin-e2e-cypress/index.js
@@ -0,0 +1,57 @@
+module.exports = (api, options) => {
+  const chalk = require('chalk')
+
+  function run (command, args, rawArgs) {
+    if (args.url) {
+      const i = rawArgs.findIndex(arg => /^--url/.test(arg))
+      rawArgs.splice(i, /^--url=/.test(rawArgs[i]) ? 1 : 2)
+    }
+
+    const serverPromise = args.url
+      ? Promise.resolve({ url: args.url })
+      : api.service.run('serve', { mode: 'production' })
+
+    return serverPromise.then(({ url, server }) => {
+      const { info } = require('@vue/cli-shared-utils')
+      info(`Starting e2e tests...`)
+
+      const cyArgs = [
+        command, // open or run
+        '--env', `VUE_DEV_SERVER_URL=${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())
+      }
+      return runner
+    })
+  }
+
+  api.registerCommand('e2e', {
+    description: 'run e2e tests headlessly with `cypress run`',
+    usage: 'vue-cli-service e2e [options]',
+    options: {
+      '--url': 'run e2e tests against given url instead of auto-starting dev server',
+      '-s, --spec': '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))
+
+  api.registerCommand('e2e:open', {
+    description: 'run e2e tests in interactive mode with `cypress open`',
+    usage: 'vue-cli-service e2e:open [options]',
+    options: {
+      '--url': 'run e2e tests against given url instead of auto-starting dev server'
+    },
+    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))
+}
diff --git a/packages/@vue/cli-plugin-e2e-cypress/package.json b/packages/@vue/cli-plugin-e2e-cypress/package.json
@@ -20,5 +20,8 @@
   "homepage": "https://github.com/vuejs/vue-cli/packages/@vue/cli-plugin-e2e-cypress#readme",
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "cypress": "^1.4.1"
   }
 }
diff --git a/packages/@vue/cli-plugin-e2e-nightwatch/index.js b/packages/@vue/cli-plugin-e2e-nightwatch/index.js
@@ -1,13 +1,16 @@
 module.exports = (api, options) => {
   api.registerCommand('e2e', {
     description: 'run e2e tests with nightwatch',
+    usage: 'vue-cli-service e2e [options]',
     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]'
+    details:
+      `All Nightwatch CLI options are also supported.\n` +
+      `https://github.com/nightwatchjs/nightwatch/blob/master/lib/runner/cli/cli.js`
   }, (args, rawArgs) => {
     if (args.url) {
       const i = rawArgs.findIndex(arg => /^--url/.test(arg))

diff --git a/packages/@vue/cli-service/generator/template/.gitignore b/packages/@vue/cli-service/generator/template/.gitignore
@@ -3,10 +3,14 @@ node_modules
 /dist
 <%_ if (rootOptions.plugins && rootOptions.plugins['@vue/cli-plugin-e2e-nightwatch']) { _%>
 
-# e2e reports & log
 /test/e2e/reports/
 selenium-debug.log
 <%_ } _%>
+<%_ if (rootOptions.plugins && rootOptions.plugins['@vue/cli-plugin-e2e-cypress']) { _%>
+
+/test/e2e/videos/
+/test/e2e/screenshots/
+<%_ } _%>
 
 # local env files
 .env.local