@fogpipe/forma-react 0.8.1 → 0.8.2

package/src/__tests__/test-utils.tsx

@@ -47,6 +47,7 @@ export function createTestSpec(
           enum: (fieldOptions as Array<{ value: string }>).map((o) => o.value),
           ...rest,
         };
+        if (required) schemaRequired.push(name);
         continue;
       }
     }

package/src/__tests__/useForma.test.ts

@@ -571,6 +571,115 @@ describe("useForma", () => {
 
       expect(result.current.isSubmitted).toBe(false);
     });
+
+    describe("validation debouncing", () => {
+      it("should debounce validation updates when validationDebounceMs is set", async () => {
+        vi.useFakeTimers();
+
+        const spec = createTestSpec({
+          fields: {
+            name: { type: "text", required: true },
+          },
+        });
+
+        const { result } = renderHook(() =>
+          useForma({ spec, validationDebounceMs: 100 })
+        );
+
+        // Initially invalid (required field empty)
+        expect(result.current.isValid).toBe(false);
+
+        // Fill the field - validation should be debounced
+        act(() => {
+          result.current.setFieldValue("name", "John");
+        });
+
+        // Immediately after change, debounced validation still shows old state
+        // (depending on implementation, this might already be updated)
+
+        // Fast-forward past debounce timeout
+        await act(async () => {
+          vi.advanceTimersByTime(150);
+        });
+
+        // Now validation should reflect the new state
+        expect(result.current.isValid).toBe(true);
+
+        vi.useRealTimers();
+      });
+
+      it("should use immediate validation on submit even when debouncing", async () => {
+        vi.useFakeTimers();
+
+        const onSubmit = vi.fn();
+        const spec = createTestSpec({
+          fields: {
+            name: { type: "text", required: true },
+          },
+        });
+
+        const { result } = renderHook(() =>
+          useForma({ spec, validationDebounceMs: 500, onSubmit })
+        );
+
+        // Fill the field
+        act(() => {
+          result.current.setFieldValue("name", "John");
+        });
+
+        // Submit immediately without waiting for debounce
+        await act(async () => {
+          await result.current.submitForm();
+        });
+
+        // onSubmit should be called because immediate validation passes
+        expect(onSubmit).toHaveBeenCalledWith({ name: "John" });
+
+        vi.useRealTimers();
+      });
+
+      it("should not call onSubmit when immediate validation fails", async () => {
+        const onSubmit = vi.fn();
+        const spec = createTestSpec({
+          fields: {
+            name: { type: "text", required: true },
+          },
+        });
+
+        const { result } = renderHook(() =>
+          useForma({ spec, validationDebounceMs: 100, onSubmit })
+        );
+
+        // Submit without filling required field
+        await act(async () => {
+          await result.current.submitForm();
+        });
+
+        // onSubmit should NOT be called
+        expect(onSubmit).not.toHaveBeenCalled();
+      });
+
+      it("should work without debouncing (validationDebounceMs: 0)", () => {
+        const spec = createTestSpec({
+          fields: {
+            name: { type: "text", required: true },
+          },
+        });
+
+        const { result } = renderHook(() =>
+          useForma({ spec, validationDebounceMs: 0 })
+        );
+
+        expect(result.current.isValid).toBe(false);
+
+        act(() => {
+          result.current.setFieldValue("name", "John");
+        });
+
+        // Validation should update immediately
+        expect(result.current.isValid).toBe(true);
+      });
+    });
   });
 
   // ============================================================================
@@ -933,6 +1042,8 @@ describe("useForma", () => {
       const page2After = result.current.wizard?.pages.find((p) => p.id === "page2");
       expect(page2After?.visible).toBe(true);
     });
+
+    // Note: Comprehensive canProceed tests are in canProceed.test.ts
   });
 
   // ============================================================================

package/src/useForma.ts

@@ -388,29 +388,57 @@ export function useForma(options: UseFormaOptions): UseFormaReturn {
 
     // For navigation, only count visible pages
     const visiblePages = pages.filter((p) => p.visible);
-    const currentPage = visiblePages[state.currentPage] || null;
-    const hasNextPage = state.currentPage < visiblePages.length - 1;
-    const hasPreviousPage = state.currentPage > 0;
-    const isLastPage = state.currentPage === visiblePages.length - 1;
+
+    // Clamp currentPage to valid range (handles case where current page becomes hidden)
+    const maxPageIndex = Math.max(0, visiblePages.length - 1);
+    const clampedPageIndex = Math.min(Math.max(0, state.currentPage), maxPageIndex);
+
+    // Auto-correct page index if it's out of bounds
+    if (clampedPageIndex !== state.currentPage && visiblePages.length > 0) {
+      dispatch({ type: "SET_PAGE", page: clampedPageIndex });
+    }
+
+    const currentPage = visiblePages[clampedPageIndex] || null;
+    const hasNextPage = clampedPageIndex < visiblePages.length - 1;
+    const hasPreviousPage = clampedPageIndex > 0;
+    const isLastPage = clampedPageIndex === visiblePages.length - 1;
 
     return {
       pages,
-      currentPageIndex: state.currentPage,
+      currentPageIndex: clampedPageIndex,
       currentPage,
-      goToPage: (index: number) => dispatch({ type: "SET_PAGE", page: index }),
+      goToPage: (index: number) => {
+        // Clamp to valid range
+        const validIndex = Math.min(Math.max(0, index), maxPageIndex);
+        dispatch({ type: "SET_PAGE", page: validIndex });
+      },
       nextPage: () => {
         if (hasNextPage) {
-          dispatch({ type: "SET_PAGE", page: state.currentPage + 1 });
+          dispatch({ type: "SET_PAGE", page: clampedPageIndex + 1 });
         }
       },
       previousPage: () => {
         if (hasPreviousPage) {
-          dispatch({ type: "SET_PAGE", page: state.currentPage - 1 });
+          dispatch({ type: "SET_PAGE", page: clampedPageIndex - 1 });
         }
       },
       hasNextPage,
       hasPreviousPage,
-      canProceed: true, // TODO: Validate current page
+      canProceed: (() => {
+        if (!currentPage) return true;
+        // Get errors only for visible fields on the current page
+        const pageErrors = validation.errors.filter((e) => {
+          // Check if field is on current page (including array items like "items[0].name")
+          const isOnCurrentPage = currentPage.fields.includes(e.field) ||
+            currentPage.fields.some(f => e.field.startsWith(`${f}[`));
+          // Only count errors for visible fields
+          const isVisible = visibility[e.field] !== false;
+          // Only count actual errors, not warnings
+          const isError = e.severity === 'error';
+          return isOnCurrentPage && isVisible && isError;
+        });
+        return pageErrors.length === 0;
+      })(),
       isLastPage,
       touchCurrentPageFields: () => {
         if (currentPage) {
@@ -427,7 +455,7 @@ export function useForma(options: UseFormaOptions): UseFormaReturn {
         return pageErrors.length === 0;
       },
     };
-  }, [spec, state.data, state.currentPage, computed, validation]);
+  }, [spec, state.data, state.currentPage, computed, validation, visibility]);
 
   // Helper to get value at nested path
   const getValueAtPath = useCallback((path: string): unknown => {