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