@object-ui/plugin-list 3.1.5 → 3.3.1

package/src/__tests__/ListViewGroupingPropagation.test.tsx

@@ -1,250 +0,0 @@
-/**
- * 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__/ListViewPersistence.test.tsx

@@ -1,129 +0,0 @@
-/**
- * ObjectUI -- Persistence Tests
- */
-
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ListView } from '../ListView';
-import type { ListViewSchema } from '@object-ui/types';
-import { SchemaRendererProvider } from '@object-ui/react';
-
-// Mock localStorage
-const localStorageMock = (() => {
-  let store: Record<string, string> = {};
-  return {
-    getItem: (key: string) => store[key] || null,
-    setItem: (key: string, value: string) => { store[key] = value; },
-    clear: () => { store = {}; },
-    removeItem: (key: string) => { delete store[key]; },
-  };
-})();
-
-const mockDataSource = {
-  find: vi.fn().mockResolvedValue([]),
-  findOne: vi.fn(),
-  create: vi.fn(),
-  update: vi.fn(),
-  delete: vi.fn(),
-};
-
-const renderWithProvider = (component: React.ReactNode) => {
-  return render(
-    <SchemaRendererProvider dataSource={mockDataSource}>
-      {component}
-    </SchemaRendererProvider>
-  );
-};
-
-Object.defineProperty(window, 'localStorage', { value: localStorageMock });
-
-describe('ListView Persistence', () => {
-  beforeEach(() => {
-    localStorageMock.clear();
-    vi.clearAllMocks();
-  });
-
-  it('should use unique storage key when schema.id is provided', () => {
-    const schema: ListViewSchema = {
-      type: 'list-view',
-      id: 'my-custom-view',
-      objectName: 'tasks',
-      viewType: 'grid', // Start with grid
-      options: {
-        kanban: {
-          groupField: 'status',
-        },
-      },
-    };
-
-    renderWithProvider(<ListView schema={schema} showViewSwitcher={true} />);
-    
-    // Simulate changing to kanban view
-    const kanbanButton = screen.getByLabelText('Kanban'); 
-    fireEvent.click(kanbanButton);
-    
-    // Check scoped storage key
-    const expectedKey = 'listview-tasks-my-custom-view-view';
-    expect(localStorageMock.getItem(expectedKey)).toBe('kanban');
-    
-    // Check fallback key is NOT set
-    expect(localStorageMock.getItem('listview-tasks-view')).toBeNull();
-  });
-
-  it('should not conflict with other views of the same object', () => {
-     // Setup: View A (Global/Default) prefers Grid
-     localStorageMock.setItem('listview-tasks-view', 'grid');
-     
-     // Setup: View B (Special) prefers Kanban
-     // We define View B with valid options for Kanban to force it to render the button
-     
-     const viewB_Schema: ListViewSchema = {
-        type: 'list-view',
-        id: 'special-view',
-        objectName: 'tasks',
-        viewType: 'kanban', // Default to Kanban
-        options: {
-          kanban: {
-            groupField: 'status',
-          },
-        },
-     };
-
-     renderWithProvider(<ListView schema={viewB_Schema} showViewSwitcher={true} />);
-     
-     // Should use the schema default 'kanban' (since no storage exists for THIS view id)
-     // It should NOT use 'grid' from the global/default view.
-     
-     const kanbanButton = screen.getByLabelText('Kanban');
-     expect(kanbanButton.getAttribute('data-state')).toBe('on');
-     
-     const gridButton = screen.getByLabelText('Grid');
-     expect(gridButton.getAttribute('data-state')).toBe('off');
-  });
-  
-  it('should switch correctly when storage has a value for THIS view', () => {
-      // Setup: This specific view was previously set to 'kanban'
-      localStorageMock.setItem('listview-tasks-my-board-view', 'kanban');
-      
-      const schema: ListViewSchema = {
-          type: 'list-view',
-          id: 'my-board',
-          objectName: 'tasks',
-          viewType: 'grid', // Default in schema is grid
-          options: {
-            kanban: {
-              groupField: 'status',
-            },
-          },
-      };
-      
-      renderWithProvider(<ListView schema={schema} showViewSwitcher={true} />);
-      
-      // Should respect schema ('grid') because storage persistence is currently disabled
-      const kanbanButton = screen.getByLabelText('Kanban');
-      expect(kanbanButton.getAttribute('data-state')).toBe('off');
-
-      const gridButton = screen.getByLabelText('Grid');
-      expect(gridButton.getAttribute('data-state')).toBe('on');
-  });
-});

package/src/__tests__/ObjectGallery.test.tsx

@@ -1,208 +0,0 @@
-/**
- * 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');
-    });
-  });
-});