@yh-ui/components 0.1.21 → 0.1.23

package/dist/form/__tests__/form-schema.test.cjs

@@ -1,636 +0,0 @@
-"use strict";
-
-var _testUtils = require("@vue/test-utils");
-var _vitest = require("vitest");
-var _formSchema = _interopRequireDefault(require("../src/form-schema.vue"));
-var _vue = require("vue");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const YhInput = {
-  name: "YhInput",
-  props: ["modelValue", "placeholder", "disabled"],
-  template: `<input class="yh-input" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :placeholder="placeholder" :disabled="disabled" />`
-};
-const YhSelect = {
-  name: "YhSelect",
-  props: ["modelValue", "options", "loading"],
-  template: `<select class="yh-select" :value="modelValue" @change="$emit('update:modelValue', $event.target.value)"><option v-for="opt in options" :key="opt.value" :value="opt.value">{{opt.label}}</option></select>`
-};
-const YhSwitch = {
-  name: "YhSwitch",
-  props: ["modelValue"],
-  template: `<input type="checkbox" class="yh-switch" :checked="modelValue" @change="$emit('update:modelValue', $event.target.checked)" />`
-};
-const YhButton = {
-  name: "YhButton",
-  props: ["type", "text", "disabled"],
-  emits: ["click"],
-  template: `<button class="yh-button" :disabled="disabled" @click="$emit('click')"><slot /></button>`
-};
-const globalComponents = {
-  "yh-input": YhInput,
-  "yh-select": YhSelect,
-  "yh-switch": YhSwitch,
-  "yh-button": YhButton
-};
-(0, _vitest.describe)("FormSchema", () => {
-  (0, _vitest.it)("\u57FA\u7840\u6E32\u67D3 - \u6309 schema \u6E32\u67D3\u8868\u5355\u9879", async () => {
-    const model = {
-      username: "ant",
-      role: ""
-    };
-    const schema = [{
-      field: "username",
-      label: "Username",
-      component: "input",
-      props: {
-        placeholder: "Enter username"
-      }
-    }];
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: model,
-        schema
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-form").exists()).toBe(true);
-    const input = wrapper.find("input");
-    (0, _vitest.expect)(input.attributes("placeholder")).toBe("Enter username");
-  });
-  (0, _vitest.it)("\u53CC\u5411\u7ED1\u5B9A - v-model \u540C\u6B65\u66F4\u65B0", async () => {
-    const model = {
-      username: ""
-    };
-    const schema = [{
-      field: "username",
-      component: "input"
-    }];
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: model,
-        schema
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    const input = wrapper.find("input");
-    await input.setValue("new_user");
-    (0, _vitest.expect)(wrapper.emitted("update:modelValue")).toBeTruthy();
-    const lastEmitted = wrapper.emitted("update:modelValue").slice(-1)[0][0];
-    (0, _vitest.expect)(lastEmitted.username).toBe("new_user");
-  });
-  (0, _vitest.it)("change \u4E8B\u4EF6 - \u89E6\u53D1 change \u5E76\u5305\u542B field \u548C val", async () => {
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {
-          name: ""
-        },
-        schema: [{
-          field: "name",
-          component: "input"
-        }]
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    await wrapper.find("input").setValue("test");
-    const changeEvents = wrapper.emitted("change");
-    (0, _vitest.expect)(changeEvents.length).toBeGreaterThan(0);
-    (0, _vitest.expect)(changeEvents[0][0]).toBe("name");
-    (0, _vitest.expect)(changeEvents[0][1]).toBe("test");
-  });
-  (0, _vitest.it)("\u52A8\u6001\u663E\u9690 - hidden \u51FD\u6570\u652F\u6301\u8054\u52A8", async () => {
-    const schema = [{
-      field: "showExtra",
-      component: "input"
-    }, {
-      field: "extra",
-      label: "Extra Label",
-      component: "input",
-      hidden: m => !m.showExtra
-    }];
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {
-          showExtra: false,
-          extra: ""
-        },
-        schema
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    (0, _vitest.expect)(wrapper.text()).not.toContain("Extra Label");
-    await wrapper.setProps({
-      modelValue: {
-        showExtra: true,
-        extra: "visible"
-      }
-    });
-    await (0, _vue.nextTick)();
-    (0, _vitest.expect)(wrapper.text()).toContain("Extra Label");
-  });
-  (0, _vitest.it)("\u52A8\u6001\u8054\u52A8 - required \u548C rules \u652F\u6301\u4F20\u5165\u51FD\u6570\u8BA1\u7B97", async () => {
-    const schema = [{
-      field: "type",
-      component: "input"
-    }, {
-      field: "reason",
-      component: "input",
-      required: model => model.type === "other",
-      rules: model => {
-        return model.type === "other" ? [{
-          min: 5,
-          message: "\u81F3\u5C11 5 \u4E2A\u5B57\u7B26",
-          trigger: "blur"
-        }] : [];
-      }
-    }];
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {
-          type: "normal",
-          reason: ""
-        },
-        schema
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    const reasonItem = wrapper.findAll(".yh-form-item")[1];
-    (0, _vitest.expect)(reasonItem.classes()).not.toContain("is-required");
-    await wrapper.setProps({
-      modelValue: {
-        type: "other",
-        reason: ""
-      }
-    });
-    (0, _vitest.expect)(reasonItem.classes()).toContain("is-required");
-  });
-  (0, _vitest.it)("\u5206\u7EC4\u6E32\u67D3 - \u5C55\u793A group title \u5E76\u652F\u6301\u6298\u53E0", async () => {
-    const schema = [{
-      title: "Basic Info",
-      items: [{
-        field: "name",
-        component: "input"
-      }],
-      collapsible: true
-    }];
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {
-          name: ""
-        },
-        schema
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-form-schema__group-title").text()).toContain("Basic Info");
-    await wrapper.find(".yh-form-schema__group-title").trigger("click");
-    (0, _vitest.expect)(wrapper.find(".yh-form-schema__group").classes()).toContain("is-collapsed");
-  });
-  (0, _vitest.it)("\u5F02\u6B65\u9009\u9879 - asyncOptions \u81EA\u52A8\u52A0\u8F7D\u5E76\u6CE8\u5165", async () => {
-    const asyncOptions = _vitest.vi.fn().mockResolvedValue([{
-      label: "Option A",
-      value: "a"
-    }]);
-    const schema = [{
-      field: "type",
-      component: "select",
-      asyncOptions
-    }];
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {
-          type: ""
-        },
-        schema
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    await (0, _vue.nextTick)();
-    await (0, _vue.nextTick)();
-    await (0, _vue.nextTick)();
-    (0, _vitest.expect)(asyncOptions).toHaveBeenCalled();
-    const options = wrapper.findAll("option");
-    (0, _vitest.expect)(options.length).toBeGreaterThan(0);
-  });
-  (0, _vitest.it)("render \u51FD\u6570 - \u81EA\u5B9A\u4E49\u6E32\u67D3", () => {
-    const schema = [{
-      field: "custom",
-      render: m => (0, _vue.h)("div", {
-        class: "custom-render"
-      }, `Val: ${m.custom}`)
-    }];
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {
-          custom: "hello"
-        },
-        schema
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".custom-render").text()).toBe("Val: hello");
-  });
-  (0, _vitest.it)("\u66B4\u9732 API - validate/resetFields/clearValidate/getModel/setFieldValue", () => {
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {},
-        schema: []
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    const vm = wrapper.vm;
-    (0, _vitest.expect)(typeof vm.validate).toBe("function");
-    (0, _vitest.expect)(typeof vm.resetFields).toBe("function");
-    (0, _vitest.expect)(typeof vm.clearValidate).toBe("function");
-    (0, _vitest.expect)(typeof vm.getModel).toBe("function");
-    (0, _vitest.expect)(typeof vm.setFieldValue).toBe("function");
-  });
-  (0, _vitest.it)("getModel - \u8FD4\u56DE\u5F53\u524D\u5B8C\u6574 model \u5FEB\u7167", async () => {
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {
-          city: "BJ"
-        },
-        schema: [{
-          field: "city",
-          component: "input"
-        }]
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    const model = wrapper.vm.getModel();
-    (0, _vitest.expect)(model.city).toBe("BJ");
-  });
-  (0, _vitest.it)("setFieldValue - \u52A8\u6001\u66F4\u65B0\u5355\u5B57\u6BB5\u503C", async () => {
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {
-          city: ""
-        },
-        schema: [{
-          field: "city",
-          component: "input"
-        }]
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    wrapper.vm.setFieldValue("city", "SH");
-    await (0, _vue.nextTick)();
-    const emitted = wrapper.emitted("update:modelValue");
-    const last = emitted[emitted.length - 1][0];
-    (0, _vitest.expect)(last.city).toBe("SH");
-  });
-  (0, _vitest.it)("required \u7B80\u5199 - \u81EA\u52A8\u6DFB\u52A0\u5FC5\u586B\u89C4\u5219\u5E76\u89E6\u53D1\u6821\u9A8C", async () => {
-    const schema = [{
-      field: "name",
-      label: "\u59D3\u540D",
-      component: "input",
-      required: true
-    }];
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {
-          name: ""
-        },
-        schema
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    let isValid = true;
-    try {
-      isValid = await wrapper.vm.validate();
-    } catch (_) {
-      isValid = false;
-    }
-    (0, _vitest.expect)(isValid).toBe(false);
-  });
-  (0, _vitest.it)("type divider - \u6E32\u67D3\u5206\u9694\u7EBF", () => {
-    const schema = [{
-      type: "divider",
-      label: "\u57FA\u672C\u4FE1\u606F",
-      field: "_d"
-    }];
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {},
-        schema
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-form-schema__divider").exists()).toBe(true);
-    (0, _vitest.expect)(wrapper.find(".yh-form-schema__divider-label").text()).toBe("\u57FA\u672C\u4FE1\u606F");
-  });
-  (0, _vitest.it)("type text - \u53EA\u8BFB\u663E\u793A\u5B57\u6BB5\u503C", () => {
-    const schema = [{
-      type: "text",
-      label: "\u59D3\u540D",
-      field: "name"
-    }];
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {
-          name: "Alice"
-        },
-        schema
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-form-schema__text-value").text()).toBe("Alice");
-  });
-  (0, _vitest.it)("type text - emptyValue \u7A7A\u6001\u5360\u4F4D\u7B26", async () => {
-    const schema = [{
-      type: "text",
-      label: "\u7535\u8BDD",
-      field: "phone",
-      emptyValue: "\u6682\u65E0"
-    }, {
-      type: "text",
-      label: "\u5730\u5740",
-      field: "addr"
-    }];
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {
-          phone: null,
-          addr: void 0
-        },
-        schema
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    await (0, _vue.nextTick)();
-    const items = wrapper.findAll(".yh-form-schema__text-value");
-    (0, _vitest.expect)(items[0].text()).toBe("\u6682\u65E0");
-    (0, _vitest.expect)(items[1].text()).toBe("-");
-  });
-  (0, _vitest.it)("defaultValue - \u672A\u8BBE\u7F6E\u5B57\u6BB5\u65F6\u586B\u5145\u9ED8\u8BA4\u503C", async () => {
-    const schema = [{
-      field: "city",
-      component: "input",
-      defaultValue: "Beijing"
-    }];
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {},
-        schema
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    await (0, _vue.nextTick)();
-    const emitted = wrapper.emitted("update:modelValue");
-    (0, _vitest.expect)(emitted).toBeTruthy();
-    const last = emitted[emitted.length - 1][0];
-    (0, _vitest.expect)(last.city).toBe("Beijing");
-  });
-  (0, _vitest.it)("disabled \u51FD\u6570 - \u6839\u636E model \u52A8\u6001\u7981\u7528\u5B57\u6BB5", async () => {
-    const schema = [{
-      field: "toggle",
-      component: "switch"
-    }, {
-      field: "target",
-      component: "input",
-      disabled: m => !m.toggle
-    }];
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {
-          toggle: false,
-          target: ""
-        },
-        schema
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    const input = wrapper.find('input[type="text"], input:not([type="checkbox"])').element;
-    (0, _vitest.expect)(input.disabled).toBe(true);
-  });
-  (0, _vitest.it)("\u5916\u90E8 modelValue \u66F4\u65B0 - localModel \u540C\u6B65\u54CD\u5E94", async () => {
-    const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-      props: {
-        modelValue: {
-          name: "old"
-        },
-        schema: [{
-          field: "name",
-          component: "input"
-        }]
-      },
-      global: {
-        components: globalComponents
-      }
-    });
-    await wrapper.setProps({
-      modelValue: {
-        name: "new"
-      }
-    });
-    await (0, _vue.nextTick)();
-    const input = wrapper.find("input");
-    (0, _vitest.expect)(input.element.value).toBe("new");
-  });
-  (0, _vitest.describe)("type list - \u52A8\u6001\u589E\u51CF\u5217\u8868", () => {
-    const listSchema = [{
-      field: "name",
-      label: "\u59D3\u540D",
-      component: "input"
-    }, {
-      field: "phone",
-      label: "\u7535\u8BDD",
-      component: "input"
-    }];
-    (0, _vitest.it)("\u521D\u59CB\u6E32\u67D3 - \u6309\u5DF2\u6709\u5217\u8868\u6570\u636E\u6E32\u67D3\u884C", async () => {
-      const schema = [{
-        field: "contacts",
-        label: "\u8054\u7CFB\u4EBA",
-        type: "list",
-        listSchema,
-        listProps: {}
-      }];
-      const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-        props: {
-          modelValue: {
-            contacts: [{
-              name: "Alice",
-              phone: "111"
-            }, {
-              name: "Bob",
-              phone: "222"
-            }]
-          },
-          schema
-        },
-        global: {
-          components: globalComponents
-        }
-      });
-      await (0, _vue.nextTick)();
-      (0, _vitest.expect)(wrapper.findAll(".yh-form-schema__list-row").length).toBe(2);
-    });
-    (0, _vitest.it)("\u6DFB\u52A0\u5217\u8868\u9879 - \u70B9\u51FB\u6DFB\u52A0\u6309\u94AE\u589E\u52A0\u4E00\u884C", async () => {
-      const schema = [{
-        field: "contacts",
-        label: "\u8054\u7CFB\u4EBA",
-        type: "list",
-        listSchema,
-        listProps: {}
-      }];
-      const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-        props: {
-          modelValue: {
-            contacts: []
-          },
-          schema
-        },
-        global: {
-          components: globalComponents
-        }
-      });
-      await wrapper.find(".yh-form-schema__list-add").trigger("click");
-      await (0, _vue.nextTick)();
-      const emitted = wrapper.emitted("update:modelValue");
-      const last = emitted[emitted.length - 1][0];
-      (0, _vitest.expect)(last.contacts.length).toBe(1);
-    });
-    (0, _vitest.it)("\u5220\u9664\u5217\u8868\u9879 - \u70B9\u51FB\u5220\u9664\u6309\u94AE\u79FB\u9664\u5BF9\u5E94\u884C", async () => {
-      const schema = [{
-        field: "contacts",
-        label: "\u8054\u7CFB\u4EBA",
-        type: "list",
-        listSchema,
-        listProps: {}
-      }];
-      const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-        props: {
-          modelValue: {
-            contacts: [{
-              name: "Alice",
-              phone: "111"
-            }]
-          },
-          schema
-        },
-        global: {
-          components: globalComponents
-        }
-      });
-      await (0, _vue.nextTick)();
-      await wrapper.find(".yh-form-schema__list-delete").trigger("click");
-      await (0, _vue.nextTick)();
-      const emitted = wrapper.emitted("update:modelValue");
-      const last = emitted[emitted.length - 1][0];
-      (0, _vitest.expect)(last.contacts.length).toBe(0);
-    });
-    (0, _vitest.it)("max \u9650\u5236 - \u8D85\u51FA\u6700\u5927\u6570\u91CF\u65F6\u7981\u7528\u6DFB\u52A0\u6309\u94AE", async () => {
-      const schema = [{
-        field: "contacts",
-        label: "\u8054\u7CFB\u4EBA",
-        type: "list",
-        listSchema,
-        listProps: {
-          max: 1
-        }
-      }];
-      const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-        props: {
-          modelValue: {
-            contacts: [{
-              name: "Alice",
-              phone: "111"
-            }]
-          },
-          schema
-        },
-        global: {
-          components: globalComponents
-        }
-      });
-      await (0, _vue.nextTick)();
-      const addBtn = wrapper.find(".yh-form-schema__list-add");
-      (0, _vitest.expect)(addBtn.attributes("disabled")).toBeDefined();
-    });
-    (0, _vitest.it)("min \u9650\u5236 - \u672A\u8FBE\u5230\u6700\u5C0F\u6570\u91CF\u65F6\u7981\u7528\u5220\u9664\u6309\u94AE", async () => {
-      const schema = [{
-        field: "contacts",
-        label: "\u8054\u7CFB\u4EBA",
-        type: "list",
-        listSchema,
-        listProps: {
-          min: 1
-        }
-      }];
-      const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-        props: {
-          modelValue: {
-            contacts: [{
-              name: "Alice",
-              phone: "111"
-            }]
-          },
-          schema
-        },
-        global: {
-          components: globalComponents
-        }
-      });
-      await (0, _vue.nextTick)();
-      const delBtn = wrapper.find(".yh-form-schema__list-delete");
-      (0, _vitest.expect)(delBtn.attributes("disabled")).toBeDefined();
-    });
-    (0, _vitest.it)("addButtonText - \u81EA\u5B9A\u4E49\u6DFB\u52A0\u6309\u94AE\u6587\u6848", async () => {
-      const schema = [{
-        field: "contacts",
-        label: "\u8054\u7CFB\u4EBA",
-        type: "list",
-        listSchema,
-        listProps: {
-          addButtonText: "\u65B0\u589E\u8054\u7CFB\u4EBA"
-        }
-      }];
-      const wrapper = (0, _testUtils.mount)(_formSchema.default, {
-        props: {
-          modelValue: {
-            contacts: []
-          },
-          schema
-        },
-        global: {
-          components: globalComponents
-        }
-      });
-      (0, _vitest.expect)(wrapper.find(".yh-form-schema__list-add").text()).toContain("\u65B0\u589E\u8054\u7CFB\u4EBA");
-    });
-  });
-});