اختبار المكوّن ومهام المستخدم المتاحة

import { mount } from "@vue/test-utils"
import { it, expect } from "vitest"
import TitleForm from "./TitleForm.vue"

it("emits a trimmed title", async () => {
  const wrapper = mount(TitleForm)
  await wrapper.get("input").setValue("  Notes  ")
  await wrapper.get("form").trigger("submit")
  expect(wrapper.emitted("save-title")).toEqual([["Notes"]])
  wrapper.unmount()
})

يتطلب الحزم والتحويل وDOM المتوافقة. المتوقع حمولة Notes ولم ينفذ الاختبار لغياب اعتماديات الإطار بالبيئة المعزولة.

<script setup>
import { useId } from "vue"
const model = defineModel({ type: String, required: true })
const props = defineProps({ error: { type: String, default: "" } })
const inputId = useId()
const errorId = `${inputId}-error`
</script>

<template>
  <label :for="inputId">Note title</label>
  <input :id="inputId" v-model="model"
    :aria-invalid="props.error ? 'true' : undefined"
    :aria-describedby="props.error ? errorId : undefined">
  <p v-if="props.error" :id="errorId" role="alert">{{ props.error }}</p>
</template>

يتطلب قيمة الأب ومترجم وتشغيل 3.5. لم يشغل متصفح أو محرك وصول، ويحدد المثال العلاقة دون ادعاء إتاحة كاملة من النص.