@yh-ui/components 0.1.0

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

@@ -0,0 +1,414 @@
+"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();
+  });
+});

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

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