@object-ui/components 3.0.3 → 3.1.1

package/src/__tests__/filter-builder.test.tsx

@@ -0,0 +1,409 @@
+/**
+ * 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, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { FilterBuilder } from '../custom/filter-builder';
+
+// Mock crypto.randomUUID for deterministic test IDs
+let uuidCounter = 0;
+beforeEach(() => {
+  uuidCounter = 0;
+  vi.spyOn(crypto, 'randomUUID').mockImplementation(
+    () => `test-uuid-${++uuidCounter}` as `${string}-${string}-${string}-${string}-${string}`,
+  );
+});
+
+const selectFields = [
+  {
+    value: 'status',
+    label: 'Status',
+    type: 'select',
+    options: [
+      { value: 'active', label: 'Active' },
+      { value: 'inactive', label: 'Inactive' },
+      { value: 'pending', label: 'Pending' },
+    ],
+  },
+  {
+    value: 'name',
+    label: 'Name',
+    type: 'text',
+  },
+];
+
+const lookupFields = [
+  {
+    value: 'account',
+    label: 'Account',
+    type: 'lookup',
+    options: [
+      { value: 'acme', label: 'Acme Corp' },
+      { value: 'globex', label: 'Globex' },
+      { value: 'soylent', label: 'Soylent Corp' },
+    ],
+  },
+];
+
+describe('FilterBuilder', () => {
+  describe('lookup field type', () => {
+    it('renders without error for lookup fields', () => {
+      const onChange = vi.fn();
+      const { container } = render(
+        <FilterBuilder
+          fields={lookupFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'account', operator: 'equals', value: '' },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      // Should render the filter condition row
+      expect(container.querySelector('.space-y-3')).toBeInTheDocument();
+    });
+
+    it('renders multi-select checkboxes for lookup field with "in" operator', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={lookupFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'account', operator: 'in', value: [] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      // Should render checkboxes for lookup options
+      const checkboxes = screen.getAllByRole('checkbox');
+      expect(checkboxes.length).toBe(3);
+      expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+      expect(screen.getByText('Globex')).toBeInTheDocument();
+      expect(screen.getByText('Soylent Corp')).toBeInTheDocument();
+    });
+  });
+
+  describe('multi-select with in/notIn operator', () => {
+    it('renders checkbox list for select field with "in" operator', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={selectFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'status', operator: 'in', value: [] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      // Should render checkboxes for all options
+      const checkboxes = screen.getAllByRole('checkbox');
+      expect(checkboxes.length).toBe(3);
+      expect(screen.getByText('Active')).toBeInTheDocument();
+      expect(screen.getByText('Inactive')).toBeInTheDocument();
+      expect(screen.getByText('Pending')).toBeInTheDocument();
+    });
+
+    it('checks selected items in multi-select', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={selectFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'status', operator: 'in', value: ['active', 'pending'] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const checkboxes = screen.getAllByRole('checkbox') as HTMLInputElement[];
+      // Active and Pending should be checked
+      expect(checkboxes[0]).toBeChecked(); // Active
+      expect(checkboxes[1]).not.toBeChecked(); // Inactive
+      expect(checkboxes[2]).toBeChecked(); // Pending
+    });
+
+    it('adds value when checkbox is checked', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={selectFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'status', operator: 'in', value: ['active'] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      // Click the unchecked Inactive checkbox
+      const checkboxes = screen.getAllByRole('checkbox');
+      fireEvent.click(checkboxes[1]); // Inactive
+
+      expect(onChange).toHaveBeenCalled();
+      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+      const condition = lastCall.conditions[0];
+      expect(condition.value).toEqual(['active', 'inactive']);
+    });
+
+    it('removes value when checkbox is unchecked', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={selectFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'status', operator: 'in', value: ['active', 'inactive'] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      // Click the checked Active checkbox
+      const checkboxes = screen.getAllByRole('checkbox');
+      fireEvent.click(checkboxes[0]); // Active
+
+      expect(onChange).toHaveBeenCalled();
+      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+      const condition = lastCall.conditions[0];
+      expect(condition.value).toEqual(['inactive']);
+    });
+
+    it('renders checkbox list for notIn operator', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={selectFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'status', operator: 'notIn', value: [] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const checkboxes = screen.getAllByRole('checkbox');
+      expect(checkboxes.length).toBe(3);
+    });
+
+    it('does not render checkboxes for equals operator (single select)', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={selectFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'status', operator: 'equals', value: '' },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      // Should NOT render checkboxes (single select via Select component)
+      expect(screen.queryAllByRole('checkbox').length).toBe(0);
+    });
+  });
+
+  describe('currency/percent/rating fields use number input', () => {
+    const numericFields = [
+      { value: 'amount', label: 'Amount', type: 'currency' },
+      { value: 'rate', label: 'Rate', type: 'percent' },
+      { value: 'score', label: 'Score', type: 'rating' },
+    ];
+
+    it('renders number input for currency field', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={numericFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'amount', operator: 'equals', value: '' },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText('Value') as HTMLInputElement;
+      expect(input.type).toBe('number');
+    });
+
+    it('renders number input for percent field', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={numericFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'rate', operator: 'equals', value: '' },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText('Value') as HTMLInputElement;
+      expect(input.type).toBe('number');
+    });
+  });
+
+  describe('datetime/time fields use appropriate input types', () => {
+    const dateTimeFields = [
+      { value: 'created_at', label: 'Created At', type: 'datetime' },
+      { value: 'start_time', label: 'Start Time', type: 'time' },
+    ];
+
+    it('renders datetime-local input for datetime field', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={dateTimeFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'created_at', operator: 'equals', value: '' },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText('Value') as HTMLInputElement;
+      expect(input.type).toBe('datetime-local');
+    });
+
+    it('renders time input for time field', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={dateTimeFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'start_time', operator: 'equals', value: '' },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText('Value') as HTMLInputElement;
+      expect(input.type).toBe('time');
+    });
+  });
+
+  describe('status field uses select operators and dropdown', () => {
+    const statusFields = [
+      {
+        value: 'pipeline',
+        label: 'Pipeline Stage',
+        type: 'status',
+        options: [
+          { value: 'lead', label: 'Lead' },
+          { value: 'qualified', label: 'Qualified' },
+          { value: 'won', label: 'Won' },
+        ],
+      },
+    ];
+
+    it('renders multi-select checkboxes for status field with "in" operator', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={statusFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'pipeline', operator: 'in', value: [] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const checkboxes = screen.getAllByRole('checkbox');
+      expect(checkboxes.length).toBe(3);
+      expect(screen.getByText('Lead')).toBeInTheDocument();
+      expect(screen.getByText('Qualified')).toBeInTheDocument();
+      expect(screen.getByText('Won')).toBeInTheDocument();
+    });
+  });
+
+  describe('user/owner field uses lookup operators and dropdown', () => {
+    const userFields = [
+      {
+        value: 'assigned_to',
+        label: 'Assigned To',
+        type: 'user',
+        options: [
+          { value: 'user1', label: 'Alice' },
+          { value: 'user2', label: 'Bob' },
+        ],
+      },
+    ];
+
+    it('renders multi-select checkboxes for user field with "in" operator', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={userFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'assigned_to', operator: 'in', value: [] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const checkboxes = screen.getAllByRole('checkbox');
+      expect(checkboxes.length).toBe(2);
+      expect(screen.getByText('Alice')).toBeInTheDocument();
+      expect(screen.getByText('Bob')).toBeInTheDocument();
+    });
+  });
+});

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');
+    });
+  });
 });