fix: add Example cli TypeScript project (#356)

- remove double plugin insert

.gitignore

@@ -8,3 +8,4 @@ cypress/screenshots
 .nyc_output
 coverage
 *.tgz
+examples/*/cypress/videos/

examples/cli-ts/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

examples/cli-ts/.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# 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?

examples/cli-ts/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/cli-ts/README.md

@@ -0,0 +1,5 @@
+# cli-ts
+
+Application scaffolded with Vue CLI v3 and tested using `Cypress` + `cypress-vue-unit-test`
+
+![Scaffold settings](images/scaffold.png)

examples/cli-ts/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

examples/cli-ts/cypress.json

@@ -0,0 +1,6 @@
+{
+  "experimentalComponentTesting": true,
+  "componentFolder": "src",
+  "testFiles": "**/*.spec.ts",
+  "fixturesFolder": false
+}

examples/cli-ts/cypress/integration/spec.ts

@@ -0,0 +1 @@
+it('has placeholder e2e test', () => {})

examples/cli-ts/cypress/plugins/index.ts

@@ -0,0 +1,6 @@
+const preprocessor = require('cypress-vue-unit-test/dist/plugins/webpack')
+module.exports = (on, config) => {
+  preprocessor(on, config)
+  // IMPORTANT return the config object
+  return config
+}

examples/cli-ts/cypress/support/index.ts

@@ -0,0 +1 @@
+import 'cypress-vue-unit-test/dist/support'

examples/cli-ts/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "cli-ts",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "cy:open": "../../node_modules/.bin/cypress open",
+    "cy:run": "../../node_modules/.bin/cypress run"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^8.4.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-typescript": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
+    "cypress-vue-unit-test": "file:../..",
+    "typescript": "~3.9.3",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

examples/cli-ts/src/App.vue

@@ -0,0 +1,29 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import HelloWorld from './components/HelloWorld.vue';
+
+@Component({
+  components: {
+    HelloWorld,
+  },
+})
+export default class App extends Vue {}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

examples/cli-ts/src/components/HelloWorld.spec.ts

@@ -0,0 +1,11 @@
+import { mount } from 'cypress-vue-unit-test'
+import HelloWorld from './HelloWorld.vue'
+
+describe('HelloWorld', () => {
+  it('shows links', () => {
+    // @ts-ignore
+    mount(HelloWorld)
+    // there are a lot of links
+    cy.get('li').should('have.length.gt', 10)
+  })
+})

examples/cli-ts/src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class HelloWorld extends Vue {
+  @Prop() private msg!: string;
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

examples/cli-ts/src/main.ts

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

examples/cli-ts/src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

examples/cli-ts/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

examples/cli-ts/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

examples/cli/README.md

@@ -1,3 +1,3 @@
 # cli-example
 
-Application scaffolded with Vue CLI v3
+Application scaffolded with Vue CLI v3 and tested using `Cypress` + `cypress-vue-unit-test`

src/preprocessor/webpack.js

@@ -6,6 +6,7 @@ import util from 'util'
 const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 const debug = require('debug')('cypress-vue-unit-test')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
+// const { VueLoaderPlugin } = require('vue-loader')
 const fw = require('find-webpack')
 
 // Preventing chunks because we don't serve static assets
@@ -51,6 +52,20 @@ function compileTemplate(options = {}) {
   options.resolve.alias['vue$'] = 'vue/dist/vue.esm.js'
 }
 
+/**
+ * Warning: modifies the input object
+ * @param {WebpackOptions} options
+ */
+
+function removeForkTsCheckerWebpackPlugin(options) {
+  if (!Array.isArray(options.plugins)) {
+    return
+  }
+  options.plugins = options.plugins.filter((plugin) => {
+    return plugin.typescript === undefined
+  })
+}
+
 /**
  * Warning: modifies the input object
  * @param {Cypress.ConfigOptions} config
@@ -100,9 +115,11 @@ function insertBabelLoader(config, options) {
   options.module.rules.push(babelRule)
   options.plugins = options.plugins || []
 
-  const pluginFound = options.plugins.some(
-    (plugin) => plugin.constructor === VueLoaderPlugin,
-  )
+  const pluginFound = options.plugins.find((plugin) => {
+    return (
+      plugin.constructor && plugin.constructor.name === VueLoaderPlugin.name
+    )
+  })
   if (!pluginFound) {
     debug('inserting VueLoaderPlugin')
     options.plugins.push(new VueLoaderPlugin())
@@ -127,12 +144,18 @@ const onFileDefaultPreprocessor = (config) => {
   compileTemplate(webpackOptions)
   insertBabelLoader(config, webpackOptions)
 
+  // if I remove it, then get another message
+  // [VueLoaderPlugin Error] No matching use for vue-loader is found.
+  // removeForkTsCheckerWebpackPlugin(webpackOptions)
+
   if (debug.enabled) {
     console.error('final webpack')
-    console.error(util.inspect(webpackOptions, false, 10, true))
+    console.error(util.inspect(webpackOptions, false, 2, true))
   }
 
-  return webpackPreprocessor({ webpackOptions })
+  return webpackPreprocessor({
+    webpackOptions,
+  })
 }
 
 /**