@object-ui/components 3.0.3 → 3.1.0

package/src/__tests__/mobile-accessibility.test.tsx

@@ -0,0 +1,120 @@
+/**
+ * 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 Accessibility Audit — axe-core checks at mobile viewport widths.
+ *
+ * Verifies that common UI patterns (buttons, forms, navigation, dialogs,
+ * tables) remain WCAG 2.1 AA compliant when rendered in a narrow container
+ * that simulates a mobile viewport. Part of P3 Mobile Testing & QA.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { axe } from 'vitest-axe';
+import React from 'react';
+
+async function expectNoViolations(container: HTMLElement) {
+  const results = await axe(container);
+  const violations = (results as any).violations || [];
+  if (violations.length > 0) {
+    const messages = violations.map(
+      (v: any) => `[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} instance(s))`,
+    );
+    throw new Error(
+      `Expected no accessibility violations, but found ${violations.length}:\n${messages.join('\n')}`,
+    );
+  }
+}
+
+const MOBILE_WIDTH = 375;
+
+describe('Mobile Accessibility Audit', () => {
+  it('should have no axe violations for Button at mobile viewport', async () => {
+    const { container } = render(
+      <div style={{ width: `${MOBILE_WIDTH}px` }}>
+        <button type="button">Click me</button>
+      </div>,
+    );
+    await expectNoViolations(container);
+  });
+
+  it('should have no axe violations for form inputs at mobile viewport', async () => {
+    const { container } = render(
+      <div style={{ width: `${MOBILE_WIDTH}px` }}>
+        <form>
+          <label htmlFor="name">Name</label>
+          <input id="name" type="text" />
+          <label htmlFor="email">Email</label>
+          <input id="email" type="email" />
+          <button type="submit">Submit</button>
+        </form>
+      </div>,
+    );
+    await expectNoViolations(container);
+  });
+
+  it('should have no axe violations for navigation at mobile viewport', async () => {
+    const { container } = render(
+      <div style={{ width: `${MOBILE_WIDTH}px` }}>
+        <nav aria-label="Main navigation">
+          <ul>
+            <li>
+              <a href="/">Home</a>
+            </li>
+            <li>
+              <a href="/about">About</a>
+            </li>
+          </ul>
+        </nav>
+      </div>,
+    );
+    await expectNoViolations(container);
+  });
+
+  it('should have no axe violations for dialog at mobile viewport', async () => {
+    const { container } = render(
+      <div style={{ width: `${MOBILE_WIDTH}px` }}>
+        <div role="dialog" aria-label="Confirmation" aria-modal="true">
+          <h2>Confirm Action</h2>
+          <p>Are you sure?</p>
+          <button type="button">Yes</button>
+          <button type="button">No</button>
+        </div>
+      </div>,
+    );
+    await expectNoViolations(container);
+  });
+
+  it('should have no axe violations for data table at mobile viewport', async () => {
+    const { container } = render(
+      <div style={{ width: `${MOBILE_WIDTH}px`, overflow: 'auto' }}>
+        <table>
+          <caption>Sample data</caption>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Item 1</td>
+              <td>100</td>
+            </tr>
+            <tr>
+              <td>Item 2</td>
+              <td>200</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>,
+    );
+    await expectNoViolations(container);
+  });
+});

package/src/__tests__/navigation-overlay.test.tsx

@@ -219,6 +219,31 @@ describe('NavigationOverlay', () => {
       );
       expect(screen.getByText('Quick View')).toBeInTheDocument();
     });
+
+    it('should render fallback dialog when no popoverTrigger is provided', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'popover',
+            title: 'Preview',
+          })}
+        />
+      );
+      expect(screen.getByText('Preview')).toBeInTheDocument();
+      expect(screen.getByText('Test Record')).toBeInTheDocument();
+    });
+
+    it('should not render fallback dialog when closed and no popoverTrigger', () => {
+      const { container } = render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'popover',
+            isOpen: false,
+          })}
+        />
+      );
+      expect(container.innerHTML).toBe('');
+    });
   });
 
   // ============================================================
@@ -270,4 +295,76 @@ describe('NavigationOverlay', () => {
       expect(screen.getByTestId('status')).toHaveTextContent('active');
     });
   });
+
+  // ============================================================
+  // renderView support
+  // ============================================================
+
+  describe('renderView support', () => {
+    it('should use renderView when both renderView and view are provided', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'drawer',
+            view: 'contact-detail',
+            renderView: (record, viewName) => (
+              <div data-testid="custom-view">
+                <span data-testid="view-name">{viewName}</span>
+                <span data-testid="record-name">{String(record.name)}</span>
+              </div>
+            ),
+          })}
+        />
+      );
+      expect(screen.getByTestId('custom-view')).toBeInTheDocument();
+      expect(screen.getByTestId('view-name')).toHaveTextContent('contact-detail');
+      expect(screen.getByTestId('record-name')).toHaveTextContent('Test Record');
+      // Children should NOT be rendered
+      expect(screen.queryByTestId('record-content')).not.toBeInTheDocument();
+    });
+
+    it('should fallback to children when renderView is provided but view is not', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'drawer',
+            renderView: (_record, _viewName) => (
+              <div data-testid="custom-view">Should not appear</div>
+            ),
+          })}
+        />
+      );
+      // Children should be rendered since view is undefined
+      expect(screen.getByTestId('record-content')).toBeInTheDocument();
+      expect(screen.queryByTestId('custom-view')).not.toBeInTheDocument();
+    });
+
+    it('should fallback to children when view is provided but renderView is not', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'drawer',
+            view: 'contact-detail',
+          })}
+        />
+      );
+      // Children should be rendered since renderView is undefined
+      expect(screen.getByTestId('record-content')).toBeInTheDocument();
+    });
+
+    it('should use renderView in modal mode', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'modal',
+            view: 'edit-form',
+            renderView: (record, viewName) => (
+              <div data-testid="modal-custom-view">{viewName}: {String(record.name)}</div>
+            ),
+          })}
+        />
+      );
+      expect(screen.getByTestId('modal-custom-view')).toHaveTextContent('edit-form: Test Record');
+    });
+  });
 });

package/src/__tests__/use-config-draft.test.tsx

@@ -0,0 +1,295 @@
+/**
+ * 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.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useConfigDraft } from '../hooks/use-config-draft';
+
+describe('useConfigDraft', () => {
+  const source = { name: 'Test', columns: 3, gap: 4, enabled: true };
+
+  it('should initialize draft from source', () => {
+    const { result } = renderHook(() => useConfigDraft(source));
+    expect(result.current.draft).toEqual(source);
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it('should start dirty in create mode', () => {
+    const { result } = renderHook(() =>
+      useConfigDraft(source, { mode: 'create' }),
+    );
+    expect(result.current.isDirty).toBe(true);
+  });
+
+  it('should start clean in edit mode', () => {
+    const { result } = renderHook(() =>
+      useConfigDraft(source, { mode: 'edit' }),
+    );
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it('should update a single field and mark dirty', () => {
+    const { result } = renderHook(() => useConfigDraft(source));
+    act(() => {
+      result.current.updateField('columns', 6);
+    });
+    expect(result.current.draft.columns).toBe(6);
+    expect(result.current.isDirty).toBe(true);
+  });
+
+  it('should preserve other fields when updating one', () => {
+    const { result } = renderHook(() => useConfigDraft(source));
+    act(() => {
+      result.current.updateField('gap', 8);
+    });
+    expect(result.current.draft.name).toBe('Test');
+    expect(result.current.draft.columns).toBe(3);
+    expect(result.current.draft.gap).toBe(8);
+  });
+
+  it('should discard changes and revert to source', () => {
+    const { result } = renderHook(() => useConfigDraft(source));
+    act(() => {
+      result.current.updateField('name', 'Modified');
+      result.current.updateField('columns', 12);
+    });
+    expect(result.current.isDirty).toBe(true);
+
+    act(() => {
+      result.current.discard();
+    });
+    expect(result.current.draft).toEqual(source);
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it('should call onUpdate callback when field changes', () => {
+    const onUpdate = vi.fn();
+    const { result } = renderHook(() =>
+      useConfigDraft(source, { onUpdate }),
+    );
+    act(() => {
+      result.current.updateField('gap', 10);
+    });
+    expect(onUpdate).toHaveBeenCalledWith('gap', 10);
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+  });
+
+  it('should reset draft when source changes', () => {
+    const source1 = { name: 'A', value: 1 };
+    const source2 = { name: 'B', value: 2 };
+
+    const { result, rerender } = renderHook(
+      ({ src }) => useConfigDraft(src),
+      { initialProps: { src: source1 } },
+    );
+
+    act(() => {
+      result.current.updateField('name', 'Modified');
+    });
+    expect(result.current.isDirty).toBe(true);
+
+    rerender({ src: source2 });
+    expect(result.current.draft).toEqual(source2);
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it('should handle setDraft for advanced use cases', () => {
+    const { result } = renderHook(() => useConfigDraft(source));
+    act(() => {
+      result.current.setDraft({ ...source, name: 'Advanced', extra: 42 });
+    });
+    expect(result.current.draft.name).toBe('Advanced');
+    expect(result.current.draft.extra).toBe(42);
+  });
+
+  it('should not share reference with source', () => {
+    const mutableSource = { name: 'Original' };
+    const { result } = renderHook(() => useConfigDraft(mutableSource));
+    expect(result.current.draft).not.toBe(mutableSource);
+    expect(result.current.draft).toEqual(mutableSource);
+  });
+
+  // ── Undo / Redo ──────────────────────────────────────────────
+
+  describe('undo/redo', () => {
+    it('should start with canUndo=false and canRedo=false', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      expect(result.current.canUndo).toBe(false);
+      expect(result.current.canRedo).toBe(false);
+    });
+
+    it('should enable undo after a field update', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.updateField('name', 'Changed');
+      });
+      expect(result.current.canUndo).toBe(true);
+      expect(result.current.canRedo).toBe(false);
+    });
+
+    it('should undo to previous state', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.updateField('name', 'Changed');
+      });
+      expect(result.current.draft.name).toBe('Changed');
+
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft.name).toBe('Test');
+      expect(result.current.canUndo).toBe(false);
+      expect(result.current.canRedo).toBe(true);
+    });
+
+    it('should redo after undo', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.updateField('name', 'Changed');
+      });
+      act(() => {
+        result.current.undo();
+      });
+      act(() => {
+        result.current.redo();
+      });
+      expect(result.current.draft.name).toBe('Changed');
+      expect(result.current.canUndo).toBe(true);
+      expect(result.current.canRedo).toBe(false);
+    });
+
+    it('should clear redo stack when a new change is made after undo', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.updateField('name', 'First');
+      });
+      act(() => {
+        result.current.updateField('name', 'Second');
+      });
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.canRedo).toBe(true);
+
+      act(() => {
+        result.current.updateField('name', 'Third');
+      });
+      expect(result.current.canRedo).toBe(false);
+      expect(result.current.draft.name).toBe('Third');
+    });
+
+    it('should support multiple undo steps', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.updateField('name', 'A');
+      });
+      act(() => {
+        result.current.updateField('name', 'B');
+      });
+      act(() => {
+        result.current.updateField('name', 'C');
+      });
+      expect(result.current.draft.name).toBe('C');
+
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft.name).toBe('B');
+
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft.name).toBe('A');
+
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft.name).toBe('Test');
+      expect(result.current.canUndo).toBe(false);
+    });
+
+    it('should do nothing when undoing with empty history', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft).toEqual(source);
+    });
+
+    it('should do nothing when redoing with empty future', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.redo();
+      });
+      expect(result.current.draft).toEqual(source);
+    });
+
+    it('should clear history on discard', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.updateField('name', 'Changed');
+      });
+      expect(result.current.canUndo).toBe(true);
+
+      act(() => {
+        result.current.discard();
+      });
+      expect(result.current.canUndo).toBe(false);
+      expect(result.current.canRedo).toBe(false);
+    });
+
+    it('should clear history when source changes', () => {
+      const source1 = { name: 'A', value: 1 };
+      const source2 = { name: 'B', value: 2 };
+      const { result, rerender } = renderHook(
+        ({ src }) => useConfigDraft(src),
+        { initialProps: { src: source1 } },
+      );
+      act(() => {
+        result.current.updateField('name', 'Modified');
+      });
+      expect(result.current.canUndo).toBe(true);
+
+      rerender({ src: source2 });
+      expect(result.current.canUndo).toBe(false);
+      expect(result.current.canRedo).toBe(false);
+    });
+
+    it('should respect maxHistory limit', () => {
+      const { result } = renderHook(() =>
+        useConfigDraft(source, { maxHistory: 3 }),
+      );
+      act(() => {
+        result.current.updateField('name', 'A');
+      });
+      act(() => {
+        result.current.updateField('name', 'B');
+      });
+      act(() => {
+        result.current.updateField('name', 'C');
+      });
+      act(() => {
+        result.current.updateField('name', 'D');
+      });
+      // maxHistory=3, so only 3 undo steps (not 4)
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft.name).toBe('C');
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft.name).toBe('B');
+      act(() => {
+        result.current.undo();
+      });
+      // Should stop here — oldest entry was trimmed
+      expect(result.current.canUndo).toBe(false);
+    });
+  });
+});