@object-ui/plugin-list 3.0.3 → 3.1.0

package/src/__tests__/ListViewGroupingPropagation.test.tsx

@@ -0,0 +1,250 @@
+/**
+ * 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 React from 'react';
+
+// Capture the schema prop passed to SchemaRenderer
+let capturedSchema: any = null;
+
+vi.mock('@object-ui/react', () => ({
+  SchemaRenderer: (props: any) => {
+    capturedSchema = props.schema;
+    return <div data-testid="schema-renderer" data-schema-type={props.schema?.type}>{props.schema?.type}</div>;
+  },
+  useNavigationOverlay: () => ({
+    isOverlay: false,
+    handleClick: vi.fn(),
+    selectedRecord: null,
+    isOpen: false,
+    close: vi.fn(),
+    setIsOpen: vi.fn(),
+    mode: 'page' as const,
+    width: undefined,
+    view: undefined,
+    open: vi.fn(),
+  }),
+  useDensityMode: () => ['comfortable', vi.fn()] as const,
+  SchemaRendererProvider: ({ children }: any) => <div>{children}</div>,
+}));
+
+vi.mock('@object-ui/components', () => ({
+  cn: (...args: any[]) => args.filter(Boolean).join(' '),
+  Input: (props: any) => <input {...props} />,
+  Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
+  Badge: ({ children, ...props }: any) => <span {...props}>{children}</span>,
+  Popover: ({ children }: any) => <div>{children}</div>,
+  PopoverTrigger: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  PopoverContent: ({ children }: any) => <div>{children}</div>,
+  FilterBuilder: () => null,
+  SortBuilder: () => null,
+  NavigationOverlay: () => null,
+}));
+
+vi.mock('@object-ui/mobile', () => ({
+  usePullToRefresh: () => ({ pullRef: { current: null } }),
+}));
+
+vi.mock('@object-ui/core', async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    ExpressionEvaluator: {
+      evaluate: vi.fn((expr: string) => expr),
+    },
+  };
+});
+
+vi.mock('@object-ui/i18n', () => ({
+  useObjectTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback || key,
+  }),
+}));
+
+vi.mock('../ViewSwitcher', () => ({
+  ViewSwitcher: ({ currentView, onViewChange }: any) => (
+    <div data-testid="view-switcher">
+      <button aria-label="Grid" onClick={() => onViewChange('grid')}>Grid</button>
+      <button aria-label="Kanban" onClick={() => onViewChange('kanban')}>Kanban</button>
+      <button aria-label="Gallery" onClick={() => onViewChange('gallery')}>Gallery</button>
+    </div>
+  ),
+  ViewType: {},
+}));
+
+vi.mock('../UserFilters', () => ({
+  UserFilters: () => null,
+}));
+
+vi.mock('lucide-react', () => ({
+  Search: () => <span>Search</span>,
+  SlidersHorizontal: () => <span>Sliders</span>,
+  ArrowUpDown: () => <span>Sort</span>,
+  X: () => <span>X</span>,
+  EyeOff: () => <span>EyeOff</span>,
+  Group: () => <span>Group</span>,
+  Paintbrush: () => <span>Color</span>,
+  Ruler: () => <span>Ruler</span>,
+  Inbox: () => <span>Inbox</span>,
+  Download: () => <span>Download</span>,
+  AlignJustify: () => <span>Density</span>,
+  Share2: () => <span>Share</span>,
+  Printer: () => <span>Print</span>,
+  Plus: () => <span>Plus</span>,
+  icons: {},
+}));
+
+import { ListView } from '../ListView';
+
+const groupingConfig = {
+  fields: [{ field: 'category', order: 'asc' as const, collapsed: false }],
+};
+
+const testData = [
+  { id: '1', name: 'Product A', category: 'Electronics' },
+  { id: '2', name: 'Product B', category: 'Tools' },
+];
+
+describe('ListView grouping config propagation', () => {
+  beforeEach(() => {
+    capturedSchema = null;
+  });
+
+  it('passes grouping config to grid view schema', () => {
+    render(
+      <ListView
+        schema={{
+          type: 'list-view',
+          objectName: 'products',
+          viewType: 'grid',
+          fields: ['name', 'category'],
+          grouping: groupingConfig,
+          data: testData,
+        }}
+      />,
+    );
+
+    expect(capturedSchema).toBeDefined();
+    expect(capturedSchema.type).toBe('object-grid');
+    expect(capturedSchema.grouping).toEqual(groupingConfig);
+  });
+
+  it('passes grouping config to kanban view schema', () => {
+    render(
+      <ListView
+        schema={{
+          type: 'list-view',
+          objectName: 'products',
+          viewType: 'kanban',
+          fields: ['name', 'category'],
+          grouping: groupingConfig,
+          data: testData,
+          kanban: { groupField: 'status' },
+        }}
+        showViewSwitcher={true}
+      />,
+    );
+
+    // Switch to kanban view
+    const kanbanBtn = screen.getByLabelText('Kanban');
+    fireEvent.click(kanbanBtn);
+
+    expect(capturedSchema).toBeDefined();
+    expect(capturedSchema.type).toBe('object-kanban');
+    expect(capturedSchema.grouping).toEqual(groupingConfig);
+  });
+
+  it('passes grouping config to gallery view schema', () => {
+    render(
+      <ListView
+        schema={{
+          type: 'list-view',
+          objectName: 'products',
+          viewType: 'gallery',
+          fields: ['name', 'category'],
+          grouping: groupingConfig,
+          data: testData,
+        }}
+        showViewSwitcher={true}
+      />,
+    );
+
+    // Switch to gallery view
+    const galleryBtn = screen.getByLabelText('Gallery');
+    fireEvent.click(galleryBtn);
+
+    expect(capturedSchema).toBeDefined();
+    expect(capturedSchema.type).toBe('object-gallery');
+    expect(capturedSchema.grouping).toEqual(groupingConfig);
+  });
+
+  it('updates grid schema when user toggles grouping via toolbar', async () => {
+    render(
+      <ListView
+        schema={{
+          type: 'list-view',
+          objectName: 'products',
+          viewType: 'grid',
+          fields: ['name', 'category'],
+          data: testData,
+        }}
+      />,
+    );
+
+    // Initially no grouping
+    expect(capturedSchema).toBeDefined();
+    expect(capturedSchema.type).toBe('object-grid');
+    expect(capturedSchema.grouping).toBeUndefined();
+
+    // Open Group popover
+    const groupButton = screen.getByRole('button', { name: /group/i });
+    fireEvent.click(groupButton);
+
+    // Select the 'category' field checkbox in the group field list
+    const fieldList = screen.getByTestId('group-field-list');
+    const checkboxes = fieldList.querySelectorAll('input[type="checkbox"]');
+    // Find the checkbox for 'category'
+    const categoryCheckbox = Array.from(checkboxes).find(cb => {
+      const label = cb.closest('label');
+      return label?.textContent?.includes('category');
+    });
+    expect(categoryCheckbox).toBeDefined();
+    fireEvent.click(categoryCheckbox!);
+
+    // Schema should now include grouping config
+    expect(capturedSchema.grouping).toBeDefined();
+    expect(capturedSchema.grouping.fields).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ field: 'category' }),
+      ]),
+    );
+
+    // Toggle off — click the checkbox again
+    fireEvent.click(categoryCheckbox!);
+    expect(capturedSchema.grouping).toBeUndefined();
+  });
+
+  it('does not pass grouping when no grouping config exists', () => {
+    render(
+      <ListView
+        schema={{
+          type: 'list-view',
+          objectName: 'products',
+          viewType: 'grid',
+          fields: ['name', 'category'],
+          data: testData,
+        }}
+      />,
+    );
+
+    expect(capturedSchema).toBeDefined();
+    expect(capturedSchema.type).toBe('object-grid');
+    expect(capturedSchema.grouping).toBeUndefined();
+  });
+});

package/src/__tests__/ObjectGallery.test.tsx

@@ -0,0 +1,208 @@
+/**
+ * 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 { render, screen, fireEvent } from '@testing-library/react';
+import { ObjectGallery } from '../ObjectGallery';
+
+// Mock useDataScope, useSchemaContext, and useNavigationOverlay
+const mockHandleClick = vi.fn();
+const mockNavigationOverlay = {
+  isOverlay: false,
+  handleClick: mockHandleClick,
+  selectedRecord: null,
+  isOpen: false,
+  close: vi.fn(),
+  setIsOpen: vi.fn(),
+  mode: 'page' as const,
+  width: undefined,
+  view: undefined,
+  open: vi.fn(),
+};
+
+vi.mock('@object-ui/react', () => {
+  const React = require('react');
+  return {
+    useDataScope: () => undefined,
+    SchemaRendererContext: React.createContext(null),
+    useNavigationOverlay: () => mockNavigationOverlay,
+  };
+});
+
+vi.mock('@object-ui/components', () => ({
+  cn: (...args: any[]) => args.filter(Boolean).join(' '),
+  Card: ({ children, onClick, ...props }: any) => (
+    <div data-testid="gallery-card" onClick={onClick} {...props}>{children}</div>
+  ),
+  CardContent: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  NavigationOverlay: ({ children, selectedRecord }: any) => (
+    selectedRecord ? <div data-testid="navigation-overlay">{children(selectedRecord)}</div> : null
+  ),
+}));
+
+vi.mock('@object-ui/core', () => ({
+  ComponentRegistry: { register: vi.fn() },
+}));
+
+const mockItems = [
+  { id: '1', name: 'Item 1', image: 'https://example.com/1.jpg' },
+  { id: '2', name: 'Item 2', image: 'https://example.com/2.jpg' },
+];
+
+describe('ObjectGallery', () => {
+  it('renders gallery items', () => {
+    const schema = { objectName: 'products' };
+    render(<ObjectGallery schema={schema} data={mockItems} />);
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+  });
+
+  it('calls navigation.handleClick on card click', () => {
+    const schema = {
+      objectName: 'products',
+      navigation: { mode: 'drawer' as const },
+    };
+    render(<ObjectGallery schema={schema} data={mockItems} />);
+
+    const cards = screen.getAllByTestId('gallery-card');
+    fireEvent.click(cards[0]);
+
+    expect(mockHandleClick).toHaveBeenCalledWith(mockItems[0]);
+  });
+
+  it('renders with cursor-pointer when navigation is configured', () => {
+    const schema = {
+      objectName: 'products',
+      navigation: { mode: 'drawer' as const },
+    };
+    render(<ObjectGallery schema={schema} data={mockItems} />);
+
+    const cards = screen.getAllByTestId('gallery-card');
+    expect(cards.length).toBe(2);
+  });
+
+  it('renders with cursor-pointer when onCardClick is provided', () => {
+    const onCardClick = vi.fn();
+    const schema = { objectName: 'products' };
+    render(<ObjectGallery schema={schema} data={mockItems} onCardClick={onCardClick} />);
+
+    const cards = screen.getAllByTestId('gallery-card');
+    fireEvent.click(cards[0]);
+
+    expect(mockHandleClick).toHaveBeenCalled();
+  });
+
+  // ============================
+  // Spec GalleryConfig integration
+  // ============================
+  describe('Spec GalleryConfig', () => {
+    it('schema.gallery.coverField drives cover image', () => {
+      const data = [
+        { id: '1', name: 'Photo A', photo: 'https://example.com/a.jpg' },
+      ];
+      const schema = {
+        objectName: 'albums',
+        gallery: { coverField: 'photo' },
+      };
+      render(<ObjectGallery schema={schema} data={data} />);
+      const img = screen.getByRole('img');
+      expect(img).toHaveAttribute('src', 'https://example.com/a.jpg');
+    });
+
+    it('schema.gallery.cardSize controls grid layout class', () => {
+      const data = [{ id: '1', name: 'Item', image: 'https://example.com/1.jpg' }];
+
+      // small cards → more columns
+      const { container: c1 } = render(
+        <ObjectGallery schema={{ objectName: 'a', gallery: { cardSize: 'small' } }} data={data} />,
+      );
+      expect(c1.querySelector('[role="list"]')?.className).toContain('grid-cols-2');
+
+      // large cards → fewer columns
+      const { container: c2 } = render(
+        <ObjectGallery schema={{ objectName: 'a', gallery: { cardSize: 'large' } }} data={data} />,
+      );
+      expect(c2.querySelector('[role="list"]')?.className).toContain('lg:grid-cols-3');
+    });
+
+    it('schema.gallery.coverFit applies object-contain class', () => {
+      const data = [{ id: '1', name: 'Item', thumb: 'https://example.com/1.jpg' }];
+      const schema = {
+        objectName: 'items',
+        gallery: { coverField: 'thumb', coverFit: 'contain' as const },
+      };
+      render(<ObjectGallery schema={schema} data={data} />);
+      const img = screen.getByRole('img');
+      expect(img.className).toContain('object-contain');
+    });
+
+    it('schema.gallery.visibleFields shows additional fields on card', () => {
+      const data = [
+        { id: '1', name: 'Item 1', status: 'active', category: 'books' },
+      ];
+      const schema = {
+        objectName: 'items',
+        gallery: { visibleFields: ['status', 'category'] },
+      };
+      render(<ObjectGallery schema={schema} data={data} />);
+      expect(screen.getByText('active')).toBeInTheDocument();
+      expect(screen.getByText('books')).toBeInTheDocument();
+    });
+
+    it('schema.gallery.titleField overrides default title', () => {
+      const data = [
+        { id: '1', name: 'Default Name', displayName: 'Custom Title' },
+      ];
+      const schema = {
+        objectName: 'items',
+        gallery: { titleField: 'displayName' },
+      };
+      render(<ObjectGallery schema={schema} data={data} />);
+      expect(screen.getByText('Custom Title')).toBeInTheDocument();
+    });
+
+    it('falls back to legacy imageField when gallery.coverField is not set', () => {
+      const data = [
+        { id: '1', name: 'Item', legacyImg: 'https://example.com/legacy.jpg' },
+      ];
+      const schema = {
+        objectName: 'items',
+        imageField: 'legacyImg',
+      };
+      render(<ObjectGallery schema={schema} data={data} />);
+      const img = screen.getByRole('img');
+      expect(img).toHaveAttribute('src', 'https://example.com/legacy.jpg');
+    });
+
+    it('falls back to legacy titleField when gallery.titleField is not set', () => {
+      const data = [
+        { id: '1', name: 'Default', label: 'Legacy Title' },
+      ];
+      const schema = {
+        objectName: 'items',
+        titleField: 'label',
+      };
+      render(<ObjectGallery schema={schema} data={data} />);
+      expect(screen.getByText('Legacy Title')).toBeInTheDocument();
+    });
+
+    it('spec gallery.coverField takes priority over legacy imageField', () => {
+      const data = [
+        { id: '1', name: 'Item', photo: 'https://spec.com/a.jpg', oldImg: 'https://old.com/b.jpg' },
+      ];
+      const schema = {
+        objectName: 'items',
+        imageField: 'oldImg',
+        gallery: { coverField: 'photo' },
+      };
+      render(<ObjectGallery schema={schema} data={data} />);
+      const img = screen.getByRole('img');
+      expect(img).toHaveAttribute('src', 'https://spec.com/a.jpg');
+    });
+  });
+});

package/src/__tests__/TabBar.test.tsx

@@ -0,0 +1,199 @@
+/**
+ * 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 { render, screen, fireEvent } from '@testing-library/react';
+import { TabBar } from '../components/TabBar';
+import type { ViewTab } from '../components/TabBar';
+
+describe('TabBar', () => {
+  const baseTabs: ViewTab[] = [
+    { name: 'all', label: 'All Records', isDefault: true },
+    { name: 'active', label: 'Active' },
+    { name: 'archived', label: 'Archived' },
+  ];
+
+  it('should render tab bar with tabs', () => {
+    render(<TabBar tabs={baseTabs} />);
+    expect(screen.getByTestId('view-tabs')).toBeInTheDocument();
+    expect(screen.getByTestId('view-tab-all')).toBeInTheDocument();
+    expect(screen.getByTestId('view-tab-active')).toBeInTheDocument();
+    expect(screen.getByTestId('view-tab-archived')).toBeInTheDocument();
+  });
+
+  it('should render tab labels', () => {
+    render(<TabBar tabs={baseTabs} />);
+    expect(screen.getByText('All Records')).toBeInTheDocument();
+    expect(screen.getByText('Active')).toBeInTheDocument();
+    expect(screen.getByText('Archived')).toBeInTheDocument();
+  });
+
+  it('should not render when tabs array is empty', () => {
+    const { container } = render(<TabBar tabs={[]} />);
+    expect(container.innerHTML).toBe('');
+    expect(screen.queryByTestId('view-tabs')).not.toBeInTheDocument();
+  });
+
+  // isDefault tab should be selected by default
+  it('should select isDefault tab initially', () => {
+    render(<TabBar tabs={baseTabs} />);
+    const defaultTab = screen.getByTestId('view-tab-all');
+    expect(defaultTab).toHaveAttribute('aria-selected', 'true');
+    const otherTab = screen.getByTestId('view-tab-active');
+    expect(otherTab).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('should select first tab when no isDefault is set', () => {
+    const tabs: ViewTab[] = [
+      { name: 'alpha', label: 'Alpha' },
+      { name: 'beta', label: 'Beta' },
+    ];
+    render(<TabBar tabs={tabs} />);
+    expect(screen.getByTestId('view-tab-alpha')).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByTestId('view-tab-beta')).toHaveAttribute('aria-selected', 'false');
+  });
+
+  // Tab click changes active tab
+  it('should switch active tab on click', () => {
+    render(<TabBar tabs={baseTabs} />);
+    const activeTab = screen.getByTestId('view-tab-active');
+    fireEvent.click(activeTab);
+    expect(activeTab).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByTestId('view-tab-all')).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('should call onTabChange callback on click', () => {
+    const onTabChange = vi.fn();
+    render(<TabBar tabs={baseTabs} onTabChange={onTabChange} />);
+    fireEvent.click(screen.getByTestId('view-tab-active'));
+    expect(onTabChange).toHaveBeenCalledTimes(1);
+    expect(onTabChange).toHaveBeenCalledWith(expect.objectContaining({ name: 'active', label: 'Active' }));
+  });
+
+  // Pinned tabs always visible
+  it('should always show pinned tabs even if visible is false', () => {
+    const tabs: ViewTab[] = [
+      { name: 'all', label: 'All', isDefault: true },
+      { name: 'pinned-tab', label: 'Pinned', pinned: true, visible: 'false' },
+      { name: 'hidden', label: 'Hidden', visible: 'false' },
+    ];
+    render(<TabBar tabs={tabs} />);
+    expect(screen.getByTestId('view-tab-pinned-tab')).toBeInTheDocument();
+    expect(screen.queryByTestId('view-tab-hidden')).not.toBeInTheDocument();
+  });
+
+  // Hidden tabs filtered out
+  it('should filter out hidden tabs (visible: "false")', () => {
+    const tabs: ViewTab[] = [
+      { name: 'all', label: 'All Records' },
+      { name: 'hidden', label: 'Hidden Tab', visible: 'false' },
+    ];
+    render(<TabBar tabs={tabs} />);
+    expect(screen.getByText('All Records')).toBeInTheDocument();
+    expect(screen.queryByText('Hidden Tab')).not.toBeInTheDocument();
+  });
+
+  it('should filter out tabs with visible: boolean false', () => {
+    const tabs: ViewTab[] = [
+      { name: 'all', label: 'All Records' },
+      { name: 'hidden', label: 'Hidden Tab', visible: false as any },
+    ];
+    render(<TabBar tabs={tabs} />);
+    expect(screen.getByText('All Records')).toBeInTheDocument();
+    expect(screen.queryByText('Hidden Tab')).not.toBeInTheDocument();
+  });
+
+  // Order sorting
+  it('should sort tabs by order property', () => {
+    const tabs: ViewTab[] = [
+      { name: 'c', label: 'Third', order: 3 },
+      { name: 'a', label: 'First', order: 1 },
+      { name: 'b', label: 'Second', order: 2 },
+    ];
+    render(<TabBar tabs={tabs} />);
+    const tabContainer = screen.getByTestId('view-tabs');
+    const buttons = tabContainer.querySelectorAll('button');
+    expect(buttons[0]).toHaveTextContent('First');
+    expect(buttons[1]).toHaveTextContent('Second');
+    expect(buttons[2]).toHaveTextContent('Third');
+  });
+
+  // Icon rendering
+  it('should render Lucide icon when icon prop is provided', () => {
+    const tabs: ViewTab[] = [
+      { name: 'starred', label: 'Starred', icon: 'star' },
+    ];
+    render(<TabBar tabs={tabs} />);
+    const tab = screen.getByTestId('view-tab-starred');
+    // Lucide icons render as SVG elements
+    const svg = tab.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('should handle kebab-case icon names', () => {
+    const tabs: ViewTab[] = [
+      { name: 'test', label: 'Test', icon: 'arrow-right' },
+    ];
+    render(<TabBar tabs={tabs} />);
+    const tab = screen.getByTestId('view-tab-test');
+    const svg = tab.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('should not render icon when icon is not provided', () => {
+    const tabs: ViewTab[] = [
+      { name: 'noicon', label: 'No Icon' },
+    ];
+    render(<TabBar tabs={tabs} />);
+    const tab = screen.getByTestId('view-tab-noicon');
+    const svg = tab.querySelector('svg');
+    expect(svg).toBeFalsy();
+  });
+
+  // Controlled activeTab
+  it('should respect controlled activeTab prop', () => {
+    render(<TabBar tabs={baseTabs} activeTab="archived" />);
+    expect(screen.getByTestId('view-tab-archived')).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByTestId('view-tab-all')).toHaveAttribute('aria-selected', 'false');
+  });
+
+  // Tab role attributes
+  it('should have proper ARIA attributes', () => {
+    render(<TabBar tabs={baseTabs} />);
+    const tabBar = screen.getByTestId('view-tabs');
+    expect(tabBar).toHaveAttribute('role', 'tablist');
+    const tab = screen.getByTestId('view-tab-all');
+    expect(tab).toHaveAttribute('role', 'tab');
+  });
+
+  // Tab with filter config
+  it('should pass tab with filter to onTabChange', () => {
+    const onTabChange = vi.fn();
+    const tabs: ViewTab[] = [
+      { name: 'all', label: 'All', isDefault: true },
+      {
+        name: 'active',
+        label: 'Active',
+        filter: { logic: 'and', conditions: [{ field: 'status', operator: 'eq', value: 'active' }] },
+      },
+    ];
+    render(<TabBar tabs={tabs} onTabChange={onTabChange} />);
+    fireEvent.click(screen.getByTestId('view-tab-active'));
+    expect(onTabChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'active',
+        filter: expect.objectContaining({
+          logic: 'and',
+          conditions: expect.arrayContaining([
+            expect.objectContaining({ field: 'status' }),
+          ]),
+        }),
+      }),
+    );
+  });
+});