r-util-js/packages/uview-plus/test/picker-single.test.ts

import { describe, test, expect } from "vitest";
import { effectScope, nextTick } from "vue";
import { usePickerSingle } from "../src/picker-single";

const list = [
  { text: "选项A", value: "a" },
  { text: "选项B", value: "b" },
  { text: "选项C", value: "c" },
];

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

  test("columns 是 [list]", () => {
    const scope = effectScope();
    scope.run(() => {
      const { columns } = usePickerSingle({ list });
      expect(columns.value).toEqual([list]);
    });
    scope.stop();
  });

  test("初始 value 匹配 list 时设置正确 indexes 和 text", async () => {
    const scope = effectScope();
    await scope.run(async () => {
      const { text, indexes } = usePickerSingle({ value: "b", list });
      await nextTick();
      expect(indexes.value).toEqual([1]);
      expect(text.value).toBe("选项B");
    });
    scope.stop();
  });

  test("初始 indexes 匹配 list 时设置正确 value 和 text", async () => {
    const scope = effectScope();
    await scope.run(async () => {
      const { value, text } = usePickerSingle({ indexes: [2], list });
      await nextTick();
      expect(value.value).toBe("c");
      expect(text.value).toBe("选项C");
    });
    scope.stop();
  });

  test("valueToText：根据 value 查找 text", () => {
    const scope = effectScope();
    scope.run(() => {
      const { valueToText } = usePickerSingle({ list });
      expect(valueToText("a")).toBe("选项A");
      expect(valueToText("b")).toBe("选项B");
      expect(valueToText("unknown")).toBe("请选择");
    });
    scope.stop();
  });

  test("showPicker / hidePicker", () => {
    const scope = effectScope();
    scope.run(() => {
      const { show, showPicker, hidePicker } = usePickerSingle({});
      expect(show.value).toBe(false);
      showPicker();
      expect(show.value).toBe(true);
      hidePicker();
      expect(show.value).toBe(false);
    });
    scope.stop();
  });

  test("handleConfirm：更新 indexes 并关闭", async () => {
    const scope = effectScope();
    await scope.run(async () => {
      const { value, show, indexes, handleConfirm } = usePickerSingle({ list });
      show.value = true;
      handleConfirm({ indexs: [1], value: [list[1]], values: [list] } as any);
      expect(indexes.value).toEqual([1]);
      expect(show.value).toBe(false);
      await nextTick();
      expect(value.value).toBe("b");
    });
    scope.stop();
  });

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

  test("modelValue：get/set 代理 value", async () => {
    const scope = effectScope();
    await scope.run(async () => {
      const { value, modelValue } = usePickerSingle({ list });
      expect(modelValue.value).toEqual([null]);
      modelValue.value = "c";
      expect(value.value).toBe("c");
    });
    scope.stop();
  });

  test("自定义 textName 和 valueName", () => {
    const customList = [
      { label: "甲", id: 1 },
      { label: "乙", id: 2 },
    ];
    const scope = effectScope();
    scope.run(() => {
      const { valueToText } = usePickerSingle({
        list: customList as any,
        textName: "label",
        valueName: "id",
      });
      expect(valueToText(1)).toBe("甲");
      expect(valueToText(2)).toBe("乙");
    });
    scope.stop();
  });
});