@yh-ui/components 0.1.21 → 0.1.23

package/dist/select/__tests__/select.test.cjs

@@ -1,414 +0,0 @@
-"use strict";
-
-var _vitest = require("vitest");
-var _testUtils = require("@vue/test-utils");
-var _vue = require("vue");
-var _select = _interopRequireDefault(require("../src/select.vue"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-(0, _vitest.describe)("YhSelect", () => {
-  const options = [{
-    value: "option1",
-    label: "\u9009\u9879\u4E00"
-  }, {
-    value: "option2",
-    label: "\u9009\u9879\u4E8C"
-  }, {
-    value: "option3",
-    label: "\u9009\u9879\u4E09"
-  }, {
-    value: "option4",
-    label: "\u9009\u9879\u56DB",
-    disabled: true
-  }, {
-    value: "option5",
-    label: "\u9009\u9879\u4E94"
-  }];
-  (0, _vitest.it)("should render correctly", () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-select");
-    (0, _vitest.expect)(wrapper.find("input").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should work with v-model in single mode", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        modelValue: "option1",
-        "onUpdate:modelValue": val => wrapper.setProps({
-          modelValue: val
-        })
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-select__selected-value").text()).toBe("\u9009\u9879\u4E00");
-  });
-  (0, _vitest.it)("should work with v-model in multiple mode", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        multiple: true,
-        modelValue: ["option1", "option2"],
-        "onUpdate:modelValue": val => wrapper.setProps({
-          modelValue: val
-        })
-      }
-    });
-    const tags = wrapper.findAll(".yh-select__tag");
-    (0, _vitest.expect)(tags.length).toBe(2);
-  });
-  (0, _vitest.it)("should display placeholder when no value", () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        modelValue: void 0,
-        placeholder: "\u8BF7\u9009\u62E9"
-      }
-    });
-    const input = wrapper.find("input");
-    (0, _vitest.expect)(input.attributes("placeholder")).toBe("\u8BF7\u9009\u62E9");
-  });
-  (0, _vitest.it)("should be disabled when disabled prop is true", () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        disabled: true
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("is-disabled");
-    (0, _vitest.expect)(wrapper.find("input").attributes("disabled")).toBeDefined();
-  });
-  (0, _vitest.it)("should apply size class", () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        size: "large"
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-select--large");
-  });
-  (0, _vitest.it)("should apply small size class", () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        size: "small"
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-select--small");
-  });
-  (0, _vitest.it)("should show clear button when clearable and has value", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        modelValue: "option1",
-        clearable: true
-      }
-    });
-    await wrapper.trigger("mouseenter");
-    await wrapper.find("input").trigger("focus");
-    await (0, _vue.nextTick)();
-    (0, _vitest.expect)(wrapper.find(".yh-select__clear").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should clear value when clear button is clicked", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        modelValue: "option1",
-        clearable: true,
-        "onUpdate:modelValue": val => wrapper.setProps({
-          modelValue: val
-        })
-      }
-    });
-    await wrapper.trigger("mouseenter");
-    await wrapper.find("input").trigger("focus");
-    await (0, _vue.nextTick)();
-    await wrapper.find(".yh-select__clear").trigger("click");
-    (0, _vitest.expect)(wrapper.emitted("clear")).toBeTruthy();
-    (0, _vitest.expect)(wrapper.props("modelValue")).toBeUndefined();
-  });
-  (0, _vitest.it)("should clear all values in multiple mode", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        multiple: true,
-        modelValue: ["option1", "option2"],
-        clearable: true,
-        "onUpdate:modelValue": val => wrapper.setProps({
-          modelValue: val
-        })
-      }
-    });
-    await wrapper.trigger("mouseenter");
-    await wrapper.find("input").trigger("focus");
-    await (0, _vue.nextTick)();
-    await wrapper.find(".yh-select__clear").trigger("click");
-    (0, _vitest.expect)(wrapper.emitted("clear")).toBeTruthy();
-    (0, _vitest.expect)(wrapper.props("modelValue")).toEqual([]);
-  });
-  (0, _vitest.it)("should toggle dropdown on click", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options
-      }
-    });
-    await wrapper.trigger("click");
-    (0, _vitest.expect)(wrapper.emitted("visible-change")).toBeTruthy();
-    (0, _vitest.expect)(wrapper.emitted("visible-change")[0]).toEqual([true]);
-  });
-  (0, _vitest.it)("should select option on click", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        "onUpdate:modelValue": val => wrapper.setProps({
-          modelValue: val
-        })
-      }
-    });
-    await wrapper.trigger("click");
-    await (0, _vue.nextTick)();
-    const optionElements = wrapper.findAll(".yh-select__option");
-    if (optionElements.length > 0) {
-      await optionElements[0].trigger("click");
-      (0, _vitest.expect)(wrapper.emitted("change")).toBeTruthy();
-    }
-  });
-  (0, _vitest.it)("should not select disabled option", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        "onUpdate:modelValue": val => wrapper.setProps({
-          modelValue: val
-        })
-      }
-    });
-    await wrapper.trigger("click");
-    await (0, _vue.nextTick)();
-    const disabledOption = wrapper.find(".yh-select__option.is-disabled");
-    if (disabledOption.exists()) {
-      await disabledOption.trigger("click");
-      (0, _vitest.expect)(wrapper.props("modelValue")).toBeUndefined();
-    }
-  });
-  (0, _vitest.it)("should remove tag in multiple mode", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        multiple: true,
-        modelValue: ["option1", "option2"],
-        "onUpdate:modelValue": val => wrapper.setProps({
-          modelValue: val
-        })
-      }
-    });
-    const closeBtn = wrapper.find(".yh-select__tag-close");
-    if (closeBtn.exists()) {
-      await closeBtn.trigger("click");
-      (0, _vitest.expect)(wrapper.emitted("remove-tag")).toBeTruthy();
-    }
-  });
-  (0, _vitest.it)("should collapse tags when collapseTags is true", () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        multiple: true,
-        modelValue: ["option1", "option2", "option3"],
-        collapseTags: true,
-        maxCollapseTags: 1
-      }
-    });
-    const tags = wrapper.findAll(".yh-select__tag");
-    (0, _vitest.expect)(tags.length).toBe(2);
-    (0, _vitest.expect)(tags[1].text()).toContain("+2");
-  });
-  (0, _vitest.it)("should filter options when filterable", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        filterable: true
-      }
-    });
-    await wrapper.trigger("click");
-    await wrapper.find("input").setValue("\u9009\u9879\u4E00");
-    await (0, _vue.nextTick)();
-    (0, _vitest.expect)(wrapper.emitted()).toBeTruthy();
-  });
-  (0, _vitest.it)("should navigate with arrow keys", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options
-      }
-    });
-    await wrapper.find("input").trigger("keydown", {
-      key: "ArrowDown"
-    });
-    (0, _vitest.expect)(wrapper.emitted("visible-change")).toBeTruthy();
-  });
-  (0, _vitest.it)("should close dropdown on Escape", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options
-      }
-    });
-    await wrapper.trigger("click");
-    await wrapper.find("input").trigger("keydown", {
-      key: "Escape"
-    });
-    (0, _vitest.expect)(wrapper.emitted("visible-change").pop()).toEqual([false]);
-  });
-  (0, _vitest.it)("should select option on Enter", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        "onUpdate:modelValue": val => wrapper.setProps({
-          modelValue: val
-        })
-      }
-    });
-    await wrapper.trigger("click");
-    await wrapper.find("input").trigger("keydown", {
-      key: "ArrowDown"
-    });
-    await wrapper.find("input").trigger("keydown", {
-      key: "Enter"
-    });
-    (0, _vitest.expect)(wrapper.emitted("change")).toBeTruthy();
-  });
-  (0, _vitest.it)("should create new option when allowCreate is true", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        multiple: true,
-        filterable: true,
-        allowCreate: true,
-        modelValue: [],
-        "onUpdate:modelValue": val => wrapper.setProps({
-          modelValue: val
-        })
-      }
-    });
-    await wrapper.trigger("click");
-    await wrapper.find("input").setValue("\u65B0\u9009\u9879");
-    await wrapper.find("input").trigger("keydown", {
-      key: "Enter"
-    });
-    (0, _vitest.expect)(wrapper.emitted("change")).toBeTruthy();
-  });
-  (0, _vitest.it)("should call remoteMethod when remote is true", async () => {
-    const remoteMethod = _vitest.vi.fn();
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options: [],
-        filterable: true,
-        remote: true,
-        remoteMethod
-      }
-    });
-    await wrapper.trigger("click");
-    await wrapper.find("input").setValue("test");
-    await (0, _vue.nextTick)();
-    (0, _vitest.expect)(remoteMethod).toHaveBeenCalledWith("test");
-  });
-  (0, _vitest.it)("should enable virtual scroll when virtualScroll is true", () => {
-    const manyOptions = Array.from({
-      length: 1e3
-    }, (_, i) => ({
-      value: `option${i}`,
-      label: `\u9009\u9879 ${i}`
-    }));
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options: manyOptions,
-        virtualScroll: true,
-        height: 274,
-        itemHeight: 34
-      }
-    });
-    (0, _vitest.expect)(wrapper.props("virtualScroll")).toBe(true);
-  });
-  (0, _vitest.it)("should have correct ARIA attributes", () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options
-      }
-    });
-    const input = wrapper.find("input");
-    (0, _vitest.expect)(input.attributes("role")).toBe("combobox");
-    (0, _vitest.expect)(input.attributes("aria-expanded")).toBeDefined();
-  });
-  (0, _vitest.it)("should emit focus and blur events", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options
-      }
-    });
-    await wrapper.find("input").trigger("focus");
-    (0, _vitest.expect)(wrapper.emitted("focus")).toBeTruthy();
-    await wrapper.find("input").trigger("blur");
-    await new Promise(resolve => setTimeout(resolve, 200));
-    (0, _vitest.expect)(wrapper.emitted("blur")).toBeTruthy();
-  });
-  (0, _vitest.it)("should expose focus and blur methods", () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options
-      }
-    });
-    const vm = wrapper.vm;
-    (0, _vitest.expect)(typeof vm.focus).toBe("function");
-    (0, _vitest.expect)(typeof vm.blur).toBe("function");
-  });
-  (0, _vitest.it)("should respect multipleLimit", async () => {
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        options,
-        multiple: true,
-        multipleLimit: 2,
-        modelValue: ["option1", "option2"],
-        "onUpdate:modelValue": val => wrapper.setProps({
-          modelValue: val
-        })
-      }
-    });
-    await wrapper.trigger("click");
-    await (0, _vue.nextTick)();
-    const optionElements = wrapper.findAll(".yh-select__option");
-    if (optionElements.length > 2) {
-      await optionElements[2].trigger("click");
-      (0, _vitest.expect)(wrapper.props("modelValue").length).toBe(2);
-    }
-  });
-  (0, _vitest.it)("should work with slot mode (YhOption)", async () => {
-    const {
-      YhOption
-    } = await Promise.resolve().then(() => require("../index.cjs"));
-    const wrapper = (0, _testUtils.mount)(_select.default, {
-      props: {
-        modelValue: "v1",
-        "onUpdate:modelValue": val => wrapper.setProps({
-          modelValue: val
-        })
-      },
-      slots: {
-        default: () => [(0, _vue.h)(YhOption, {
-          value: "v1",
-          label: "L1"
-        }), (0, _vue.h)(YhOption, {
-          value: "v2",
-          label: "L2",
-          disabled: true
-        })]
-      },
-      global: {
-        components: {
-          YhOption
-        }
-      }
-    });
-    await wrapper.trigger("click");
-    await (0, _vue.nextTick)();
-    (0, _vitest.expect)(wrapper.find(".yh-select__selected-value").text()).toBe("L1");
-    wrapper.unmount();
-  });
-});