# VUE-UnitTest

// 测试内容：snapshot->概括的测试DOM结构
it('matches snapshot', () => {
  const wrapper = shallowMount(AppButton)
  expect(wrapper.html()).toMatchSnapshot()
  wrapper.destroy()
})

// 测试内容：精准DOM结构测试示例
it('DOM test', () => {
  const wrapper = shallowMount(AppButton)
  expect(wrapper.contains('button')).toBeTruthy()
  wrapper.destroy()
})

/** 测试内容：func测试
  *点击按钮组件时，正确触发点击事件
*/
it('click button onClick is clled', () => {
  const wrapper = shallowMount(AppButton)
  // 创建mock函数
  const mockFn = jest.fn()
  // 设置 Wrapper vm 的方法并强制更新。
  wrapper.setMethods({
  onClick:mockFn
      })
  // 获取buttonDOM元素
  const button = wrapper.find('button')
  // 测试点击按钮后有没有正确触发函数
  button.trigger('click')
  // 断言函数被触发，且被触发一次
  expect(mockFn).toBeCalled()
  expect(mockFn).toHaveBeenCalledTimes(1)

  wrapper.destroy()
})

/**
 * 测试内容：data v-bind
 * 断言data中变量的值
*/
it('data test', () => {
  // 断言默认值
  expect(wrapper.vm.name).toBe('admin')
  expect(wrapper.vm.collapse).toBeTruthy()
  // 更改后
  wrapper.vm.name = 'holy'
  expect(wrapper.find('.el-dropdown-link').text()).toBe('holy')
})

/**
 * 测试内容：slots 普通插槽
 * 测试默认值（当slot有默认值时）
*/
it('slots default value test', () => {
  const wrapper = shallowMount(AppButton)
  const button = wrapper.find('button')
  expect(button.text()).toBe('submit')
  wrapper.destroy()
})

/** 测试内容：slots 普通插槽
 * mount时传入自定义的内容作为slots，然后再断言自定义的内容存在与否
 * 自定义的内容可能会是text，html，componets等允许的内容
*/
it('slots test', () => {
  const wrapper = shallowMount(AppButton, {
    slots: {
    default:'i am slots text'// 自定义slots内容
      }
  })
  const button = wrapper.find('button')
  expect(button.text()).toBe('i am slots text')

  wrapper.destroy()
  })

/** 测试内容：slots具名插槽
 * vue2.6更新后的新语法v-slots，3.0中会延续使用，并废除旧语法
 * 测试方法与slots普通插槽相同，此处传入为html,
 * 当传入组件时，只需断言wrapper中是否包含组件的DOM元素即可
 * expect(wrapper.contains('.container')).toBe(true)
*/
it('named slots test', () => {
const wrapper = shallowMount(AppButton, {
slots: {
namedSlot:`<span>i am slots html</span>`// 自定义slots内容
      }
    })
const button = wrapper.find('button')
expect(button.contains('span')).toBe(true)
const span = wrapper.find('button span')
expect(span.text()).toBe('i am slots html')

wrapper.destroy()
  })

/** 测试内容：slots作用域插槽
 * vue2.6更新后的新语法v-slots，3.0中会延续使用，并废除旧语法
 * 测试方法与slots具名插槽相同，此处传入为html,
 * 当传入组件时，只需断言wrapper中是否包含组件的DOM元素即可
 * expect(wrapper.contains('.container')).toBe(true)
*/
it('scoped slots test', () => {
const wrapper = shallowMount(AppButton, {
scopedSlots: {
scopedSlot:`<span slot-scope="foo">{{ foo.user.lastName }}</span>`// 自定义slots内容
      }
    })
const button = wrapper.find('button')
expect(button.contains('span')).toBe(true)
constspan = wrapper.find('button span')
expect(span.text()).toBe('holy')

wrapper.destroy()
  })

/**
 * 测试内容：v-show/v-if测试，与v-bind的测试思路基本相同
 * 设置变量的值，断言对应的DOM结构显示与否
*/
it('v-show test', () => {
  // true时显示的div
  const truediv = wrapper.find('.text.format')
  // false时显示的div
  const falsediv = wrapper.find('.text.noformat')
  // toggleShow默认值为true
  expect(truediv.isVisible()).toBe(true)
  expect(falsediv.isVisible()).toBe(false)
  // 设置为false
  wrapper.vm.toggleShow = false
  expect(truediv.isVisible()).toBe(false)
  expect(falsediv.isVisible()).toBe(true)
})

import { shallowMount, createLocalVue } from '@vue/test-utils'
import FilterTest from '@/components/FilterTest.vue'
...
...
...
/** 测试内容：filter过滤器
 * filter不能通过wrapper或者vm获取，只能通过组件获取
 * filter需要测试函数的所有可能性
*/
it('filter test', () => {
  // console.log(FilterTest.filters)
  expect(FilterTest.filters.formatText('12345678')).toBe('12...78')
  expect(FilterTest.filters.formatText('12345')).toBe('12345')
  expect(FilterTest.filters.formatText()).toBe('')
  })

/** 测试内容：props
 * 自定义props传递给AppButton组件，判断组件有获取到props
 * 请注意props是否存在默认值
*/
it('props test', () => {
  const buttonProps = {
    type:'danger',
    size:'lg',
    disabled:true
  }
  const wrapper = shallowMount(AppButton, {
    propsData:buttonProps
  })
  // 断言已经获取到props
  expect(wrapper.props().size).toBe('lg')
  expect(wrapper.props().type).toBe('danger')
  expect(wrapper.props().disabled).toBe(true)
  // 每个it最后都应该销毁wrapper
  wrapper.destroy()
})

/** 测试内容：changeShow()函数
 * changeShow()函数被调用时，能正确执行
*/
it('called changeShow()', () => {
  // 手动将变量的值设置为false,默认值是true
  wrapper.vm.toggleShow = false
  // 执行函数
  wrapper.vm.changeShow()
  // 期望结果
  expect(wrapper.vm.toggleShow).toBe(true)
  // 再次执行函数
  wrapper.vm.changeShow()
  // 期望结果
  expect(wrapper.vm.toggleShow).toBe(false)
})

/** 测试内容：$emit
 * 包含$emit的函数被触发后，emit的函数也会被触发
*/
it('when onClick is called $emit is called', () => {
  const wrapper = shallowMount(AppButton)
  // 测试$emmit函数被正确触发
  // mock函数替代点击按钮后$emit的函数，此处函数名相同，依然为click
  const mockFn1 = jest.fn()
  wrapper.vm.$on('click', mockFn1)
  // 测试mock函数是否被触发，触发的次数,以及参数
  wrapper.vm.onClick()
  expect(mockFn1).toBeCalled()
  expect(mockFn1).toHaveBeenCalledTimes(1)
  expect(mockFn1).toHaveBeenCalledWith('i am params')
  // 第二次点击button，依然测试mock函数是否被触发，触发的次数
  wrapper.vm.onClick()
  expect(mockFn1).toBeCalled()
  expect(mockFn1).toHaveBeenCalledTimes(2)
  expect(mockFn1).toHaveBeenCalledWith('i am params')

  wrapper.destroy()
})

/** 测试内容：watch
 * 更改watch的data的值，断言操作是否与预期相同
*/
it('watch test', () => {
  // mock掉console.log
  const spy = jest.spyOn(console,'log')
  // 手动将变量的值设置为false,默认值是true
  wrapper.vm.toggleShow = '自定义'
  // 断言函数是否执行
  expect(spy).toBeCalled()
  expect(spy).toHaveBeenCalledTimes(1)
  expect(spy).toHaveBeenCalledWith('自定义')
  // 清除掉mock
  spy.mockClear()
})

/** 测试内容：computed
 * 要注意计算属性不是函数，是变量，测试时很容易看着组件内写法按照函数测试
 * 改变props的type，size，disable值时，cssClasses的值也会跟着改变
*/
it('computed test', () => {
  const wrapper = shallowMount(AppButton)
  // 设置props 断言computed计算属性（注意props有default值）
  wrapper.setProps({ type:'danger' })
  expect(wrapper.vm.cssClasses).toBe('app-button app-button--md app-button--danger')
  wrapper.setProps({ size:'lg' })
  expect(wrapper.vm.cssClasses).toBe('app-button app-button--lg app-button--danger')
  wrapper.setProps({ disabled:true })
  expect(wrapper.vm.cssClasses).toBe('app-button app-button--lg app-button--disabled')

  wrapper.destroy()
})

import { shallowMount } from '@vue/test-utils'
import RouterTest from '@/components/RouterTest.vue'

/** vue-router测试
 * 不建议直接在localVue上挂载vue-router
 * 使用mock的$route和$router更加灵活，方便测试
*/
const $route = {
  path:'/some'
  // ...其他属性
}
const mockPush = jest.fn()
const $router = {
  push:mockPush
  // ... 其他属性
}

describe('RouterTest.vue', () => {
  // wrapper.vm是组件实例，包含该实例的所有方法和属性
  letwrapper
  beforeEach(() => {
  wrapper = shallowMount(RouterTest, {
  stubs: ['app-button'],
  mocks: {
  $route,
  $router
        }
      })
    })

  afterEach(() => {
  wrapper.destroy()
  })

  // 测试内容：goVIPs()被调用->触发mock的push函数
  it('goVIPs() is called', () => {
    // 执行函数
    wrapper.vm.goVIPs()
    // 期望结果
    expect(mockPush).toBeCalled()
  })
})

/**
 * AxiosTest.vue组件
 * 测试内容包括以下
 * 自定义func
 * axios
 */
import { shallowMount, createLocalVue } from '@vue/test-utils'
import AxiosTest from '@/components/AxiosTest.vue'
import axios from 'axios'

// mock掉整个axios模块
// 返回值在使用的时候自定义
jest.mock('axios')

// 创建临时Vue实例，挂载组件中使用的插件
const localVue = createLocalVue()
localVue.prototype.$axios = axios// 挂载axios

describe('AxiosTest.vue', () => {
  let wrapper
  beforeEach(() => {
  axios.mockClear()
  wrapper = shallowMount(AxiosTest, { localVue,
  stubs: ['app-button']
      })
    })

  afterEach(() => {
  wrapper.destroy()
  })

  // 测试内容：func ->getData()
  // 点击按钮函数被触发(注意此处的click事件是子组件(按钮组件$emit)的事件,
  // 在父组件内不属于DOM原生事件,所以触发方式不能使用trigger,而应该使用$emit)
  it('when button is clicked getData will be called', () => {
    // 创建mock函数
    const mockFn = jest.fn()
    // 设置 Wrapper vm 的方法并强制更新。
    wrapper.setMethods({ getData:mockFn })
    // 获取对应按钮
    const axiosButton = wrapper.find('.axios app-button-stub')
    // 点击按钮->注意触发方式不能使用trigger
    axiosButton.vm.$emit('click')
    // 断言函数被触发且只触发一次
    expect(mockFn).toBeCalled()
    expect(mockFn).toHaveBeenCalledTimes(1)
  })

  // 测试内容：axios->getData()函数
  // 为了配合axios测试,需要在组件代码的两处增加return,参见AxiosTest组件
  it('axios test', () => {
    // 此处只是使用了get,post/patch/delete/...与get相同
    // 自定义get的返回值
    const mockData = { data: { name:'Bob' } }
    axios.get.mockResolvedValue(mockData)
    return wrapper.vm.getData().then(result=> {
      expect(result).toEqual(mockData)
      expect(wrapper.vm.usersInfo).toEqual(mockData.data)
    })
  })

  // 测试内容：axios->getData()函数请求rejeced的情况
  it('axios test', () => {
    // 自定义get被拒绝时返回值
    axios.get.mockRejectedValue('error')
    return wrapper.vm.getData().catch(e=>expect(e).toMatch('error'))
  })
})

/**
 * VuexTest.vue组件
 * 测试内容包括以下
* 临时vue实例上挂载element-ui
 * func
 * vuex store内的state mutations actions getters
 */
import { shallowMount, createLocalVue } from '@vue/test-utils'
import VuexTest from '@/components/VuexTest.vue'
import Vuex from 'vuex'

// 创建临时Vue实例，挂载组件中使用的插件
const localVue = createLocalVue()
localVue.use(Vuex)

describe('VuexTest.vue', () => {
  // wrapper.vm是组件实例，包含该实例的所有方法和属性
  let wrapper
  let actions
  let state
  let getters
  let mutations
  let store
  beforeEach(() => {
    // 伪造actions state getters mutations
    actions = {
      increment:jest.fn(),
      decrement:jest.fn()
    }
    mutations = {
      increment:jest.fn(),
      decrement:jest.fn()
    }
    state = {
      count:0
    }
    getters = {
      evenOrOdd: () =>'gettersVal'// 伪造的越简单越好
    }
    // 伪造store
    store = newVuex.Store({
      state,
      actions,
      mutations,
      getters
    })
    // 挂载store
    wrapper = shallowMount(VuexTest, {
      localVue,
      store,
      stubs: ['app-button']
    })
  })

  afterEach(() => {
    wrapper.destroy()
    })

  // 测试内容：state
  // 只需测试伪造的state值是否存在于dom中
  it('getters test', () => {
    const text = wrapper.find('.text')
    expect(text.text()).toContain(state.count)
  })

  // 测试内容：actions-通过点击按钮直接调用
  // 点击按钮测试伪造的函数是否被调用
  it('actions test', () => {
    const buttonAdd = wrapper.find('.add')
    const buttonMinus = wrapper.find('.minus')
    buttonAdd.vm.$emit('click')
    expect(actions.increment).toHaveBeenCalled()
    expect(actions.increment).toHaveBeenCalledTimes(1)
    buttonMinus.vm.$emit('click')
    expect(actions.decrement).toHaveBeenCalled()
    expect(actions.decrement).toHaveBeenCalledTimes(1)
  })

  // 测试内容：dispatchIncrement()
  // 点击按钮测试函数dispatchIncrement()是否被调用
  it('dispatchIncrement test', () => {
    const dispatchAdd = wrapper.find('.dispatchAdd')
    const mockAdd = jest.fn()
    wrapper.setMethods({
      dispatchIncrement:mockAdd
    })
    dispatchAdd.vm.$emit('click')
    expect(mockAdd).toHaveBeenCalled()
    expect(mockAdd).toHaveBeenCalledTimes(1)
  })

  // 测试内容：actions--通过dispatch调用
  // 调用函数测试伪造的函数是否被调用
  it('dispatch actions test', () => {
    wrapper.vm.dispatchIncrement()
    expect(actions.increment).toHaveBeenCalled()
    expect(actions.increment).toHaveBeenCalledTimes(1)
  })

  // 测试内容：mutationsDecrement()
  // 点击按钮测试函数mutationsDecrement()是否被调用
  it('mutationsDecrement test', () => {
    const mutationsMinus = wrapper.find('.mutationsMinus')
    const mockMinus = jest.fn()
    wrapper.setMethods({
      mutationsDecrement:mockMinus
    })
    mutationsMinus.vm.$emit('click')
    expect(mockMinus).toHaveBeenCalled()
    expect(mockMinus).toHaveBeenCalledTimes(1)
  })

  // 测试内容：mutations
  // 调用函数测试伪造的函数是否被调用
  it('mutations test', () => {
    wrapper.vm.mutationsDecrement()
    expect(mutations.decrement).toHaveBeenCalled()
    expect(mutations.decrement).toHaveBeenCalledTimes(1)
  })

  // 测试内容：getters
  // 只需测试伪造的getters值是否存在于dom中
  it('getters test', () => {
    const text = wrapper.find('.text')
    expect(text.text()).toContain(getters.evenOrOdd())
  })
})

/**
 * store.js
 * 测试内容包括以下
 * 测试思路：mutations/getters/actions 分别测试，测试其中一个的时候，其他依赖伪造mock
* 本质还是测试方法（官网列出了两种测试方法，我们选择简单易懂便于测试的）
*/
import { mutations, getters, actions } from '@/store.js'

describe('store.js', () => {
  // 测试内容：mutations
  // 伪造（mock）state 测试mutations下的方法
  it('mutations test', () => {
    const state = {
      count:0
    }
    mutations.increment(state)
    expect(state.count).toBe(1)
    mutations.decrement(state)
    expect(state.count).toBe(0)
  })

  // 测试内容：getters
  // 伪造（mock）state 测试evenOrOdd的值
  it('getters test even', () => {
    const state = {
    count:0
        }
    expect(getters.evenOrOdd(state)).toBe('even')
  })

  // 测试内容：getters
  // 伪造（mock）state 测试evenOrOdd的值
  it('getters test odd', () => {
    const state = {
    count:1
        }
    expect(getters.evenOrOdd(state)).toBe('odd')
  })

  // 测试内容：actions 比前两个测试要稍微复杂
  // 伪造（mock）commit 测试mutations下的方法
  it('actions test', () => {
    // 伪造commit
    const commit = jest.fn()
    // increment
    actions.increment({ commit })
    expect(commit).toBeCalled()
    expect(commit).toBeCalledWith('increment')
    // decrement
    actions.decrement({ commit })
    expect(commit).toBeCalled()
    expect(commit).toBeCalledWith('decrement')
  })
})