[Day21] Vue 3 单元测试 (Unit Testing) - Props & Computed

Props 与 Computed 是开发元件最常使用的属性，下面的范例是一个运用 Props 与 Computed 的简单例子。

import { ref, computed } from 'vue'

const Component = {
  template: `
    <div>
      <input data-test="password" v-model="password">
      <p v-if="showError && isError" data-test="errorMsg">Password must be at least {{minLength}} characters.</p>
    </div>
  `,
  props: {
    minLength: {
      type: Number,
      required: true
    },
    showError: {
      type: Boolean,
      default: true
    }
  },
  setup (props) {
    const password = ref('')
    const isError = computed(() => password.value.length < props.minLength)

    return {
      isError,
      password
    }
  }
}

元件中有一个输入框可以输入密码，而密码会有一个最短的长度限制 (minLength)，预设的情况下，如果短於长度限制会出现错误讯息，不过如果将 showError 设为 false 时，则不会出现错误讯息。

要测试这个元件是否正常，我们应该验证三种情况是否正确运行：

Case 1: 密码在大於或等於最短长度限制时，不会出现错误讯息。
Case 2: 密码少於最短长度限制时，出现错误讯息。
Case 3: 密码少於最短长度限制时，出现错误讯息，接着将 showError 为 false ，则不显示错误讯息。

由於这三个 case 使用到的观念与语法有非常多都是前面的文章介绍过的，所以今天我就不一个 case 一个 case 分开讲解，直接附上完整的程序码，也顺带介绍一个实用的语法 beforeEach()。

如果没有看过前面几篇的朋友，建议可以先去看 Conditional rendering & Elements visibility 与 Form Elements Handling，会帮助你更了解以下的程序码。

describe('Props & Computed', () => {
  let wrapper
  const minLength = 6
  beforeEach(() => {
    wrapper = mount(Component, {
      props: {
        minLength
      }
    })
  })
  
  // Case 1: 密码在大於或等於最短长度限制时，不会出现错误讯息。
  test(`not renders an error if length is more than or equal to ${minLength}`, async () => {
    await wrapper.get('[data-test="password"]').setValue('123456')

    expect(wrapper.find('[data-test="errorMsg"]').exists()).toBe(false)
  })

  // Case 2: 密码少於最短长度限制时，出现错误讯息。
  test(`renders an error if length is less than ${minLength}`, async () => {
    await wrapper.get('[data-test="password"]').setValue('12345')

    expect(wrapper.html()).toContain(`Password must be at least ${minLength} characters`)
  })

  // Case 3: 当 showError 为 false 时，不显示错误讯息。
  test('not renders an error if showError is false ', async () => {
    await wrapper.get('[data-test="password"]').setValue('12345')

    expect(wrapper.html()).toContain(`Password must be at least ${minLength} characters`)

    await wrapper.setProps({ showError: false })

    expect(wrapper.find('[data-test="errorMsg"]').exists()).toBe(false)
  })
})

语法说明：