r-util-js/packages/uview-plus/test/calendar.test.ts

import { describe, test, expect } from "vitest";
import { effectScope } from "vue";
import { useCalendar } from "../src/calendar";

describe("useCalendar", () => {
  test("默认值", () => {
    const scope = effectScope();
    scope.run(() => {
      const { value, show, text } = useCalendar({});
      expect(value.value).toBeNull();
      expect(show.value).toBe(false);
      expect(text.value).toBe("请选择");
    });
    scope.stop();
  });

  test("单选模式：text 显示 value，无值时显示 placeholder", () => {
    const scope = effectScope();
    scope.run(() => {
      const { value, text } = useCalendar({
        mode: "single",
        placeholder: "请选日期",
      });
      expect(text.value).toBe("请选日期");
      value.value = "2024-01-15";
      expect(text.value).toBe("2024-01-15");
    });
    scope.stop();
  });

  test("多选模式：text 用 separator 拼接", () => {
    const scope = effectScope();
    scope.run(() => {
      const { value, text } = useCalendar({ mode: "multiple", separator: "-" });
      expect(text.value).toBe("请选择");
      value.value = ["2024-01-15", "2024-01-16"];
      expect(text.value).toBe("2024-01-15-2024-01-16");
    });
    scope.stop();
  });

  test("showCalendar / hideCalendar", () => {
    const scope = effectScope();
    scope.run(() => {
      const { show, showCalendar, hideCalendar } = useCalendar({});
      expect(show.value).toBe(false);
      showCalendar();
      expect(show.value).toBe(true);
      hideCalendar();
      expect(show.value).toBe(false);
    });
    scope.stop();
  });

  test("handleConfirm 单选模式：设置 value 并关闭", () => {
    const scope = effectScope();
    scope.run(() => {
      const { value, show, handleConfirm } = useCalendar({ mode: "single" });
      show.value = true;
      handleConfirm(["2024-06-01", "2024-06-02"]);
      expect(value.value).toBe("2024-06-01");
      expect(show.value).toBe(false);
    });
    scope.stop();
  });

  test("handleConfirm 多选模式：设置 value 数组并关闭", () => {
    const scope = effectScope();
    scope.run(() => {
      const { value, show, handleConfirm } = useCalendar({ mode: "multiple" });
      show.value = true;
      handleConfirm(["2024-06-01", "2024-06-02"]);
      expect(value.value).toEqual(["2024-06-01", "2024-06-02"]);
      expect(show.value).toBe(false);
    });
    scope.stop();
  });

  test("handleClose 关闭弹窗", () => {
    const scope = effectScope();
    scope.run(() => {
      const { show, handleClose } = useCalendar({});
      show.value = true;
      handleClose();
      expect(show.value).toBe(false);
    });
    scope.stop();
  });

  test("接受初始 value", () => {
    const scope = effectScope();
    scope.run(() => {
      const { text } = useCalendar({ value: "2024-03-10", mode: "single" });
      expect(text.value).toBe("2024-03-10");
    });
    scope.stop();
  });
});