WIP: create wrapper component with vue test-utils

cypress/integration/message-list-spec.js

@@ -13,10 +13,11 @@ describe('MessageList', () => {
   })
 
   it('shows messages', () => {
-    Cypress.vue.messages = ['one', 'two']
+    Cypress.$vue.setProps({messages: ['one', 'two']}) // using vue-test-utils
+
     getItems().should('have.length', 2)
     cy.then(() => {
-      Cypress.vue.messages.push('three')
+      Cypress.vue.messages.push('three') // using the prop directly
       getItems().should('have.length', 3)
     })
   })

index.d.ts

@@ -0,0 +1,34 @@
+import Vue, { ComponentOptions } from "vue";
+
+declare global {
+  namespace Cypress {
+    import Vue from "vue";
+    import { Wrapper, VueClass } from '@vue/test-utils';
+
+    interface Cypress {
+      vue: Vue;
+      $vue: Wrapper<Vue>
+    }
+  }
+}
+
+interface Options {
+  mountId?: string;
+  html?: string;
+  base?: string;
+  extensions: {
+    components: {[name: string]: any};
+    filters: {[name: string]: any};
+    use: any[];
+    plugins: any[];
+    mixin: any[];
+    mixins: any[];
+  };
+}
+
+function mountVue<V extends Vue>(
+  component: Vue.VueConstructor,
+  optionsOrProps?: Options
+): () => void;
+
+export = mountVue;

package.json

@@ -29,6 +29,7 @@
   },
   "files": [
     "src/*.js",
+    "index.d.ts",
     "preprocessor/*.js",
     "!src/*-spec.js"
   ],
@@ -39,6 +40,7 @@
   ],
   "license": "MIT",
   "main": "src/",
+  "types": "index.d.ts",
   "private": false,
   "publishConfig": {
     "registry": "http://registry.npmjs.org/"
@@ -111,7 +113,7 @@
   },
   "dependencies": {
     "@cypress/webpack-preprocessor": "2.0.1",
-    "common-tags": "1.8.0",
-    "@kazupon/vue-i18n-loader": "0.3.0"
+    "@kazupon/vue-i18n-loader": "0.3.0",
+    "common-tags": "1.8.0"
   }
 }

src/index.js

@@ -2,6 +2,7 @@
 
 const Vue = require('vue/dist/vue')
 const { stripIndent } = require('common-tags')
+const { createWrapper } = require('@vue/test-utils')
 
 // mountVue options
 const defaultOptions = ['html', 'vue', 'base', 'mountId', 'extensions']
@@ -201,7 +202,6 @@ const mountVue = (component, optionsOrProps = {}) => () => {
   installPlugins(Vue, options)
   registerGlobalComponents(Vue, options)
   deleteCachedConstructors(component)
-
   // create root Vue component
   // and make it accessible via Cypress.vue
   if (isConstructor(component)) {
@@ -212,6 +212,7 @@ const mountVue = (component, optionsOrProps = {}) => () => {
     Cypress.vue = new Vue(component).$mount(el)
     copyStyles(component)
   }
+  Cypress.$vue = createWrapper(Cypress.vue)
 
   return cy
     .window({ log: false })