Vue Dialog组件单元测试用例设计相关问题咨询

疑问解答 #

• handleClose、handleOpen两个方法不需要单独编写测试用例：单元测试优先验证用户可感知的行为，而非组件内部实现。只要验证交互触发后显隐状态符合预期即可，不需要主动调用内部方法测试，后续你重构方法逻辑、修改方法名只要功能不变，测试用例无需调整，维护成本更低。
• 除了基础显隐逻辑，建议补充以下测试点，覆盖所有实际使用场景：
  • 传入的content内容（标题、富文本内容）是否正确渲染
  • 点击关闭按钮、点击蒙层两个交互是否能正常关闭弹窗
  • 自定义事件triggerOpen触发后是否能正常打开弹窗

完整测试代码示例 #

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

// 测试用例分组，结构更清晰
describe('Dialog 组件', () => {
  // 通用挂载方法，减少重复代码
  const mountDialog = (props = {}) => {
    return shallowMount(Dialog, {
      propsData: {
        content: {
          title: '测试标题',
          content: '<p>测试富文本内容</p>'
        },
        show: false,
        ...props
      }
    })
  }

  test('show为false时组件隐藏', () => {
    const wrapper = mountDialog()
    expect(wrapper.find('.c-dialog').classes('u-block')).toBe(false)
  })

  test('show为true时弹窗可见', () => {
    const wrapper = mountDialog({ show: true })
    expect(wrapper.find('.c-dialog').classes('u-block')).toBe(true)
  })

  test('传入的content内容正确渲染', () => {
    const wrapper = mountDialog({ show: true })
    expect(wrapper.find('h4').text()).toBe('测试标题')
    expect(wrapper.find('.c-dialog__content').html()).toContain('<p>测试富文本内容</p>')
  })

  test('点击关闭按钮后弹窗关闭', async () => {
    const wrapper = mountDialog({ show: true })
    await wrapper.find('.c-dialog__close').trigger('click')
    expect(wrapper.find('.c-dialog').classes('u-block')).toBe(false)
  })

  test('点击蒙层后弹窗关闭', async () => {
    const wrapper = mountDialog({ show: true })
    await wrapper.find('.c-dialog__background').trigger('click')
    expect(wrapper.find('.c-dialog').classes('u-block')).toBe(false)
  })

  test('触发triggerOpen事件后弹窗打开', async () => {
    const wrapper = mountDialog()
    await wrapper.vm.$emit('triggerOpen')
    expect(wrapper.find('.c-dialog').classes('u-block')).toBe(true)
  })
})

内容的提问来源于stack exchange，提问作者Udders