[Tests] Reimplement skipped tests

Author: eddyerburgh

test/resources/components/component-with-events.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
         <button class="click" @click="clickHandler" id="button" />
+        <div @click="toggleActive" v-bind:class="{ toggle: true, active: isActive }" />
         <input class="keydown" type="text" @keydown="keydownHandler" />
         <input class="keydown-enter" type="text" @keydown.enter="keydownHandler" />
     </div>
@@ -18,6 +19,16 @@
           type: Function,
           default: () => {}
         }
+      },
+      data () {
+        return {
+          isActive: false
+        }
+      },
+      methods: {
+        toggleActive () {
+          this.isActive = !this.isActive
+        }
       }
     }
 </script>

test/resources/components/component-with-v-for.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <AComponent v-for="item in items" :key="item.id" />
+    </div>
+</template>
+
+<script>
+    import AComponent from './component.vue'
+
+export default {
+      name: 'component-with-v-for',
+      components: {
+        AComponent
+      },
+      props: ['items']
+    }
+</script>

test/unit/specs/mount/find.spec.js

@@ -2,6 +2,8 @@ import { compileToFunctions } from 'vue-template-compiler'
 import mount from '../../../../src/mount'
 import ComponentWithChildComponent from '../../../resources/components/component-with-child-component.vue'
 import ComponentWithoutName from '../../../resources/components/component-without-name.vue'
+import ComponentWithSlots from '../../../resources/components/component-with-slots.vue'
+import ComponentWithVFor from '../../../resources/components/component-with-v-for.vue'
 import Component from '../../../resources/components/component.vue'
 import Wrapper from '../../../../src/Wrapper'
 
@@ -24,7 +26,13 @@ describe('find', () => {
     expect(wrapper.find('div')).to.be.instanceOf(Wrapper)
   })
 
-  it.skip('returns an array of Wrapper of elements matching class selector passed if they are declared inside a slot', () => {
+  it('returns an array of Wrapper of elements matching class selector passed if they are declared inside a slot', () => {
+    const wrapper = mount(ComponentWithSlots, {
+      slots: {
+        default: '<div class="foo"></div>'
+      }
+    })
+    expect(wrapper.find('.foo')).to.be.instanceOf(Wrapper)
   })
 
   it('returns Wrapper of elements matching id selector passed', () => {
@@ -69,10 +77,17 @@ describe('find', () => {
     expect(wrapper.find(Component)).to.be.instanceOf(Wrapper)
   })
 
-  it.skip('returns correct number of Vue Wrapper when component has a v-for', () => {
+  it('returns correct number of Vue Wrapper when component has a v-for', () => {
+    const items = [{ id: 1 }, { id: 2 }, { id: 3 }]
+    const wrapper = mount(ComponentWithVFor, { propsData: { items }})
+    expect(wrapper.find(Component)).to.be.instanceOf(Wrapper)
   })
 
-  it.skip('returns array of VueWrappers of Vue Components matching component if component name in parent is different to filename', () => {
+  it('returns array of VueWrappers of Vue Components matching component if component name in parent is different to filename', () => {
+    // same test as above, but good to be explicit
+    const wrapper = mount(ComponentWithChildComponent)
+    const div = wrapper.find('span')
+    expect(div.find(Component)).to.be.instanceOf(Wrapper)
   })
 
   it('returns Wrapper of Vue Component matching component using Wrapper as reference', () => {

test/unit/specs/mount/findAll.spec.js

@@ -2,6 +2,8 @@ import { compileToFunctions } from 'vue-template-compiler'
 import mount from '../../../../src/mount'
 import ComponentWithChildComponent from '../../../resources/components/component-with-child-component.vue'
 import ComponentWithoutName from '../../../resources/components/component-without-name.vue'
+import ComponentWithSlots from '../../../resources/components/component-with-slots.vue'
+import ComponentWithVFor from '../../../resources/components/component-with-v-for.vue'
 import Component from '../../../resources/components/component.vue'
 import WrapperArray from '../../../../src/WrapperArray'
 
@@ -30,7 +32,15 @@ describe('findAll', () => {
     expect(divArr.length).to.equal(1)
   })
 
-  it.skip('returns an array of Wrapper of elements matching class selector passed if they are declared inside a slot', () => {
+  it('returns an array of Wrapper of elements matching class selector passed if they are declared inside a slot', () => {
+    const wrapper = mount(ComponentWithSlots, {
+      slots: {
+        default: '<div class="foo"><div class="foo"></div></div>'
+      }
+    })
+    const fooArr = wrapper.findAll('.foo')
+    expect(fooArr).to.be.instanceOf(WrapperArray)
+    expect(fooArr.length).to.equal(2)
   })
 
   it('returns an array of Wrappers of elements matching id selector passed', () => {
@@ -92,13 +102,24 @@ describe('findAll', () => {
     expect(componentArr.length).to.equal(1)
   })
 
-  it.skip('returns correct number of Vue Wrapper when component has a v-for', () => {
+  it('returns correct number of Vue Wrapper when component has a v-for', () => {
+    const items = [{ id: 1 }, { id: 2 }, { id: 3 }]
+    const wrapper = mount(ComponentWithVFor, { propsData: { items }})
+    const componentArray = wrapper.findAll(Component)
+    expect(componentArray).to.be.instanceOf(WrapperArray)
+    expect(componentArray.length).to.equal(items.length)
   })
 
-  it.skip('returns array of VueWrappers of Vue Components matching component if component name in parent is different to filename', () => {
+  it('returns array of VueWrappers of Vue Components matching component if component name in parent is different to filename', () => {
+    const wrapper = mount(ComponentWithChildComponent)
+    const div = wrapper.findAll('span').at(0)
+    const componentArr = div.findAll(Component)
+    expect(componentArr).to.be.instanceOf(WrapperArray)
+    expect(componentArr.length).to.equal(1)
   })
 
   it('returns an array of VueWrappers of Vue Components matching component using Wrapper as reference', () => {
+    // same test as above, but good to be explicit
     const wrapper = mount(ComponentWithChildComponent)
     const div = wrapper.findAll('span').at(0)
     const componentArr = div.findAll(Component)

test/unit/specs/mount/trigger.spec.js

@@ -33,7 +33,12 @@ describe('trigger', () => {
     expect(keydownHandler.calledOnce).to.equal(true)
   })
 
-  it.skip('causes DOM to update after clickHandler method that changes components data is called', () => {
+  it('causes DOM to update after clickHandler method that changes components data is called', () => {
+    const wrapper = mount(ComponentWithEvents)
+    const toggle = wrapper.find('.toggle')
+    expect(toggle.hasClass('active')).to.equal(false)
+    toggle.trigger('click')
+    expect(toggle.hasClass('active')).to.equal(true)
   })
 
   it('throws an error if type is not a string', () => {