@object-ui/plugin-list 3.0.3 → 3.1.1

package/src/__tests__/ConditionalFormatting.test.ts

@@ -0,0 +1,285 @@
+/**
+ * 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 } from 'vitest';
+import { evaluateConditionalFormatting } from '../ListView';
+
+describe('evaluateConditionalFormatting', () => {
+  // =========================================================================
+  // Standard operator-based rules
+  // =========================================================================
+  describe('operator-based rules', () => {
+    it('matches "equals" operator', () => {
+      const result = evaluateConditionalFormatting(
+        { status: 'active' },
+        [{ field: 'status', operator: 'equals', value: 'active', backgroundColor: '#e0ffe0' }],
+      );
+      expect(result).toEqual({ backgroundColor: '#e0ffe0' });
+    });
+
+    it('matches "not_equals" operator', () => {
+      const result = evaluateConditionalFormatting(
+        { status: 'inactive' },
+        [{ field: 'status', operator: 'not_equals', value: 'active', textColor: '#f00' }],
+      );
+      expect(result).toEqual({ color: '#f00' });
+    });
+
+    it('matches "contains" operator', () => {
+      const result = evaluateConditionalFormatting(
+        { name: 'John Doe' },
+        [{ field: 'name', operator: 'contains', value: 'Doe', borderColor: '#00f' }],
+      );
+      expect(result).toEqual({ borderColor: '#00f' });
+    });
+
+    it('matches "greater_than" operator', () => {
+      const result = evaluateConditionalFormatting(
+        { amount: 500 },
+        [{ field: 'amount', operator: 'greater_than', value: 100, backgroundColor: '#ff0' }],
+      );
+      expect(result).toEqual({ backgroundColor: '#ff0' });
+    });
+
+    it('does not match "greater_than" when equal', () => {
+      const result = evaluateConditionalFormatting(
+        { amount: 100 },
+        [{ field: 'amount', operator: 'greater_than', value: 100, backgroundColor: '#ff0' }],
+      );
+      expect(result).toEqual({});
+    });
+
+    it('matches "less_than" operator', () => {
+      const result = evaluateConditionalFormatting(
+        { score: 3 },
+        [{ field: 'score', operator: 'less_than', value: 5, textColor: '#aaa' }],
+      );
+      expect(result).toEqual({ color: '#aaa' });
+    });
+
+    it('matches "in" operator', () => {
+      const result = evaluateConditionalFormatting(
+        { priority: 'high' },
+        [{ field: 'priority', operator: 'in', value: ['high', 'critical'], backgroundColor: '#fee' }],
+      );
+      expect(result).toEqual({ backgroundColor: '#fee' });
+    });
+
+    it('does not match "in" when value is absent from array', () => {
+      const result = evaluateConditionalFormatting(
+        { priority: 'low' },
+        [{ field: 'priority', operator: 'in', value: ['high', 'critical'], backgroundColor: '#fee' }],
+      );
+      expect(result).toEqual({});
+    });
+  });
+
+  // =========================================================================
+  // Expression-based rules (L2 feature)
+  // =========================================================================
+  describe('expression-based rules', () => {
+    it('evaluates a simple expression', () => {
+      const result = evaluateConditionalFormatting(
+        { amount: 2000, status: 'urgent' },
+        [{
+          field: '',
+          operator: 'equals',
+          value: '',
+          expression: '${data.amount > 1000}',
+          backgroundColor: '#f0f0f0',
+        }],
+      );
+      expect(result).toEqual({ backgroundColor: '#f0f0f0' });
+    });
+
+    it('evaluates a complex expression with && operator', () => {
+      const result = evaluateConditionalFormatting(
+        { amount: 2000, status: 'urgent' },
+        [{
+          field: '',
+          operator: 'equals',
+          value: '',
+          expression: '${data.amount > 1000 && data.status === "urgent"}',
+          backgroundColor: '#fee2e2',
+          textColor: '#dc2626',
+        }],
+      );
+      expect(result).toEqual({ backgroundColor: '#fee2e2', color: '#dc2626' });
+    });
+
+    it('returns empty object when expression evaluates to false', () => {
+      const result = evaluateConditionalFormatting(
+        { amount: 50, status: 'normal' },
+        [{
+          field: '',
+          operator: 'equals',
+          value: '',
+          expression: '${data.amount > 1000 && data.status === "urgent"}',
+          backgroundColor: '#fee2e2',
+        }],
+      );
+      expect(result).toEqual({});
+    });
+
+    it('does not throw on invalid expression and returns empty', () => {
+      const result = evaluateConditionalFormatting(
+        { amount: 100 },
+        [{
+          field: '',
+          operator: 'equals',
+          value: '',
+          expression: '${data.!!!invalidSyntax}',
+          backgroundColor: '#f00',
+        }],
+      );
+      expect(result).toEqual({});
+    });
+  });
+
+  // =========================================================================
+  // Spec expression format (plain condition + style object)
+  // =========================================================================
+  describe('spec expression format', () => {
+    it('evaluates a plain condition string via "condition" field', () => {
+      const result = evaluateConditionalFormatting(
+        { status: 'overdue' },
+        [{ condition: "status == 'overdue'", style: { backgroundColor: 'red' } }],
+      );
+      expect(result).toEqual({ backgroundColor: 'red' });
+    });
+
+    it('evaluates a numeric comparison in plain condition', () => {
+      const result = evaluateConditionalFormatting(
+        { amount: 2500 },
+        [{ condition: 'amount > 1000', style: { backgroundColor: '#fee2e2', color: '#991b1b' } }],
+      );
+      expect(result).toEqual({ backgroundColor: '#fee2e2', color: '#991b1b' });
+    });
+
+    it('returns empty when plain condition does not match', () => {
+      const result = evaluateConditionalFormatting(
+        { status: 'active' },
+        [{ condition: "status == 'overdue'", style: { backgroundColor: 'red' } }],
+      );
+      expect(result).toEqual({});
+    });
+
+    it('supports compound conditions with && operator', () => {
+      const result = evaluateConditionalFormatting(
+        { amount: 2000, status: 'urgent' },
+        [{ condition: "amount > 1000 && status === 'urgent'", style: { backgroundColor: '#fee' } }],
+      );
+      expect(result).toEqual({ backgroundColor: '#fee' });
+    });
+
+    it('merges style with individual color properties', () => {
+      const result = evaluateConditionalFormatting(
+        { status: 'overdue' },
+        [{
+          condition: "status == 'overdue'",
+          style: { fontWeight: 'bold' },
+          backgroundColor: '#f00',
+        }],
+      );
+      expect(result).toEqual({ fontWeight: 'bold', backgroundColor: '#f00' });
+    });
+
+    it('does not throw on invalid plain condition', () => {
+      const result = evaluateConditionalFormatting(
+        { status: 'ok' },
+        [{ condition: '!!!invalidSyntax', style: { backgroundColor: 'red' } }],
+      );
+      expect(result).toEqual({});
+    });
+  });
+
+  // =========================================================================
+  // Mixed rules (expression + standard) – first match wins
+  // =========================================================================
+  describe('mixed rules', () => {
+    it('returns the first matching rule (expression first)', () => {
+      const result = evaluateConditionalFormatting(
+        { amount: 5000, status: 'active' },
+        [
+          {
+            field: '',
+            operator: 'equals',
+            value: '',
+            expression: '${data.amount > 1000}',
+            backgroundColor: '#expr_match',
+          },
+          {
+            field: 'status',
+            operator: 'equals',
+            value: 'active',
+            backgroundColor: '#operator_match',
+          },
+        ],
+      );
+      expect(result).toEqual({ backgroundColor: '#expr_match' });
+    });
+
+    it('falls through non-matching expression to matching operator rule', () => {
+      const result = evaluateConditionalFormatting(
+        { amount: 50, status: 'active' },
+        [
+          {
+            field: '',
+            operator: 'equals',
+            value: '',
+            expression: '${data.amount > 1000}',
+            backgroundColor: '#expr_match',
+          },
+          {
+            field: 'status',
+            operator: 'equals',
+            value: 'active',
+            backgroundColor: '#operator_match',
+          },
+        ],
+      );
+      expect(result).toEqual({ backgroundColor: '#operator_match' });
+    });
+
+    it('handles mixed spec condition + ObjectUI field rules', () => {
+      const result = evaluateConditionalFormatting(
+        { status: 'overdue', priority: 'low' },
+        [
+          { condition: "status == 'overdue'", style: { backgroundColor: 'red' } },
+          { field: 'priority', operator: 'equals', value: 'low', backgroundColor: '#ccc' },
+        ],
+      );
+      // First matching rule wins
+      expect(result).toEqual({ backgroundColor: 'red' });
+    });
+
+    it('falls through non-matching spec condition to ObjectUI field rule', () => {
+      const result = evaluateConditionalFormatting(
+        { status: 'active', priority: 'low' },
+        [
+          { condition: "status == 'overdue'", style: { backgroundColor: 'red' } },
+          { field: 'priority', operator: 'equals', value: 'low', backgroundColor: '#ccc' },
+        ],
+      );
+      expect(result).toEqual({ backgroundColor: '#ccc' });
+    });
+  });
+
+  // =========================================================================
+  // Edge cases
+  // =========================================================================
+  describe('edge cases', () => {
+    it('returns empty object for undefined rules', () => {
+      expect(evaluateConditionalFormatting({ a: 1 }, undefined)).toEqual({});
+    });
+
+    it('returns empty object for empty rules array', () => {
+      expect(evaluateConditionalFormatting({ a: 1 }, [])).toEqual({});
+    });
+  });
+});

package/src/__tests__/DataFetch.test.tsx

@@ -0,0 +1,224 @@
+/**
+ * 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 } from '@testing-library/react';
+import { ListView } from '../ListView';
+import type { ListViewSchema } from '@object-ui/types';
+import { SchemaRendererProvider } from '@object-ui/react';
+
+const renderWithProvider = (component: React.ReactNode, dataSource?: any) => {
+  return render(
+    <SchemaRendererProvider dataSource={dataSource || mockDataSource}>
+      {component}
+    </SchemaRendererProvider>
+  );
+};
+
+let mockDataSource: any;
+
+describe('ListView Data Fetch', () => {
+  beforeEach(() => {
+    mockDataSource = {
+      find: vi.fn().mockResolvedValue([]),
+      findOne: vi.fn(),
+      create: vi.fn(),
+      update: vi.fn(),
+      delete: vi.fn(),
+    };
+  });
+
+  // =========================================================================
+  // Data Limit Warning (Issue #7)
+  // =========================================================================
+  describe('data limit warning', () => {
+    it('shows data limit warning when items reach the page size', async () => {
+      // Generate exactly 100 items (default page size)
+      const items = Array.from({ length: 100 }, (_, i) => ({
+        _id: String(i),
+        name: `Item ${i}`,
+      }));
+      mockDataSource.find.mockResolvedValue(items);
+
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name'],
+      };
+
+      renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+      await vi.waitFor(() => {
+        expect(screen.getByTestId('record-count-bar')).toBeInTheDocument();
+      });
+      expect(screen.getByTestId('data-limit-warning')).toBeInTheDocument();
+    });
+
+    it('does not show data limit warning when items are below page size', async () => {
+      const items = [
+        { _id: '1', name: 'Alice' },
+        { _id: '2', name: 'Bob' },
+      ];
+      mockDataSource.find.mockResolvedValue(items);
+
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name'],
+      };
+
+      renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+      await vi.waitFor(() => {
+        expect(screen.getByTestId('record-count-bar')).toBeInTheDocument();
+      });
+      expect(screen.queryByTestId('data-limit-warning')).not.toBeInTheDocument();
+    });
+
+    it('uses custom page size from schema.pagination', async () => {
+      const items = Array.from({ length: 50 }, (_, i) => ({
+        _id: String(i),
+        name: `Item ${i}`,
+      }));
+      mockDataSource.find.mockResolvedValue(items);
+
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name'],
+        pagination: { pageSize: 50 },
+      };
+
+      renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+      await vi.waitFor(() => {
+        expect(screen.getByTestId('record-count-bar')).toBeInTheDocument();
+      });
+
+      // Should show warning since exactly 50 items = pageSize
+      expect(screen.getByTestId('data-limit-warning')).toBeInTheDocument();
+
+      // Verify that $top was set to custom page size
+      expect(mockDataSource.find).toHaveBeenCalledWith('contacts', expect.objectContaining({
+        $top: 50,
+      }));
+    });
+  });
+
+  // =========================================================================
+  // $expand race condition fix (Issue #939 Bug 1)
+  // =========================================================================
+  describe('$expand with objectSchema', () => {
+    it('should include $expand in find() when objectSchema has lookup fields', async () => {
+      mockDataSource.getObjectSchema = vi.fn().mockResolvedValue({
+        fields: {
+          name: { type: 'text' },
+          customer: { type: 'lookup', reference_to: 'contact' },
+          account: { type: 'master_detail', reference_to: 'account' },
+        },
+      });
+      mockDataSource.find.mockResolvedValue([
+        { _id: '1', name: 'Order 1', customer: { name: 'Alice' }, account: { name: 'Acme' } },
+      ]);
+
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'orders',
+        viewType: 'grid',
+        fields: ['name', 'customer', 'account'],
+      };
+
+      renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+      await vi.waitFor(() => {
+        expect(mockDataSource.find).toHaveBeenCalledWith(
+          'orders',
+          expect.objectContaining({
+            $expand: expect.arrayContaining(['customer', 'account']),
+          }),
+        );
+      });
+    });
+
+    it('should wait for objectSchema before fetching data', async () => {
+      let resolveSchema: (value: any) => void;
+      const schemaPromise = new Promise(resolve => { resolveSchema = resolve; });
+      mockDataSource.getObjectSchema = vi.fn().mockReturnValue(schemaPromise);
+      mockDataSource.find.mockResolvedValue([{ _id: '1', name: 'Item 1' }]);
+
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'orders',
+        viewType: 'grid',
+        fields: ['name'],
+      };
+
+      renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+      // find() should NOT be called yet because objectSchema hasn't resolved
+      expect(mockDataSource.find).not.toHaveBeenCalled();
+
+      // Resolve objectSchema
+      resolveSchema!({ fields: { name: { type: 'text' } } });
+
+      // Now find() should be called
+      await vi.waitFor(() => {
+        expect(mockDataSource.find).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // =========================================================================
+  // Request Debounce (Issue #5)
+  // =========================================================================
+  describe('request debounce', () => {
+    it('only uses data from the latest request when multiple fetches occur', async () => {
+      let resolveFirst: (value: any) => void;
+      let resolveSecond: (value: any) => void;
+      
+      const firstPromise = new Promise(resolve => { resolveFirst = resolve; });
+      const secondPromise = new Promise(resolve => { resolveSecond = resolve; });
+      
+      mockDataSource.find
+        .mockReturnValueOnce(firstPromise)
+        .mockReturnValueOnce(secondPromise);
+
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name'],
+      };
+
+      const { rerender } = renderWithProvider(
+        <ListView schema={schema} dataSource={mockDataSource} />,
+      );
+
+      // Resolve second (newer) request first
+      resolveSecond!([{ _id: '2', name: 'Second' }]);
+      
+      await vi.waitFor(() => {
+        expect(mockDataSource.find).toHaveBeenCalled();
+      });
+
+      // Resolve first (stale) request later
+      resolveFirst!([{ _id: '1', name: 'First (stale)' }]);
+
+      // Wait for state to settle — second request data should win
+      await vi.waitFor(() => {
+        // Data should eventually render from latest successful request
+        expect(screen.queryByTestId('empty-state')).not.toBeNull();
+      }, { timeout: 2000 }).catch(() => {
+        // This is fine — the key point is stale data doesn't overwrite new data
+      });
+    });
+  });
+});

package/src/__tests__/Export.test.tsx

@@ -0,0 +1,175 @@
+/**
+ * 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 { ListView } from '../ListView';
+import type { ListViewSchema } from '@object-ui/types';
+import { SchemaRendererProvider } from '@object-ui/react';
+
+// Mock URL.createObjectURL and revokeObjectURL
+const mockCreateObjectURL = vi.fn().mockReturnValue('blob:test');
+const mockRevokeObjectURL = vi.fn();
+Object.defineProperty(URL, 'createObjectURL', { value: mockCreateObjectURL, writable: true });
+Object.defineProperty(URL, 'revokeObjectURL', { value: mockRevokeObjectURL, writable: true });
+
+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>
+  );
+};
+
+describe('ListView Export', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render export button with configured formats', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'contacts',
+      viewType: 'grid',
+      fields: ['name', 'email'],
+      exportOptions: {
+        formats: ['csv', 'json'],
+      },
+    };
+
+    renderWithProvider(<ListView schema={schema} />);
+    const exportButton = screen.getByRole('button', { name: /export/i });
+    expect(exportButton).toBeInTheDocument();
+  });
+
+  it('should render export button with spec string[] format', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'contacts',
+      viewType: 'grid',
+      fields: ['name', 'email'],
+      exportOptions: ['csv', 'xlsx'],
+    };
+
+    renderWithProvider(<ListView schema={schema} />);
+    const exportButton = screen.getByRole('button', { name: /export/i });
+    expect(exportButton).toBeInTheDocument();
+
+    // Click to open the popover and verify formats
+    fireEvent.click(exportButton);
+    expect(screen.getByRole('button', { name: /export as csv/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /export as xlsx/i })).toBeInTheDocument();
+  });
+
+  it('should handle export with complex object fields in CSV safely', async () => {
+    const mockItems = [
+      { _id: '1', name: 'Alice', tags: ['admin', 'user'], metadata: { role: 'lead' } },
+      { _id: '2', name: 'Bob', tags: ['user'], metadata: null },
+    ];
+    mockDataSource.find.mockResolvedValue(mockItems);
+
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'contacts',
+      viewType: 'grid',
+      fields: ['name', 'tags', 'metadata'],
+      exportOptions: {
+        formats: ['csv'],
+      },
+    };
+
+    renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+    // Wait for data to load
+    await vi.waitFor(() => {
+      expect(screen.getByTestId('record-count-bar')).toBeInTheDocument();
+    });
+
+    // Click export button
+    const exportButton = screen.getByRole('button', { name: /export/i });
+    fireEvent.click(exportButton);
+
+    // Click CSV format
+    const csvButton = screen.getByRole('button', { name: /export as csv/i });
+
+    // Mock createElement and click
+    const mockClick = vi.fn();
+    const originalCreateElement = document.createElement.bind(document);
+    vi.spyOn(document, 'createElement').mockImplementation((tag: string) => {
+      const el = originalCreateElement(tag);
+      if (tag === 'a') {
+        el.click = mockClick;
+      }
+      return el;
+    });
+
+    fireEvent.click(csvButton);
+    expect(mockCreateObjectURL).toHaveBeenCalled();
+
+    // Verify the blob content includes safe serialization
+    const blobArg = mockCreateObjectURL.mock.calls[0]?.[0];
+    if (blobArg instanceof Blob) {
+      const text = await blobArg.text();
+      // Headers
+      expect(text).toContain('name,tags,metadata');
+      // Array should be serialized as semicolon-separated, not raw
+      expect(text).toContain('admin; user');
+      // Object should be JSON-serialized (CSV-escaped with doubled quotes)
+      expect(text).toContain('{""role"":""lead""}');
+    }
+  });
+
+  it('should handle export with JSON format', async () => {
+    const mockItems = [
+      { _id: '1', name: 'Alice', email: 'alice@test.com' },
+    ];
+    mockDataSource.find.mockResolvedValue(mockItems);
+
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'contacts',
+      viewType: 'grid',
+      fields: ['name', 'email'],
+      exportOptions: {
+        formats: ['json'],
+      },
+    };
+
+    renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+    await vi.waitFor(() => {
+      expect(screen.getByTestId('record-count-bar')).toBeInTheDocument();
+    });
+
+    const exportButton = screen.getByRole('button', { name: /export/i });
+    fireEvent.click(exportButton);
+
+    const jsonButton = screen.getByRole('button', { name: /export as json/i });
+
+    const mockClick = vi.fn();
+    const originalCreateElement = document.createElement.bind(document);
+    vi.spyOn(document, 'createElement').mockImplementation((tag: string) => {
+      const el = originalCreateElement(tag);
+      if (tag === 'a') {
+        el.click = mockClick;
+      }
+      return el;
+    });
+
+    fireEvent.click(jsonButton);
+    expect(mockCreateObjectURL).toHaveBeenCalled();
+  });
+});