argent-grid 0.1.0 → 0.2.0

package/src/lib/components/argent-grid.component.html

@@ -5,17 +5,7 @@
       <div class="argent-grid-header">
         <!-- Main Header Row -->
         <div class="argent-grid-header-row">
-          <!-- Selection Column Header -->
-          <div
-            *ngIf="showSelectionColumn"
-            class="argent-grid-header-cell argent-grid-selection-header"
-            [style.width.px]="selectionColumnWidth"
-            (click)="onSelectionHeaderClick()">
-            <input type="checkbox"
-                   [checked]="isAllSelected"
-                   [indeterminate]="isIndeterminateSelection"
-                   (change)="onSelectionHeaderChange($event)" />
-          </div>
+
         
           <!-- Left Pinned Columns -->
           <div class="argent-grid-header-pinned-left-container"
@@ -27,12 +17,21 @@
             <div
               *ngFor="let col of getLeftPinnedColumns(); trackBy: trackByColumn"
               class="argent-grid-header-cell argent-grid-header-cell-pinned-left"
+              [class.center-content]="col.colId === 'ag-Grid-SelectionColumn'"
               [style.width.px]="getColumnWidth(col)"
               [class.sortable]="isSortable(col)"
               (click)="onHeaderClick(col)"
               cdkDrag
+              [cdkDragDisabled]="col.colId === 'ag-Grid-SelectionColumn'"
               [cdkDragData]="col">
               <div class="argent-grid-header-content" cdkDragHandle>
+                <div *ngIf="hasHeaderCheckbox(col)" class="argent-grid-header-checkbox">
+                  <input type="checkbox"
+                         [checked]="isAllSelected"
+                         [indeterminate]="isIndeterminateSelection"
+                         (click)="$event.stopPropagation()"
+                         (change)="onSelectionHeaderChange($event)" />
+                </div>
                 <span class="header-text">{{ getHeaderName(col) }}</span>
                 <span class="sort-indicator" *ngIf="getSortIndicator(col)">{{ getSortIndicator(col) }}</span>
               </div>
@@ -59,12 +58,21 @@
               <div
                 *ngFor="let col of getNonPinnedColumns(); trackBy: trackByColumn"
                 class="argent-grid-header-cell"
+                [class.center-content]="col.colId === 'ag-Grid-SelectionColumn'"
                 [style.width.px]="getColumnWidth(col)"
                 [class.sortable]="isSortable(col)"
                 (click)="onHeaderClick(col)"
                 cdkDrag
+                [cdkDragDisabled]="col.colId === 'ag-Grid-SelectionColumn'"
                 [cdkDragData]="col">
                 <div class="argent-grid-header-content" cdkDragHandle>
+                  <div *ngIf="hasHeaderCheckbox(col)" class="argent-grid-header-checkbox">
+                    <input type="checkbox"
+                           [checked]="isAllSelected"
+                           [indeterminate]="isIndeterminateSelection"
+                           (click)="$event.stopPropagation()"
+                           (change)="onSelectionHeaderChange($event)" />
+                  </div>
                   <span class="header-text">{{ getHeaderName(col) }}</span>
                   <span class="sort-indicator" *ngIf="getSortIndicator(col)">{{ getSortIndicator(col) }}</span>
                 </div>
@@ -90,12 +98,21 @@
             <div
               *ngFor="let col of getRightPinnedColumns(); trackBy: trackByColumn"
               class="argent-grid-header-cell argent-grid-header-cell-pinned-right"
+              [class.center-content]="col.colId === 'ag-Grid-SelectionColumn'"
               [style.width.px]="getColumnWidth(col)"
               [class.sortable]="isSortable(col)"
               (click)="onHeaderClick(col)"
               cdkDrag
+              [cdkDragDisabled]="col.colId === 'ag-Grid-SelectionColumn'"
               [cdkDragData]="col">
               <div class="argent-grid-header-content" cdkDragHandle>
+                <div *ngIf="hasHeaderCheckbox(col)" class="argent-grid-header-checkbox">
+                  <input type="checkbox"
+                         [checked]="isAllSelected"
+                         [indeterminate]="isIndeterminateSelection"
+                         (click)="$event.stopPropagation()"
+                         (change)="onSelectionHeaderChange($event)" />
+                </div>
                 <span class="header-text">{{ getHeaderName(col) }}</span>
                 <span class="sort-indicator" *ngIf="getSortIndicator(col)">{{ getSortIndicator(col) }}</span>
               </div>
@@ -113,25 +130,36 @@
 
         <!-- Floating Filter Row -->
         <div class="argent-grid-header-row floating-filter-row" *ngIf="hasFloatingFilters()">
-          <!-- Selection Column Padding -->
-          <div *ngIf="showSelectionColumn" class="argent-grid-header-cell" [style.width.px]="selectionColumnWidth"></div>
+
 
           <!-- Left Pinned Filters -->
           <div class="argent-grid-header-pinned-left-container">
             <div
               *ngFor="let col of getLeftPinnedColumns(); trackBy: trackByColumn"
-              class="argent-grid-header-cell argent-grid-header-cell-pinned-left"
+              class="argent-grid-header-cell argent-grid-header-cell-pinned-left argent-grid-floating-filter-cell"
+              [class.center-content]="col.colId === 'ag-Grid-SelectionColumn'"
               [style.width.px]="getColumnWidth(col)">
               <div class="floating-filter-container" *ngIf="isFloatingFilterEnabled(col)">
-                <input #filterInput
-                       class="floating-filter-input"
-                       [type]="getFilterInputType(col)"
-                       [value]="getFloatingFilterValue(col)"
-                       (input)="onFloatingFilterInput($event, col)"
-                       [placeholder]="'Filter...'" />
-                <span class="floating-filter-clear"
-                      *ngIf="hasFilterValue(col, filterInput)"
-                      (click)="clearFloatingFilter(col, filterInput)">✕</span>
+                <!-- Set Filter Button -->
+                <button *ngIf="isSetFilter(col)"
+                        type="button"
+                        class="floating-filter-btn"
+                        (click)="openSetFilter($event, col)"
+                        [class.active]="hasSetFilterValue(col)">
+                  🔽 {{ getSetFilterCount(col) }}
+                </button>
+                <!-- Text/Number/Date Filter Input -->
+                <ng-container *ngIf="!isSetFilter(col)">
+                  <input #filterInput
+                         class="floating-filter-input"
+                         [type]="getFilterInputType(col)"
+                         [value]="getFloatingFilterValue(col)"
+                         (input)="onFloatingFilterInput($event, col)"
+                         [placeholder]="'Filter...'" />
+                  <span class="floating-filter-clear"
+                        *ngIf="hasFilterValue(col, filterInput)"
+                        (click)="clearFloatingFilter(col, filterInput)">✕</span>
+                </ng-container>
               </div>
             </div>
           </div>
@@ -141,9 +169,53 @@
             <div class="argent-grid-header-row">
               <div
                 *ngFor="let col of getNonPinnedColumns(); trackBy: trackByColumn"
-                class="argent-grid-header-cell"
+                class="argent-grid-header-cell argent-grid-floating-filter-cell"
+                [class.center-content]="col.colId === 'ag-Grid-SelectionColumn'"
                 [style.width.px]="getColumnWidth(col)">
                 <div class="floating-filter-container" *ngIf="isFloatingFilterEnabled(col)">
+                  <!-- Set Filter Button -->
+                  <button *ngIf="isSetFilter(col)"
+                          type="button"
+                          class="floating-filter-btn"
+                          (click)="openSetFilter($event, col)"
+                          [class.active]="hasSetFilterValue(col)">
+                    🔽 {{ getSetFilterCount(col) }}
+                  </button>
+                  <!-- Text/Number/Date Filter Input -->
+                  <ng-container *ngIf="!isSetFilter(col)">
+                    <input #filterInput
+                           class="floating-filter-input"
+                           [type]="getFilterInputType(col)"
+                           [value]="getFloatingFilterValue(col)"
+                           (input)="onFloatingFilterInput($event, col)"
+                           [placeholder]="'Filter...'" />
+                    <span class="floating-filter-clear"
+                          *ngIf="hasFilterValue(col, filterInput)"
+                          (click)="clearFloatingFilter(col, filterInput)">✕</span>
+                  </ng-container>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right Pinned Filters -->
+          <div class="argent-grid-header-pinned-right-container">
+            <div
+              *ngFor="let col of getRightPinnedColumns(); trackBy: trackByColumn"
+              class="argent-grid-header-cell argent-grid-header-cell-pinned-right argent-grid-floating-filter-cell"
+              [class.center-content]="col.colId === 'ag-Grid-SelectionColumn'"
+              [style.width.px]="getColumnWidth(col)">
+              <div class="floating-filter-container" *ngIf="isFloatingFilterEnabled(col)">
+                <!-- Set Filter Button -->
+                <button *ngIf="isSetFilter(col)"
+                        type="button"
+                        class="floating-filter-btn"
+                        (click)="openSetFilter($event, col)"
+                        [class.active]="hasSetFilterValue(col)">
+                  🔽 {{ getSetFilterCount(col) }}
+                </button>
+                <!-- Text/Number/Date Filter Input -->
+                <ng-container *ngIf="!isSetFilter(col)">
                   <input #filterInput
                          class="floating-filter-input"
                          [type]="getFilterInputType(col)"
@@ -153,29 +225,79 @@
                   <span class="floating-filter-clear"
                         *ngIf="hasFilterValue(col, filterInput)"
                         (click)="clearFloatingFilter(col, filterInput)">✕</span>
-                </div>
+                </ng-container>
               </div>
             </div>
           </div>
+        </div>
+      </div>
 
-          <!-- Right Pinned Filters -->
-          <div class="argent-grid-header-pinned-right-container">
-            <div
-              *ngFor="let col of getRightPinnedColumns(); trackBy: trackByColumn"
-              class="argent-grid-header-cell argent-grid-header-cell-pinned-right"
-              [style.width.px]="getColumnWidth(col)">
-              <div class="floating-filter-container" *ngIf="isFloatingFilterEnabled(col)">
-                <input #filterInput
-                       class="floating-filter-input"
-                       [type]="getFilterInputType(col)"
-                       [value]="getFloatingFilterValue(col)"
-                       (input)="onFloatingFilterInput($event, col)"
-                       [placeholder]="'Filter...'" />
-                <span class="floating-filter-clear"
-                      *ngIf="hasFilterValue(col, filterInput)"
-                      (click)="clearFloatingFilter(col, filterInput)">✕</span>
-              </div>
+      <!-- Set Filter Popup -->
+      <div *ngIf="activeSetFilter"
+           class="set-filter-popup"
+           [style.left.px]="setFilterPosition.x"
+           [style.top.px]="setFilterPosition.y"
+           (clickOutside)="closeSetFilter()"
+           clickOutside>
+        <argent-set-filter
+          [values]="setFilterValues"
+          [valueFormatter]="setFilterValueFormatter"
+          (filterChanged)="onSetFilterChanged($event)">
+        </argent-set-filter>
+      </div>
+
+      <!-- Text/Number Filter Popup -->
+      <div *ngIf="activeFilterPopup"
+           class="filter-popup"
+           [style.left.px]="filterPopupPosition.x"
+           [style.top.px]="filterPopupPosition.y"
+           (clickOutside)="closeFilterPopup()"
+           clickOutside>
+        <div class="filter-popup-header">
+          <span>Filter {{ getHeaderName(activeFilterPopupColumn!) }}</span>
+          <span class="filter-popup-close" (click)="closeFilterPopup()">✕</span>
+        </div>
+        <div class="filter-popup-body">
+          <!-- Operator Select -->
+          <div class="filter-popup-row">
+            <select class="filter-popup-select" 
+                    [value]="activeFilterOperator"
+                    (change)="onFilterPopupOperatorChange($any($event.target).value)">
+              <ng-container *ngIf="activeFilterPopupType === 'text'">
+                <option *ngFor="let op of textFilterOperators" [value]="op.value">{{ op.label }}</option>
+              </ng-container>
+              <ng-container *ngIf="activeFilterPopupType === 'number'">
+                <option *ngFor="let op of numberFilterOperators" [value]="op.value">{{ op.label }}</option>
+              </ng-container>
+            </select>
+          </div>
+
+          <!-- Value Input(s) -->
+          <ng-container *ngIf="activeFilterOperator !== 'blank' && activeFilterOperator !== 'notBlank'">
+            <div class="filter-popup-row">
+              <input #filterPopupInput
+                     [type]="activeFilterPopupType === 'number' ? 'number' : 'text'"
+                     class="filter-popup-input"
+                     [value]="filterValue1"
+                     (input)="onFilterPopupInput($event)"
+                     (keydown.enter)="closeFilterPopup()"
+                     [placeholder]="activeFilterOperator === 'inRange' ? 'From...' : 'Filter value...'"
+                     autofocus />
+            </div>
+
+            <div class="filter-popup-row" *ngIf="activeFilterOperator === 'inRange'">
+              <input type="number"
+                     class="filter-popup-input"
+                     [value]="filterValue2"
+                     (input)="onFilterPopupInput($event, true)"
+                     (keydown.enter)="closeFilterPopup()"
+                     [placeholder]="'To...'" />
             </div>
+          </ng-container>
+
+          <div class="filter-popup-footer">
+            <button class="filter-popup-btn clear-btn" (click)="clearColumnFilter(activeFilterPopupColumn!)">Clear</button>
+            <button class="filter-popup-btn apply-btn" (click)="closeFilterPopup()">Apply</button>
           </div>
         </div>
       </div>
@@ -264,28 +386,28 @@
        [style.top.px]="headerMenuPosition.y"
        [style.left.px]="headerMenuPosition.x"
        (click)="$event.stopPropagation()">
-    <div class="menu-item" (click)="sortColumnMenu('asc')">
-      <span class="menu-icon">↑</span> Sort Ascending
-    </div>
-    <div class="menu-item" (click)="sortColumnMenu('desc')">
-      <span class="menu-icon">↓</span> Sort Descending
-    </div>
-    <div class="menu-item" (click)="sortColumnMenu(null)">
-      <span class="menu-icon">✕</span> Clear Sort
-    </div>
-    <div class="menu-divider"></div>
-    <div class="menu-item" (click)="hideColumnMenu()">
-      <span class="menu-icon">ø</span> Hide Column
-    </div>
-    <div class="menu-item" (click)="pinColumnMenu('left')">
-      <span class="menu-icon">«</span> Pin Left
-    </div>
-    <div class="menu-item" (click)="pinColumnMenu('right')">
-      <span class="menu-icon">»</span> Pin Right
-    </div>
-    <div class="menu-item" (click)="pinColumnMenu(null)">
-      <span class="menu-icon">↺</span> Unpin
-    </div>
+    <ng-container *ngFor="let item of headerMenuItems">
+      <div *ngIf="item.separator" class="menu-divider"></div>
+      <div *ngIf="!item.separator" 
+           class="menu-item" 
+           [class.disabled]="item.disabled"
+           [class.has-submenu]="item.subMenu && item.subMenu.length > 0"
+           (click)="!item.disabled && item.action(); !item.subMenu && closeHeaderMenu()">
+        <span class="menu-icon" *ngIf="item.icon">{{ item.icon }}</span>
+        <span class="menu-text">{{ item.name }}</span>
+        <span class="menu-arrow" *ngIf="item.subMenu && item.subMenu.length > 0">▶</span>
+        
+        <!-- Sub-menu -->
+        <div class="argent-grid-header-menu sub-menu" *ngIf="item.subMenu && item.subMenu.length > 0">
+          <div *ngFor="let subItem of item.subMenu" 
+               class="menu-item"
+               (click)="subItem.action(); closeHeaderMenu(); $event.stopPropagation()">
+            <span class="menu-icon" *ngIf="subItem.icon">{{ subItem.icon }}</span>
+            <span class="menu-text">{{ subItem.name }}</span>
+          </div>
+        </div>
+      </div>
+    </ng-container>
   </div>
 
   <!-- Context Menu Overlay -->

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);
+    });
   });
 });