feat: vue3 support for @cypress/vue (#15100)

* feat: add support for vue3 in npm/vue

BREAKING CHANGE: dropped support for vue 2 in favor of vue 3

* test: remove filter tests not relevant in vue 3

npm/vue/cypress/component/advanced/access-component/message-spec.js

@@ -15,11 +15,6 @@ describe('Message', () => {
       cy.wrap(Cypress).its('vue.message').should('equal', 'hey')
     })
 
-    it('has no cat property', () => {
-      createCmp({ cat: 'hey', message: 'hey' })
-      cy.wrap(Cypress).its('vue').should('not.have.property', 'cat')
-    })
-
     it('Paco is the default author', () => {
       createCmp({ message: 'hey' })
       cy.wrap(Cypress).its('vue.author').should('equal', 'Paco')
@@ -65,14 +60,10 @@ describe('Message', () => {
 
     it('triggers a message-clicked event clicked', () => {
       createCmp({ message: 'Cat' }).then(() => {
-        const stub = cy.spy()
-
-        Cypress.vue.$on('message-clicked', stub)
         cy.get('.message')
         .click()
         .then(() => {
-          expect(stub).to.be.calledOnce
-          expect(stub).to.be.calledWith('Cat')
+          expect(Cypress.vueWrapper.emitted()).to.have.property('message-clicked')
         })
       })
     })

npm/vue/cypress/component/advanced/i18n/spec.js

@@ -1,8 +1,7 @@
 /// <reference types="cypress" />
-import Vue from 'vue'
 import TranslatedMessageWithJSON from './TranslatedJSONMessage.vue'
 import TranslatedMessageI18nBlock from './TranslatedI18nMessage.vue'
-import VueI18n from 'vue-i18n'
+import { createI18n } from 'vue-i18n'
 import { mount } from '@cypress/vue'
 import messages from './translations.json'
 
@@ -22,23 +21,21 @@ function expectHelloWorldGreeting () {
 }
 
 describe('VueI18n', () => {
-  Vue.use(VueI18n)
-
   describe('with i18n block', () => {
     beforeEach(() => {
-      const i18n = new VueI18n({ locale: 'en' })
+      const i18n = createI18n({ locale: 'en' })
 
-      mount(TranslatedMessageI18nBlock, { i18n })
+      mount(TranslatedMessageI18nBlock, { global: { plugins: [i18n] } })
     })
 
     it('shows HelloWorld for all locales', expectHelloWorldGreeting)
   })
 
   describe('with messages argument', () => {
     beforeEach(() => {
-      const i18n = new VueI18n({ locale: 'en', messages })
+      const i18n = createI18n({ locale: 'en', messages })
 
-      mount(TranslatedMessageWithJSON, { i18n })
+      mount(TranslatedMessageWithJSON, { global: { plugins: [i18n] } })
     })
 
     it('shows HelloWorld for all locales', expectHelloWorldGreeting)

npm/vue/cypress/component/advanced/render-functions/spec.js

@@ -1,5 +1,6 @@
 /// <reference types="cypress" />
 import { mount } from '@cypress/vue'
+import { h as createElement } from 'vue'
 
 describe('Single render function component', () => {
   // the component definition
@@ -118,18 +119,19 @@ describe('Component with slot', () => {
 describe('Component with arguments', () => {
   // the component definition
   const appComponent = {
-    render (createElement) {
+    render () {
       let a = this.elementtype.split(',')
 
       return createElement(
         a[0],
         {
-          attrs: {
-            id: a[3],
-            style: `color:${a[1]};font-size:${a[2]};`,
+          id: a[3],
+          style: {
+            color: a[1],
+            'font-size': `${a[2]}pt`,
           },
         },
-        this.$slots.default || '<EMPTY>',
+        this.$slots.default ? this.$slots.default() : '<EMPTY>',
       )
     },
     props: {
@@ -144,7 +146,7 @@ describe('Component with arguments', () => {
     // we want to use custom app component above
     extensions: {
       components: {
-        'app-component': appComponent,
+        appComponent,
       },
     },
   }
@@ -168,13 +170,13 @@ describe('Component with arguments', () => {
     cy.contains('h3', 'Hello Peter').should(
       'have.attr',
       'style',
-      'color:red;font-size:30;',
+      'color: red; font-size: 30pt;',
     )
 
     cy.contains('p', 'Hello John').should(
       'have.attr',
       'style',
-      'color:green;font-size:30;',
+      'color: green; font-size: 30pt;',
     )
   })
 
@@ -189,7 +191,7 @@ describe('Component with arguments', () => {
     cy.contains('<EMPTY>').should(
       'have.attr',
       'style',
-      'color:red;font-size:30;',
+      'color: red; font-size: 30pt;',
     )
   })
 })

npm/vue/cypress/component/basic/options-spec.js

@@ -23,8 +23,4 @@ describe('Mount component', () => {
   it('shows hello', () => {
     cy.contains('Hello Vue!')
   })
-
-  it('has version', () => {
-    cy.window().its('Vue.version').should('be.a', 'string')
-  })
 })

npm/vue/cypress/component/basic/plugins/MyPlugin.js

@@ -1,9 +1,9 @@
 // https://vuejs.org/v2/guide/plugins.html
 // https://alligator.io/vuejs/creating-custom-plugins/
 export const MyPlugin = {
-  install (Vue) {
+  install (app) {
     // 1. add global method or property
-    Vue.aPluginMethod = function () {
+    app.config.globalProperties.aPluginMethod = function () {
       return 'foo'
     }
   },

npm/vue/cypress/component/basic/plugins/MyPluginWithOptions.js

@@ -1,13 +1,13 @@
 // https://vuejs.org/v2/guide/plugins.html
 // https://alligator.io/vuejs/creating-custom-plugins/
 export const MyPluginWithOptions = {
-  install (Vue, options) {
+  install (app, options) {
     if (!options) {
       throw new Error('MyPlugin is missing options!')
     }
 
     // this method uses options argument
-    Vue.anotherPluginMethod = function () {
+    app.config.globalProperties.anotherPluginMethod = function () {
       return options.label
     }
   },

npm/vue/cypress/component/basic/plugins/plugin-spec.js

@@ -16,7 +16,7 @@ describe('Single component mount', () => {
 
     mount(EmptyComponent, { extensions })
 
-    cy.window().its('Vue').invoke('aPluginMethod').should('equal', 'foo')
+    cy.wrap(Cypress).its('vue').invoke('aPluginMethod').should('equal', 'foo')
   })
 })
 
@@ -32,11 +32,11 @@ describe('Custom plugin MyPlugin', () => {
   beforeEach(mountCallback(EmptyComponent, { extensions }))
 
   it('registers global method on Vue instance', () => {
-    cy.window().its('Vue').its('aPluginMethod').should('be.a', 'function')
+    cy.wrap(Cypress).its('vue').its('aPluginMethod').should('be.a', 'function')
   })
 
   it('can call this global function', () => {
-    cy.window().its('Vue').invoke('aPluginMethod').should('equal', 'foo')
+    cy.wrap(Cypress).its('vue').invoke('aPluginMethod').should('equal', 'foo')
   })
 })
 
@@ -55,10 +55,9 @@ describe('Plugins with options', () => {
     mount(EmptyComponent, { extensions })
 
     // first plugin works
-    cy.window().its('Vue').invoke('aPluginMethod').should('equal', 'foo')
+    cy.wrap(Cypress).its('vue').invoke('aPluginMethod').should('equal', 'foo')
     // second plugin works
-    cy.window()
-    .its('Vue')
+    cy.wrap(Cypress).its('vue')
     .invoke('anotherPluginMethod')
     .should('equal', 'testing')
   })

npm/vue/cypress/component/basic/props/message-list-spec.js

@@ -29,16 +29,12 @@ describe('Props', () => {
 
     it('shows messages', () => {
       getItems().should('not.exist')
-      // after mounting we can set props using "Cypress.vue"
+      // after mounting we can set props using "vueWrapper.setProps"
       cy.log('setting messages').then(() => {
-        Cypress.vue.messages = ['one', 'two']
+        Cypress.vueWrapper.setProps({ messages: ['one', 'two'] })
       })
 
       getItems().should('have.length', 2)
-      cy.then(() => {
-        Cypress.vue.messages.push('three')
-        getItems().should('have.length', 3)
-      })
     })
   })
 

npm/vue/cypress/component/basic/slots/Card.spec.js

@@ -28,8 +28,8 @@ describe('Card', () => {
 
   it('renders scopedSlots', () => {
     mount(Card, {
-      scopedSlots: {
-        default: '<p>Yay! {{props.content}}</p>',
+      slots: {
+        default: '<template #default="props"><p>Yay! {{props.content}}</p></template>',
       },
     })
 

npm/vue/cypress/component/basic/spec.js

@@ -23,8 +23,8 @@ describe('Declarative rendering', () => {
   })
 
   it('changes message if data changes', () => {
-    // mounted Vue instance is available under Cypress.vue
-    Cypress.vue.message = 'Vue rocks!'
+    // mounted Vue instance is available under Cypress.vueWrapper
+    Cypress.vueWrapper.setData({ message: 'Vue rocks!' })
     cy.contains('Vue rocks!')
   })
 })

npm/vue/cypress/component/button/button-counter-spec.js

@@ -14,14 +14,11 @@ describe('ButtonCounter', () => {
   })
 
   it('emits "increment" event on click', () => {
-    const spy = cy.spy()
-
-    Cypress.vue.$on('increment', spy)
     cy.get('button')
     .click()
     .click()
     .then(() => {
-      expect(spy).to.be.calledTwice
+      cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'increment')
     })
   })
 })

npm/vue/cypress/component/counter-vuex/counter-vuex-spec.js

@@ -2,14 +2,13 @@
 // https://github.com/vuejs/vuex/tree/dev/examples/counter
 import Counter from './Counter.vue'
 import store from './store'
-import Vuex from 'vuex'
 import { mountCallback } from '@cypress/vue'
 
 /* eslint-env mocha */
 describe('Vuex Counter', () => {
   // configure component
   const extensions = {
-    plugins: [Vuex],
+    plugins: [store],
     components: {
       Counter,
     },

npm/vue/cypress/component/counter-vuex/store.js

@@ -1,7 +1,4 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
+import { createStore } from 'vuex'
 
 // root state object.
 // each Vuex instance is just a single state tree.
@@ -53,7 +50,7 @@ const getters = {
 
 // A Vuex instance is created by combining the state, mutations, actions,
 // and getters.
-export default new Vuex.Store({
+export default createStore({
   state,
   getters,
   actions,

npm/vue/cypress/component/router-example/PizzaShop/Home.vue

@@ -1,12 +1,10 @@
 <template>
   <div class="shop-home">
-    <router-link
-      :to="{ name: 'order' }"
-      tag="button"
-      class="order"
-    >
-      Place Your Order
-    </router-link>
+    <router-link 
+      :to="{ name: 'order' }" 
+      custom v-slot="{ navigate }">     
+      <button class="order" @click="navigate">Place Your Order</button>
+     </router-link>
     <br>
     <h4>Or select a popular option:</h4>
     <router-link

npm/vue/cypress/component/router-example/PizzaShop/router.js

@@ -1,12 +1,10 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import PizzaShop from './index.vue'
 import Home from './Home.vue'
 import Order from './Order.vue'
 
-Vue.use(VueRouter)
-
-export default new VueRouter({
+export default createRouter({
+  history: createWebHashHistory(),
   routes: [
     {
       path: '/',