@webiny/app-admin 6.5.0-beta.3 → 6.5.0-beta.5

package/features/formModel/FormModel.test.js

@@ -1834,7 +1834,7 @@ describe("FormModel", ()=>{
             return createForm({
                 fields: (fields)=>({
                         content: fields.object().label("Content").template("hero", (t)=>{
-                            t.label("Hero Banner").fields((f)=>({
+                            t.label("Hero Banner").description("Large heading with an image").fields((f)=>({
                                     heading: f.text().label("Heading").required("Required"),
                                     image: f.text().label("Image")
                                 }));
@@ -1861,7 +1861,8 @@ describe("FormModel", ()=>{
                 expect(vm.availableTemplates).toEqual([
                     {
                         id: "hero",
-                        label: "Hero Banner"
+                        label: "Hero Banner",
+                        description: "Large heading with an image"
                     },
                     {
                         id: "text",
@@ -4349,6 +4350,345 @@ describe("FormModel", ()=>{
             expect(form.field("wrapper.editable").disabled).toBe(false);
         });
     });
+    describe("$. static references in rules inside list items", ()=>{
+        const hideWhen = (target, operator, value)=>[
+                {
+                    type: "condition",
+                    target,
+                    operator,
+                    value,
+                    action: "hide"
+                }
+            ];
+        const itemChild = (form, listPath, index, name)=>{
+            const list = form.field(listPath);
+            const child = list.items[index]?.children.get(name);
+            if (!child) throw new Error(`No child "${name}" on item ${index} of "${listPath}".`);
+            return child;
+        };
+        it("resolves $. against the owning item of an object list", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        links: fields.object().list().renderer("passthrough").fields((f)=>({
+                                style: f.text(),
+                                url: f.text().rules(hideWhen("$.style", "==", "initiative")),
+                                customUrls: f.text().rules(hideWhen("$.style", "!=", "initiative"))
+                            }))
+                    })
+            });
+            form.setData({
+                links: [
+                    {
+                        style: "initiative"
+                    },
+                    {
+                        style: "standard"
+                    }
+                ]
+            });
+            expect(itemChild(form, "links", 0, "url").visible).toBe(false);
+            expect(itemChild(form, "links", 0, "customUrls").visible).toBe(true);
+            expect(itemChild(form, "links", 1, "url").visible).toBe(true);
+            expect(itemChild(form, "links", 1, "customUrls").visible).toBe(false);
+            itemChild(form, "links", 1, "style").setValue("initiative");
+            expect(itemChild(form, "links", 1, "url").visible).toBe(false);
+            expect(itemChild(form, "links", 1, "customUrls").visible).toBe(true);
+        });
+        it("resolves $. for items added with addItem()", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        links: fields.object().list().renderer("passthrough").fields((f)=>({
+                                locked: f.boolean(),
+                                label: f.text().rules([
+                                    {
+                                        type: "condition",
+                                        target: "$.locked",
+                                        operator: "==",
+                                        value: true,
+                                        action: "disable"
+                                    }
+                                ])
+                            }))
+                    })
+            });
+            form.field("links").addItem();
+            expect(itemChild(form, "links", 0, "label").disabled).toBe(false);
+            itemChild(form, "links", 0, "locked").setValue(true);
+            expect(itemChild(form, "links", 0, "label").disabled).toBe(true);
+        });
+        it("keeps resolving against the owning item after reorder and removal", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        links: fields.object().list().renderer("passthrough").fields((f)=>({
+                                style: f.text(),
+                                url: f.text().rules(hideWhen("$.style", "==", "initiative"))
+                            }))
+                    })
+            });
+            form.setData({
+                links: [
+                    {
+                        style: "initiative"
+                    },
+                    {
+                        style: "standard"
+                    }
+                ]
+            });
+            const list = form.field("links");
+            const firstUrl = itemChild(form, "links", 0, "url");
+            const secondUrl = itemChild(form, "links", 1, "url");
+            list.moveItem(0, 1);
+            expect(firstUrl.visible).toBe(false);
+            expect(secondUrl.visible).toBe(true);
+            list.removeItem(0);
+            expect(firstUrl.visible).toBe(false);
+        });
+        it("field.parent() resolves siblings of the owning item in callbacks", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        links: fields.object().list().renderer("passthrough").fields((f)=>({
+                                style: f.text(),
+                                url: f.text().hiddenWhen(({ field })=>"initiative" === field.parent().field("style").getValue())
+                            }))
+                    })
+            });
+            form.setData({
+                links: [
+                    {
+                        style: "initiative"
+                    },
+                    {
+                        style: "standard"
+                    }
+                ]
+            });
+            expect(itemChild(form, "links", 0, "url").visible).toBe(false);
+            expect(itemChild(form, "links", 1, "url").visible).toBe(true);
+        });
+        describe("dynamic zone shaped templated list", ()=>{
+            const createBlocksForm = ()=>createForm({
+                    fields: (fields)=>({
+                            blocks: fields.object().list().renderer("passthrough").template("heroBlock", (t)=>{
+                                t.label("Hero").fields((f)=>({
+                                        _id: f.text().hidden(),
+                                        ctaStyle: f.text(),
+                                        ctaUrl: f.text().rules(hideWhen("$.ctaStyle", "==", "initiative")),
+                                        customUrls: f.text().rules(hideWhen("$.ctaStyle", "!=", "initiative"))
+                                    }));
+                            }).template("richTextBlock", (t)=>{
+                                t.label("Rich Text").fields((f)=>({
+                                        _id: f.text().hidden(),
+                                        headerStyle: f.text().defaultValue("manual"),
+                                        header: f.text().rules(hideWhen("$.headerStyle", "!=", "manual")),
+                                        headingGroupRef: f.text().rules(hideWhen("$.headerStyle", "!=", "reference"))
+                                    }));
+                            }).template("classesBlock", (t)=>{
+                                t.label("Classes").fields((f)=>({
+                                        _id: f.text().hidden(),
+                                        classes: f.object().list().renderer("passthrough").fields((c)=>({
+                                                customCTA: c.boolean(),
+                                                customCTALabel: c.text().rules(hideWhen("$.customCTA", "!=", true))
+                                            }))
+                                    }));
+                            })
+                        })
+                });
+            it("resolves $. against the owning template item", ()=>{
+                const form = createBlocksForm();
+                form.setData({
+                    blocks: [
+                        {
+                            _templateId: "heroBlock",
+                            _id: "hero1",
+                            ctaStyle: "initiative"
+                        },
+                        {
+                            _templateId: "heroBlock",
+                            _id: "hero2",
+                            ctaStyle: "standard"
+                        }
+                    ]
+                });
+                expect(itemChild(form, "blocks", 0, "ctaUrl").visible).toBe(false);
+                expect(itemChild(form, "blocks", 0, "customUrls").visible).toBe(true);
+                expect(itemChild(form, "blocks", 1, "ctaUrl").visible).toBe(true);
+                expect(itemChild(form, "blocks", 1, "customUrls").visible).toBe(false);
+            });
+            it("re-evaluates when the referenced sibling changes", ()=>{
+                const form = createBlocksForm();
+                form.setData({
+                    blocks: [
+                        {
+                            _templateId: "richTextBlock",
+                            _id: "rt1",
+                            headerStyle: "manual"
+                        }
+                    ]
+                });
+                expect(itemChild(form, "blocks", 0, "header").visible).toBe(true);
+                expect(itemChild(form, "blocks", 0, "headingGroupRef").visible).toBe(false);
+                itemChild(form, "blocks", 0, "headerStyle").setValue("reference");
+                expect(itemChild(form, "blocks", 0, "header").visible).toBe(false);
+                expect(itemChild(form, "blocks", 0, "headingGroupRef").visible).toBe(true);
+            });
+            it("resolves $. inside an object list nested in a template item", ()=>{
+                const form = createBlocksForm();
+                form.setData({
+                    blocks: [
+                        {
+                            _templateId: "classesBlock",
+                            _id: "classes1",
+                            classes: [
+                                {
+                                    customCTA: true
+                                },
+                                {
+                                    customCTA: false
+                                }
+                            ]
+                        }
+                    ]
+                });
+                const classes = itemChild(form, "blocks", 0, "classes");
+                const classItem = (index, name)=>classes.items[index].children.get(name);
+                expect(classItem(0, "customCTALabel").visible).toBe(true);
+                expect(classItem(1, "customCTALabel").visible).toBe(false);
+                classItem(1, "customCTA").setValue(true);
+                expect(classItem(1, "customCTALabel").visible).toBe(true);
+            });
+        });
+    });
+    describe("setErrors", ()=>{
+        const createProductForm = ()=>createForm({
+                fields: (fields)=>({
+                        sku: fields.text().label("SKU"),
+                        variants: fields.object().list().label("Variants").fields((f)=>({
+                                code: f.text().label("Code")
+                            }))
+                    })
+            });
+        it("assigns an error to the field at its path and lists it in form errors", ()=>{
+            const form = createProductForm();
+            form.setErrors([
+                {
+                    path: "sku",
+                    message: "Value must be unique."
+                }
+            ]);
+            expect(form.field("sku").vm.validation).toMatchObject({
+                isValid: false,
+                message: "Value must be unique."
+            });
+            expect(form.vm.hasErrors).toBe(true);
+            expect(form.errors).toEqual([
+                {
+                    path: "sku",
+                    label: "SKU",
+                    breadcrumb: [
+                        "SKU"
+                    ],
+                    message: "Value must be unique."
+                }
+            ]);
+        });
+        it("resolves paths into list items", ()=>{
+            const form = createProductForm();
+            form.setData({
+                variants: [
+                    {
+                        code: "a"
+                    },
+                    {
+                        code: "b"
+                    }
+                ]
+            });
+            form.setErrors([
+                {
+                    path: "variants.1.code",
+                    message: "Invalid code."
+                }
+            ]);
+            const list = form.field("variants");
+            expect(list.items[1].children.get("code").vm.validation.isValid).toBe(false);
+            expect(list.items[0].children.get("code").vm.validation.isValid).not.toBe(false);
+            expect(form.errors).toEqual([
+                expect.objectContaining({
+                    path: "variants.1.code",
+                    breadcrumb: [
+                        "Variants",
+                        "Code"
+                    ]
+                })
+            ]);
+        });
+        it("keeps errors without a matching field as form-level errors", ()=>{
+            const form = createProductForm();
+            form.setErrors([
+                {
+                    path: "",
+                    message: "Could not update entry."
+                },
+                {
+                    path: "unknown.field",
+                    message: "Something is wrong."
+                }
+            ]);
+            expect(form.errors).toEqual([
+                {
+                    path: "",
+                    message: "Could not update entry."
+                },
+                {
+                    path: "unknown.field",
+                    message: "Something is wrong."
+                }
+            ]);
+            expect(form.isValid).toBe(false);
+        });
+        it("bumps submitCount so FormErrors scrolls into view", ()=>{
+            const form = createProductForm();
+            const before = form.submitCount;
+            form.setErrors([
+                {
+                    path: "sku",
+                    message: "Value must be unique."
+                }
+            ]);
+            expect(form.submitCount).toBe(before + 1);
+        });
+        it("is cleared by the next validate()", async ()=>{
+            const form = createProductForm();
+            form.setErrors([
+                {
+                    path: "sku",
+                    message: "Value must be unique."
+                },
+                {
+                    path: "",
+                    message: "Could not update entry."
+                }
+            ]);
+            await form.validate();
+            expect(form.errors).toEqual([]);
+            expect(form.field("sku").vm.validation.isValid).not.toBe(false);
+        });
+        it("is cleared by setData()", ()=>{
+            const form = createProductForm();
+            form.setErrors([
+                {
+                    path: "",
+                    message: "Could not update entry."
+                }
+            ]);
+            form.setData({
+                sku: "ABC"
+            });
+            expect(form.errors).toEqual([]);
+            expect(form.vm.hasErrors).toBe(false);
+        });
+    });
 });
 
 //# sourceMappingURL=FormModel.test.js.map