Setup Vue CLI 2 & 3 Cypress Code Coverage Scripts

scripts/vue-cli-2.sh → scripts/setup-vue-cli-2.sh

@@ -43,12 +43,12 @@ apply_patch
 commit_all "Update app to move global styles into main.css file"
 
 step
-cmd yarn add -D cypress @cypress/vue @cypress/webpack-dev-server webpack-dev-server
+cmd yarn add -D https://cdn.cypress.io/beta/npm/10.0.0/linux-x64/circle-10.0-release-e7718f7489276cac2e8ad71bc57a627eb0135fbd/cypress.tgz @cypress/vue@^2.2.4 @cypress/webpack-dev-server webpack-dev-server
 apply_patch
 commit_all "Add Cypress with example component and page tests"
 
 step
-cmd yarn add -D @cypress/code-coverage babel-plugin-istanbul
+cmd yarn add -D @cypress/code-coverage@3.10.0-dev.1 babel-plugin-istanbul
 apply_patch
 commit_all "Configure Cypress Code Coverage plugin"
 

scripts/vue-cli-3/1.patch → scripts/setup-vue-cli-2/1.patch

@@ -1,7 +1,7 @@
-diff --git a/vue-cli-2/src/App.vue b/vue-cli-2/src/App.vue
+diff --git a/setup-vue-cli-2/src/App.vue b/setup-vue-cli-2/src/App.vue
 index 55df315..b9ac61a 100644
---- a/vue-cli-2/src/App.vue
-+++ b/vue-cli-2/src/App.vue
+--- a/setup-vue-cli-2/src/App.vue
++++ b/setup-vue-cli-2/src/App.vue
 @@ -18,11 +18,6 @@ export default {
 
  <style>
@@ -14,11 +14,11 @@ index 55df315..b9ac61a 100644
    margin-top: 60px;
  }
  </style>
-diff --git a/vue-cli-2/src/main.css b/vue-cli-2/src/main.css
+diff --git a/setup-vue-cli-2/src/main.css b/setup-vue-cli-2/src/main.css
 new file mode 100644
 index 0000000..110b5e1
 --- /dev/null
-+++ b/vue-cli-2/src/main.css
++++ b/setup-vue-cli-2/src/main.css
 @@ -0,0 +1,7 @@
 +body {
 +  font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -27,10 +27,10 @@ index 0000000..110b5e1
 +  text-align: center;
 +  color: #2c3e50;
 +}
-diff --git a/vue-cli-2/src/main.js b/vue-cli-2/src/main.js
+diff --git a/setup-vue-cli-2/src/main.js b/setup-vue-cli-2/src/main.js
 index 63eb05f..1d9028a 100644
---- a/vue-cli-2/src/main.js
-+++ b/vue-cli-2/src/main.js
+--- a/setup-vue-cli-2/src/main.js
++++ b/setup-vue-cli-2/src/main.js
 @@ -1,5 +1,6 @@
  import Vue from 'vue'
  import App from './App.vue'

scripts/vue-cli-2/2.patch → scripts/setup-vue-cli-2/2.patch

@@ -1,49 +1,58 @@
-diff --git a/vue-cli-2/cypress.json b/vue-cli-2/cypress.json
+diff --git a/setup-vue-cli-2/cypress.config.js b/setup-vue-cli-2/cypress.config.js
 new file mode 100644
-index 0000000..a57b21f
+index 0000000..eabdc78
 --- /dev/null
-+++ b/vue-cli-2/cypress.json
-@@ -0,0 +1,6 @@
-+{
-+  "component": {
-+    "testFiles": "**/*.spec.ct.{js,ts,jsx,tsx}",
-+    "componentFolder": "src"
-+  }
-+}
-diff --git a/vue-cli-2/cypress/fixtures/example.json b/vue-cli-2/cypress/fixtures/example.json
++++ b/setup-vue-cli-2/cypress.config.js
+@@ -0,0 +1,11 @@
++const { defineConfig } = require('cypress')
++const { devServer } = require('@cypress/webpack-dev-server')
++const webpackConfig = require('@vue/cli-service/webpack.config')
++
++module.exports = defineConfig({
++  // Component testing, JavaScript, Vue CLI, Webpack
++  component: {
++    devServer,
++    devServerConfig: { webpackConfig }
++  },
++})
+\ No newline at end of file
+diff --git a/setup-vue-cli-2/cypress/fixtures/example.json b/setup-vue-cli-2/cypress/fixtures/example.json
 new file mode 100644
 index 0000000..02e4254
 --- /dev/null
-+++ b/vue-cli-2/cypress/fixtures/example.json
++++ b/setup-vue-cli-2/cypress/fixtures/example.json
 @@ -0,0 +1,5 @@
 +{
 +  "name": "Using fixtures to represent data",
 +  "email": "hello@cypress.io",
 +  "body": "Fixtures are a great way to mock data for responses to routes"
 +}
-diff --git a/vue-cli-2/cypress/plugins/index.js b/vue-cli-2/cypress/plugins/index.js
+diff --git a/setup-vue-cli-2/cypress/component/index.html b/setup-vue-cli-2/cypress/component/index.html
 new file mode 100644
-index 0000000..3590bd9
+index 0000000..410b588
 --- /dev/null
-+++ b/vue-cli-2/cypress/plugins/index.js
-@@ -0,0 +1,12 @@
-+const { startDevServer } = require('@cypress/webpack-dev-server')
-+const webpackConfig = require('@vue/cli-service/webpack.config')
++++ b/setup-vue-cli-2/cypress/component/index.html
+@@ -0,0 +1,14 @@
++<!DOCTYPE html>
++<html>
++  <head>
++    <meta charset="utf-8">
++    <meta http-equiv="X-UA-Compatible" content="IE=edge">
++    <meta name="viewport" content="width=device-width,initial-scale=1.0">
++    <title>Components App</title>
 +
-+module.exports = (on, config) => {
-+  on('dev-server:start', (options) => {
-+    return startDevServer({
-+      options,
-+      webpackConfig,
-+    })
-+  })
-+  return config
-+}
-diff --git a/vue-cli-2/cypress/support/commands.js b/vue-cli-2/cypress/support/commands.js
++  </head>
++  <body>
++
++    <div id="__cy_root"></div>
++  </body>
++</html>
+\ No newline at end of file
+diff --git a/setup-vue-cli-2/cypress/support/commands.js b/setup-vue-cli-2/cypress/support/commands.js
 new file mode 100644
 index 0000000..119ab03
 --- /dev/null
-+++ b/vue-cli-2/cypress/support/commands.js
++++ b/setup-vue-cli-2/cypress/support/commands.js
 @@ -0,0 +1,25 @@
 +// ***********************************************
 +// This example commands.js shows you how to
@@ -70,40 +79,23 @@ index 0000000..119ab03
 +//
 +// -- This will overwrite an existing command --
 +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-diff --git a/vue-cli-2/cypress/support/index.js b/vue-cli-2/cypress/support/index.js
+diff --git a/setup-vue-cli-2/cypress/support/component.js b/setup-vue-cli-2/cypress/support/component.js
 new file mode 100644
-index 0000000..9b7843f
+index 0000000..7e654cd
 --- /dev/null
-+++ b/vue-cli-2/cypress/support/index.js
-@@ -0,0 +1,23 @@
-+// ***********************************************************
-+// 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
-+// ***********************************************************
-+
++++ b/setup-vue-cli-2/cypress/support/component.js
+@@ -0,0 +1,5 @@
 +// Import commands.js using ES2015 syntax:
 +import './commands'
 +
-+// Alternatively you can use CommonJS syntax:
-+// require('./commands')
-+
 +// Ensure global app styles are loaded:
 +import '../../src/main.css'
-diff --git a/vue-cli-2/src/App.spec.ct.js b/vue-cli-2/src/App.spec.ct.js
+\ No newline at end of file
+diff --git a/setup-vue-cli-2/src/App.cy.js b/setup-vue-cli-2/src/App.cy.js
 new file mode 100644
 index 0000000..4a912ba
 --- /dev/null
-+++ b/vue-cli-2/src/App.spec.ct.js
++++ b/setup-vue-cli-2/src/App.cy.js
 @@ -0,0 +1,11 @@
 +import { mount } from '@cypress/vue'
 +import App from './App.vue'
@@ -116,11 +108,11 @@ index 0000000..4a912ba
 +  cy.get('[data-test=count]').should("have.text", "Total clicks: 1")
 +  cy.get('button').click()
 +})
-diff --git a/vue-cli-2/src/components/HelloWorld.spec.ct.js b/vue-cli-2/src/components/HelloWorld.spec.ct.js
+diff --git a/setup-vue-cli-2/src/components/HelloWorld.cy.js b/setup-vue-cli-2/src/components/HelloWorld.cy.js
 new file mode 100644
 index 0000000..bbbb6c3
 --- /dev/null
-+++ b/vue-cli-2/src/components/HelloWorld.spec.ct.js
++++ b/setup-vue-cli-2/src/components/HelloWorld.cy.js
 @@ -0,0 +1,11 @@
 +import { mount } from '@cypress/vue'
 +import HelloWorld from './HelloWorld.vue'
@@ -133,10 +125,10 @@ index 0000000..bbbb6c3
 +  })
 +  cy.get('h1').contains('Hello World')
 +})
-diff --git a/vue-cli-2/src/App.vue b/vue-cli-2/src/App.vue
+diff --git a/setup-vue-cli-2/src/App.vue b/setup-vue-cli-2/src/App.vue
 index b9ac61a..7988bf5 100644
---- a/vue-cli-2/src/App.vue
-+++ b/vue-cli-2/src/App.vue
+--- a/setup-vue-cli-2/src/App.vue
++++ b/setup-vue-cli-2/src/App.vue
 @@ -2,16 +2,19 @@
    <div id="app">
      <img alt="Vue logo" src="./assets/logo.png">
@@ -158,11 +150,11 @@ index b9ac61a..7988bf5 100644
    }
  }
  </script>
-diff --git a/vue-cli-2/src/components/Counter.vue b/vue-cli-2/src/components/Counter.vue
+diff --git a/setup-vue-cli-2/src/components/Counter.vue b/setup-vue-cli-2/src/components/Counter.vue
 new file mode 100644
 index 0000000..5eb6269
 --- /dev/null
-+++ b/vue-cli-2/src/components/Counter.vue
++++ b/setup-vue-cli-2/src/components/Counter.vue
 @@ -0,0 +1,20 @@
 +<template>
 +  <div>
@@ -185,11 +177,11 @@ index 0000000..5eb6269
 +}
 +</script>
 \ No newline at end of file
-diff --git a/vue-cli-2/src/components/Counter.spec.ct.js b/vue-cli-2/src/components/Counter.spec.ct.js
+diff --git a/setup-vue-cli-2/src/components/Counter.cy.js b/setup-vue-cli-2/src/components/Counter.cy.js
 new file mode 100644
 index 0000000..afd7e21
 --- /dev/null
-+++ b/vue-cli-2/src/components/Counter.spec.ct.js
++++ b/setup-vue-cli-2/src/components/Counter.cy.js
 @@ -0,0 +1,10 @@
 +import { mount } from '@cypress/vue'
 +import Counter from './Counter.vue'

scripts/setup-vue-cli-2/3.patch

@@ -0,0 +1,94 @@
+diff --git a/setup-vue-cli-2/.gitignore b/setup-vue-cli-2/.gitignore
+index 403adbc..372a13f 100644
+--- a/setup-vue-cli-2/.gitignore
++++ b/setup-vue-cli-2/.gitignore
+@@ -21,3 +21,6 @@ pnpm-debug.log*
+ *.njsproj
+ *.sln
+ *.sw?
++
++.nyc_output
++coverage
+diff --git a/setup-vue-cli-2/.nycrc b/setup-vue-cli-2/.nycrc
+new file mode 100644
+index 0000000..3a40283
+--- /dev/null
++++ b/setup-vue-cli-2/.nycrc
+@@ -0,0 +1,13 @@
++{
++  "include": [
++    "src/**/*.{js,vue}"
++  ],
++  "exclude": [
++    "src/**/*.cy.js"
++  ],
++  "extension": [
++    ".js",
++    ".vue"
++  ],
++  "all": true
++}
+\ No newline at end of file
+diff --git a/setup-vue-cli-2/babel.config.js b/setup-vue-cli-2/babel.config.js
+index e955840..f4b8fdb 100644
+--- a/setup-vue-cli-2/babel.config.js
++++ b/setup-vue-cli-2/babel.config.js
+@@ -1,5 +1,12 @@
+-module.exports = {
+-  presets: [
+-    '@vue/cli-plugin-babel/preset'
+-  ]
++const plugins = []
++
++if (process.env.CYPRESS) {
++  plugins.push('istanbul')
+ }
++
++module.exports = {
++   presets: [
++     '@vue/cli-plugin-babel/preset'
++  ],
++  plugins
++}
+\ No newline at end of file
+diff --git a/setup-vue-cli-2/cypress.config.js b/setup-vue-cli-2/cypress.config.js
+index eabdc78..6c3dd60 100644
+--- a/setup-vue-cli-2/cypress.config.js
++++ b/setup-vue-cli-2/cypress.config.js
+@@ -1,11 +1,20 @@
+ const { defineConfig } = require('cypress')
+ const { devServer } = require('@cypress/webpack-dev-server')
+ const webpackConfig = require('@vue/cli-service/webpack.config')
++const codeCoverageTask = require("@cypress/code-coverage/task")
+
+ module.exports = defineConfig({
++  coverage: true,
++  codeCoverage: {
++    exclude: "cypress/**/*.*",
++  },
+   // Component testing, JavaScript, Vue CLI, Webpack
+   component: {
+     devServer,
+-    devServerConfig: { webpackConfig }
++    devServerConfig: { webpackConfig },
++    setupNodeEvents(on, config) {
++      codeCoverageTask(on, config);
++      return config;
++    },
+   },
+ })
+\ No newline at end of file
+diff --git a/setup-vue-cli-2/cypress/support/component.js b/setup-vue-cli-2/cypress/support/component.js
+index 7e654cd..a5eff01 100644
+--- a/setup-vue-cli-2/cypress/support/component.js
++++ b/setup-vue-cli-2/cypress/support/component.js
+@@ -2,4 +2,6 @@
+ import './commands'
+
+ // Ensure global app styles are loaded:
+-import '../../src/main.css'
+\ No newline at end of file
++import '../../src/main.css'
++
++import '@cypress/code-coverage/support'
+\ No newline at end of file

scripts/vue-cli-2/pr.md → scripts/setup-vue-cli-2/pr.md

@@ -8,18 +8,18 @@
    3. ${COMMIT_1}
 3. Add Cypress component testing support with sample tests
    1. ${COMMAND_2}
-   2. Add [cypress.json](cypress.json)
-   3. Add [cypress/plugins/index.js](cypress/plugins/index.js)
+   2. Add [cypress.config.js](cypress.config.js)
+   3. Add [cypress/component/index.html](cypress/component/index.html)
+   1. Add [cypress/support/component.js](cypress/support/component.js)
    1. Update [src/App.vue](src/App.vue) to reference new [src/components/Counter.vue](src/components/Counter.vue) component
-   1. Add [src/App.spec.ct.js](src/App.spec.ct.js), [src/components/HelloWorld.spec.ct.js](src/components/HelloWorld.spec.ct.js), [src/components/Counter.spec.ct.js](src/components/Counter.spec.ct.js) spec files
-   5. `npx cypress open-ct` (Notice that the fonts don't inherit global app styles)
-   6. Edit [cypress/support/index.js](cypress/support/index.js) to import global app styles, the Cypress test preview should update automatically
+   1. Add [src/App.cy.js](src/App.cy.js), [src/components/HelloWorld.cy.js](src/components/HelloWorld.cy.js), [src/components/Counter.cy.js](src/components/Counter.cy.js) spec files
+   5. `npx cypress open` (Notice that the fonts don't inherit global app styles)
+   6. Edit [cypress/support/component.js](cypress/support/component.js) to import global app styles, the Cypress test preview should update automatically
    7. ${COMMIT_2}
 4. Add Cypress Code Coverage
    1. ${COMMAND_3}
-   2. Edit [cypress.json](cypress.json) to enable `coverage`
-   3. Edit [cypress/plugins/index.js](cypress/plugins/index.js) to configure the Cypress code coverage task with Istanbul
-   4. Edit [cypress/support/index.js](cypress/support/index.js) to import Cypress code coverage support
+   2. Edit [cypress.config.js](cypress.config.js) to enable `coverage` and configure the Cypress code coverage task with Istanbul
+   4. Edit [cypress/support/component.js](cypress/support/component.js) to import Cypress code coverage support
    5. Update [babel.config.js](babel.config.js) to conditionally use `babel-plugin-istanbul` when Cypress Component tests are running
    6. Add [.nycrc](.nycrc) to configure istanbul
    7. Edit [.gitignore](.gitignore) to ignore coverage and .nyc_output directories

scripts/vue-cli-3.sh → scripts/setup-vue-cli-3.sh

@@ -43,12 +43,12 @@ apply_patch
 commit_all "Update app to move global styles into main.css file"
 
 step
-cmd yarn add -D cypress @cypress/vue@3 @cypress/webpack-dev-server webpack-dev-server
+cmd yarn add -D https://cdn.cypress.io/beta/npm/10.0.0/linux-x64/circle-10.0-release-e7718f7489276cac2e8ad71bc57a627eb0135fbd/cypress.tgz @cypress/vue@3 @cypress/webpack-dev-server webpack-dev-server
 apply_patch
 commit_all "Add Cypress with example components and page tests"
 
 step
-cmd yarn add -D @cypress/code-coverage babel-plugin-istanbul
+cmd yarn add -D @cypress/code-coverage@3.10.0-dev.1 babel-plugin-istanbul
 apply_patch
 commit_all "Configure Cypress Code Coverage plugin"