@fogpipe/forma-react 0.11.2 → 0.12.0-alpha.2

package/src/__tests__/FieldRenderer.test.tsx

@@ -8,18 +8,29 @@
  */
 
 import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
 import { FormRenderer } from "../FormRenderer.js";
-import { createTestComponentMap } from "./test-utils.js";
-import type { Forma, JSONSchemaNumber, JSONSchemaInteger } from "@fogpipe/forma-core";
-import type { ComponentMap, NumberComponentProps, IntegerComponentProps } from "../types.js";
+import { FieldRenderer } from "../FieldRenderer.js";
+import { createTestSpec, createTestComponentMap } from "./test-utils.js";
+import type {
+  Forma,
+  JSONSchemaNumber,
+  JSONSchemaInteger,
+} from "@fogpipe/forma-core";
+import type {
+  ComponentMap,
+  LayoutProps,
+  NumberComponentProps,
+  IntegerComponentProps,
+} from "../types.js";
 
 /**
  * Create a minimal Forma spec for testing numeric fields
  */
 function createNumericSpec(
   schemaProps: JSONSchemaNumber | JSONSchemaInteger,
-  fieldDef: Record<string, unknown> = {}
+  fieldDef: Record<string, unknown> = {},
 ): Forma {
   return {
     version: "1.0",
@@ -46,7 +57,7 @@ function createNumericSpec(
  */
 function createPropsCapturingComponentMap(
   onRenderNumber: (props: NumberComponentProps["field"]) => void,
-  onRenderInteger?: (props: IntegerComponentProps["field"]) => void
+  onRenderInteger?: (props: IntegerComponentProps["field"]) => void,
 ): ComponentMap {
   const baseComponents = createTestComponentMap();
 
@@ -62,7 +73,9 @@ function createPropsCapturingComponentMap(
             data-max={props.max}
             data-step={props.step}
             value={props.value ?? ""}
-            onChange={(e) => props.onChange(e.target.value ? Number(e.target.value) : null)}
+            onChange={(e) =>
+              props.onChange(e.target.value ? Number(e.target.value) : null)
+            }
           />
         </div>
       );
@@ -76,7 +89,9 @@ function createPropsCapturingComponentMap(
             data-min={props.min}
             data-max={props.max}
             value={props.value ?? ""}
-            onChange={(e) => props.onChange(e.target.value ? Number(e.target.value) : null)}
+            onChange={(e) =>
+              props.onChange(e.target.value ? Number(e.target.value) : null)
+            }
           />
         </div>
       );
@@ -107,7 +122,7 @@ describe("FieldRenderer", () => {
             components={createPropsCapturingComponentMap((props) => {
               capturedProps = props;
             })}
-          />
+          />,
         );
 
         expect(capturedProps).not.toBeNull();
@@ -130,7 +145,7 @@ describe("FieldRenderer", () => {
             components={createPropsCapturingComponentMap((props) => {
               capturedProps = props;
             })}
-          />
+          />,
         );
 
         expect(capturedProps!.step).toBe(0.5);
@@ -150,7 +165,7 @@ describe("FieldRenderer", () => {
             components={createPropsCapturingComponentMap((props) => {
               capturedProps = props;
             })}
-          />
+          />,
         );
 
         expect(capturedProps!.step).toBe(0.1);
@@ -172,9 +187,9 @@ describe("FieldRenderer", () => {
               () => {},
               (props) => {
                 capturedProps = props;
-              }
+              },
             )}
-          />
+          />,
         );
 
         expect(capturedProps).not.toBeNull();
@@ -214,7 +229,7 @@ describe("FieldRenderer", () => {
             components={createPropsCapturingComponentMap((props) => {
               capturedProps = props;
             })}
-          />
+          />,
         );
 
         expect(capturedProps!.step).toBe(15);
@@ -236,7 +251,7 @@ describe("FieldRenderer", () => {
             components={createPropsCapturingComponentMap((props) => {
               capturedProps = props;
             })}
-          />
+          />,
         );
 
         expect(capturedProps!.min).toBe(0);
@@ -261,7 +276,7 @@ describe("FieldRenderer", () => {
             components={createPropsCapturingComponentMap((props) => {
               capturedProps = props;
             })}
-          />
+          />,
         );
 
         expect(capturedProps!.min).toBe(0.05);
@@ -282,7 +297,7 @@ describe("FieldRenderer", () => {
             components={createPropsCapturingComponentMap((props) => {
               capturedProps = props;
             })}
-          />
+          />,
         );
 
         expect(capturedProps!.min).toBeUndefined();
@@ -307,7 +322,7 @@ describe("FieldRenderer", () => {
             components={createPropsCapturingComponentMap((props) => {
               capturedProps = props;
             })}
-          />
+          />,
         );
 
         expect(capturedProps!.min).toBe(0.05);
@@ -331,7 +346,7 @@ describe("FieldRenderer", () => {
             components={createPropsCapturingComponentMap((props) => {
               capturedProps = props;
             })}
-          />
+          />,
         );
 
         expect(capturedProps!.min).toBe(0);
@@ -355,7 +370,7 @@ describe("FieldRenderer", () => {
             components={createPropsCapturingComponentMap((props) => {
               capturedProps = props;
             })}
-          />
+          />,
         );
 
         expect(capturedProps!.min).toBe(0);
@@ -364,4 +379,105 @@ describe("FieldRenderer", () => {
       });
     });
   });
+
+  // ============================================================================
+  // FieldRenderer Visibility Wrapper Stability
+  // ============================================================================
+
+  describe("visibility wrapper stability (FieldRenderer)", () => {
+    /**
+     * FieldRenderer needs FormaContext, so we render it inside FormRenderer
+     * with a custom layout that uses FieldRenderer directly.
+     */
+    function createFieldRendererLayout(fieldPath: string) {
+      return function FieldRendererLayout({ children, onSubmit }: LayoutProps) {
+        return (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              onSubmit();
+            }}
+          >
+            {children}
+            <FieldRenderer
+              fieldPath={fieldPath}
+              components={createTestComponentMap()}
+            />
+          </form>
+        );
+      };
+    }
+
+    it("should render a hidden wrapper div when field is invisible", () => {
+      const spec = createTestSpec({
+        fields: {
+          toggle: { type: "boolean", label: "Toggle" },
+          details: {
+            type: "text",
+            label: "Details",
+            visibleWhen: "toggle = true",
+          },
+        },
+      });
+
+      const { container } = render(
+        <FormRenderer
+          spec={spec}
+          initialData={{ toggle: false }}
+          components={createTestComponentMap()}
+          layout={createFieldRendererLayout("details")}
+        />,
+      );
+
+      // FieldRenderer should produce a hidden wrapper
+      // Note: FormRenderer also renders its own wrapper, so find all
+      const wrappers = container.querySelectorAll(
+        '[data-field-path="details"]',
+      );
+      // At least one should have hidden attribute (the FieldRenderer one)
+      const hiddenWrapper = Array.from(wrappers).find((el) =>
+        el.hasAttribute("hidden"),
+      );
+      expect(hiddenWrapper).toBeTruthy();
+      expect(hiddenWrapper!.children).toHaveLength(0);
+    });
+
+    it("should remove hidden attribute when field becomes visible", async () => {
+      const user = userEvent.setup();
+      const spec = createTestSpec({
+        fields: {
+          toggle: { type: "boolean", label: "Toggle" },
+          details: {
+            type: "text",
+            label: "Details",
+            visibleWhen: "toggle = true",
+          },
+        },
+      });
+
+      const { container } = render(
+        <FormRenderer
+          spec={spec}
+          initialData={{ toggle: false }}
+          components={createTestComponentMap()}
+          layout={createFieldRendererLayout("details")}
+        />,
+      );
+
+      // Toggle visibility
+      const checkbox = screen.getByRole("checkbox");
+      await user.click(checkbox);
+
+      await waitFor(() => {
+        const wrappers = container.querySelectorAll(
+          '[data-field-path="details"]',
+        );
+        // The FieldRenderer wrapper should now be visible (no hidden attr)
+        const visibleWrappers = Array.from(wrappers).filter(
+          (el) => !el.hasAttribute("hidden"),
+        );
+        expect(visibleWrappers.length).toBeGreaterThan(0);
+      });
+    });
+  });
 });