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

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

const columns = [
  [
    { text: "省A", value: "pa" },
    { text: "省B", value: "pb" },
  ],
  [
    { text: "市A", value: "ca" },
    { text: "市B", value: "cb" },
  ],
];

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

  test("初始 indexes 同步更新 value", async () => {
    const scope = effectScope();
    await scope.run(async () => {
      const { value } = usePicker({ indexes: [0, 1], columns });
      await nextTick();
      expect(value.value).toEqual(["pa", "cb"]);
    });
    scope.stop();
  });

  test("初始 value 同步更新 indexes", async () => {
    const scope = effectScope();
    await scope.run(async () => {
      const { indexes } = usePicker({ value: ["pb", "ca"], columns });
      await nextTick();
      expect(indexes.value).toEqual([1, 0]);
    });
    scope.stop();
  });

  test("text 由 indexes 和 columns 计算得出", async () => {
    const scope = effectScope();
    await scope.run(async () => {
      const { text } = usePicker({ indexes: [0, 1], columns, separator: "/" });
      await nextTick();
      expect(text.value).toBe("省A/市B");
    });
    scope.stop();
  });

  test("indexes 含 null 时 text 显示 placeholder", async () => {
    const scope = effectScope();
    await scope.run(async () => {
      const { text } = usePicker({
        indexes: [null, 1],
        columns,
        placeholder: "请选择地区",
      });
      await nextTick();
      expect(text.value).toBe("请选择地区");
    });
    scope.stop();
  });

  test("handleConfirm：更新 indexes", async () => {
    const scope = effectScope();
    await scope.run(async () => {
      const { indexes, value, handleConfirm } = usePicker({ columns });
      handleConfirm({
        indexs: [1, 0],
        value: ["pb", "ca"],
        values: columns,
      } as any);
      expect(indexes.value).toEqual([1, 0]);
      await nextTick();
      expect(value.value).toEqual(["pb", "ca"]);
    });
    scope.stop();
  });

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

  test("columnValueToText：根据列索引和值查找 text", () => {
    const scope = effectScope();
    scope.run(() => {
      const { columnValueToText } = usePicker({ columns });
      expect(columnValueToText("pa", 0)).toBe("省A");
      expect(columnValueToText("cb", 1)).toBe("市B");
      expect(columnValueToText("xx", 0)).toBeUndefined();
    });
    scope.stop();
  });

  test("valueToText：返回各列 text 数组", () => {
    const scope = effectScope();
    scope.run(() => {
      const { valueToText } = usePicker({ columns });
      expect(valueToText(["pa", "cb"])).toEqual(["省A", "市B"]);
    });
    scope.stop();
  });

  test("自定义 textName 和 valueName", async () => {
    const customColumns = [
      [
        { label: "甲", id: 1 },
        { label: "乙", id: 2 },
      ],
    ];
    const scope = effectScope();
    await scope.run(async () => {
      const { text } = usePicker({
        columns: customColumns as any,
        indexes: [0],
        textName: "label",
        valueName: "id",
      });
      await nextTick();
      expect(text.value).toBe("甲");
    });
    scope.stop();
  });
});