@object-ui/plugin-form 3.0.3 → 3.1.1

package/src/__tests__/MobileUX.test.tsx

@@ -0,0 +1,433 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Mobile UX Tests for ModalForm
+ *
+ * Validates mobile-specific optimizations:
+ * - Skeleton loading state (replaces spinner)
+ * - Flex layout structure with sticky header/footer
+ * - Full-screen modal on mobile (h-[100dvh])
+ * - Close button touch target (min 44×44px)
+ * - Sticky footer with action buttons outside scroll area
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { ModalForm } from '../ModalForm';
+
+const mockObjectSchema = {
+  name: 'events',
+  fields: {
+    subject: { label: 'Subject', type: 'text', required: true },
+    start: { label: 'Start', type: 'datetime', required: true },
+    end: { label: 'End', type: 'datetime', required: true },
+    location: { label: 'Location', type: 'text', required: false },
+    description: { label: 'Description', type: 'textarea', required: false },
+    participants: { label: 'Participants', type: 'lookup', required: false },
+    type: { label: 'Type', type: 'select', required: false, options: [{ value: 'meeting', label: 'Meeting' }] },
+  },
+};
+
+const createMockDataSource = () => ({
+  getObjectSchema: vi.fn().mockResolvedValue(mockObjectSchema),
+  findOne: vi.fn().mockResolvedValue({ id: '1', subject: 'Test Event' }),
+  find: vi.fn().mockResolvedValue([]),
+  create: vi.fn().mockResolvedValue({ id: '1' }),
+  update: vi.fn().mockResolvedValue({ id: '1' }),
+  delete: vi.fn().mockResolvedValue(true),
+});
+
+describe('ModalForm Mobile UX', () => {
+  it('renders skeleton loading instead of spinner', () => {
+    const mockDataSource = createMockDataSource();
+    // Make getObjectSchema hang (never resolve) to keep loading state
+    mockDataSource.getObjectSchema.mockReturnValue(new Promise(() => {}));
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'events',
+          mode: 'create',
+          title: 'Create Event',
+          open: true,
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    // Should show skeleton loading, not the old spinner text
+    expect(screen.queryByText('Loading form...')).not.toBeInTheDocument();
+    expect(screen.getByTestId('modal-form-skeleton')).toBeInTheDocument();
+  });
+
+  it('renders with full-screen mobile classes and flex layout on MobileDialogContent', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'events',
+          mode: 'create',
+          title: 'Create Event',
+          description: 'Add a new Event to your database.',
+          open: true,
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Create Event')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Add a new Event to your database.')).toBeInTheDocument();
+
+    // MobileDialogContent should be rendered via portal
+    const dialogContent = document.querySelector('[role="dialog"]');
+    expect(dialogContent).not.toBeNull();
+    const cls = dialogContent!.className;
+    // Mobile full-screen
+    expect(cls).toContain('h-[100dvh]');
+    // Flex column layout for sticky header/footer
+    expect(cls).toContain('flex');
+    expect(cls).toContain('flex-col');
+    // Overflow hidden (scroll is on the body area)
+    expect(cls).toContain('overflow-hidden');
+  });
+
+  it('close button has accessible touch target (≥44×44px on mobile)', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'events',
+          mode: 'create',
+          title: 'Create Event',
+          open: true,
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Create Event')).toBeInTheDocument();
+    });
+
+    // Close button should have WCAG-compliant touch target classes
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    expect(closeButton).toBeInTheDocument();
+    const cls = closeButton.className;
+    expect(cls).toContain('min-h-[44px]');
+    expect(cls).toContain('min-w-[44px]');
+  });
+
+  it('renders sticky footer with action buttons outside scroll area', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'events',
+          mode: 'create',
+          title: 'Create Event',
+          open: true,
+          showSubmit: true,
+          showCancel: true,
+          submitText: 'Save Record',
+          cancelText: 'Cancel',
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    // Footer should exist as a sibling to the scroll area, not inside it
+    const footer = await screen.findByTestId('modal-form-footer');
+    expect(footer.className).toContain('border-t');
+    expect(footer.className).toContain('shrink-0');
+
+    // Action buttons should be in the footer
+    const saveButton = screen.getByRole('button', { name: /save record/i });
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    expect(footer.contains(saveButton)).toBe(true);
+    expect(footer.contains(cancelButton)).toBe(true);
+  });
+
+  it('does not show footer during loading or error states', () => {
+    const mockDataSource = createMockDataSource();
+    mockDataSource.getObjectSchema.mockReturnValue(new Promise(() => {}));
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'events',
+          mode: 'create',
+          title: 'Create Event',
+          open: true,
+          showSubmit: true,
+          showCancel: true,
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    // While loading, footer should not be rendered
+    expect(screen.queryByTestId('modal-form-footer')).not.toBeInTheDocument();
+  });
+});
+
+describe('ModalForm Container Query Layout', () => {
+  /** CSS selector for the @container query context element */
+  const CONTAINER_SELECTOR = '.\\@container';
+
+  it('applies @container class on scrollable content area', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'events',
+          mode: 'create',
+          title: 'Create Event',
+          open: true,
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Create Event')).toBeInTheDocument();
+    });
+
+    // The scrollable content wrapper should be a @container query context
+    const dialogContent = document.querySelector('[role="dialog"]');
+    expect(dialogContent).not.toBeNull();
+    const scrollArea = dialogContent!.querySelector(CONTAINER_SELECTOR);
+    expect(scrollArea).not.toBeNull();
+    expect(scrollArea!.className).toContain('overflow-y-auto');
+  });
+
+  it('uses container-query grid classes for multi-column flat fields', async () => {
+    // Mock schema with enough fields to trigger auto-layout 2-column
+    const manyFieldsSchema = {
+      name: 'contacts',
+      fields: {
+        name: { label: 'Name', type: 'text', required: true },
+        email: { label: 'Email', type: 'email', required: false },
+        phone: { label: 'Phone', type: 'phone', required: false },
+        company: { label: 'Company', type: 'text', required: false },
+        department: { label: 'Department', type: 'text', required: false },
+        title: { label: 'Title', type: 'text', required: false },
+      },
+    };
+    const mockDataSource = createMockDataSource();
+    mockDataSource.getObjectSchema.mockResolvedValue(manyFieldsSchema);
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'contacts',
+          mode: 'create',
+          title: 'Create Contact',
+          open: true,
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Create Contact')).toBeInTheDocument();
+    });
+
+    // Wait for fields to render
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeInTheDocument();
+    });
+
+    // The form field container should use container-query classes (@md:grid-cols-2)
+    // instead of viewport-based classes (md:grid-cols-2)
+    const dialogContent = document.querySelector('[role="dialog"]');
+    const containerEl = dialogContent!.querySelector(CONTAINER_SELECTOR);
+    expect(containerEl).not.toBeNull();
+
+    // Look for the grid container with @md:grid-cols-2
+    const gridEl = containerEl!.querySelector('[class*="@md:grid-cols-2"]');
+    expect(gridEl).not.toBeNull();
+    expect(gridEl!.className).toContain('@md:grid-cols-2');
+    // Should NOT use viewport-based md:grid-cols-2 (without @ prefix)
+    expect(gridEl!.className).not.toContain(' md:grid-cols-2');
+  });
+
+  it('single-column forms do not get container grid override', async () => {
+    // Only 3 fields → auto-layout stays at 1 column
+    const fewFieldsSchema = {
+      name: 'notes',
+      fields: {
+        title: { label: 'Title', type: 'text', required: true },
+        body: { label: 'Body', type: 'textarea', required: false },
+        status: { label: 'Status', type: 'select', required: false, options: [{ value: 'draft', label: 'Draft' }] },
+      },
+    };
+    const mockDataSource = createMockDataSource();
+    mockDataSource.getObjectSchema.mockResolvedValue(fewFieldsSchema);
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'notes',
+          mode: 'create',
+          title: 'Create Note',
+          open: true,
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Create Note')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Title')).toBeInTheDocument();
+    });
+
+    // Single column form should not have @md:grid-cols-2
+    const dialogContent = document.querySelector('[role="dialog"]');
+    const containerEl = dialogContent!.querySelector(CONTAINER_SELECTOR);
+    expect(containerEl).not.toBeNull();
+    const gridEl = containerEl!.querySelector('[class*="@md:grid-cols"]');
+    expect(gridEl).toBeNull();
+  });
+});
+
+describe('ModalForm Sections — Modal Size Auto-Upgrade', () => {
+  it('auto-upgrades modal to lg when sections use 2-column layout', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'events',
+          mode: 'create',
+          title: 'Create Task',
+          open: true,
+          sections: [
+            {
+              label: 'Task Information',
+              columns: 2,
+              fields: ['subject', 'start', 'end', 'location'],
+            },
+            {
+              label: 'Details',
+              columns: 1,
+              fields: ['description'],
+            },
+          ],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Create Task')).toBeInTheDocument();
+    });
+
+    // Dialog should auto-upgrade to lg (max-w-2xl) because sections have columns: 2
+    const dialogContent = document.querySelector('[role="dialog"]');
+    expect(dialogContent).not.toBeNull();
+    expect(dialogContent!.className).toContain('max-w-2xl');
+  });
+
+  it('keeps default size when all sections use 1-column layout', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'events',
+          mode: 'create',
+          title: 'Create Task',
+          open: true,
+          sections: [
+            {
+              label: 'Basic Info',
+              columns: 1,
+              fields: ['subject', 'start'],
+            },
+          ],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Create Task')).toBeInTheDocument();
+    });
+
+    // Dialog should remain at default size (max-w-lg)
+    const dialogContent = document.querySelector('[role="dialog"]');
+    expect(dialogContent).not.toBeNull();
+    expect(dialogContent!.className).toContain('max-w-lg');
+  });
+
+  it('respects explicit modalSize over section auto-upgrade', async () => {
+    const mockDataSource = createMockDataSource();
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'events',
+          mode: 'create',
+          title: 'Create Task',
+          open: true,
+          modalSize: 'sm',
+          sections: [
+            {
+              label: 'Task Information',
+              columns: 2,
+              fields: ['subject', 'start', 'end', 'location'],
+            },
+          ],
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Create Task')).toBeInTheDocument();
+    });
+
+    // Explicit modalSize: 'sm' should override section auto-upgrade
+    const dialogContent = document.querySelector('[role="dialog"]');
+    expect(dialogContent).not.toBeNull();
+    expect(dialogContent!.className).toContain('max-w-sm');
+  });
+});

package/src/__tests__/NewVariants.test.tsx

@@ -468,6 +468,202 @@ describe('ObjectForm routing to new variants', () => {
   });
 });
 
+// ─── Auto-Layout Integration Tests ──────────────────────────────────────
+
+/**
+ * These tests verify that ModalForm and DrawerForm apply applyAutoLayout
+ * when rendering flat fields (no sections), consistent with SimpleObjectForm.
+ */
+describe('ModalForm auto-layout integration', () => {
+  // Schema with 6 fields (>3) should trigger 2-column inference
+  const manyFieldsSchema = {
+    name: 'contacts',
+    fields: {
+      firstName: { label: 'First Name', type: 'text', required: true },
+      lastName: { label: 'Last Name', type: 'text', required: false },
+      email: { label: 'Email', type: 'email', required: true },
+      phone: { label: 'Phone', type: 'phone', required: false },
+      street: { label: 'Street', type: 'text', required: false },
+      city: { label: 'City', type: 'text', required: false },
+    },
+  };
+
+  it('applies auto-layout with 2 columns for 6 flat fields', async () => {
+    const mockDataSource = createMockDataSource();
+    mockDataSource.getObjectSchema.mockResolvedValue(manyFieldsSchema);
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'contacts',
+          mode: 'create',
+          title: 'Auto Layout Modal',
+          open: true,
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Auto Layout Modal')).toBeInTheDocument();
+    });
+
+    // With 6 fields (>3), auto-layout should infer columns=2
+    // The form element receives columns="2" as an attribute
+    await waitFor(() => {
+      const formEl = document.querySelector('form[columns="2"]');
+      expect(formEl).not.toBeNull();
+    });
+  });
+
+  it('does not apply multi-column for 3 or fewer fields', async () => {
+    const fewFieldsSchema = {
+      name: 'simple',
+      fields: {
+        firstName: { label: 'First Name', type: 'text', required: true },
+        lastName: { label: 'Last Name', type: 'text', required: false },
+      },
+    };
+    const mockDataSource = createMockDataSource();
+    mockDataSource.getObjectSchema.mockResolvedValue(fewFieldsSchema);
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'simple',
+          mode: 'create',
+          title: 'Few Fields Modal',
+          open: true,
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Few Fields Modal')).toBeInTheDocument();
+    });
+
+    // With 2 fields (≤3), auto-layout should infer columns=1
+    await waitFor(() => {
+      const formEl = document.querySelector('form[columns="2"]');
+      expect(formEl).toBeNull();
+    });
+  });
+
+  it('respects explicit columns override', async () => {
+    const mockDataSource = createMockDataSource();
+    mockDataSource.getObjectSchema.mockResolvedValue(manyFieldsSchema);
+
+    render(
+      <ModalForm
+        schema={{
+          type: 'object-form',
+          formType: 'modal',
+          objectName: 'contacts',
+          mode: 'create',
+          title: 'Explicit Columns Modal',
+          open: true,
+          columns: 3,
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Explicit Columns Modal')).toBeInTheDocument();
+    });
+
+    // User specified columns=3
+    await waitFor(() => {
+      const formEl = document.querySelector('form[columns="3"]');
+      expect(formEl).not.toBeNull();
+    });
+  });
+});
+
+describe('DrawerForm auto-layout integration', () => {
+  const manyFieldsSchema = {
+    name: 'contacts',
+    fields: {
+      firstName: { label: 'First Name', type: 'text', required: true },
+      lastName: { label: 'Last Name', type: 'text', required: false },
+      email: { label: 'Email', type: 'email', required: true },
+      phone: { label: 'Phone', type: 'phone', required: false },
+      street: { label: 'Street', type: 'text', required: false },
+      city: { label: 'City', type: 'text', required: false },
+    },
+  };
+
+  it('applies auto-layout with 2 columns for 6 flat fields', async () => {
+    const mockDataSource = createMockDataSource();
+    mockDataSource.getObjectSchema.mockResolvedValue(manyFieldsSchema);
+
+    render(
+      <DrawerForm
+        schema={{
+          type: 'object-form',
+          formType: 'drawer',
+          objectName: 'contacts',
+          mode: 'create',
+          title: 'Auto Layout Drawer',
+          open: true,
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Auto Layout Drawer')).toBeInTheDocument();
+    });
+
+    // With 6 fields (>3), auto-layout should infer columns=2
+    await waitFor(() => {
+      const formEl = document.querySelector('form[columns="2"]');
+      expect(formEl).not.toBeNull();
+    });
+  });
+
+  it('does not apply multi-column for 3 or fewer fields', async () => {
+    const fewFieldsSchema = {
+      name: 'simple',
+      fields: {
+        firstName: { label: 'First Name', type: 'text', required: true },
+        lastName: { label: 'Last Name', type: 'text', required: false },
+      },
+    };
+    const mockDataSource = createMockDataSource();
+    mockDataSource.getObjectSchema.mockResolvedValue(fewFieldsSchema);
+
+    render(
+      <DrawerForm
+        schema={{
+          type: 'object-form',
+          formType: 'drawer',
+          objectName: 'simple',
+          mode: 'create',
+          title: 'Few Fields Drawer',
+          open: true,
+        }}
+        dataSource={mockDataSource as any}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Few Fields Drawer')).toBeInTheDocument();
+    });
+
+    // With 2 fields (≤3), should remain 1 column
+    await waitFor(() => {
+      const formEl = document.querySelector('form[columns="2"]');
+      expect(formEl).toBeNull();
+    });
+  });
+});
+
 // ─── Export Tests ────────────────────────────────────────────────────────
 
 describe('New variant exports', () => {