Gist1.vue

<template>
  <!-— markup and directives, v-if, v-for, etc -->
</template>

<script>
 /* props, data, lifecycle hooks, methods, computed properties */
</script>

gist10.vue

<template>
  <div v-for=”member in members”
  <input type=”checkbox” :checked=”member.checked” />
  </div>
</template>

gist11.js

created: {
  this.$store.dispatch(‘fetchPosts’)
  this.setOldest()
}

gist12.js

import Member from ‘./Member’

it(‘sets the oldest member’, () => {
  const members = [{ 
    name: ‘a’, age: 20, checked: false, 
  }, {
    name: ‘b’, age: 30, checked: false
  }]
  
  let $this = { members }
  member.methods.setOldest.call($this)
  expect(members[‘b’].checked).toBe(true)
})

Gist2.js

<template>
  <div id=”message” v-if=”submitted”></div>
</template>


// test
const wrapper = shallow(Component)

wrapper.setData({ submitted: false })
expect(wrapper.findAll(‘#message’).length).toBe(0)

wrapper.setData({ submitted: true })
expect(wrapper.findAll(‘#message’).length).toBe(1)

gist3.vue

<template>
  <Member v-for=”member in members” />
</template>

<script>
  export default {
    computed: {
      members () {
        return this.$store.state.members.all
      }
    } 
  }
</script>

gist4.vue

const Member = {
  name: ‘Member’,
  render: h => h(‘div’)
}

const wrapper = shallow(Component, {
  stubs: { Member }
})

wrapper.setComputed({ members: [1, 2, 3] })
expect(wrapper.findAll(Member).length).toBe(3)

gist5.vue

<script>
  export defaut {
    props: {
      memberName: {
        type: String,
        required: true
      },
      isAdmin: {
        type: Boolean,
        default: true
      }
    }
  }
</script>

gist6.vue

<template>
  <button @click=”fetchPosts” />
</template>

<script>
  export default {
    methods: {
      fetchPosts () {
        this.$store.dispatch(‘fetchPosts’)
      }
    } 
  }
</script>

gist7.vue

import Vuex from ‘vuex’
import { shallow, createLocalVue } from ‘vue-test-utils’

const localVue = createLocalVue()
localVue.use(Vuex)

const actions = {
 fetchPosts: jest.fn()
}
const store = new Vuex.Store({ actions })

const wrapper = shallow(Component, { store })

wrapper.find(‘button’).trigger(‘click’)
expect(actions.mock.calls.length).toBe(1)

gist8.vue

<template>
  <! — don’t need the button anymore →
</template>

<script>
  export default {
    created: {
      this.$store.dispatch(‘fetchPosts’)
    },
    
    methods: {
      // ...
    }
  }
</script>

gist9.js

data () {
  return {
    members: [{ 
      name: ‘a’, age: 20, checked: false, 
    }, {
      name: ‘b’, age: 30, checked: false
    }]
  }
},

setOldest () {
  let oldest = { age: 0 }
  for (let m in this.members) {
    if (this.members[m].age > oldest.age)
      oldest = this.members[m]
  }
}