@webiny/app-website-builder 6.3.0 → 6.4.0-beta.1

package/presentation/pages/CreatePage/CreatePage.test.js

@@ -1,317 +1,307 @@
-import { describe, it, expect } from "vitest";
+import { describe, expect, it } from "vitest";
 import { Container } from "@webiny/di";
 import { FormModelFeature } from "@webiny/app-admin/features/formModel/feature.js";
 import { FormModelFactory } from "@webiny/app-admin/features/formModel/abstractions.js";
 import { AddLanguageModifier } from "./AddLanguageModifier.js";
 import { PagePath } from "../../../shared/PagePath.js";
 function createLanguageMocks(languages) {
-  const repository = {
-    execute: async () => languages,
-    getLanguages: () => languages
-  };
-  const useCase = {
-    execute: async () => languages
-  };
-  return {
-    useCase,
-    repository
-  };
+    const repository = {
+        execute: async ()=>languages,
+        getLanguages: ()=>languages
+    };
+    const useCase = {
+        execute: async ()=>languages
+    };
+    return {
+        useCase,
+        repository
+    };
 }
 function createBaseForm(config) {
-  const container = new Container();
-  FormModelFeature.register(container);
-  const factory = container.resolve(FormModelFactory);
-  return factory.create({
-    fields: fields => ({
-      title: fields.text().label("Title").required("Title is required").onBlur((value, f) => {
-        const currentPath = f.field("path").getValue();
-        if (currentPath) {
-          return;
-        }
-        f.field("path").setValue(PagePath.fromTitle(String(value)).toString());
-      }),
-      path: fields.text().label("Path").required("Path is required").beforeChange(value => {
-        return PagePath.create(String(value)).slugify().toString();
-      }),
-      pageType: fields.text().hidden().defaultValue("staticPage")
-    }),
-    layout: layout => [layout.row("title"), layout.row("path")],
-    ...config
-  });
+    const container = new Container();
+    FormModelFeature.register(container);
+    const factory = container.resolve(FormModelFactory);
+    return factory.create({
+        fields: (fields)=>({
+                title: fields.text().label("Title").required("Title is required").onBlur((value, f)=>{
+                    const currentPath = f.field("path").getValue();
+                    if (currentPath) return;
+                    f.field("path").setValue(PagePath.fromTitle(String(value)).toString());
+                }),
+                path: fields.text().label("Path").required("Path is required").beforeChange((value)=>PagePath.create(String(value)).slugify().toString()),
+                pageType: fields.text().hidden().defaultValue("staticPage")
+            }),
+        layout: (layout)=>[
+                layout.row("title"),
+                layout.row("path")
+            ],
+        ...config
+    });
 }
-
-/**
- * Helper: set title and blur to trigger path generation.
- */
 function setTitleAndBlur(form, value) {
-  form.field("title").setValue(value);
-  form.field("title").blur();
+    form.field("title").setValue(value);
+    form.field("title").blur();
 }
-describe("CreatePage base form", () => {
-  it("should create a form with title, path, and hidden pageType", () => {
-    const form = createBaseForm();
-    expect(form.field("title")).toBeDefined();
-    expect(form.field("path")).toBeDefined();
-    expect(form.field("pageType")).toBeDefined();
-  });
-  it("should include pageType in getData but not in layout", () => {
-    const form = createBaseForm();
-    const data = form.getData();
-    expect(data.pageType).toBe("staticPage");
-    const fieldNames = form.vm.layout.filter(n => n.type === "row").flatMap(row => row.fields.map(f => f.name));
-    expect(fieldNames).not.toContain("pageType");
-  });
-  it("should auto-generate path from title on blur", () => {
-    const form = createBaseForm();
-    setTitleAndBlur(form, "Hello World");
-    expect(form.field("path").getValue()).toBe("/hello-world");
-  });
-  it("should not auto-generate path on setValue alone (before blur)", () => {
-    const form = createBaseForm();
-    form.field("title").setValue("Hello World");
-    expect(form.field("path").getValue()).toBeNull();
-  });
-  it("should not overwrite path when manually edited", () => {
-    const form = createBaseForm();
-    setTitleAndBlur(form, "Hello World");
-    form.field("path").setValue("/custom-path");
-    setTitleAndBlur(form, "New Title");
-    expect(form.field("path").getValue()).toBe("/custom-path");
-  });
-  it("should return data on valid submit", async () => {
-    const form = createBaseForm();
-    form.field("title").setValue("My Page");
-    form.field("path").setValue("/my-page");
-    const result = await form.submit();
-    expect(result).toEqual({
-      title: "My Page",
-      path: "/my-page",
-      pageType: "staticPage"
+describe("CreatePage base form", ()=>{
+    it("should create a form with title, path, and hidden pageType", ()=>{
+        const form = createBaseForm();
+        expect(form.field("title")).toBeDefined();
+        expect(form.field("path")).toBeDefined();
+        expect(form.field("pageType")).toBeDefined();
+    });
+    it("should include pageType in getData but not in layout", ()=>{
+        const form = createBaseForm();
+        const data = form.getData();
+        expect(data.pageType).toBe("staticPage");
+        const fieldNames = form.vm.layout.filter((n)=>"row" === n.type).flatMap((row)=>row.fields.map((f)=>f.name));
+        expect(fieldNames).not.toContain("pageType");
+    });
+    it("should auto-generate path from title on blur", ()=>{
+        const form = createBaseForm();
+        setTitleAndBlur(form, "Hello World");
+        expect(form.field("path").getValue()).toBe("/hello-world");
+    });
+    it("should not auto-generate path on setValue alone (before blur)", ()=>{
+        const form = createBaseForm();
+        form.field("title").setValue("Hello World");
+        expect(form.field("path").getValue()).toBeNull();
+    });
+    it("should not overwrite path when manually edited", ()=>{
+        const form = createBaseForm();
+        setTitleAndBlur(form, "Hello World");
+        form.field("path").setValue("/custom-path");
+        setTitleAndBlur(form, "New Title");
+        expect(form.field("path").getValue()).toBe("/custom-path");
+    });
+    it("should return data on valid submit", async ()=>{
+        const form = createBaseForm();
+        form.field("title").setValue("My Page");
+        form.field("path").setValue("/my-page");
+        const result = await form.submit();
+        expect(result).toEqual({
+            title: "My Page",
+            path: "/my-page",
+            pageType: "staticPage"
+        });
+    });
+    it("should return false on invalid submit", async ()=>{
+        const form = createBaseForm();
+        const result = await form.submit();
+        expect(result).toBe(false);
+        expect(form.errors.length).toBeGreaterThan(0);
     });
-  });
-  it("should return false on invalid submit", async () => {
-    const form = createBaseForm();
-    const result = await form.submit();
-    expect(result).toBe(false);
-    expect(form.errors.length).toBeGreaterThan(0);
-  });
 });
-describe("PageType + Modifier 3-layer architecture", () => {
-  /**
-   * Simulates the 3-layer build order used by CreatePagePresenter:
-   * 1. Base form (title, path, pageType)
-   * 2. Page type modify
-   * 3. Cross-cutting modifiers
-   */
-  function buildForm(pageType, modifiers = []) {
-    const form = createBaseForm();
-    pageType.modifyForm?.(form);
-    for (const modifier of modifiers) {
-      modifier.modifyForm(form);
+describe("PageType + Modifier 3-layer architecture", ()=>{
+    function buildForm(pageType, modifiers = []) {
+        const form = createBaseForm();
+        pageType.modifyForm?.(form);
+        for (const modifier of modifiers)modifier.modifyForm(form);
+        return form;
     }
-    return form;
-  }
-  const staticPageType = {
-    name: "static",
-    label: "Static Page",
-    modifyForm() {
-      // no-op
-    }
-  };
-  const productPageType = {
-    name: "product",
-    label: "Product Page",
-    modifyForm(form) {
-      form.fields(fields => ({
-        product: fields.text().label("Product").required("Product is required").options([{
-          label: "Shoes",
-          value: "shoes"
-        }, {
-          label: "Hats",
-          value: "hats"
-        }])
-      }));
-      form.field("title").setDisabled(true);
-      form.field("path").setDisabled(true);
-      form.layout(layout => [layout.row("product").before("title")]);
-    }
-  };
-  it("should leave base form unchanged for static page type", () => {
-    const form = buildForm(staticPageType);
-    const fieldNames = form.vm.layout.filter(n => n.type === "row").flatMap(row => row.fields.map(f => f.name));
-    expect(fieldNames).toEqual(["title", "path"]);
-  });
-  it("should add product field and disable title/path for product page type", () => {
-    const form = buildForm(productPageType);
-    const fieldNames = form.vm.layout.filter(n => n.type === "row").flatMap(row => row.fields.map(f => f.name));
-    expect(fieldNames).toEqual(["product", "title", "path"]);
-    expect(form.field("title").vm.disabled).toBe(true);
-    expect(form.field("path").vm.disabled).toBe(true);
-  });
-  it("should include product in getData", () => {
-    const form = buildForm(productPageType);
-    form.field("product").setValue("shoes");
-    const data = form.getData();
-    expect(data.product).toBe("shoes");
-  });
-  it("should apply cross-cutting modifier after page type", () => {
-    const langs = [{
-      id: "en",
-      code: "en",
-      name: "English",
-      isDefault: true
-    }, {
-      id: "de",
-      code: "de",
-      name: "German"
-    }];
-    const {
-      useCase,
-      repository
-    } = createLanguageMocks(langs);
-    const languageModifier = new AddLanguageModifier(useCase, repository);
-    const form = buildForm(productPageType, [languageModifier]);
-    const fieldNames = form.vm.layout.filter(n => n.type === "row").flatMap(row => row.fields.map(f => f.name));
-
-    // language before title (from modifier), product before title (from page type)
-    expect(fieldNames).toEqual(["product", "language", "title", "path"]);
-  });
-  it("should apply cross-cutting modifier to static page type too", () => {
-    const langs = [{
-      id: "en",
-      code: "en",
-      name: "English",
-      isDefault: true
-    }, {
-      id: "de",
-      code: "de",
-      name: "German"
-    }];
-    const {
-      useCase,
-      repository
-    } = createLanguageMocks(langs);
-    const languageModifier = new AddLanguageModifier(useCase, repository);
-    const form = buildForm(staticPageType, [languageModifier]);
-    const fieldNames = form.vm.layout.filter(n => n.type === "row").flatMap(row => row.fields.map(f => f.name));
-    expect(fieldNames).toEqual(["language", "title", "path"]);
-  });
+    const staticPageType = {
+        name: "static",
+        label: "Static Page",
+        modifyForm () {}
+    };
+    const productPageType = {
+        name: "product",
+        label: "Product Page",
+        modifyForm (form) {
+            form.fields((fields)=>({
+                    product: fields.text().label("Product").required("Product is required").options([
+                        {
+                            label: "Shoes",
+                            value: "shoes"
+                        },
+                        {
+                            label: "Hats",
+                            value: "hats"
+                        }
+                    ])
+                }));
+            form.field("title").setDisabled(true);
+            form.field("path").setDisabled(true);
+            form.layout((layout)=>[
+                    layout.row("product").before("title")
+                ]);
+        }
+    };
+    it("should leave base form unchanged for static page type", ()=>{
+        const form = buildForm(staticPageType);
+        const fieldNames = form.vm.layout.filter((n)=>"row" === n.type).flatMap((row)=>row.fields.map((f)=>f.name));
+        expect(fieldNames).toEqual([
+            "title",
+            "path"
+        ]);
+    });
+    it("should add product field and disable title/path for product page type", ()=>{
+        const form = buildForm(productPageType);
+        const fieldNames = form.vm.layout.filter((n)=>"row" === n.type).flatMap((row)=>row.fields.map((f)=>f.name));
+        expect(fieldNames).toEqual([
+            "product",
+            "title",
+            "path"
+        ]);
+        expect(form.field("title").vm.disabled).toBe(true);
+        expect(form.field("path").vm.disabled).toBe(true);
+    });
+    it("should include product in getData", ()=>{
+        const form = buildForm(productPageType);
+        form.field("product").setValue("shoes");
+        const data = form.getData();
+        expect(data.product).toBe("shoes");
+    });
+    it("should apply cross-cutting modifier after page type", ()=>{
+        const langs = [
+            {
+                id: "en",
+                code: "en",
+                name: "English",
+                isDefault: true
+            },
+            {
+                id: "de",
+                code: "de",
+                name: "German"
+            }
+        ];
+        const { useCase, repository } = createLanguageMocks(langs);
+        const languageModifier = new AddLanguageModifier(useCase, repository);
+        const form = buildForm(productPageType, [
+            languageModifier
+        ]);
+        const fieldNames = form.vm.layout.filter((n)=>"row" === n.type).flatMap((row)=>row.fields.map((f)=>f.name));
+        expect(fieldNames).toEqual([
+            "product",
+            "language",
+            "title",
+            "path"
+        ]);
+    });
+    it("should apply cross-cutting modifier to static page type too", ()=>{
+        const langs = [
+            {
+                id: "en",
+                code: "en",
+                name: "English",
+                isDefault: true
+            },
+            {
+                id: "de",
+                code: "de",
+                name: "German"
+            }
+        ];
+        const { useCase, repository } = createLanguageMocks(langs);
+        const languageModifier = new AddLanguageModifier(useCase, repository);
+        const form = buildForm(staticPageType, [
+            languageModifier
+        ]);
+        const fieldNames = form.vm.layout.filter((n)=>"row" === n.type).flatMap((row)=>row.fields.map((f)=>f.name));
+        expect(fieldNames).toEqual([
+            "language",
+            "title",
+            "path"
+        ]);
+    });
 });
-describe("Form rebuild on page type switch", () => {
-  const staticPageType = {
-    name: "static",
-    label: "Static Page",
-    modifyForm() {
-      // no-op
-    }
-  };
-  const productPageType = {
-    name: "product",
-    label: "Product Page",
-    modifyForm(form) {
-      form.fields(fields => ({
-        product: fields.text().label("Product").required("Product is required").options([{
-          label: "Shoes",
-          value: "shoes"
-        }, {
-          label: "Hats",
-          value: "hats"
-        }])
-      }));
-      form.field("title").setDisabled(true);
-      form.field("path").setDisabled(true);
-      form.layout(layout => [layout.row("product").before("title")]);
-    }
-  };
-  const pageTypes = {
-    static: staticPageType,
-    product: productPageType
-  };
-
-  /**
-   * Simulates the presenter's changePageType: getData → rebuild → setData.
-   * The real presenter sets `this.selectedPageType` before `buildForm()`,
-   * which sets the hidden field's defaultValue. Here we just rebuild and restore.
-   */
-  function changePageType(currentForm, newType, modifiers = []) {
-    const previousData = currentForm.getData();
-    const form = createBaseForm();
-    pageTypes[newType].modifyForm?.(form);
-    for (const modifier of modifiers) {
-      modifier.modifyForm(form);
+describe("Form rebuild on page type switch", ()=>{
+    const staticPageType = {
+        name: "static",
+        label: "Static Page",
+        modifyForm () {}
+    };
+    const productPageType = {
+        name: "product",
+        label: "Product Page",
+        modifyForm (form) {
+            form.fields((fields)=>({
+                    product: fields.text().label("Product").required("Product is required").options([
+                        {
+                            label: "Shoes",
+                            value: "shoes"
+                        },
+                        {
+                            label: "Hats",
+                            value: "hats"
+                        }
+                    ])
+                }));
+            form.field("title").setDisabled(true);
+            form.field("path").setDisabled(true);
+            form.layout((layout)=>[
+                    layout.row("product").before("title")
+                ]);
+        }
+    };
+    const pageTypes = {
+        static: staticPageType,
+        product: productPageType
+    };
+    function changePageType(currentForm, newType, modifiers = []) {
+        const previousData = currentForm.getData();
+        const form = createBaseForm();
+        pageTypes[newType].modifyForm?.(form);
+        for (const modifier of modifiers)modifier.modifyForm(form);
+        form.setData(previousData);
+        return form;
     }
-    form.setData(previousData);
-    return form;
-  }
-  it("should preserve common field values when switching page types", () => {
-    // Start with static page, fill in title and path.
-    const staticForm = createBaseForm();
-    staticPageType.modifyForm?.(staticForm);
-    staticForm.field("title").setValue("My Page");
-    staticForm.field("path").setValue("/my-page");
-
-    // Switch to product page.
-    const productForm = changePageType(staticForm, "product");
-    expect(productForm.field("title").getValue()).toBe("My Page");
-    expect(productForm.field("path").getValue()).toBe("/my-page");
-  });
-  it("should drop page-type-specific fields on switch", () => {
-    // Start with product page, select a product.
-    const productForm = createBaseForm();
-    productPageType.modifyForm?.(productForm);
-    productForm.field("product").setValue("shoes");
-
-    // Switch to static page — product field should not exist.
-    const staticForm = changePageType(productForm, "static");
-    const fieldNames = staticForm.vm.layout.filter(n => n.type === "row").flatMap(row => row.fields.map(f => f.name));
-    expect(fieldNames).toEqual(["title", "path"]);
-    expect(staticForm.getData()).not.toHaveProperty("product");
-  });
-  it("should preserve cross-cutting modifier values across page type switch", () => {
-    const langs = [{
-      id: "en",
-      code: "en",
-      name: "English",
-      isDefault: true
-    }, {
-      id: "de",
-      code: "de",
-      name: "German"
-    }];
-    const {
-      useCase,
-      repository
-    } = createLanguageMocks(langs);
-    const languageModifier = new AddLanguageModifier(useCase, repository);
-
-    // Start with static page + language modifier.
-    const staticForm = createBaseForm();
-    staticPageType.modifyForm?.(staticForm);
-    languageModifier.modifyForm(staticForm);
-    staticForm.field("title").setValue("Demo");
-    // Language is auto-assigned "en" by the modifier reaction.
-
-    const langValue = staticForm.field("language").getValue();
-    expect(langValue).toBe("en");
-
-    // Switch to product page with same modifier.
-    const productForm = changePageType(staticForm, "product", [languageModifier]);
-    expect(productForm.field("language").getValue()).toBe("en");
-    expect(productForm.field("title").getValue()).toBe("Demo");
-  });
-  it("should preserve hidden field values across rebuild", () => {
-    const staticForm = createBaseForm();
-    staticPageType.modifyForm?.(staticForm);
-    expect(staticForm.getData().pageType).toBe("staticPage");
-
-    // Switch to product — setData restores pageType from previous form.
-    const productForm = changePageType(staticForm, "product");
-
-    // The hidden pageType field is preserved via setData.
-    // In the real presenter, buildForm() sets defaultValue to the new type,
-    // so the hidden field gets the correct value regardless.
-    expect(productForm.field("pageType").getValue()).toBe("staticPage");
-  });
+    it("should preserve common field values when switching page types", ()=>{
+        const staticForm = createBaseForm();
+        staticPageType.modifyForm?.(staticForm);
+        staticForm.field("title").setValue("My Page");
+        staticForm.field("path").setValue("/my-page");
+        const productForm = changePageType(staticForm, "product");
+        expect(productForm.field("title").getValue()).toBe("My Page");
+        expect(productForm.field("path").getValue()).toBe("/my-page");
+    });
+    it("should drop page-type-specific fields on switch", ()=>{
+        const productForm = createBaseForm();
+        productPageType.modifyForm?.(productForm);
+        productForm.field("product").setValue("shoes");
+        const staticForm = changePageType(productForm, "static");
+        const fieldNames = staticForm.vm.layout.filter((n)=>"row" === n.type).flatMap((row)=>row.fields.map((f)=>f.name));
+        expect(fieldNames).toEqual([
+            "title",
+            "path"
+        ]);
+        expect(staticForm.getData()).not.toHaveProperty("product");
+    });
+    it("should preserve cross-cutting modifier values across page type switch", ()=>{
+        const langs = [
+            {
+                id: "en",
+                code: "en",
+                name: "English",
+                isDefault: true
+            },
+            {
+                id: "de",
+                code: "de",
+                name: "German"
+            }
+        ];
+        const { useCase, repository } = createLanguageMocks(langs);
+        const languageModifier = new AddLanguageModifier(useCase, repository);
+        const staticForm = createBaseForm();
+        staticPageType.modifyForm?.(staticForm);
+        languageModifier.modifyForm(staticForm);
+        staticForm.field("title").setValue("Demo");
+        const langValue = staticForm.field("language").getValue();
+        expect(langValue).toBe("en");
+        const productForm = changePageType(staticForm, "product", [
+            languageModifier
+        ]);
+        expect(productForm.field("language").getValue()).toBe("en");
+        expect(productForm.field("title").getValue()).toBe("Demo");
+    });
+    it("should preserve hidden field values across rebuild", ()=>{
+        const staticForm = createBaseForm();
+        staticPageType.modifyForm?.(staticForm);
+        expect(staticForm.getData().pageType).toBe("staticPage");
+        const productForm = changePageType(staticForm, "product");
+        expect(productForm.field("pageType").getValue()).toBe("staticPage");
+    });
 });
 
 //# sourceMappingURL=CreatePage.test.js.map