@yh-ui/components 0.1.0

package/dist/mention/__tests__/mention.test.cjs

@@ -0,0 +1,650 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _testUtils = require("@vue/test-utils");
+var _vue = require("vue");
+var _mention = _interopRequireDefault(require("../src/mention.vue"));
+var _mention2 = require("../src/mention.cjs");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const mockOptions = [{
+  value: "alice",
+  label: "Alice",
+  description: "\u524D\u7AEF\u5DE5\u7A0B\u5E08"
+}, {
+  value: "bob",
+  label: "Bob",
+  description: "\u540E\u7AEF\u5DE5\u7A0B\u5E08"
+}, {
+  value: "charlie",
+  label: "Charlie",
+  disabled: true
+}, {
+  value: "diana",
+  label: "Diana",
+  avatar: "https://example.com/avatar.jpg",
+  group: "VIP"
+}, {
+  value: "evan",
+  label: "Evan",
+  group: "VIP"
+}];
+(0, _vitest.describe)("Mention Constants Coverage", () => {
+  (0, _vitest.it)("should have constants defined", () => {
+    (0, _vitest.expect)(_mention2.mentionPlacements).toContain("top");
+    (0, _vitest.expect)(_mention2.mentionSizes).toContain("default");
+    (0, _vitest.expect)(_mention2.mentionSplits).toContain("@");
+  });
+});
+(0, _vitest.describe)("YhMention \u57FA\u7840\u6E32\u67D3", () => {
+  (0, _vitest.it)("\u5E94\u8BE5\u6B63\u786E\u6E32\u67D3\u6839\u5143\u7D20", () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default);
+    (0, _vitest.expect)(wrapper.classes()).toContain("yh-mention");
+  });
+  (0, _vitest.it)("\u5E94\u8BE5\u6E32\u67D3 input \u7C7B\u578B", () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        type: "input"
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("input").exists()).toBe(true);
+    (0, _vitest.expect)(wrapper.find("textarea").exists()).toBe(false);
+  });
+  (0, _vitest.it)("\u5E94\u8BE5\u6E32\u67D3 textarea \u7C7B\u578B", () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        type: "textarea"
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("textarea").exists()).toBe(true);
+    (0, _vitest.expect)(wrapper.find("input").exists()).toBe(false);
+    (0, _vitest.expect)(wrapper.classes()).toContain("is-textarea");
+  });
+  (0, _vitest.it)("\u5E94\u8BE5\u6E32\u67D3 placeholder", () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        placeholder: "\u8F93\u5165 @ \u63D0\u53CA"
+      }
+    });
+    const input = wrapper.find("input");
+    (0, _vitest.expect)(input.attributes("placeholder")).toBe("\u8F93\u5165 @ \u63D0\u53CA");
+  });
+  (0, _vitest.it)("\u7981\u7528\u72B6\u6001\u5E94\u6DFB\u52A0 is-disabled class", () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        disabled: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.classes()).toContain("is-disabled");
+    (0, _vitest.expect)(wrapper.find("input").attributes("disabled")).toBeDefined();
+  });
+  (0, _vitest.it)("\u53EA\u8BFB\u72B6\u6001\u5E94\u8BBE\u7F6E readonly \u5C5E\u6027", () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        readonly: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("input").attributes("readonly")).toBeDefined();
+  });
+  (0, _vitest.it)("\u5C3A\u5BF8 large \u5E94\u6DFB\u52A0\u5BF9\u5E94 class", () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        size: "large"
+      }
+    });
+    (0, _vitest.expect)(wrapper.classes()).toContain("yh-mention--large");
+  });
+  (0, _vitest.it)("\u5C3A\u5BF8 small \u5E94\u6DFB\u52A0\u5BF9\u5E94 class", () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        size: "small"
+      }
+    });
+    (0, _vitest.expect)(wrapper.classes()).toContain("yh-mention--small");
+  });
+});
+(0, _vitest.describe)("YhMention v-model", () => {
+  (0, _vitest.it)("\u5E94\u8BE5\u7ED1\u5B9A\u5E76\u54CD\u5E94 modelValue", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "hello",
+        "onUpdate:modelValue": val => wrapper.setProps({
+          modelValue: val
+        })
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("input").element.value).toBe("hello");
+    await wrapper.find("input").setValue("world");
+    (0, _vitest.expect)(wrapper.props("modelValue")).toBe("world");
+  });
+  (0, _vitest.it)("\u8F93\u5165\u65F6\u5E94\u89E6\u53D1 input \u4E8B\u4EF6", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: ""
+      }
+    });
+    await wrapper.find("input").trigger("input");
+    (0, _vitest.expect)(wrapper.emitted("input")).toBeTruthy();
+  });
+});
+(0, _vitest.describe)("YhMention \u89E6\u53D1\u673A\u5236", () => {
+  (0, _vitest.it)("\u8F93\u5165 @ \u540E\u5E94\u6253\u5F00\u4E0B\u62C9\u6846", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    (0, _vitest.expect)(wrapper.emitted("search")).toBeTruthy();
+    const searchEvent = wrapper.emitted("search");
+    (0, _vitest.expect)(searchEvent[0][1]).toBe("@");
+  });
+  (0, _vitest.it)("\u652F\u6301\u81EA\u5B9A\u4E49\u89E6\u53D1\u7B26 #", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        triggers: ["#"],
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("#");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    const searchEvent = wrapper.emitted("search");
+    (0, _vitest.expect)(searchEvent?.[0]?.[1]).toBe("#");
+  });
+  (0, _vitest.it)("\u8F93\u5165\u7A7A\u683C\u540E\u5E94\u5173\u95ED\u4E0B\u62C9\u6846", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "@alice ",
+        options: mockOptions,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@alice ");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    (0, _vitest.expect)(wrapper.emitted("open")).toBeFalsy();
+  });
+});
+(0, _vitest.describe)("YhMention \u8FC7\u6EE4\u9009\u9879", () => {
+  (0, _vitest.it)("\u9ED8\u8BA4\u5E94\u6309 label \u8FC7\u6EE4", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "@al",
+        options: mockOptions,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@al");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    const searchEvents = wrapper.emitted("search");
+    const keyword = searchEvents?.[searchEvents.length - 1]?.[0];
+    (0, _vitest.expect)(keyword).toBe("al");
+  });
+  (0, _vitest.it)("filterOption=false \u65F6\u5E94\u663E\u793A\u5168\u90E8\u9009\u9879", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    const opts = wrapper.findAll(".yh-mention__option");
+    (0, _vitest.expect)(opts.length).toBe(mockOptions.length);
+  });
+  (0, _vitest.it)("\u81EA\u5B9A\u4E49 filterOption \u5E94\u6309\u81EA\u5B9A\u4E49\u903B\u8F91\u8FC7\u6EE4", async () => {
+    const customFilter = _vitest.vi.fn((keyword, opt) => opt.value.startsWith(keyword));
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        filterOption: customFilter,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@a");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    (0, _vitest.expect)(customFilter).toHaveBeenCalled();
+  });
+});
+(0, _vitest.describe)("YhMention \u9009\u4E2D\u9009\u9879", () => {
+  (0, _vitest.it)("\u70B9\u51FB\u9009\u9879\u5E94\u66F4\u65B0 modelValue \u5E76\u89E6\u53D1 select \u4E8B\u4EF6", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: [{
+          value: "alice",
+          label: "Alice"
+        }],
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const inputEl = wrapper.find("input").element;
+    inputEl.focus();
+    inputEl.value = "@";
+    inputEl.setSelectionRange(1, 1);
+    await wrapper.find("input").trigger("input");
+    await new Promise(r => setTimeout(r, 100));
+    await (0, _vue.nextTick)();
+    const opt = wrapper.find(".yh-mention__option");
+    (0, _vitest.expect)(opt.exists()).toBe(true);
+    if (opt.exists()) {
+      await opt.trigger("mousedown");
+      await opt.trigger("click");
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.emitted("select")).toBeTruthy();
+      const selectArgs = wrapper.emitted("select")?.[0];
+      (0, _vitest.expect)(selectArgs[0]).toMatchObject({
+        value: "alice"
+      });
+    }
+  });
+  (0, _vitest.it)("\u7981\u7528\u9009\u9879\u4E0D\u5E94\u88AB\u9009\u4E2D", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: [{
+          value: "charlie",
+          label: "Charlie",
+          disabled: true
+        }],
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    const opt = wrapper.find(".yh-mention__option.is-disabled");
+    if (opt.exists()) {
+      await opt.trigger("click");
+      (0, _vitest.expect)(wrapper.emitted("select")).toBeFalsy();
+    }
+  });
+});
+(0, _vitest.describe)("YhMention \u952E\u76D8\u5BFC\u822A", () => {
+  (0, _vitest.it)("ArrowDown \u5E94\u9AD8\u4EAE\u4E0B\u4E00\u9879", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    await input.trigger("keydown", {
+      key: "ArrowDown"
+    });
+    await (0, _vue.nextTick)();
+    const highlighted = wrapper.find(".yh-mention__option.is-highlighted");
+    (0, _vitest.expect)(highlighted.exists()).toBe(true);
+  });
+  (0, _vitest.it)("Escape \u5E94\u5173\u95ED\u4E0B\u62C9\u6846", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    await input.trigger("keydown", {
+      key: "Escape"
+    });
+    await (0, _vue.nextTick)();
+    (0, _vitest.expect)(wrapper.emitted("close")).toBeTruthy();
+  });
+  (0, _vitest.it)("Enter \u5E94\u9009\u4E2D\u9AD8\u4EAE\u9879", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    await input.trigger("keydown", {
+      key: "ArrowDown"
+    });
+    await (0, _vue.nextTick)();
+    await input.trigger("keydown", {
+      key: "Enter"
+    });
+    await (0, _vue.nextTick)();
+    const selectEmitted = wrapper.emitted("select");
+    const updateEmitted = wrapper.emitted("update:modelValue");
+    (0, _vitest.expect)(selectEmitted || updateEmitted).toBeTruthy();
+  });
+});
+(0, _vitest.describe)("YhMention \u53EF\u6E05\u7A7A", () => {
+  (0, _vitest.it)("\u6709\u503C\u4E14 clearable \u65F6\uFF0C\u805A\u7126\u540E\u5E94\u663E\u793A\u6E05\u7A7A\u6309\u94AE", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "@alice",
+        clearable: true
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await (0, _vue.nextTick)();
+    (0, _vitest.expect)(wrapper.find(".yh-mention__clear").exists()).toBe(true);
+  });
+  (0, _vitest.it)("\u70B9\u51FB\u6E05\u7A7A\u6309\u94AE\u5E94\u6E05\u7A7A modelValue \u5E76\u89E6\u53D1 clear \u4E8B\u4EF6", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "@alice",
+        clearable: true
+      }
+    });
+    await wrapper.find("input").trigger("focus");
+    await (0, _vue.nextTick)();
+    const clearBtn = wrapper.find(".yh-mention__clear");
+    if (clearBtn.exists()) {
+      await clearBtn.trigger("click");
+      (0, _vitest.expect)(wrapper.emitted("update:modelValue")?.[0]).toEqual([""]);
+      (0, _vitest.expect)(wrapper.emitted("clear")).toBeTruthy();
+    }
+  });
+});
+(0, _vitest.describe)("YhMention \u5B57\u6570\u7EDF\u8BA1", () => {
+  (0, _vitest.it)("showWordLimit \u5E94\u663E\u793A\u5B57\u6570\u7EDF\u8BA1", () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "hello @world",
+        showWordLimit: true,
+        maxlength: 50
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-mention__count").exists()).toBe(true);
+    (0, _vitest.expect)(wrapper.find(".yh-mention__count").text()).toContain("12 / 50");
+  });
+});
+(0, _vitest.describe)("YhMention \u63D2\u69FD", () => {
+  (0, _vitest.it)("\u5E94\u8BE5\u6E32\u67D3 prefix \u63D2\u69FD", () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      slots: {
+        prefix: '<span class="custom-prefix">@</span>'
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".custom-prefix").exists()).toBe(true);
+  });
+  (0, _vitest.it)("\u5E94\u8BE5\u6E32\u67D3 suffix \u63D2\u69FD", () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      slots: {
+        suffix: '<span class="custom-suffix">\u2713</span>'
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".custom-suffix").exists()).toBe(true);
+  });
+  (0, _vitest.it)("\u5E94\u8BE5\u6E32\u67D3 option \u63D2\u69FD", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: [{
+          value: "alice",
+          label: "Alice"
+        }],
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      slots: {
+        option: '<template #option="{ option }"><span class="custom-opt">{{ option.label }}</span></template>'
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    (0, _vitest.expect)(wrapper.find(".custom-opt").exists() || wrapper.find(".yh-mention__option").exists()).toBe(true);
+  });
+  (0, _vitest.it)("\u5E94\u8BE5\u6E32\u67D3\u7A7A\u6570\u636E empty \u63D2\u69FD", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: [],
+        debounce: 0,
+        teleported: false
+      },
+      slots: {
+        empty: '<span class="custom-empty">\u6CA1\u6709\u4EBA</span>'
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    (0, _vitest.expect)(wrapper.find(".custom-empty").exists()).toBe(true);
+  });
+});
+(0, _vitest.describe)("YhMention expose API", () => {
+  (0, _vitest.it)("focus \u65B9\u6CD5\u5E94\u4F7F\u8F93\u5165\u6846\u805A\u7126", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      attachTo: document.body
+    });
+    const vm = wrapper.vm;
+    (0, _vitest.expect)(typeof vm.focus).toBe("function");
+  });
+  (0, _vitest.it)("blur \u65B9\u6CD5\u5E94\u5B58\u5728", () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default);
+    const vm = wrapper.vm;
+    (0, _vitest.expect)(typeof vm.blur).toBe("function");
+  });
+  (0, _vitest.it)("clear \u65B9\u6CD5\u5E94\u6E05\u7A7A\u5185\u5BB9", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "@alice"
+      }
+    });
+    const vm = wrapper.vm;
+    vm.clear();
+    await (0, _vue.nextTick)();
+    (0, _vitest.expect)(wrapper.emitted("update:modelValue")?.[0]).toEqual([""]);
+  });
+  (0, _vitest.it)("insertMention \u65B9\u6CD5\u5E94\u63D2\u5165\u6587\u672C", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "\u4F60\u597D "
+      }
+    });
+    const vm = wrapper.vm;
+    vm.insertMention({
+      value: "alice",
+      label: "Alice"
+    }, "@");
+    await (0, _vue.nextTick)();
+    const updatedVal = wrapper.emitted("update:modelValue")?.[0]?.[0];
+    (0, _vitest.expect)(updatedVal).toContain("@Alice");
+  });
+});
+(0, _vitest.describe)("YhMention \u5206\u7EC4", () => {
+  (0, _vitest.it)("\u6709 group \u6807\u8BC6\u7684\u9009\u9879\u5E94\u663E\u793A\u5206\u7EC4\u6807\u9898", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    const groupLabel = wrapper.find(".yh-mention__group-label");
+    (0, _vitest.expect)(groupLabel.exists()).toBe(true);
+    (0, _vitest.expect)(groupLabel.text()).toBe("VIP");
+  });
+});
+(0, _vitest.describe)("YhMention \u9009\u9879\u5934\u50CF", () => {
+  (0, _vitest.it)("\u6709 avatar \u7684\u9009\u9879\u5E94\u6E32\u67D3 img \u5143\u7D20", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: [{
+          value: "diana",
+          label: "Diana",
+          avatar: "https://example.com/avatar.jpg"
+        }],
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    const img = wrapper.find(".yh-mention__option-avatar");
+    (0, _vitest.expect)(img.exists()).toBe(true);
+    (0, _vitest.expect)(img.attributes("src")).toBe("https://example.com/avatar.jpg");
+  });
+});
+(0, _vitest.describe)("YhMention \u591A\u89E6\u53D1\u7B26", () => {
+  (0, _vitest.it)("\u652F\u6301\u540C\u65F6\u914D\u7F6E @ \u548C # \u89E6\u53D1\u7B26", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        triggers: ["@", "#"],
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("#");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    const searchEvents = wrapper.emitted("search");
+    (0, _vitest.expect)(searchEvents?.[0]?.[1]).toBe("#");
+  });
+});
+(0, _vitest.describe)("YhMention \u4E8B\u4EF6", () => {
+  (0, _vitest.it)("\u805A\u7126\u5E94\u89E6\u53D1 focus \u4E8B\u4EF6", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default);
+    await wrapper.find("input").trigger("focus");
+    (0, _vitest.expect)(wrapper.emitted("focus")).toBeTruthy();
+  });
+  (0, _vitest.it)("\u5931\u7126\u5E94\u89E6\u53D1 blur \u4E8B\u4EF6", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default);
+    await wrapper.find("input").trigger("focus");
+    await wrapper.find("input").trigger("blur");
+    await new Promise(r => setTimeout(r, 200));
+    (0, _vitest.expect)(wrapper.emitted("blur")).toBeTruthy();
+  });
+  (0, _vitest.it)("keydown \u4E8B\u4EF6\u5E94\u900F\u4F20", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default);
+    await wrapper.find("input").trigger("keydown", {
+      key: "a"
+    });
+    (0, _vitest.expect)(wrapper.emitted("keydown")).toBeTruthy();
+  });
+  (0, _vitest.it)("\u9ED8\u8BA4 placeholder \u5E94\u4ECE\u8BED\u8A00\u5305\u83B7\u53D6", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default);
+    const input = wrapper.find("input");
+    (0, _vitest.expect)(input.attributes("placeholder")).toBe("\u8BF7\u8F93\u5165");
+  });
+  (0, _vitest.it)("\u5E94\u8BE5\u8986\u76D6 Mention.vue \u7684\u66F4\u591A\u5206\u652F", async () => {
+    const wrapper = (0, _testUtils.mount)(_mention.default, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.trigger("mouseenter");
+    await input.trigger("mouseleave");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise(r => setTimeout(r, 50));
+    await (0, _vue.nextTick)();
+    await input.trigger("keydown", {
+      key: "ArrowUp"
+    });
+    await input.trigger("keydown", {
+      key: "Escape"
+    });
+    await input.trigger("keydown", {
+      key: "Tab"
+    });
+    document.body.click();
+    await (0, _vue.nextTick)();
+    window.dispatchEvent(new Event("resize"));
+    wrapper.unmount();
+  });
+});

package/dist/mention/__tests__/mention.test.d.ts

@@ -0,0 +1 @@
+export {};