ObjectView.test.tsx

/**
 * 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, waitFor } from '@testing-library/react';
import { ObjectView } from '../ObjectView';
import type { ObjectViewSchema, DataSource } from '@object-ui/types';

// Mock @object-ui/react to avoid circular dependency issues
vi.mock('@object-ui/react', () => ({
  SchemaRenderer: ({ schema }: any) => (
    <div data-testid="schema-renderer" data-schema-type={schema?.type}>
      {schema?.type}
    </div>
  ),
  SchemaRendererContext: null,
}));

// Mock @object-ui/plugin-grid
vi.mock('@object-ui/plugin-grid', () => ({
  ObjectGrid: ({ schema, onRowClick }: any) => (
    <div data-testid="object-grid" data-object={schema?.objectName}>
      <button data-testid="grid-row" onClick={() => onRowClick?.({ _id: '1', name: 'Test' })}>
        Row 1
      </button>
    </div>
  ),
}));

// Mock @object-ui/plugin-form
vi.mock('@object-ui/plugin-form', () => ({
  ObjectForm: ({ schema }: any) => (
    <div data-testid="object-form" data-mode={schema?.mode}>
      Form ({schema?.mode})
    </div>
  ),
}));

const createMockDataSource = (overrides: Partial<DataSource> = {}): DataSource => ({
  find: vi.fn().mockResolvedValue([]),
  findOne: vi.fn().mockResolvedValue(null),
  create: vi.fn().mockResolvedValue({}),
  update: vi.fn().mockResolvedValue({}),
  delete: vi.fn().mockResolvedValue({}),
  getObjectSchema: vi.fn().mockResolvedValue({
    label: 'Contacts',
    fields: {
      name: { label: 'Name', type: 'text' },
      email: { label: 'Email', type: 'text' },
      status: {
        label: 'Status',
        type: 'select',
        options: [
          { label: 'Active', value: 'active' },
          { label: 'Inactive', value: 'inactive' },
        ],
      },
      created_at: { label: 'Created', type: 'date' },
    },
  }),
  ...overrides,
} as DataSource);

describe('ObjectView', () => {
  let mockDataSource: DataSource;

  beforeEach(() => {
    vi.clearAllMocks();
    mockDataSource = createMockDataSource();
  });

  // ============================
  // Basic Rendering
  // ============================
  describe('Basic Rendering', () => {
    it('should render with minimal schema', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      // Should render the grid by default
      expect(screen.getByTestId('object-grid')).toBeDefined();
    });

    it('should render title and description', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        title: 'Contact List',
        description: 'Manage your contacts',
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      expect(screen.getByText('Contact List')).toBeDefined();
      expect(screen.getByText('Manage your contacts')).toBeDefined();
    });

    it('should not render search box (delegated to ListView toolbar)', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      expect(screen.queryByPlaceholderText(/search/i)).toBeNull();
    });

    it('should not render search box when showSearch is false', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        showSearch: false,
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      expect(screen.queryByPlaceholderText(/search/i)).toBeNull();
    });

    it('should render create button by default', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      expect(screen.getByText('Create')).toBeDefined();
    });

    it('should hide create button when showCreate is false', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        showCreate: false,
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      expect(screen.queryByText('Create')).toBeNull();
    });
  });

  // ============================
  // Named List Views
  // ============================
  describe('Named List Views', () => {
    it('should render named view tabs when listViews has multiple entries', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        listViews: {
          all: { label: 'All Contacts', type: 'grid' },
          active: { label: 'Active', type: 'grid', filter: [['status', '=', 'active']] },
        },
        defaultListView: 'all',
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      expect(screen.getByText('All Contacts')).toBeDefined();
      expect(screen.getByText('Active')).toBeDefined();
    });

    it('should not render tabs when only one named view exists', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        listViews: {
          all: { label: 'All Contacts', type: 'grid' },
        },
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      // Should not show tabs for a single view
      expect(screen.queryByRole('tablist')).toBeNull();
    });

    it('should default to first named view when defaultListView is not set', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        listViews: {
          all: { label: 'All Contacts', type: 'grid' },
          active: { label: 'Active', type: 'grid' },
        },
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      // The grid should be rendered (first view is grid type)
      expect(screen.getByTestId('object-grid')).toBeDefined();
    });
  });

  // ============================
  // Default View Type
  // ============================
  describe('Default View Type', () => {
    it('should render grid by default when no defaultViewType set', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      expect(screen.getByTestId('object-grid')).toBeDefined();
    });
  });

  // ============================
  // Navigation Config
  // ============================
  describe('Navigation Config', () => {
    it('should not navigate when mode is none', () => {
      const onRowClick = vi.fn();
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        navigation: { mode: 'none' },
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      // Click a grid row
      fireEvent.click(screen.getByTestId('grid-row'));

      // onRowClick should not be called (mode is none)
      expect(onRowClick).not.toHaveBeenCalled();
    });

    it('should not navigate when preventNavigation is true', () => {
      const onRowClick = vi.fn();
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        navigation: { mode: 'page', preventNavigation: true },
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      fireEvent.click(screen.getByTestId('grid-row'));

      expect(onRowClick).not.toHaveBeenCalled();
    });

    it('should open in new window when mode is new_window', () => {
      const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);

      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        navigation: { mode: 'new_window' },
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      fireEvent.click(screen.getByTestId('grid-row'));

      expect(openSpy).toHaveBeenCalledWith('/contacts/1', '_blank');
      openSpy.mockRestore();
    });

    it('should call onNavigate for page mode', () => {
      const onNavigate = vi.fn();
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        navigation: { mode: 'page' },
        onNavigate,
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      fireEvent.click(screen.getByTestId('grid-row'));

      expect(onNavigate).toHaveBeenCalledWith('1', 'view');
    });

    it('should open form in view mode when split navigation mode is clicked', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        navigation: { mode: 'split' },
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      fireEvent.click(screen.getByTestId('grid-row'));

      // Split mode renders NavigationOverlay with split panels including a close button
      expect(screen.getByTestId('object-form')).toBeDefined();
      expect(screen.getByLabelText('Close panel')).toBeDefined();
    });

    it('should open form in view mode when popover navigation mode is clicked', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        navigation: { mode: 'popover' },
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      fireEvent.click(screen.getByTestId('grid-row'));

      // Popover mode renders NavigationOverlay Dialog fallback (no popoverTrigger)
      expect(screen.getByTestId('object-form')).toBeDefined();
      expect(screen.getByRole('dialog')).toBeDefined();
    });

    it('should close split panel and return to normal view', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        navigation: { mode: 'split' },
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      // Open split panel
      fireEvent.click(screen.getByTestId('grid-row'));
      expect(screen.getByLabelText('Close panel')).toBeDefined();

      // Close split panel
      fireEvent.click(screen.getByLabelText('Close panel'));

      // Form should be gone, grid should remain
      expect(screen.queryByLabelText('Close panel')).toBeNull();
      expect(screen.getByTestId('object-grid')).toBeDefined();
    });
  });

  // ============================
  // CRUD Operations
  // ============================
  describe('CRUD Operations', () => {
    it('should hide create button when operations.create is false', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        operations: { create: false, read: true, update: true, delete: true },
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      expect(screen.queryByText('Create')).toBeNull();
    });
  });

  // ============================
  // Data Source Integration
  // ============================
  describe('Data Source Integration', () => {
    it('should fetch object schema on mount', async () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
      };

      render(<ObjectView schema={schema} dataSource={mockDataSource} />);

      await waitFor(() => {
        expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('contacts');
      });
    });
  });

  // ============================
  // View Switcher (prop-based views)
  // ============================
  describe('View Switcher (prop-based)', () => {
    it('should not render view switcher with single view prop', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
      };

      const views = [
        { id: 'grid', label: 'Grid', type: 'grid' as const },
      ];

      render(
        <ObjectView schema={schema} dataSource={mockDataSource} views={views} />,
      );

      // Only one view, no switcher needed
      expect(screen.getByTestId('object-grid')).toBeDefined();
    });
  });

  // ============================
  // showViewSwitcher config
  // ============================
  describe('showViewSwitcher', () => {
    it('should hide view switcher when showViewSwitcher is false', () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        showViewSwitcher: false,
      };

      const views = [
        { id: 'grid', label: 'Grid', type: 'grid' as const },
        { id: 'kanban', label: 'Kanban', type: 'kanban' as const },
      ];

      render(
        <ObjectView schema={schema} dataSource={mockDataSource} views={views} />,
      );

      // Switcher should be hidden
      expect(screen.queryByText('Kanban')).toBeNull();
    });
  });

  // ============================
  // Live Preview — viewConfig sync
  // ============================
  describe('Live Preview', () => {
    it('should re-render grid when views prop updates with new columns', async () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
      };

      const initialViews = [
        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name', 'email'] },
      ];

      const { rerender } = render(
        <ObjectView schema={schema} dataSource={mockDataSource} views={initialViews} activeViewId="all" />,
      );

      expect(screen.getByTestId('object-grid')).toBeInTheDocument();

      // Simulate live preview: update views prop with new columns (as parent would after viewDraft change)
      const updatedViews = [
        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name', 'email', 'status'] },
      ];

      rerender(
        <ObjectView schema={schema} dataSource={mockDataSource} views={updatedViews} activeViewId="all" />,
      );

      // Grid should still render (component did not crash on prop update)
      expect(screen.getByTestId('object-grid')).toBeInTheDocument();
    });

    it('should re-render when views prop updates with new sort config', async () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
      };

      const initialViews = [
        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'] },
      ];

      const { rerender } = render(
        <ObjectView schema={schema} dataSource={mockDataSource} views={initialViews} activeViewId="all" />,
      );

      // Update with sort config — simulates live preview of sort changes
      const updatedViews = [
        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'], sort: [{ field: 'name', direction: 'desc' as const }] },
      ];

      rerender(
        <ObjectView schema={schema} dataSource={mockDataSource} views={updatedViews} activeViewId="all" />,
      );

      expect(screen.getByTestId('object-grid')).toBeInTheDocument();
    });

    it('should re-render when views prop updates with new filter', async () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
      };

      const initialViews = [
        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'] },
      ];

      const { rerender } = render(
        <ObjectView schema={schema} dataSource={mockDataSource} views={initialViews} activeViewId="all" />,
      );

      // Update with filter — simulates live preview of filter changes
      const updatedViews = [
        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'], filter: [['status', '=', 'active']] },
      ];

      rerender(
        <ObjectView schema={schema} dataSource={mockDataSource} views={updatedViews} activeViewId="all" />,
      );

      expect(screen.getByTestId('object-grid')).toBeInTheDocument();
    });

    it('should re-render when views prop updates with appearance properties', async () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
      };

      const initialViews = [
        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'] },
      ];

      const { rerender } = render(
        <ObjectView schema={schema} dataSource={mockDataSource} views={initialViews} activeViewId="all" />,
      );

      // Update with appearance changes — simulates live preview of rowHeight/striped/bordered
      const updatedViews = [
        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'], striped: true, bordered: true },
      ];

      rerender(
        <ObjectView schema={schema} dataSource={mockDataSource} views={updatedViews} activeViewId="all" />,
      );

      expect(screen.getByTestId('object-grid')).toBeInTheDocument();
    });

    it('should pass renderListView with updated schema when views change', async () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
      };

      const renderListViewSpy = vi.fn(({ schema: listSchema }: any) => (
        <div data-testid="custom-list" data-fields={JSON.stringify(listSchema.fields)}>
          Custom ListView
        </div>
      ));

      const initialViews = [
        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'] },
      ];

      const { rerender } = render(
        <ObjectView
          schema={schema}
          dataSource={mockDataSource}
          views={initialViews}
          activeViewId="all"
          renderListView={renderListViewSpy}
        />,
      );

      expect(screen.getByTestId('custom-list')).toBeInTheDocument();
      const firstCallSchema = renderListViewSpy.mock.calls[0]?.[0]?.schema;
      expect(firstCallSchema?.fields).toEqual(['name']);

      // Update views — simulate live preview change
      const updatedViews = [
        { id: 'all', label: 'All', type: 'grid' as const, columns: ['name', 'email', 'status'] },
      ];

      rerender(
        <ObjectView
          schema={schema}
          dataSource={mockDataSource}
          views={updatedViews}
          activeViewId="all"
          renderListView={renderListViewSpy}
        />,
      );

      // renderListView should have been called again with the updated columns
      const lastCallIndex = renderListViewSpy.mock.calls.length - 1;
      const lastCallSchema = renderListViewSpy.mock.calls[lastCallIndex]?.[0]?.schema;
      expect(lastCallSchema?.fields).toEqual(['name', 'email', 'status']);
    });

    it('should pass showSort=false through schema to suppress sort UI', async () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        showSort: false,
      };

      render(
        <ObjectView schema={schema} dataSource={mockDataSource} />,
      );

      // Component renders without crash — showSort is respected
      expect(screen.getByTestId('object-grid')).toBeInTheDocument();
    });

    it('should include showSearch/showFilters/showSort in renderListView schema', async () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
        showSearch: false,
        showFilters: false,
        showSort: false,
      };

      const renderListViewSpy = vi.fn(({ schema: listSchema }: any) => (
        <div data-testid="custom-list">Custom ListView</div>
      ));

      render(
        <ObjectView
          schema={schema}
          dataSource={mockDataSource}
          renderListView={renderListViewSpy}
        />,
      );

      expect(renderListViewSpy).toHaveBeenCalled();
      const callSchema = renderListViewSpy.mock.calls[0]?.[0]?.schema;
      expect(callSchema?.showSearch).toBe(false);
      expect(callSchema?.showFilters).toBe(false);
      expect(callSchema?.showSort).toBe(false);
    });

    it('should propagate showSearch/showFilters/showSort from activeView in renderListView', async () => {
      const schema: ObjectViewSchema = {
        type: 'object-view',
        objectName: 'contacts',
      };

      const renderListViewSpy = vi.fn(({ schema: listSchema }: any) => (
        <div data-testid="custom-list">Custom ListView</div>
      ));

      const views = [
        { id: 'v1', label: 'View 1', type: 'grid' as const, showSearch: false, showFilters: false, showSort: false },
      ];

      render(
        <ObjectView
          schema={schema}
          dataSource={mockDataSource}
          views={views}
          activeViewId="v1"
          renderListView={renderListViewSpy}
        />,
      );

      expect(renderListViewSpy).toHaveBeenCalled();
      const callSchema = renderListViewSpy.mock.calls[0]?.[0]?.schema;
      expect(callSchema?.showSearch).toBe(false);
      expect(callSchema?.showFilters).toBe(false);
      expect(callSchema?.showSort).toBe(false);
    });
  });
});