@yh-ui/components 0.1.21 → 0.1.23

package/dist/date-picker/__tests__/date-picker-extended.test.cjs

@@ -1,581 +0,0 @@
-"use strict";
-
-var _vitest = require("vitest");
-var _testUtils = require("@vue/test-utils");
-var _vue = require("vue");
-var _datePicker = _interopRequireDefault(require("../src/date-picker.vue"));
-var _monthTable = _interopRequireDefault(require("../src/month-table.vue"));
-var _yearTable = _interopRequireDefault(require("../src/year-table.vue"));
-var _quarterTable = _interopRequireDefault(require("../src/quarter-table.vue"));
-var _dateTable = _interopRequireDefault(require("../src/date-table.vue"));
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _locale = require("@yh-ui/locale");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-_vitest.vi.mock("@yh-ui/hooks", async () => {
-  const actual = await _vitest.vi.importActual("@yh-ui/hooks");
-  return {
-    ...actual,
-    useNamespace: name => {
-      const b = suffix => suffix ? `yh-${name}-${suffix}` : `yh-${name}`;
-      return {
-        b,
-        e: element => `${b()}__${element}`,
-        m: modifier => `${b()}--${modifier}`,
-        em: (element, modifier) => `${b()}__${element}--${modifier}`,
-        is: (state, value) => {
-          if (value === void 0) return `is-${state}`;
-          return value ? `is-${state}` : "";
-        }
-      };
-    },
-    useFormItem: () => ({
-      form: null,
-      formItem: null,
-      validate: _vitest.vi.fn()
-    }),
-    useId: () => "test-id",
-    useLocale: () => ({
-      t: key => key,
-      locale: (0, _vue.ref)(_locale.zhCn),
-      lang: (0, _vue.ref)("zh-cn")
-    }),
-    useConfig: () => ({
-      globalSize: (0, _vue.ref)("default"),
-      globalLocale: (0, _vue.ref)(_locale.zhCn)
-    }),
-    useZIndex: () => ({
-      currentZIndex: (0, _vue.ref)(2e3),
-      nextZIndex: () => 2e3
-    })
-  };
-});
-(0, _vitest.describe)("YhDatePicker Extended", () => {
-  (0, _vitest.beforeEach)(() => {
-    Element.prototype.getBoundingClientRect = _vitest.vi.fn(() => ({
-      width: 220,
-      height: 40,
-      top: 100,
-      left: 100,
-      bottom: 140,
-      right: 320,
-      x: 100,
-      y: 100,
-      toJSON: () => {}
-    }));
-  });
-  (0, _vitest.describe)("Other picker types", () => {
-    (0, _vitest.it)("should support month type", async () => {
-      const value = (0, _vue.ref)(null);
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "month",
-          modelValue: value.value,
-          "onUpdate:modelValue": val => value.value = val,
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.findComponent(_monthTable.default).exists()).toBe(true);
-      const cell = wrapper.find(".yh-date-picker__cell");
-      await cell.trigger("click");
-      (0, _vitest.expect)(value.value).not.toBeNull();
-    });
-    (0, _vitest.it)("should support year type", async () => {
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "year",
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.findComponent(_yearTable.default).exists()).toBe(true);
-      const cell = wrapper.find(".yh-date-picker__cell");
-      await cell.trigger("click");
-      (0, _vitest.expect)(wrapper.emitted("update:modelValue")).toBeTruthy();
-    });
-    (0, _vitest.it)("should support quarter type", async () => {
-      const value = (0, _vue.ref)(null);
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "quarter",
-          panelOnly: true,
-          modelValue: value.value,
-          "onUpdate:modelValue": val => value.value = val
-        }
-      });
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.findComponent(_quarterTable.default).exists()).toBe(true);
-      const cell = wrapper.find(".yh-date-picker__cell");
-      await cell.trigger("click");
-      (0, _vitest.expect)(value.value).not.toBeNull();
-    });
-  });
-  (0, _vitest.describe)("Range pickers", () => {
-    (0, _vitest.it)("should support daterange type", async () => {
-      const value = (0, _vue.ref)([null, null]);
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "daterange",
-          modelValue: value.value,
-          "onUpdate:modelValue": val => value.value = val,
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      const cells = wrapper.findAll(".yh-date-picker__cell.is-current-month");
-      await cells[10].trigger("click");
-      await (0, _vue.nextTick)();
-      await cells[20].trigger("click");
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(value.value.length).toBe(2);
-    });
-    (0, _vitest.it)("should support monthrange type", async () => {
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "monthrange",
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.findComponent(_monthTable.default).exists()).toBe(true);
-    });
-  });
-  (0, _vitest.describe)("Navigation & View Switching", () => {
-    (0, _vitest.it)("should switch between views", async () => {
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.findComponent(_dateTable.default).exists()).toBe(true);
-      await wrapper.find(".yh-date-picker__header-label").trigger("click");
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.findComponent(_monthTable.default).exists()).toBe(true);
-      await wrapper.find(".yh-date-picker__header-label").trigger("click");
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.findComponent(_yearTable.default).exists()).toBe(true);
-    });
-  });
-  (0, _vitest.describe)("DateTable extra coverage", () => {
-    (0, _vitest.it)("should support week selection mode", async () => {
-      const value = (0, _vue.ref)(null);
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "week",
-          modelValue: value.value,
-          "onUpdate:modelValue": val => value.value = val,
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      const cell = wrapper.find(".yh-date-picker__cell.is-current-month");
-      await cell.trigger("click");
-      (0, _vitest.expect)(value.value).not.toBeNull();
-    });
-    (0, _vitest.it)("should support cellRender prop", async () => {
-      const cellRender = date => {
-        return {
-          text: "custom",
-          className: "custom-cell-class"
-        };
-      };
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          cellRender,
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.find(".custom-cell-class").exists()).toBe(true);
-      (0, _vitest.expect)(wrapper.find(".custom-cell-class").text()).toBe("custom");
-    });
-    (0, _vitest.it)("should handle range selection hovering", async () => {
-      const value = (0, _vue.ref)(null);
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "daterange",
-          modelValue: value.value,
-          "onUpdate:modelValue": val => {
-            value.value = val;
-            wrapper.setProps({
-              modelValue: val
-            });
-          },
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      const cells = wrapper.findAll(".yh-date-picker__cell.is-current-month");
-      await cells[10].trigger("click");
-      await (0, _vue.nextTick)();
-      await cells[15].trigger("mouseenter");
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.find(".is-in-range").exists()).toBe(true);
-      await wrapper.find(".yh-date-picker__table").trigger("mouseleave");
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.find(".is-in-range").exists()).toBe(false);
-    });
-  });
-  (0, _vitest.describe)("Footer & Presets", () => {
-    (0, _vitest.it)("should handle presets", async () => {
-      const presets = [{
-        label: "Today",
-        value: /* @__PURE__ */new Date()
-      }];
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          presets,
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      const presetBtn = wrapper.find(".yh-date-picker__preset-item");
-      await presetBtn.trigger("click");
-      (0, _vitest.expect)(wrapper.emitted("update:modelValue")).toBeTruthy();
-    });
-    (0, _vitest.it)("should support datetime type", async () => {
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "datetime",
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.find(".yh-date-picker__footer").exists()).toBe(true);
-    });
-    (0, _vitest.it)("should handle footer confirm button", async () => {
-      const onConfirm = _vitest.vi.fn();
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "daterange",
-          onConfirm,
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      const confirmBtn = wrapper.find(".yh-date-picker__footer-btn--confirm");
-      await confirmBtn.trigger("click");
-      (0, _vitest.expect)(onConfirm).toHaveBeenCalled();
-    });
-  });
-  (0, _vitest.describe)("Navigation & Miscellaneous", () => {
-    (0, _vitest.it)("should handle navigation buttons", async () => {
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      const prevYearBtn = wrapper.find(".yh-date-picker__header-btns--double-left");
-      const nextYearBtn = wrapper.find(".yh-date-picker__header-btns--double-right");
-      const prevMonthBtn = wrapper.find(".yh-date-picker__header-btns--left");
-      const nextMonthBtn = wrapper.find(".yh-date-picker__header-btns--right");
-      if (prevYearBtn.exists()) await prevYearBtn.trigger("click");
-      if (nextYearBtn.exists()) await nextYearBtn.trigger("click");
-      if (prevMonthBtn.exists()) await prevMonthBtn.trigger("click");
-      if (nextMonthBtn.exists()) await nextMonthBtn.trigger("click");
-      (0, _vitest.expect)(wrapper.findComponent(_dateTable.default).exists()).toBe(true);
-    });
-    (0, _vitest.it)("should handle clear action", async () => {
-      const onUpdateModelValue = _vitest.vi.fn();
-      const value = /* @__PURE__ */new Date();
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          modelValue: value,
-          clearable: true,
-          "onUpdate:modelValue": val => onUpdateModelValue(val)
-        }
-      });
-      await (0, _vue.nextTick)();
-      const clearBtn = wrapper.find(".yh-date-picker__clear");
-      if (clearBtn.exists()) {
-        await clearBtn.trigger("click");
-        (0, _vitest.expect)(onUpdateModelValue).toHaveBeenCalledWith(null);
-      }
-    });
-    (0, _vitest.it)("should handle disabled dates", async () => {
-      const disabledDate = date => date.getTime() < Date.now();
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          disabledDate,
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.find(".is-disabled").exists()).toBe(true);
-    });
-    (0, _vitest.it)("should support firstDayOfWeek prop", async () => {
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          firstDayOfWeek: 1,
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      const header = wrapper.findAll(".yh-date-picker__table th");
-      (0, _vitest.expect)(header[0].text()).toBe("datepicker.weeks.mon");
-    });
-    (0, _vitest.it)("should handle reverse range selection", async () => {
-      const value = (0, _vue.ref)([null, null]);
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "daterange",
-          orderOnConfirm: true,
-          modelValue: value.value,
-          "onUpdate:modelValue": val => value.value = val,
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      const cells = wrapper.findAll(".yh-date-picker__cell.is-current-month");
-      await cells[20].trigger("click");
-      await (0, _vue.nextTick)();
-      await wrapper.setProps({
-        modelValue: value.value
-      });
-      await (0, _vue.nextTick)();
-      await cells[10].trigger("click");
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)((0, _dayjs.default)(value.value[0]).isBefore(value.value[1])).toBe(true);
-    });
-    (0, _vitest.it)("should handle reverse range selection without orderOnConfirm", async () => {
-      const value = (0, _vue.ref)([null, null]);
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "daterange",
-          orderOnConfirm: false,
-          modelValue: value.value,
-          "onUpdate:modelValue": val => {
-            value.value = val;
-            wrapper.setProps({
-              modelValue: val
-            });
-          },
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      const cells = wrapper.findAll(".yh-date-picker__cell.is-current-month");
-      await cells[20].trigger("click");
-      await (0, _vue.nextTick)();
-      await cells[10].trigger("click");
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(value.value[1]).toBeNull();
-    });
-  });
-  (0, _vitest.describe)("View Drilling", () => {
-    (0, _vitest.it)("should drill down from year to date view", async () => {
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "date",
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      await wrapper.find(".yh-date-picker__header-label").trigger("click");
-      await (0, _vue.nextTick)();
-      await wrapper.find(".yh-date-picker__header-label").trigger("click");
-      await (0, _vue.nextTick)();
-      await wrapper.find(".yh-date-picker__cell").trigger("click");
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.findComponent(_monthTable.default).exists()).toBe(true);
-      await wrapper.find(".yh-date-picker__cell").trigger("click");
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.findComponent(_dateTable.default).exists()).toBe(true);
-    });
-  });
-  (0, _vitest.describe)("Selected states in tables", () => {
-    (0, _vitest.it)("should show selected state in month/year/quarter tables", async () => {
-      const date = new Date(2024, 5, 15);
-      const monthWrapper = (0, _testUtils.mount)(_monthTable.default, {
-        props: {
-          date,
-          selectedDate: date
-        }
-      });
-      (0, _vitest.expect)(monthWrapper.find(".is-selected").exists()).toBe(true);
-      const yearWrapper = (0, _testUtils.mount)(_yearTable.default, {
-        props: {
-          date,
-          selectedDate: date
-        }
-      });
-      (0, _vitest.expect)(yearWrapper.find(".is-selected").exists()).toBe(true);
-      const quarterWrapper = (0, _testUtils.mount)(_quarterTable.default, {
-        props: {
-          date,
-          selectedDate: date
-        }
-      });
-      (0, _vitest.expect)(quarterWrapper.find(".is-selected").exists()).toBe(true);
-    });
-    (0, _vitest.it)("should show range states in month/year tables", async () => {
-      const from = new Date(2024, 0, 1);
-      const to = new Date(2024, 11, 31);
-      const date = new Date(2024, 5, 1);
-      const rangeState = {
-        from,
-        to,
-        hovering: null
-      };
-      const monthWrapper = (0, _testUtils.mount)(_monthTable.default, {
-        props: {
-          date,
-          rangeState
-        }
-      });
-      (0, _vitest.expect)(monthWrapper.findAll(".is-in-range").length).toBeGreaterThan(0);
-      const yearWrapper = (0, _testUtils.mount)(_yearTable.default, {
-        props: {
-          date,
-          rangeState
-        }
-      });
-      (0, _vitest.expect)(yearWrapper.find(".is-range-start").exists()).toBe(true);
-    });
-  });
-  (0, _vitest.describe)("Component Props & UI", () => {
-    (0, _vitest.it)("should handle status prop", () => {
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          status: "error"
-        }
-      });
-      (0, _vitest.expect)(wrapper.classes()).toContain("yh-date-picker--error");
-    });
-    (0, _vitest.it)("should respect disabled and readonly props", async () => {
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          disabled: true
-        }
-      });
-      await wrapper.trigger("click");
-      (0, _vitest.expect)(wrapper.find(".yh-date-picker__panel").exists()).toBe(false);
-      const wrapper2 = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          readonly: true
-        }
-      });
-      await wrapper2.trigger("click");
-      (0, _vitest.expect)(wrapper2.find(".yh-date-picker__panel").exists()).toBe(false);
-    });
-    (0, _vitest.it)("should render custom icons", async () => {
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          prefixIcon: "calendar",
-          clearIcon: "close",
-          modelValue: /* @__PURE__ */new Date()
-        }
-      });
-      await wrapper.trigger("mouseenter");
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.find(".yh-date-picker__icon").exists()).toBe(true);
-      (0, _vitest.expect)(wrapper.find(".yh-date-picker__clear").exists()).toBe(true);
-    });
-    (0, _vitest.it)("should handle valueFormat", async () => {
-      let emittedValue = null;
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "date",
-          valueFormat: "YYYY/MM/DD",
-          "onUpdate:modelValue": val => emittedValue = val
-        }
-      });
-      await (0, _vue.nextTick)();
-      const vm = wrapper.vm;
-      vm.handleSelect(new Date(2024, 0, 1));
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(emittedValue).toBe("2024/01/01");
-    });
-  });
-  (0, _vitest.describe)("Outside interactions", () => {
-    (0, _vitest.it)("should close on outside click", async () => {
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          teleported: false
-        }
-      });
-      const vm = wrapper.vm;
-      vm.visible = true;
-      await (0, _vue.nextTick)();
-      const event = new MouseEvent("click", {
-        bubbles: true
-      });
-      document.dispatchEvent(event);
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(vm.visible).toBe(false);
-    });
-    (0, _vitest.it)("should handle position update when opened", async () => {
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          teleported: true
-        }
-      });
-      const vm = wrapper.vm;
-      vm.visible = true;
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(vm.dropdownStyle).toBeDefined();
-    });
-  });
-  (0, _vitest.describe)("Pre-selected states and input display", () => {
-    (0, _vitest.it)("should show pre-selected week", async () => {
-      const date = new Date(2024, 5, 15);
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "week",
-          modelValue: date,
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.find(".is-selected").exists()).toBe(true);
-    });
-    (0, _vitest.it)("should show pre-selected range in date/month/quarter tables", async () => {
-      const from = new Date(2024, 0, 1);
-      const to = new Date(2024, 6, 1);
-      const modelValue = [from, to];
-      const dateWrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "daterange",
-          modelValue,
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(dateWrapper.findAll(".is-in-range").length).toBeGreaterThan(0);
-      const monthWrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "monthrange",
-          modelValue,
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(monthWrapper.findAll(".is-in-range").length).toBeGreaterThan(0);
-      const quarterWrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "quarterrange",
-          modelValue,
-          panelOnly: true
-        }
-      });
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(quarterWrapper.findAll(".is-in-range").length).toBeGreaterThan(0);
-    });
-    (0, _vitest.it)("should display formatted range in inputs", async () => {
-      const from = new Date(2024, 0, 1);
-      const to = new Date(2024, 0, 2);
-      const wrapper = (0, _testUtils.mount)(_datePicker.default, {
-        props: {
-          type: "daterange",
-          modelValue: [from, to]
-        }
-      });
-      await (0, _vue.nextTick)();
-      const inputs = wrapper.findAll(".yh-date-picker__range-input");
-      (0, _vitest.expect)(inputs[0].element.getAttribute("value")).toBe("2024-01-01");
-      (0, _vitest.expect)(inputs[1].element.getAttribute("value")).toBe("2024-01-02");
-    });
-  });
-});