fix: include default props in props object (#716)

Author: eddyerburgh

packages/test-utils/src/wrapper.js

@@ -398,15 +398,18 @@ export default class Wrapper implements BaseWrapper {
     if (!this.vm) {
       throwError('wrapper.props() must be called on a Vue instance')
     }
-    // $props object does not exist in Vue 2.1.x, so use $options.propsData instead
-    let _props
-    if (this.vm && this.vm.$options && this.vm.$options.propsData) {
-      _props = this.vm.$options.propsData
-    } else {
-      // $FlowIgnore
-      _props = this.vm.$props
+
+    const props = {}
+    // $FlowIgnore
+    const keys = this.vm.$options._propKeys
+
+    if (keys) {
+      keys.forEach(key => {
+        // $FlowIgnore
+        props[key] = this.vm[key]
+      })
     }
-    return _props || {} // Return an empty object if no props exist
+    return props
   }
 
   /**
@@ -518,26 +521,21 @@ export default class Wrapper implements BaseWrapper {
     if (this.isFunctionalComponent) {
       throwError('wrapper.setProps() cannot be called on a functional component')
     }
-    if (!this.isVueInstance() || !this.vm) {
+    if (!this.isVm) {
       throwError('wrapper.setProps() can only be called on a Vue instance')
     }
-    if (this.vm && this.vm.$options && !this.vm.$options.propsData) {
-      this.vm.$options.propsData = {}
-    }
+
     Object.keys(data).forEach((key) => {
       // Ignore properties that were not specified in the component options
       // $FlowIgnore : Problem with possibly null this.vm
-      if (!this.vm.$options._propKeys || !this.vm.$options._propKeys.some(prop => prop === key)) {
+      if (!this.vm.$options._propKeys ||
+        !this.vm.$options._propKeys.some(prop => prop === key)) {
         throwError(`wrapper.setProps() called with ${key} property which is not defined on component`)
       }
 
       // $FlowIgnore : Problem with possibly null this.vm
       if (this.vm._props) {
         this.vm._props[key] = data[key]
-        // $FlowIgnore : Problem with possibly null this.vm.$props
-        this.vm.$props[key] = data[key]
-        // $FlowIgnore : Problem with possibly null this.vm.$options
-        this.vm.$options.propsData[key] = data[key]
       } else {
         // $FlowIgnore : Problem with possibly null this.vm
         this.vm[key] = data[key]

scripts/test-compat-all.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+
+set -e
+
+scripts/test-compat.sh "2.0.8"
+scripts/test-compat.sh "2.1.10"
+scripts/test-compat.sh "2.2.6"
+scripts/test-compat.sh "2.3.4"
+scripts/test-compat.sh "2.4.2"
+scripts/test-compat.sh "2.5.13"

test/specs/components/RouterLink.spec.js

@@ -8,13 +8,13 @@ describeWithShallowAndMount('RouterLinkStub', (mountingMethod) => {
         <div>
           <router-link
             to="to1"
-            tag="tag1"
-            exact="exact1"
-            append="append1"
-            replace="replace1"
+            tag="a"
             activeClass="activeClass1"
             exactActiveClass="exactActiveClass1"
             event="event1"
+            exact
+            append
+            replace
           />
         </div>
       `
@@ -24,12 +24,13 @@ describeWithShallowAndMount('RouterLinkStub', (mountingMethod) => {
         RouterLink: RouterLinkStub
       }
     })
+
     const routerLink = wrapper.find(RouterLinkStub)
     expect(routerLink.props().to).to.equal('to1')
-    expect(routerLink.props().tag).to.equal('tag1')
-    expect(routerLink.props().exact).to.equal('exact1')
-    expect(routerLink.props().append).to.equal('append1')
-    expect(routerLink.props().replace).to.equal('replace1')
+    expect(routerLink.props().tag).to.equal('a')
+    expect(routerLink.props().exact).to.equal(true)
+    expect(routerLink.props().append).to.equal(true)
+    expect(routerLink.props().replace).to.equal(true)
     expect(routerLink.props().activeClass).to.equal('activeClass1')
     expect(routerLink.props().exactActiveClass).to.equal('exactActiveClass1')
     expect(routerLink.props().event).to.equal('event1')
@@ -39,7 +40,7 @@ describeWithShallowAndMount('RouterLinkStub', (mountingMethod) => {
     const TestComponent = {
       template: `
         <div>
-          <router-link>some text</router-link>
+          <router-link to="/">some text</router-link>
         </div>
       `
     }

test/specs/mounting-options/localVue.spec.js

@@ -15,7 +15,8 @@ describeWithMountingMethods('options.localVue', (mountingMethod) => {
       const TestComponent = {
         template: `
         <div>{{test}}</div>
-      `
+      `,
+        data: { test: '' }
       }
       const localVue = Vue.extend()
       localVue.version = '2.3'

test/specs/wrapper/destroy.spec.js

@@ -3,29 +3,29 @@ import { describeWithShallowAndMount } from '~resources/utils'
 import sinon from 'sinon'
 
 describeWithShallowAndMount('destroy', (mountingMethod) => {
-  it('should trigger beforeDestroy ', () => {
+  it('triggers beforeDestroy ', () => {
     const spy = sinon.stub()
     mountingMethod({
-      render: null,
+      render: () => {},
       beforeDestroy () {
         spy()
       }
     }).destroy()
     expect(spy.calledOnce).to.equal(true)
   })
 
-  it('should trigger destroy ', () => {
+  it('triggers destroy ', () => {
     const spy = sinon.stub()
     mountingMethod({
-      render: null,
+      render: () => {},
       destroyed () {
         spy()
       }
     }).destroy()
     expect(spy.calledOnce).to.equal(true)
   })
 
-  it.skip('should remove element from document.body', () => {
+  it.skip('removes element from document.body', () => {
     const compiled = compileToFunctions('<div></div>')
     const wrapper = mountingMethod(compiled, { attachToDocument: true })
     expect(wrapper.vm.$el.parentNode).to.equal(document.body)

test/specs/wrapper/emitted.spec.js

@@ -63,7 +63,8 @@ describeWithShallowAndMount('emitted', (mountingMethod) => {
       },
       mounted () {
         this.$emit('bar', 1, 2)
-      }
+      },
+      render: () => {}
     })
 
     expect(wrapper.emitted().foo).to.eql([[]])
@@ -74,12 +75,14 @@ describeWithShallowAndMount('emitted', (mountingMethod) => {
     const localVue = createLocalVue()
 
     const wrapper1 = mountingMethod({
+      render: () => {},
       beforeCreate () {
         this.$emit('foo')
       }
     }, { localVue })
 
     const wrapper2 = mountingMethod({
+      render: () => {},
       mounted () {
         this.$emit('bar')
       }

test/specs/wrapper/find.spec.js

@@ -240,7 +240,7 @@ describeWithShallowAndMount('find', (mountingMethod) => {
   it('returns error Wrapper if Vue component is below Wrapper', () => {
     const AComponent = {
       render: () => {},
-      name: 'a component'
+      name: 'a-component'
     }
     const localVue = createLocalVue()
     localVue.component('a-component', AComponent)

test/specs/wrapper/hasClass.spec.js

@@ -40,13 +40,6 @@ describeWithShallowAndMount('hasClass', (mountingMethod) => {
     expect(wrapper.hasClass('color-red')).to.equal(true)
   })
 
-  it('returns false if wrapper does not contain element', () => {
-    const wrapper = mountingMethod({ render: (h) => h('div.a-class.b-class') })
-    const div = wrapper.find('div')
-    div.element = null
-    expect(wrapper.hasClass('a-class b-class')).to.equal(false)
-  })
-
   it('returns true when the element contains multiple classes', () => {
     const compiled = compileToFunctions('<div class="a-class b-class" />')
     const wrapper = mountingMethod(compiled)

test/specs/wrapper/props.spec.js

@@ -36,6 +36,19 @@ describeWithShallowAndMount('props', (mountingMethod) => {
     expect(wrapper.props()).to.eql({ prop1: {}, prop2: 'val2' }) // fail
   })
 
+  it('returns default props', () => {
+    const TestComponent = {
+      render: () => {},
+      props: {
+        message: {
+          default: () => 'hello'
+        }
+      }
+    }
+    const wrapper = mountingMethod(TestComponent)
+    expect(wrapper.props().message).to.equal('hello')
+  })
+
   itSkipIf(!functionalSFCsSupported,
     'works correctly a functional component', () => {
       const FunctionalComponent = {

test/specs/wrapper/setComputed.spec.js

@@ -39,6 +39,7 @@ describeWithShallowAndMount('setComputed', (mountingMethod) => {
 
   it('updates vm computed value', () => {
     const TestComponent = {
+      render: () => {},
       data () {
         return {
           a: 1