Setup Vue CLI (Vue 3) with Cypress Code Coverage

setup-vue-cli-3/.gitignore

@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+/dist
+
+.nyc_output
+coverage
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

setup-vue-cli-3/.nycrc

@@ -0,0 +1,13 @@
+{
+  "include": [
+    "src/**/*.{js,vue}"
+  ],
+  "exclude": [
+    "src/**/*.spec.ct.js"
+  ],
+  "extension": [
+    ".js",
+    ".vue"
+  ],
+  "all": true
+}

setup-vue-cli-3/README.md

@@ -0,0 +1,84 @@
+# Component Testing Example: Vue CLI (Vue 3)
+
+This is an example **Vue CLI (Vue 3)** project with Cypress component testing.
+
+- `yarn` to install the dependencies
+- `npx cypress open-ct` to run interactively
+- `npx cypress run-ct` to run all tests headlessly
+
+The following was done to create this example:
+
+1. Initialize a baseline project in the [setup-vue-cli-3](.) subdirectory
+   1. `vue create --preset ./setup-vue-cli-3.json setup-vue-cli-3`
+   2. `cd setup-vue-cli-3`
+   3. Commit [`4cf2e78`](https://github.com/cypress-io/cypress-component-testing-examples/commit/4cf2e7822db86221a30a37fe320e16ec8876f514)
+2. Update app to move global styles into main.css file
+   1. Move global app styles from [src/App.vue](src/App.vue) into [src/main.css](src/main.css)
+   2. Update [src/main.js](src/main.js)
+   3. Commit [`9e492d1`](https://github.com/cypress-io/cypress-component-testing-examples/commit/9e492d113dc88c909d611762fc83044ce97e5420)
+3. Add Cypress component testing support with sample tests
+   1. `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`
+   2. Add [cypress.config.js](cypress.config.js)
+   3. Add [cypress/component/index.html](cypress/component/index.html)
+   1. Update [src/App.vue](src/App.vue) to reference new [src/components/Counter.vue](src/components/Counter.vue) component
+   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. Add [src/CounterCompositionApi.vue](src/components/CounterCompositionApi.vue), a Composition API component with tests in [src/components/CounterCompositionApi.cy.js](src/components/CounterCompositionApi.cy.js)
+   6. `npx cypress open` (Notice that the fonts don't inherit global app styles)
+   7. Edit [cypress/support/component.js](cypress/support/component.js) to import global app styles, the Cypress test preview should update automatically
+   8. Commit [`41e51e8`](https://github.com/cypress-io/cypress-component-testing-examples/commit/41e51e8b46ac071da59cfb609955bd1635df7640)
+4. Add Cypress Code Coverage
+   1. `yarn add -D @cypress/code-coverage@3.10.0-dev.1 babel-plugin-istanbul`
+   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
+   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
+   8. Commit [`7dd07d0`](https://github.com/cypress-io/cypress-component-testing-examples/commit/7dd07d03642ae687c27604084e977f0c5cc18ce6)
+
+Notes:
+
+- The following `setup-vue-cli-3.json` [preset file](https://cli.vuejs.org/guide/plugins-and-presets.html#local-filesystem-preset) was used when initializing this project with `vue create` in step 1:
+
+```json
+{
+  "useConfigFiles": false,
+  "plugins": {
+    "@vue/cli-plugin-babel": {},
+    "@vue/cli-plugin-eslint": {
+      "config": "base",
+      "lintOn": []
+    }
+  },
+  "vueVersion": "3"
+}
+```
+
+_This example was generated by [setup-vue-cli-3.sh](https://github.com/cypress-io/cypress-component-testing-examples/blob/main/scripts/setup-vue-cli-3.sh) on 2022-02-22. The original README follows._
+
+---
+
+# setup-vue-cli-3
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

setup-vue-cli-3/babel.config.js

@@ -0,0 +1,12 @@
+const plugins = []
+
+if (process.env.CYPRESS) {
+  plugins.push('istanbul')
+}
+
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins
+}

setup-vue-cli-3/cypress.config.js

@@ -0,0 +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 },
+    setupNodeEvents(on, config) {
+      codeCoverageTask(on, config);
+      return config;
+    },
+  },
+})

setup-vue-cli-3/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>
+
+  </head>
+  <body>
+
+    <div id="__cy_root"></div>
+  </body>
+</html>

setup-vue-cli-3/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"
+}

setup-vue-cli-3/cypress/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 will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

setup-vue-cli-3/cypress/support/component.js

@@ -0,0 +1,7 @@
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Ensure global app styles are loaded:
+import '../../src/main.css'
+
+import '@cypress/code-coverage/support'

setup-vue-cli-3/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "setup-vue-cli-3",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@cypress/code-coverage": "3.10.0-dev.1",
+    "@cypress/vue": "3",
+    "@cypress/webpack-dev-server": "^1.8.1",
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-istanbul": "^6.1.1",
+    "cypress": "https://cdn.cypress.io/beta/npm/10.0.0/linux-x64/circle-10.0-release-e7718f7489276cac2e8ad71bc57a627eb0135fbd/cypress.tgz",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0",
+    "webpack-dev-server": "^4.7.4"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

setup-vue-cli-3/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <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">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

setup-vue-cli-3/src/App.cy.js

@@ -0,0 +1,11 @@
+import { mount } from '@cypress/vue'
+import App from './App.vue'
+
+it('shows the App', () => {
+  mount(App)
+  cy.get('[alt="Vue logo"]')
+  cy.get('h1').contains('Welcome to Your Vue.js App')
+  cy.get('button').click()
+  cy.get('[data-test=count]').should("have.text", "Total clicks: 1")
+  cy.get('button').click()
+})

setup-vue-cli-3/src/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <img alt="Vue logo" src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <Counter />
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+import Counter from './components/Counter.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld,
+    Counter
+  }
+}
+</script>
+
+<style>
+#app {
+  margin-top: 60px;
+}
+</style>

setup-vue-cli-3/src/components/Counter.cy.js

@@ -0,0 +1,10 @@
+import { mount } from '@cypress/vue'
+import Counter from './Counter.vue'
+
+it('shows the Counter', () => {
+  mount(Counter)
+  cy.get('button').click()
+  cy.get('[data-test=count]').should("have.text", "Total clicks: 1")
+  cy.get('button').click()
+  cy.get('[data-test=count]').should("have.text", "Total clicks: 2")
+})

setup-vue-cli-3/src/components/Counter.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <p data-test="count">Total clicks: {{ count }}</p>
+    <button @click="increment">increment</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    count: 0,
+  }),
+
+  methods: {
+    increment() {
+      this.count++
+    },
+  },
+}
+</script>

setup-vue-cli-3/src/components/CounterCompositionApi.cy.js

@@ -0,0 +1,10 @@
+import { mount } from '@cypress/vue'
+import CounterCompositionApi from './CounterCompositionApi.vue'
+
+it('shows the CounterCompositionApi', () => {
+  mount(CounterCompositionApi)
+  cy.get('button').click()
+  cy.get('[data-test=count]').should("have.text", "Total clicks: 1")
+  cy.get('button').click()
+  cy.get('[data-test=count]').should("have.text", "Total clicks: 2")
+})

setup-vue-cli-3/src/components/CounterCompositionApi.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <button @click="increment">Increment</button>
+    <p data-test="count">Total clicks: {{ count }}</p>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const count = ref(0)
+    const increment = () => ++count.value
+
+    return { count, increment }
+  }
+}
+</script>