argent-grid 0.1.0 → 0.3.0

package/src/lib/components/argent-grid.component.spec.ts

@@ -1,189 +1,149 @@
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { ChangeDetectorRef, provideExperimentalZonelessChangeDetection } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { ArgentGridComponent } from './argent-grid.component';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { GridService } from '../services/grid.service';
-import { ColDef } from '../types/ag-grid-types';
-
-// Mock canvas context
-const mockCanvasContext = {
-  clearRect: vi.fn(),
-  fillRect: vi.fn(),
-  beginPath: vi.fn(),
-  moveTo: vi.fn(),
-  lineTo: vi.fn(),
-  stroke: vi.fn(),
-  fillText: vi.fn(),
-  measureText: vi.fn(() => ({ width: 100 })),
-  scale: vi.fn(),
-  setTransform: vi.fn(),
-  font: '13px sans-serif',
-  textBaseline: 'middle',
-  fillStyle: '#000',
-  strokeStyle: '#000'
+import { ArgentGridComponent } from './argent-grid.component';
+
+// Mock ChangeDetectorRef
+const mockCdr = {
+  detectChanges: vi.fn(),
+  markForCheck: vi.fn(),
 };
 
-const mockCanvas = {
-  getContext: vi.fn(() => mockCanvasContext as any),
-  width: 800,
-  height: 600,
-  style: {},
-  addEventListener: vi.fn(),
-  getBoundingClientRect: vi.fn(() => ({ width: 800, height: 600 }))
-} as unknown as HTMLCanvasElement;
-
-interface TestData {
-  id: number;
-  name: string;
-  value: number;
-}
-
-describe('ArgentGridComponent', () => {
-  let component: ArgentGridComponent<TestData>;
-  let fixture: ComponentFixture<ArgentGridComponent<TestData>>;
-
-  // Mock getContext globally for this test suite
-  beforeAll(() => {
-    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation((contextId) => {
-      if (contextId === '2d') {
-        return mockCanvasContext as any;
-      }
-      return null;
-    });
-    
-    vi.spyOn(HTMLCanvasElement.prototype, 'getBoundingClientRect').mockReturnValue({
-      width: 800,
-      height: 600,
-      top: 0,
-      left: 0,
-      bottom: 600,
-      right: 800,
-      x: 0,
-      y: 0,
-      toJSON: () => {}
-    } as DOMRect);
-  });
-  
-  const testColumnDefs: (ColDef<TestData>)[] = [
-    { colId: 'id', field: 'id', headerName: 'ID', width: 100 },
-    { colId: 'name', field: 'name', headerName: 'Name', width: 150 },
-    { colId: 'value', field: 'value', headerName: 'Value', width: 100 }
-  ];
-  
-  const testRowData: TestData[] = [
-    { id: 1, name: 'Item 1', value: 100 },
-    { id: 2, name: 'Item 2', value: 200 }
-  ];
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ArgentGridComponent],
-      imports: [
-        CommonModule,
-        DragDropModule
-      ],
-      providers: [
-        provideExperimentalZonelessChangeDetection()
-      ]
-    }).compileComponents();
-  });
+describe('ArgentGridComponent - Context Menu', () => {
+  let component: ArgentGridComponent;
+  let _gridService: GridService;
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ArgentGridComponent<TestData>) as ComponentFixture<ArgentGridComponent<TestData>>;
-    component = fixture.componentInstance;
-    component.columnDefs = testColumnDefs;
-    component.rowData = testRowData;
-    
-    fixture.detectChanges();
+    _gridService = new GridService();
+    component = new ArgentGridComponent(mockCdr as any);
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+  describe('resolveContextMenuItems', () => {
+    it('should resolve string menu items to defaults', () => {
+      const items = component.resolveContextMenuItems(['copy', 'separator']);
+      expect(items.length).toBeGreaterThan(0);
+      expect(items[0].name).toBe('Copy Cell');
+    });
 
-  it('should accept columnDefs input', () => {
-    expect(component.columnDefs).toEqual(testColumnDefs);
-  });
+    it('should handle custom MenuItemDef objects', () => {
+      const customItem = {
+        name: 'Custom Action',
+        action: vi.fn(),
+        icon: '⭐',
+      };
+      const items = component.resolveContextMenuItems([customItem]);
+      expect(items.length).toBe(1);
+      expect(items[0].name).toBe('Custom Action');
+    });
 
-  it('should accept rowData input', () => {
-    expect(component.rowData).toEqual(testRowData);
-  });
+    it('should mix default and custom items', () => {
+      const items = component.resolveContextMenuItems([
+        'copy',
+        { name: 'Custom', action: vi.fn() },
+        'separator',
+      ]);
+      expect(items.length).toBeGreaterThan(1);
+    });
 
-  it('should emit gridReady event', () => {
-    component.gridReady.subscribe((api) => {
-      expect(api).toBeTruthy();
-      expect(api.getColumnDefs()).toEqual(testColumnDefs);
+    it('should filter out null items', () => {
+      const items = component.resolveContextMenuItems(['copy', null as any]);
+      expect(items.length).toBeGreaterThan(0);
     });
   });
 
-  it('should have correct row height', () => {
-    expect(component.rowHeight).toBe(32);
-  });
+  describe('getDefaultMenuItem', () => {
+    it('should return copy cell item', () => {
+      const item = component.getDefaultMenuItem('copy');
+      expect(item?.name).toBe('Copy Cell');
+      expect(item?.icon).toBe('📋');
+    });
 
-  it('should have viewport for virtual scrolling', () => {
-    // Virtual scrolling is now handled by the viewport container
-    expect(component.viewportRef).toBeDefined();
-  });
+    it('should return copy with headers item (when range exists)', () => {
+      // Note: copyWithHeaders only returns item when range selection exists
+      // For testing, we just verify it doesn't throw
+      expect(() => {
+        component.getDefaultMenuItem('copyWithHeaders');
+      }).not.toThrow();
+    });
 
-  it('should show overlay when no data', () => {
-    // Test the logic without calling ngOnInit which triggers canvas
-    expect(component.showOverlay).toBe(false); // Initially has data
-  });
+    it('should return export submenu', () => {
+      const item = component.getDefaultMenuItem('export');
+      expect(item?.name).toBe('Export');
+      expect(item?.subMenu).toBeDefined();
+    });
 
-  it('should hide overlay when data exists', () => {
-    expect(component.showOverlay).toBe(false);
-  });
+    it('should return reset columns item', () => {
+      const item = component.getDefaultMenuItem('resetColumns');
+      expect(item?.name).toBe('Reset Columns');
+      expect(item?.icon).toBe('⟲');
+    });
 
-  it('should get header name from column', () => {
-    const col = testColumnDefs[0];
-    expect(component.getHeaderName(col)).toBe('ID');
-  });
+    it('should return separator', () => {
+      const item = component.getDefaultMenuItem('separator');
+      expect(item?.separator).toBe(true);
+    });
 
-  it('should get header name from field if headerName not provided', () => {
-    const col: ColDef<TestData> = { field: 'name' };
-    expect(component.getHeaderName(col)).toBe('name');
+    it('should return null for unknown key', () => {
+      const item = component.getDefaultMenuItem('unknown' as any);
+      expect(item).toBe(null);
+    });
   });
 
-  it('should handle header click for sorting', () => {
-    const col = { ...testColumnDefs[0], sortable: true };
-    component.onHeaderClick(col);
-    expect(col.sort).toBe('asc');
-    
-    // Click again to toggle
-    component.onHeaderClick(col);
-    expect(col.sort).toBe('desc');
-    
-    // Click third time to clear
-    component.onHeaderClick(col);
-    expect(col.sort).toBeNull();
-  });
+  describe('closeContextMenu', () => {
+    it('should reset context menu state', () => {
+      component.contextMenuItems = [{ name: 'Test', action: vi.fn() }];
+      component.activeContextMenu = true;
+      component.contextMenuCell = { rowNode: {} as any, column: {} as any };
 
-  it('should not sort non-sortable columns', () => {
-    const col: ColDef<TestData> = { colId: 'test', sortable: false };
-    component.onHeaderClick(col);
-    expect(col.sort).toBeUndefined();
-  });
+      component.closeContextMenu();
 
-  it('should get column width', () => {
-    const col = testColumnDefs[0];
-    expect(component.getColumnWidth(col)).toBe(100);
+      expect(component.activeContextMenu).toBe(false);
+      expect(component.contextMenuCell).toBe(null);
+      expect(mockCdr.detectChanges).toHaveBeenCalled();
+    });
   });
 
-  it('should use default width if not specified', () => {
-    const col: ColDef<TestData> = { colId: 'test' };
-    expect(component.getColumnWidth(col)).toBe(150);
-  });
+  describe('copyContextMenuCell', () => {
+    it('should handle null cell gracefully', () => {
+      component.contextMenuCell = null;
+      expect(() => component.copyContextMenuCell()).not.toThrow();
+    });
 
-  it('should refresh grid', () => {
-    const mockRenderer = { render: vi.fn(), destroy: vi.fn() };
-    (component as any).canvasRenderer = mockRenderer;
-    component.refresh();
-    expect(mockRenderer.render).toHaveBeenCalled();
+    it('should handle missing field gracefully', () => {
+      component.contextMenuCell = {
+        rowNode: { data: { name: 'John' } } as any,
+        column: { field: null } as any,
+      };
+      expect(() => component.copyContextMenuCell()).not.toThrow();
+    });
+
+    it('should close context menu after copy', () => {
+      const mockClipboard = { writeText: vi.fn().mockResolvedValue(undefined) };
+      Object.defineProperty(navigator, 'clipboard', { value: mockClipboard, writable: true });
+
+      component.contextMenuCell = {
+        rowNode: { data: { name: 'John' } } as any,
+        column: { field: 'name' } as any,
+      };
+      component.activeContextMenu = true;
+
+      component.copyContextMenuCell();
+
+      expect(component.activeContextMenu).toBe(false);
+      expect(component.contextMenuCell).toBe(null);
+    });
   });
 
-  it('should get API instance', () => {
-    const api = component.getApi();
-    expect(api).toBeTruthy();
+  describe('hasRangeSelection', () => {
+    it('should return false when no range', () => {
+      const mockApi = { getCellRanges: vi.fn(() => []) };
+      component.gridApi = mockApi as any;
+      expect(component.hasRangeSelection()).toBe(false);
+    });
+
+    it('should return true when range exists', () => {
+      const mockApi = { getCellRanges: vi.fn(() => [{}]) };
+      component.gridApi = mockApi as any;
+      expect(component.hasRangeSelection()).toBe(true);
+    });
   });
 });