@yh-ui/components 0.1.10 → 0.1.12

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

@@ -7,16 +7,33 @@ var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const YhInput = {
   name: "YhInput",
-  props: ["modelValue", "placeholder"],
-  template: `<input class="yh-input" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :placeholder="placeholder" />`
+  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"],
+  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)("basic rendering based on schema", async () => {
+  (0, _vitest.it)("\u57FA\u7840\u6E32\u67D3 - \u6309 schema \u6E32\u67D3\u8868\u5355\u9879", async () => {
     const model = {
       username: "ant",
       role: ""
@@ -35,16 +52,14 @@ const YhSelect = {
         schema
       },
       global: {
-        components: {
-          "yh-input": YhInput
-        }
+        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)("handles value updates and v-model synchronization", async () => {
+  (0, _vitest.it)("\u53CC\u5411\u7ED1\u5B9A - v-model \u540C\u6B65\u66F4\u65B0", async () => {
     const model = {
       username: ""
     };
@@ -58,9 +73,7 @@ const YhSelect = {
         schema
       },
       global: {
-        components: {
-          "yh-input": YhInput
-        }
+        components: globalComponents
       }
     });
     const input = wrapper.find("input");
@@ -69,7 +82,28 @@ const YhSelect = {
     const lastEmitted = wrapper.emitted("update:modelValue").slice(-1)[0][0];
     (0, _vitest.expect)(lastEmitted.username).toBe("new_user");
   });
-  (0, _vitest.it)("supports dynamic visibility with hidden prop", async () => {
+  (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"
@@ -88,9 +122,7 @@ const YhSelect = {
         schema
       },
       global: {
-        components: {
-          "yh-input": YhInput
-        }
+        components: globalComponents
       }
     });
     (0, _vitest.expect)(wrapper.text()).not.toContain("Extra Label");
@@ -103,7 +135,45 @@ const YhSelect = {
     await (0, _vue.nextTick)();
     (0, _vitest.expect)(wrapper.text()).toContain("Extra Label");
   });
-  (0, _vitest.it)("supports grouped schema with collapsible sections", async () => {
+  (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: [{
@@ -118,13 +188,16 @@ const YhSelect = {
           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)("supports asyncOptions for select components", async () => {
+  (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"
@@ -142,18 +215,17 @@ const YhSelect = {
         schema
       },
       global: {
-        components: {
-          "yh-select": YhSelect
-        }
+        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)("supports render function", () => {
+  (0, _vitest.it)("render \u51FD\u6570 - \u81EA\u5B9A\u4E49\u6E32\u67D3", () => {
     const schema = [{
       field: "custom",
       render: m => (0, _vue.h)("div", {
@@ -166,18 +238,399 @@ const YhSelect = {
           custom: "hello"
         },
         schema
+      },
+      global: {
+        components: globalComponents
       }
     });
     (0, _vitest.expect)(wrapper.find(".custom-render").text()).toBe("Val: hello");
   });
-  (0, _vitest.it)("expose form methods", () => {
+  (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
       }
     });
-    (0, _vitest.expect)(typeof wrapper.vm.validate).toBe("function");
-    (0, _vitest.expect)(typeof wrapper.vm.resetFields).toBe("function");
+    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");
+    });
   });
 });