diff --git a/.gitignore b/.gitignore index 6d387cd..4e23f6a 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ cypress/screenshots .nyc_output coverage *.tgz +examples/*/cypress/videos/ diff --git a/examples/cli-ts/.browserslistrc b/examples/cli-ts/.browserslistrc new file mode 100644 index 0000000..214388f --- /dev/null +++ b/examples/cli-ts/.browserslistrc @@ -0,0 +1,3 @@ +> 1% +last 2 versions +not dead diff --git a/examples/cli-ts/.gitignore b/examples/cli-ts/.gitignore new file mode 100644 index 0000000..11f5d71 --- /dev/null +++ b/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? diff --git a/examples/cli-ts/.npmrc b/examples/cli-ts/.npmrc new file mode 100644 index 0000000..43c97e7 --- /dev/null +++ b/examples/cli-ts/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/examples/cli-ts/README.md b/examples/cli-ts/README.md new file mode 100644 index 0000000..764a6a4 --- /dev/null +++ b/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) diff --git a/examples/cli-ts/babel.config.js b/examples/cli-ts/babel.config.js new file mode 100644 index 0000000..e955840 --- /dev/null +++ b/examples/cli-ts/babel.config.js @@ -0,0 +1,5 @@ +module.exports = { + presets: [ + '@vue/cli-plugin-babel/preset' + ] +} diff --git a/examples/cli-ts/cypress.json b/examples/cli-ts/cypress.json new file mode 100644 index 0000000..70c873b --- /dev/null +++ b/examples/cli-ts/cypress.json @@ -0,0 +1,6 @@ +{ + "experimentalComponentTesting": true, + "componentFolder": "src", + "testFiles": "**/*.spec.ts", + "fixturesFolder": false +} diff --git a/examples/cli-ts/cypress/integration/spec.ts b/examples/cli-ts/cypress/integration/spec.ts new file mode 100644 index 0000000..fa4ebfe --- /dev/null +++ b/examples/cli-ts/cypress/integration/spec.ts @@ -0,0 +1 @@ +it('has placeholder e2e test', () => {}) diff --git a/examples/cli-ts/cypress/plugins/index.ts b/examples/cli-ts/cypress/plugins/index.ts new file mode 100644 index 0000000..3dab39a --- /dev/null +++ b/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 +} diff --git a/examples/cli-ts/cypress/support/index.ts b/examples/cli-ts/cypress/support/index.ts new file mode 100644 index 0000000..2d55e8b --- /dev/null +++ b/examples/cli-ts/cypress/support/index.ts @@ -0,0 +1 @@ +import 'cypress-vue-unit-test/dist/support' diff --git a/examples/cli-ts/images/scaffold.png b/examples/cli-ts/images/scaffold.png new file mode 100644 index 0000000..9e0c4eb Binary files /dev/null and b/examples/cli-ts/images/scaffold.png differ diff --git a/examples/cli-ts/package.json b/examples/cli-ts/package.json new file mode 100644 index 0000000..4e07991 --- /dev/null +++ b/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" + } +} diff --git a/examples/cli-ts/src/App.vue b/examples/cli-ts/src/App.vue new file mode 100644 index 0000000..bfc4cad --- /dev/null +++ b/examples/cli-ts/src/App.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/examples/cli-ts/src/assets/logo.png b/examples/cli-ts/src/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/examples/cli-ts/src/assets/logo.png differ diff --git a/examples/cli-ts/src/components/HelloWorld.spec.ts b/examples/cli-ts/src/components/HelloWorld.spec.ts new file mode 100644 index 0000000..23466e4 --- /dev/null +++ b/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) + }) +}) diff --git a/examples/cli-ts/src/components/HelloWorld.vue b/examples/cli-ts/src/components/HelloWorld.vue new file mode 100644 index 0000000..0cf3cc3 --- /dev/null +++ b/examples/cli-ts/src/components/HelloWorld.vue @@ -0,0 +1,58 @@ + + + + + + diff --git a/examples/cli-ts/src/main.ts b/examples/cli-ts/src/main.ts new file mode 100644 index 0000000..63eb05f --- /dev/null +++ b/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') diff --git a/examples/cli-ts/src/shims-tsx.d.ts b/examples/cli-ts/src/shims-tsx.d.ts new file mode 100644 index 0000000..c656c68 --- /dev/null +++ b/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 + } + } +} diff --git a/examples/cli-ts/src/shims-vue.d.ts b/examples/cli-ts/src/shims-vue.d.ts new file mode 100644 index 0000000..d9f24fa --- /dev/null +++ b/examples/cli-ts/src/shims-vue.d.ts @@ -0,0 +1,4 @@ +declare module '*.vue' { + import Vue from 'vue' + export default Vue +} diff --git a/examples/cli-ts/tsconfig.json b/examples/cli-ts/tsconfig.json new file mode 100644 index 0000000..b57578e --- /dev/null +++ b/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" + ] +} diff --git a/examples/cli/README.md b/examples/cli/README.md index 29f9f46..e109aed 100644 --- a/examples/cli/README.md +++ b/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` diff --git a/src/preprocessor/webpack.js b/src/preprocessor/webpack.js index 4f09c16..9753ea8 100644 --- a/src/preprocessor/webpack.js +++ b/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, + }) } /**