到这，我们已经写好了测试，以确保我们的通知是根据其类型来进行样式设计的 。当用户点击组件上的关闭按钮时，我们会重置 message 参数 。根据我们的代码，我们要根据这个 message 参数的值来添加或删除 notification--slide 类，如下所示:
notification.vue
<div:class="['notification',type === 'error' ? 'notification--error' : null,type === 'success' ? 'notification--success' : null,type === 'info' ? 'notification--info' : null,message && message.length > 0 ? 'notification--slide' : null,]">//...如果我们要测试这个特定的断言，它的内容如下：
test("slides up when message is empty", () => {const message = "";const wrapper = mount(notification, {props: { message },});expect(wrapper.classes("notification--slide")).toBe(false);});在这段测试代码中，我们用一个空字符串创建一个 message 变量，并把它作为一个 prop 传递给我们的组件 。
之后，我们检查我们组件的类数组，确保它不包括 notification--slide 类，该类负责使我们的组件向下/向外滑动到用户的视图 。为了做到这一点，我们使用 toBe 函数，它接收一个值A，并试图检查它是否与 B 相同 。
我们还想测试一下，每当组件上的按钮被点击，它就会发出一个事件:
test("emits event when close button is clicked", async() => {const wrapper = mount(notification, {data() {return {clicked: false,};},});const closeButton = wrapper.find("button");await closeButton.trigger("click");expect(wrapper.emitted()).toHaveProperty("clear-notification");});在这个测试块中，我们使用了一个 async 函数，因为我们将触发一个事件，它返回一个 Promise，我们需要等待这个 Promise 的解决，以便捕捉这个事件所引起的变化 。我们还使用了data函数，并添加了一个 clicked 属性，当点击时将被切换 。
到这，我们需要触发这个点击事件，我们首先通过使用 find 函数来获得按钮 。这个函数与querySelector相同，它接受一个类、一个id或一个属性，并返回一个元素 。
在找到按钮后，使用 trigger 方法来触发一个点击事件 。这个方法接受要触发的事件名称（click, focus, blur, keydown等），执行这个事件并返回一个 promise 。出于这个原因，我们等待这个动作，以确保在我们根据这个事件做出断言之前，已经对我们的DOM进行了改变 。
最后，我们使用返回一个数组的 [emitted](
https://test-utils.vuejs.org/api/#emitted) 方法检查我们的组件所发出的事件列表 。然后我们检查这个数组是否包括 clear-notification 事件 。
最后，我们测试以确保我们的组件渲染出正确的消息，并传递给 message prop 。
test("renders message when message is not empty", () => {const message = "Something happened, try again";const wrapper = mount(notification, {props: { message },});expect(wrapper.find("p").text()).toBe(message);});这里，我们创建了一个 message 变量，给它分配了一个随机字符串，并把它作为一个 prop 传递给我们的组件 。
然后，我们使用 p 标签搜索我们的消息文本，因为这里是显示消息的地方，并检查其文本是否与 message 相同 。
我们使用 text 方法提取这个标签的内容，这和 innerText很相似 。最后，我们使用前面的函数 toBe 来断言这个值与 message 相同 。
完整的测试文件在涵盖所有这些之后，下面是完整的测试文件内容：
notification.test.js
/** * @vitest-environment happy-dom */import { mount } from "@vue/test-utils";import notification from "../components/notification.vue";import { describe, expect, test } from "vitest";describe("notification.vue", () => {test("renders the correct style for error", () => {const type = "error";const wrapper = mount(notification, {props: { type },});expect(wrapper.classes()).toEqual(expect.arrayContaining(["notification--error"]));});test("renders the correct style for success", () => {const type = "success";const wrapper = mount(notification, {props: { type },});expect(wrapper.classes()).toEqual(expect.arrayContaining(["notification--success"]));});test("renders the correct style for info", () => {const type = "info";const wrapper = mount(notification, {props: { type },});expect(wrapper.classes()).toEqual(expect.arrayContaining(["notification--info"]));});test("slides down when message is not empty", () => {const message = "success";const wrapper = mount(notification, {props: { message },});expect(wrapper.classes()).toEqual(expect.arrayContaining(["notification--slide"]));});test("slides up when message is empty", () => {const message = "";const wrapper = mount(notification, {props: { message },});expect(wrapper.classes("notification--slide")).toBe(false);});test("emits event when close button is clicked", async() => {const wrapper = mount(notification, {data() {return {clicked: false,};},});const closeButton = wrapper.find("button");await closeButton.trigger("click");expect(wrapper.emitted()).toHaveProperty("clear-notificatioon");});test("renders message when message is not empty", () => {const message = "Something happened, try again";const wrapper = mount(notification, {props: { message },});expect(wrapper.find("p").text()).toBe(message);});});