135 lines
3.8 KiB
TypeScript
135 lines
3.8 KiB
TypeScript
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();
|
||
});
|
||
});
|