test: add tests for skeleton components, recent items, keyboard shortcuts, and file upload

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

apps/console/package.json

@@ -59,7 +59,8 @@
     "lucide-react": "^0.563.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.0"
+    "react-router-dom": "^7.13.0",
+    "sonner": "^2.0.7"
   },
   "devDependencies": {
     "@objectstack/cli": "^2.0.4",

apps/console/src/__tests__/KeyboardShortcuts.test.tsx

@@ -0,0 +1,57 @@
+/**
+ * Tests for KeyboardShortcutsDialog component
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { KeyboardShortcutsDialog } from '../components/KeyboardShortcutsDialog';
+
+// Mock @object-ui/components Dialog
+vi.mock('@object-ui/components', () => ({
+  Dialog: ({ open, children }: any) => open ? <div data-testid="dialog">{children}</div> : null,
+  DialogContent: ({ children }: any) => <div data-testid="dialog-content">{children}</div>,
+  DialogHeader: ({ children }: any) => <div>{children}</div>,
+  DialogTitle: ({ children }: any) => <h2>{children}</h2>,
+  DialogDescription: ({ children }: any) => <p>{children}</p>,
+}));
+
+describe('KeyboardShortcutsDialog', () => {
+  it('renders without errors', () => {
+    const { container } = render(<KeyboardShortcutsDialog />);
+    // Dialog should be closed initially
+    expect(container.querySelector('[data-testid="dialog"]')).toBeNull();
+  });
+
+  it('opens when ? key is pressed', () => {
+    render(<KeyboardShortcutsDialog />);
+
+    fireEvent.keyDown(document, { key: '?' });
+
+    expect(screen.getByTestId('dialog')).toBeInTheDocument();
+    expect(screen.getByText('Keyboard Shortcuts')).toBeInTheDocument();
+  });
+
+  it('shows shortcut categories', () => {
+    render(<KeyboardShortcutsDialog />);
+    fireEvent.keyDown(document, { key: '?' });
+
+    expect(screen.getByText('General')).toBeInTheDocument();
+    expect(screen.getByText('Navigation')).toBeInTheDocument();
+    expect(screen.getByText('Data Views')).toBeInTheDocument();
+    expect(screen.getByText('Preferences')).toBeInTheDocument();
+  });
+
+  it('does not open when ? is pressed in an input', () => {
+    const { container } = render(
+      <div>
+        <input data-testid="input" />
+        <KeyboardShortcutsDialog />
+      </div>
+    );
+
+    const input = screen.getByTestId('input');
+    fireEvent.keyDown(input, { key: '?' });
+
+    expect(container.querySelector('[data-testid="dialog"]')).toBeNull();
+  });
+});

apps/console/src/__tests__/RecentItems.test.tsx

@@ -0,0 +1,128 @@
+/**
+ * Tests for useRecentItems hook
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useRecentItems } from '../hooks/useRecentItems';
+
+// Mock localStorage
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: vi.fn((key: string) => store[key] ?? null),
+    setItem: vi.fn((key: string, value: string) => { store[key] = value; }),
+    removeItem: vi.fn((key: string) => { delete store[key]; }),
+    clear: vi.fn(() => { store = {}; }),
+  };
+})();
+
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+
+describe('useRecentItems', () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+  });
+
+  it('starts with empty items when localStorage is empty', () => {
+    const { result } = renderHook(() => useRecentItems());
+    expect(result.current.recentItems).toEqual([]);
+  });
+
+  it('adds a recent item', () => {
+    const { result } = renderHook(() => useRecentItems());
+
+    act(() => {
+      result.current.addRecentItem({
+        id: 'object:contact',
+        label: 'Contacts',
+        href: '/apps/crm/contact',
+        type: 'object',
+      });
+    });
+
+    expect(result.current.recentItems).toHaveLength(1);
+    expect(result.current.recentItems[0].id).toBe('object:contact');
+    expect(result.current.recentItems[0].label).toBe('Contacts');
+    expect(result.current.recentItems[0].visitedAt).toBeDefined();
+  });
+
+  it('deduplicates items by id', () => {
+    const { result } = renderHook(() => useRecentItems());
+
+    act(() => {
+      result.current.addRecentItem({
+        id: 'object:contact',
+        label: 'Contacts',
+        href: '/apps/crm/contact',
+        type: 'object',
+      });
+    });
+
+    act(() => {
+      result.current.addRecentItem({
+        id: 'object:contact',
+        label: 'Contacts Updated',
+        href: '/apps/crm/contact',
+        type: 'object',
+      });
+    });
+
+    expect(result.current.recentItems).toHaveLength(1);
+    expect(result.current.recentItems[0].label).toBe('Contacts Updated');
+  });
+
+  it('limits to max 8 items', () => {
+    const { result } = renderHook(() => useRecentItems());
+
+    for (let i = 0; i < 10; i++) {
+      act(() => {
+        result.current.addRecentItem({
+          id: `object:item-${i}`,
+          label: `Item ${i}`,
+          href: `/apps/crm/item-${i}`,
+          type: 'object',
+        });
+      });
+    }
+
+    expect(result.current.recentItems.length).toBeLessThanOrEqual(8);
+  });
+
+  it('clears all items', () => {
+    const { result } = renderHook(() => useRecentItems());
+
+    act(() => {
+      result.current.addRecentItem({
+        id: 'object:contact',
+        label: 'Contacts',
+        href: '/apps/crm/contact',
+        type: 'object',
+      });
+    });
+
+    act(() => {
+      result.current.clearRecentItems();
+    });
+
+    expect(result.current.recentItems).toEqual([]);
+  });
+
+  it('persists items to localStorage', () => {
+    const { result } = renderHook(() => useRecentItems());
+
+    act(() => {
+      result.current.addRecentItem({
+        id: 'object:contact',
+        label: 'Contacts',
+        href: '/apps/crm/contact',
+        type: 'object',
+      });
+    });
+
+    expect(localStorageMock.setItem).toHaveBeenCalledWith(
+      'objectui-recent-items',
+      expect.any(String),
+    );
+  });
+});

apps/console/src/__tests__/SkeletonComponents.test.tsx

@@ -0,0 +1,61 @@
+/**
+ * Tests for skeleton loading components
+ */
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { SkeletonGrid } from '../components/skeletons/SkeletonGrid';
+import { SkeletonDashboard } from '../components/skeletons/SkeletonDashboard';
+import { SkeletonDetail } from '../components/skeletons/SkeletonDetail';
+
+// Mock @object-ui/components Skeleton
+vi.mock('@object-ui/components', () => ({
+  Skeleton: ({ className, ...props }: any) => (
+    <div data-testid="skeleton" className={className} {...props} />
+  ),
+}));
+
+describe('SkeletonGrid', () => {
+  it('renders with default props', () => {
+    const { container } = render(<SkeletonGrid />);
+    const skeletons = container.querySelectorAll('[data-testid="skeleton"]');
+    // Header (5) + 8 rows x 5 cols (40) + toolbar (4) + pagination (4) = 53
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+
+  it('renders correct number of rows', () => {
+    const { container } = render(<SkeletonGrid rows={3} columns={2} />);
+    // Should have skeletons for 3 rows x 2 columns in the table body
+    const rowContainers = container.querySelectorAll('.border-b');
+    expect(rowContainers.length).toBeGreaterThanOrEqual(3);
+  });
+});
+
+describe('SkeletonDashboard', () => {
+  it('renders with default props', () => {
+    const { container } = render(<SkeletonDashboard />);
+    const skeletons = container.querySelectorAll('[data-testid="skeleton"]');
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+
+  it('renders correct number of widget cards', () => {
+    const { container } = render(<SkeletonDashboard cards={3} />);
+    // 3 widget cards, each with 3 skeletons + stats row (4 cards x 3 each) + header (2)
+    const skeletons = container.querySelectorAll('[data-testid="skeleton"]');
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+});
+
+describe('SkeletonDetail', () => {
+  it('renders with default props', () => {
+    const { container } = render(<SkeletonDetail />);
+    const skeletons = container.querySelectorAll('[data-testid="skeleton"]');
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+
+  it('renders correct number of field rows', () => {
+    const { container } = render(<SkeletonDetail fields={4} columns={1} />);
+    const skeletons = container.querySelectorAll('[data-testid="skeleton"]');
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+});

packages/data-objectstack/src/upload.test.ts

@@ -0,0 +1,112 @@
+/**
+ * Tests for ObjectStackAdapter file upload integration
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ObjectStackAdapter } from './index';
+
+describe('ObjectStackAdapter File Upload', () => {
+  let adapter: ObjectStackAdapter;
+
+  beforeEach(() => {
+    adapter = new ObjectStackAdapter({
+      baseUrl: 'http://localhost:3000',
+      autoReconnect: false,
+    });
+    vi.clearAllMocks();
+  });
+
+  describe('uploadFile', () => {
+    it('should be a method on the adapter', () => {
+      expect(typeof adapter.uploadFile).toBe('function');
+    });
+
+    it('should call fetch with multipart form data when connected', async () => {
+      const mockResponse = {
+        ok: true,
+        json: vi.fn().mockResolvedValue({
+          id: 'file-1',
+          filename: 'test.pdf',
+          mimeType: 'application/pdf',
+          size: 1024,
+          url: 'http://localhost:3000/files/file-1',
+        }),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+      // Manually set connected state by accessing private field
+      (adapter as any).connected = true;
+      (adapter as any).connectionState = 'connected';
+
+      const file = new File(['test content'], 'test.pdf', { type: 'application/pdf' });
+
+      const result = await adapter.uploadFile('documents', file, {
+        recordId: 'rec-123',
+        fieldName: 'attachment',
+      });
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.stringContaining('/api/data/documents/upload'),
+        expect.objectContaining({
+          method: 'POST',
+          body: expect.any(FormData),
+        }),
+      );
+
+      expect(result.id).toBe('file-1');
+      expect(result.filename).toBe('test.pdf');
+    });
+
+    it('should throw on upload failure', async () => {
+      const mockResponse = {
+        ok: false,
+        status: 413,
+        statusText: 'Payload Too Large',
+        json: vi.fn().mockResolvedValue({ message: 'File too large' }),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+      // Manually set connected state
+      (adapter as any).connected = true;
+      (adapter as any).connectionState = 'connected';
+
+      const file = new File(['test'], 'large.bin', { type: 'application/octet-stream' });
+
+      await expect(adapter.uploadFile('documents', file)).rejects.toThrow('File too large');
+    });
+  });
+
+  describe('uploadFiles', () => {
+    it('should be a method on the adapter', () => {
+      expect(typeof adapter.uploadFiles).toBe('function');
+    });
+
+    it('should upload multiple files', async () => {
+      const mockResponse = {
+        ok: true,
+        json: vi.fn().mockResolvedValue([
+          { id: 'file-1', filename: 'a.pdf', mimeType: 'application/pdf', size: 100, url: '/files/1' },
+          { id: 'file-2', filename: 'b.pdf', mimeType: 'application/pdf', size: 200, url: '/files/2' },
+        ]),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+      // Manually set connected state
+      (adapter as any).connected = true;
+      (adapter as any).connectionState = 'connected';
+
+      const files = [
+        new File(['content1'], 'a.pdf', { type: 'application/pdf' }),
+        new File(['content2'], 'b.pdf', { type: 'application/pdf' }),
+      ];
+
+      const results = await adapter.uploadFiles('documents', files);
+
+      expect(results).toHaveLength(2);
+      expect(results[0].id).toBe('file-1');
+      expect(results[1].id).toBe('file-2');
+    });
+  });
+});