Use Vue Test Utils to manage options like scoped slots and option normalizaiton (#365)

* Use Vue Test Utils to manage options like scoped slots and option normalization

* using createLocalVue to ensure global Vue namespace doesn't bleed over

* fix: spec was demonstrating using data as an object, which is a bug in components. It was being covered up by rendering the component as the Root Vue Component

* chore: cleaning up spec

* fix: data should be a function, i18n plugin was throwing error

* fix: plugins not passing options through. i18n spec artifically slow

* Update src/index.ts

* fix: ...localVue => localVue

* update mixins test

* enable slot AppInput spec

* add full slots and scopedSlots test

* Update src/index.ts

Co-authored-by: Gleb Bahmutov <[email protected]>

Author: JessicaSachs

README.md

@@ -114,8 +114,8 @@ The code is pretty simple
 ```js
 var app = new Vue({
   el: '#app',
-  data: {
-    message: 'Hello Vue!',
+  data() {
+    return { message: 'Hello Vue!' }
   },
 })
 ```
@@ -210,12 +210,14 @@ describe('Declarative rendering', () => {
     </ol>
   `
 
-  const data = {
-    todos: [
-      { text: 'Learn JavaScript' },
-      { text: 'Learn Vue' },
-      { text: 'Build something awesome' },
-    ],
+  function data() {
+    return {
+      todos: [
+        { text: 'Learn JavaScript' },
+        { text: 'Learn Vue' },
+        { text: 'Build something awesome' },
+      ],
+    }
   }
 
   beforeEach(mountCallback({ template, data }))
@@ -274,8 +276,8 @@ describe('Handling User Input', () => {
     </div>
   `
 
-  const data = {
-    message: 'Hello Vue.js!',
+  function data() {
+    return { message: 'Hello Vue.js!' }
   }
 
   const methods = {
@@ -516,6 +518,7 @@ Spec | Description
 [Mixins](cypress/component/basic/mixins) | Registering Vue mixins
 [Plugins](cypress/component/basic/plugins) | Loading additional plugins
 [Props](cypress/component/basic/props) | Pass props to the component during mount
+[Slots](cypress/component/basic/slots) | Passing slots and scopedSlots to the component
 [Small examples](cypress/component/basic/small-examples) | A few small examples testing forms, buttons
 <!-- prettier-ignore-end -->
 
@@ -552,13 +555,6 @@ Repo | Description
 
 ## Known problems
 
-<details id="slots">
-  <summary>Slots not supported</summary>
-
-See issue [#364](https://github.com/bahmutov/cypress-vue-unit-test/issues/364)
-
-</details>
-
 <a name="bundling"/>
 
 ## Bundling

cypress/component/advanced/i18n/TranslatedMessage.vue

@@ -20,7 +20,7 @@
 <template>
   <div id="app">
     <label for="locale">locale</label>
-    <select v-model="locale">
+    <select v-model="locale" id="locale">
       <option>en</option>
       <option>fa</option>
       <option>ja</option>
@@ -32,8 +32,10 @@
 
 <script>
 export default {
-  name: 'app',
-  data () { return { locale: 'en' } },
+  name: 'TranslatedMessage',
+  data () {
+    return { locale: 'en' }
+  },
   watch: {
     locale (val) {
       this.$i18n.locale = val

cypress/component/advanced/i18n/spec.js

@@ -1,37 +1,29 @@
 /// <reference types="cypress" />
-
+import Vue from 'vue'
 import TranslatedMessage from './TranslatedMessage.vue'
 import VueI18n from 'vue-i18n'
 import { mountCallback } from 'cypress-vue-unit-test'
 
-describe('VueI18n', () => {
-  // need to use VueI18n as a plugin
-  const extensions = {
-    plugins: [VueI18n],
-    components: {
-      TranslatedMessage,
-    },
-  }
-
-  const template = '<translated-message />'
+Vue.use(VueI18n)
+const i18n = new VueI18n({ locale: 'en' })
 
-  beforeEach(mountCallback({ template }, { extensions }))
+describe('VueI18n', () => {
+  beforeEach(mountCallback(TranslatedMessage, { i18n }))
 
   it('shows English, Japanese and Russian greeting', () => {
     cy.viewport(400, 200)
 
     cy.get('select').select('en').should('have.value', 'en')
-    // wait for good demo movie
-    cy.contains('message: hello').wait(1000)
+    cy.contains('message: hello')
 
     cy.get('select').select('fa').should('have.value', 'fa')
-    cy.contains('message: سلام دنیا').wait(1000)
+    cy.contains('message: سلام دنیا')
 
     cy.get('select').select('ja').should('have.value', 'ja')
-    cy.contains('message: こんにちは、世界').wait(1000)
+    cy.contains('message: こんにちは、世界')
 
     cy.get('select').select('ru').should('have.value', 'ru')
-    cy.contains('message: Привет мир').wait(1000)
+    cy.contains('message: Привет мир')
   })
 
   // TODO how to load messages not from i18n block but from external JSON file?

cypress/component/basic/components/spec.js

@@ -27,22 +27,6 @@ describe('Global components', () => {
   }
   beforeEach(mountCallback({ template, data }, { extensions }))
 
-  it('registers global component', () => {
-    cy.window()
-      .its('Vue')
-      .invoke('component', 'message-list')
-      // returns component constructor
-      // so we can compare with our component's constructor (Ctor)
-      .should('equal', MessageList._Ctor[0])
-
-    // second registered component "a-list" also points
-    // at the same component
-    cy.window()
-      .its('Vue')
-      .invoke('component', 'a-list')
-      .should('equal', MessageList._Ctor[0])
-  })
-
   it('shows two items at the start in both lists', () => {
     getItems().should('have.length', 4)
   })

cypress/component/basic/hello/Hello.vue

@@ -16,7 +16,6 @@ export default {
 
   computed: {
     error() {
-      debugger;
       console.log(this.username);
       return this.username.trim().length < 7
         ? "Please enter a longer username"

cypress/component/basic/list-spec.js

@@ -11,12 +11,14 @@ describe('Declarative rendering', () => {
     </ol>
   `
 
-  const data = {
-    todos: [
-      { text: 'Learn JavaScript' },
-      { text: 'Learn Vue' },
-      { text: 'Build something awesome' },
-    ],
+  function data() {
+    return {
+      todos: [
+        { text: 'Learn JavaScript' },
+        { text: 'Learn Vue' },
+        { text: 'Build something awesome' },
+      ],
+    }
   }
 
   beforeEach(mountCallback({ template, data }))

cypress/component/basic/mixins/spec.js

@@ -2,6 +2,8 @@
 import { mount, mountCallback } from 'cypress-vue-unit-test'
 
 describe('Mixins', () => {
+  const template = '<div>mixin test</div>'
+
   context('Global mixin', () => {
     const MyMixin = {
       // we have to use original Sinon to create a spy
@@ -14,10 +16,13 @@ describe('Mixins', () => {
     const extensions = {
       mixin,
     }
-    beforeEach(mountCallback({}, { extensions }))
+    beforeEach(mountCallback({ template }, { extensions }))
 
     it('calls mixin "created" method', () => {
-      expect(MyMixin.created).to.have.been.calledOnce
+      // the "created" will be called twice
+      // 1 - when the test wrapper element made by the Vue test utils is created
+      // 2 - when the element above we are testing is created
+      expect(MyMixin.created).to.have.been.calledTwice
     })
   })
 
@@ -32,9 +37,12 @@ describe('Mixins', () => {
       const extensions = {
         mixin,
       }
-      mount({}, { extensions })
+      mount({ template }, { extensions })
       // use the alias to retrieve the stub to check
-      cy.get('@created').should('have.been.calledOnce')
+      // the "created" will be called twice
+      // 1 - when the test wrapper element made by the Vue test utils is created
+      // 2 - when the element above we are testing is created
+      cy.get('@created').should('have.been.calledTwice')
     })
   })
 })

cypress/component/basic/options-spec.js

@@ -6,14 +6,17 @@ const template = `
     </div>
   `
 
-const data = {
-  message: 'Hello Vue!',
-}
-
 describe('Mount component', () => {
   // hmm, there are no more options to pass
 
-  const component = { template, data }
+  const component = {
+    template,
+    data() {
+      return {
+        message: 'Hello Vue!',
+      }
+    },
+  }
   beforeEach(mountCallback(component))
 
   it('shows hello', () => {

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

@@ -3,6 +3,7 @@ import { MyPlugin } from './MyPlugin'
 import { MyPluginWithOptions } from './MyPluginWithOptions'
 import { mount, mountCallback } from 'cypress-vue-unit-test'
 
+const EmptyComponent = { template: '<div></div>' }
 describe('Single component mount', () => {
   it('has the plugin', () => {
     const use = [MyPlugin]
@@ -12,7 +13,7 @@ describe('Single component mount', () => {
       use,
     }
 
-    mount({}, { extensions })
+    mount(EmptyComponent, { extensions })
 
     cy.window().its('Vue').invoke('aPluginMethod').should('equal', 'foo')
   })
@@ -26,7 +27,7 @@ describe('Custom plugin MyPlugin', () => {
     use,
   }
   // use "mountCallback" to register the plugins
-  beforeEach(mountCallback({}, { extensions }))
+  beforeEach(mountCallback(EmptyComponent, { extensions }))
 
   it('registers global method on Vue instance', () => {
     cy.window().its('Vue').its('aPluginMethod').should('be.a', 'function')
@@ -49,7 +50,7 @@ describe('Plugins with options', () => {
       use,
     }
 
-    mount({}, { extensions })
+    mount(EmptyComponent, { extensions })
 
     // first plugin works
     cy.window().its('Vue').invoke('aPluginMethod').should('equal', 'foo')

cypress/component/basic/reverse-spec.js

@@ -10,8 +10,8 @@ describe('Handling User Input', () => {
     </div>
   `
 
-  const data = {
-    message: 'Hello Vue.js!',
+  function data() {
+    return { message: 'Hello Vue.js!' }
   }
 
   const methods = {