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

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 = {

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

@@ -0,0 +1,37 @@
+// In this test file we demo how to test a component with slots and a scoped slot.
+
+// Usage is the same as Vue Test Utils, since slots and scopedSlots
+// in the render options are directly passed through to the Utils mount().
+
+/// <reference types="cypress" />
+
+import Card from './Card.vue'
+import { mount } from 'cypress-vue-unit-test'
+
+describe('Card', () => {
+  it('skipped slots', () => {
+    mount(Card)
+    cy.contains('Nothing used the Scoped content!').should('be.visible')
+  })
+
+  it('renders slots', () => {
+    mount(Card, {
+      slots: {
+        header: '<h1>HEADER</h1>',
+        footer: '<div>FOOTER</div>',
+      },
+    })
+    cy.contains('h1', 'HEADER')
+    cy.contains('div', 'FOOTER')
+  })
+
+  it('renders scopedSlots', () => {
+    mount(Card, {
+      scopedSlots: {
+        default: '<p>Yay! {{props.content}}</p>',
+      },
+    })
+    cy.contains('Yay! Scoped content!').should('be.visible')
+    cy.contains('Nothing used the Scoped content!').should('not.exist')
+  })
+})

cypress/component/basic/slots/Card.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="card">
+    <slot name="header" />
+    <slot :content="content">
+      <!-- Fallback content if no default slot is given -->
+      <p>Nothing used the {{ content }}</p>
+    </slot>
+    <slot name="footer" />
+  </div>
+</template>
+
+<script>
+// example from https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/components/Card.vue
+// For the sake of demoing scopedSlots, this Card component
+// passes a simple string down to its default slot.
+export default {
+  data() {
+    return {
+      content: 'Scoped content!'
+    }
+  }
+}
+</script>

cypress/component/basic/slots/README.md

@@ -0,0 +1,8 @@
+# Slots
+
+Testing [Vue slots and scopedSlots](https://vue-test-utils.vuejs.org/api/options.html#slots).
+The example taken from [Vue testing library](https://github.com/testing-library/vue-testing-library)
+
+See [Card.vue](Card.vue) and [Card.spec.js](Card.spec.js)
+
+![Slots test](images/slots.png)

cypress/component/basic/small-examples/AppInput.spec.js

@@ -19,6 +19,5 @@ it('renders label', () => {
   cy.get('input#username')
 
   // Get input field by label text we passed as slot
-  // enable once #364 is working
-  // cy.contains('label', 'Enter Username')
+  cy.contains('label', 'Enter Username')
 })

cypress/component/basic/spec.js

@@ -9,11 +9,14 @@ describe('Declarative rendering', () => {
     </div>
   `
 
-  const data = {
-    message: 'Hello Vue!',
-  }
-
-  beforeEach(mountCallback({ template, data }))
+  beforeEach(
+    mountCallback({
+      template,
+      data() {
+        return { message: 'Hello Vue!' }
+      },
+    }),
+  )
 
   it('shows hello', () => {
     cy.contains('Hello Vue!')