working on tests from Vue jest tutorial

Author: bahmutov

components/Message.vue

@@ -0,0 +1,32 @@
+<template>
+    <li
+      style="margin-top: 10px"
+      class="message"
+      @click="handleClick">
+        {{message}}
+    </li>
+</template>
+
+<script>
+  export default {
+    name: 'Message',
+    props: {
+      message: {
+        type: String,
+        required: true,
+        validator: value => value.length > 1
+      },
+      message2: String,
+      author: {
+        type: String,
+        default: 'Paco'
+      }
+    },
+    methods: {
+      handleClick() {
+        console.log('lalala')
+        this.$emit('message-clicked', this.message)
+      }
+    }
+  }
+</script>

cypress/integration/message-spec.js

@@ -0,0 +1,50 @@
+import Message from '../../components/Message.vue'
+const mountVue = require('../..')
+
+// test example from
+// https://github.com/alexjoverm/vue-testing-series/blob/lesson-1/test/Message.test.js
+
+const createCmp = propsData => mountVue(Message, { propsData })()
+
+/* eslint-env mocha */
+describe('Message', () => {
+  describe('properties', () => {
+    it('has a message property', () => {
+      createCmp({ message: 'hey' })
+      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')
+    })
+
+    describe('Validation', () => {
+      let message
+
+      beforeEach(() => {
+        createCmp().then(() => {
+          message = Cypress.vue.$options.props.message
+        })
+      })
+
+      it('message is of type string', () => {
+        expect(message.type).to.equal(String)
+      })
+
+      it('message is required', () => {
+        expect(message.required).to.be.true
+      })
+
+      it('message has at least length 2', () => {
+        expect(message.validator && message.validator('a')).to.be.falsy
+        expect(message.validator && message.validator('aa')).to.be.truthy
+      })
+    })
+  })
+})

src/index.js

@@ -121,24 +121,49 @@ const installMixins = (Vue, options) => {
   }
 }
 
-const mountVue = (component, options = {}) => () => {
+const isOptionName = name =>
+  ['vue', 'html', 'vuePath', 'base', 'extensions'].includes(name)
+
+const isOptions = object => Object.keys(object).every(isOptionName)
+
+const isConstructor = object => object && object._compiled
+
+// the double function allows mounting a component quickly
+// beforeEach(mountVue(component, options))
+const mountVue = (component, optionsOrProps = {}) => () => {
+  let options = {}
+  let props = {}
+
+  if (isOptions(optionsOrProps)) {
+    options = optionsOrProps
+  } else {
+    props = optionsOrProps
+  }
+
   const vueHtml = getPageHTML(options)
   const document = cy.state('document')
   document.write(vueHtml)
   document.close()
 
   // TODO: do not log out "its(Vue)" command
   // but it currently does not support it
-  cy
+  return cy
     .window({ log: false })
     .its('Vue')
     .then(Vue => {
       installMixins(Vue, options)
       installPlugins(Vue, options)
       registerGlobalComponents(Vue, options)
       deleteCachedConstructors(component)
-      Cypress.vue = new Vue(component).$mount('#app')
-      copyStyles(component)
+
+      if (isConstructor(component)) {
+        const Cmp = Vue.extend(component)
+        Cypress.vue = new Cmp(props).$mount('#app')
+        copyStyles(Cmp)
+      } else {
+        Cypress.vue = new Vue(component).$mount('#app')
+        copyStyles(component)
+      }
     })
 }