argent-grid 0.1.0 → 0.3.0

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

@@ -0,0 +1,301 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ArgentGridComponent } from './argent-grid.component';
+
+describe('ArgentGridComponent - Regression Protection', () => {
+  let component: ArgentGridComponent<any>;
+  let mockCdr: any;
+  let mockElementRef: any;
+
+  beforeEach(() => {
+    // Mock canvas context
+    HTMLCanvasElement.prototype.getContext = vi.fn().mockReturnValue({
+      measureText: vi.fn().mockReturnValue({ width: 50 }),
+    } as any);
+
+    mockCdr = {
+      detectChanges: vi.fn(),
+      markForCheck: vi.fn(),
+    };
+
+    mockElementRef = {
+      nativeElement: {
+        getBoundingClientRect: () => ({ left: 100, top: 100, right: 1100, bottom: 900 }),
+        offsetWidth: 1000,
+        offsetHeight: 800,
+        style: {},
+      },
+    };
+
+    component = new ArgentGridComponent(mockCdr, mockElementRef);
+
+    // Mock canvasRenderer
+    (component as any).canvasRenderer = {
+      getHitTestResult: vi.fn().mockReturnValue({ rowIndex: 0, columnIndex: 0 }),
+      render: vi.fn(),
+      renderFrame: vi.fn(),
+    };
+
+    component.columnDefs = [{ field: 'id', headerName: 'ID' }];
+    component.rowData = [{ id: 1 }];
+    component.ngOnInit();
+  });
+
+  it('should hide row group panel by default', () => {
+    expect(component.isRowGroupPanelVisible()).toBe(false);
+  });
+
+  it('should show row group panel when always is set', () => {
+    component.gridOptions = { rowGroupPanelShow: 'always' };
+    // Simulate option change
+    (component as any).onGridOptionsChanged(component.gridOptions);
+    expect(component.isRowGroupPanelVisible()).toBe(true);
+  });
+
+  it('should position header menu relative to container', () => {
+    const mockEvent = {
+      stopPropagation: vi.fn(),
+      target: {
+        getBoundingClientRect: () => ({ left: 200, top: 120, right: 220, bottom: 140 }),
+      },
+    } as any;
+
+    const col = component.getApi().getAllColumns()[0];
+    component.onHeaderMenuClick(mockEvent, col);
+
+    expect(component.activeHeaderMenu).toBe(col);
+    // Container is at 100, 100. Icon is at 200, 120.
+    // Relative X = IconLeft - ContainerLeft = 200 - 100 = 100
+    // Relative Y = IconBottom - ContainerTop + 4 = 140 - 100 + 4 = 44
+    expect(component.headerMenuPosition.x).toBe(100);
+    expect(component.headerMenuPosition.y).toBe(44);
+  });
+
+  it('should position context menu relative to container', () => {
+    const mockEvent = {
+      preventDefault: vi.fn(),
+      stopPropagation: vi.fn(),
+      clientX: 250,
+      clientY: 300,
+    } as any;
+
+    // Mock row node finding logic
+    const rowNode = { id: '1', data: { id: 1 }, selected: false, setSelected: vi.fn() };
+    vi.spyOn(component.getApi(), 'getDisplayedRowAtIndex').mockReturnValue(rowNode as any);
+
+    component.onCanvasContextMenu(mockEvent);
+
+    // Relative X = clientX - ContainerLeft = 250 - 100 = 150
+    // Relative Y = clientY - ContainerTop = 300 - 100 = 200
+    expect(component.contextMenuPosition.x).toBe(150);
+    expect(component.contextMenuPosition.y).toBe(200);
+  });
+
+  it('should update rowGroupColumns when columns change', () => {
+    expect(component.rowGroupColumns.length).toBe(0);
+
+    // Add group column via API
+    component.getApi().addRowGroupColumn('id');
+
+    // The component listens to gridStateChanged$ which calls updateRowGroupColumns
+    expect(component.rowGroupColumns.length).toBe(1);
+    expect(component.rowGroupColumns[0].colId).toBe('id');
+  });
+});
+
+// ─── Header Filter Button ──────────────────────────────────────────────────
+
+describe('ArgentGridComponent - Header Filter Button', () => {
+  let component: ArgentGridComponent<any>;
+
+  beforeEach(() => {
+    HTMLCanvasElement.prototype.getContext = vi.fn().mockReturnValue({
+      measureText: vi.fn().mockReturnValue({ width: 50 }),
+    } as any);
+
+    const mockCdr = { detectChanges: vi.fn(), markForCheck: vi.fn() };
+    const mockElementRef = {
+      nativeElement: {
+        getBoundingClientRect: () => ({ left: 0, top: 0 }),
+        offsetWidth: 1000,
+        offsetHeight: 800,
+        style: {},
+      },
+    };
+
+    component = new ArgentGridComponent(mockCdr as any, mockElementRef as any);
+    component.columnDefs = [
+      { field: 'name', filter: 'text' },
+      { field: 'dept', filter: 'set' },
+      { field: 'salary', filter: 'number', floatingFilter: true },
+      { field: 'id' }, // no filter
+      { field: 'status', filter: 'text', suppressHeaderFilterButton: true },
+    ];
+    component.rowData = [{ name: 'Alice', dept: 'Eng', salary: 100, id: 1, status: 'active' }];
+    component.ngOnInit();
+  });
+
+  describe('hasHeaderFilterButton', () => {
+    it('should return true for column with filter and no floatingFilter', () => {
+      const col = component
+        .getApi()
+        .getAllColumns()
+        .find((c) => c.field === 'name')!;
+      expect(component.hasHeaderFilterButton(col)).toBe(true);
+    });
+
+    it('should return true for set-filter column', () => {
+      const col = component
+        .getApi()
+        .getAllColumns()
+        .find((c) => c.field === 'dept')!;
+      expect(component.hasHeaderFilterButton(col)).toBe(true);
+    });
+
+    it('should return false when floatingFilter is enabled', () => {
+      const col = component
+        .getApi()
+        .getAllColumns()
+        .find((c) => c.field === 'salary')!;
+      expect(component.hasHeaderFilterButton(col)).toBe(false);
+    });
+
+    it('should return false when no filter configured', () => {
+      const col = component
+        .getApi()
+        .getAllColumns()
+        .find((c) => c.field === 'id')!;
+      expect(component.hasHeaderFilterButton(col)).toBe(false);
+    });
+
+    it('should return false when suppressHeaderFilterButton is true', () => {
+      const col = component
+        .getApi()
+        .getAllColumns()
+        .find((c) => c.field === 'status')!;
+      expect(component.hasHeaderFilterButton(col)).toBe(false);
+    });
+
+    it('should return false for the selection column', () => {
+      const fakeSelCol = { colId: 'ag-Grid-SelectionColumn' } as any;
+      expect(component.hasHeaderFilterButton(fakeSelCol)).toBe(false);
+    });
+  });
+
+  describe('isColumnFiltered', () => {
+    it('should return false when no filter is applied', () => {
+      const col = component
+        .getApi()
+        .getAllColumns()
+        .find((c) => c.field === 'name')!;
+      expect(component.isColumnFiltered(col)).toBe(false);
+    });
+
+    it('should return true when a filter is active on the column', () => {
+      component
+        .getApi()
+        .setFilterModel({ name: { filterType: 'text', type: 'contains', filter: 'Alice' } });
+      const col = component
+        .getApi()
+        .getAllColumns()
+        .find((c) => c.field === 'name')!;
+      expect(component.isColumnFiltered(col)).toBe(true);
+    });
+
+    it('should return false for a different column when only one filtered', () => {
+      component
+        .getApi()
+        .setFilterModel({ name: { filterType: 'text', type: 'contains', filter: 'Alice' } });
+      const col = component
+        .getApi()
+        .getAllColumns()
+        .find((c) => c.field === 'dept')!;
+      expect(component.isColumnFiltered(col)).toBe(false);
+    });
+  });
+
+  describe('openColumnsPanel', () => {
+    it('should make sideBarVisible true', () => {
+      component.sideBarVisible = false;
+      component.openColumnsPanel();
+      expect(component.sideBarVisible).toBe(true);
+    });
+
+    it('should set activeToolPanel to columns', () => {
+      component.activeToolPanel = null;
+      component.openColumnsPanel();
+      expect(component.activeToolPanel).toBe('columns');
+    });
+
+    it('should close any open header menu', () => {
+      const col = component.getApi().getAllColumns()[0];
+      component.activeHeaderMenu = col;
+      component.openColumnsPanel();
+      expect(component.activeHeaderMenu).toBeNull();
+    });
+  });
+});
+
+// ─── openSetFilter restores selected values ─────────────────────────────────
+
+describe('ArgentGridComponent - openSetFilter restores filter state', () => {
+  let component: ArgentGridComponent<any>;
+
+  beforeEach(() => {
+    HTMLCanvasElement.prototype.getContext = vi.fn().mockReturnValue({
+      measureText: vi.fn().mockReturnValue({ width: 50 }),
+    } as any);
+
+    const mockCdr = { detectChanges: vi.fn(), markForCheck: vi.fn() };
+    const mockElementRef = {
+      nativeElement: {
+        getBoundingClientRect: () => ({ left: 0, top: 0 }),
+        offsetWidth: 1000,
+        offsetHeight: 800,
+        style: {},
+      },
+    };
+
+    component = new ArgentGridComponent(mockCdr as any, mockElementRef as any);
+    component.columnDefs = [{ field: 'dept', filter: 'set' }];
+    component.rowData = [{ dept: 'Engineering' }, { dept: 'Sales' }, { dept: 'Marketing' }];
+    component.ngOnInit();
+  });
+
+  it('should set setFilterSelectedValues to null when no existing filter', () => {
+    const col = component.getApi().getAllColumns()[0];
+    component.openSetFilter(null, col, { x: 0, y: 0 });
+    expect(component.setFilterSelectedValues).toBeNull();
+  });
+
+  it('should restore previously selected values from the filter model', () => {
+    component.getApi().setFilterModel({
+      dept: { filterType: 'set', values: ['Engineering', 'Sales'] },
+    });
+
+    const col = component.getApi().getAllColumns()[0];
+    component.openSetFilter(null, col, { x: 0, y: 0 });
+
+    expect(component.setFilterSelectedValues).toEqual(['Engineering', 'Sales']);
+  });
+
+  it('should set setFilterSelectedValues to null for non-set filter models', () => {
+    // Manually set a text filter (wrong type) under the dept colId
+    component.getApi().setFilterModel({
+      dept: { filterType: 'text', type: 'contains', filter: 'Eng' },
+    });
+
+    const col = component.getApi().getAllColumns()[0];
+    component.openSetFilter(null, col, { x: 0, y: 0 });
+
+    expect(component.setFilterSelectedValues).toBeNull();
+  });
+
+  it('should populate setFilterValues with all unique values for the column', () => {
+    const col = component.getApi().getAllColumns()[0];
+    component.openSetFilter(null, col, { x: 0, y: 0 });
+
+    expect(component.setFilterValues).toContain('Engineering');
+    expect(component.setFilterValues).toContain('Sales');
+    expect(component.setFilterValues).toContain('Marketing');
+  });
+});

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

@@ -0,0 +1,132 @@
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { ArgentGridModule } from '../argent-grid.module';
+import { GridService } from '../services/grid.service';
+import { ArgentGridComponent } from './argent-grid.component';
+
+interface TestData {
+  id: number;
+  name: string;
+}
+
+describe('ArgentGridComponent - Selection Behavior', () => {
+  let component: ArgentGridComponent<TestData>;
+  let fixture: ComponentFixture<ArgentGridComponent<TestData>>;
+
+  const testColumnDefs = [
+    { field: 'id', headerName: 'ID', checkboxSelection: true },
+    { field: 'name', headerName: 'Name' },
+  ];
+
+  const testRowData = [
+    { id: 1, name: 'Item 1' },
+    { id: 2, name: 'Item 2' },
+    { id: 3, name: 'Item 3' },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ArgentGridModule],
+      providers: [GridService, provideExperimentalZonelessChangeDetection()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ArgentGridComponent);
+    component = fixture.componentInstance;
+    component.columnDefs = testColumnDefs;
+    component.rowData = testRowData;
+    component.rowSelection = 'multiple';
+    fixture.detectChanges();
+  });
+
+  it('should initialize with no rows selected', () => {
+    expect(component.isAllSelected).toBe(false);
+    expect(component.isIndeterminateSelection).toBe(false);
+    expect(component.getApi().getSelectedRows().length).toBe(0);
+  });
+
+  it('should toggle all rows when header checkbox is clicked', () => {
+    // Select all
+    const event = { target: { checked: true } } as any;
+    component.onSelectionHeaderChange(event);
+
+    expect(component.getApi().getSelectedRows().length).toBe(3);
+    expect(component.isAllSelected).toBe(true);
+    expect(component.isIndeterminateSelection).toBe(false);
+
+    // Deselect all
+    event.target.checked = false;
+    component.onSelectionHeaderChange(event);
+
+    expect(component.getApi().getSelectedRows().length).toBe(0);
+    expect(component.isAllSelected).toBe(false);
+    expect(component.isIndeterminateSelection).toBe(false);
+  });
+
+  it('should update indeterminate state when single row is selected', () => {
+    const api = component.getApi();
+    const node = api.getDisplayedRowAtIndex(0);
+
+    node?.setSelected(true);
+    // GridState listener in component should trigger updateSelectionState
+    // We might need to manually trigger or wait for microtasks if not using zone.js
+    component.updateSelectionState();
+
+    expect(component.getApi().getSelectedRows().length).toBe(1);
+    expect(component.isAllSelected).toBe(false);
+    expect(component.isIndeterminateSelection).toBe(true);
+  });
+
+  it('should toggle selection when a row is clicked', () => {
+    const api = component.getApi();
+    const mouseEvent = new MouseEvent('click');
+
+    // Select row
+    component.onRowClick(0, mouseEvent);
+    expect(api.getDisplayedRowAtIndex(0)?.selected).toBe(true);
+
+    // Unselect row by clicking again (toggle behavior)
+    component.onRowClick(0, mouseEvent);
+    expect(api.getDisplayedRowAtIndex(0)?.selected).toBe(false);
+  });
+
+  it('should clear others when clicking a row without modifiers', () => {
+    const api = component.getApi();
+    const mouseEvent = new MouseEvent('click');
+
+    // Select first row
+    component.onRowClick(0, mouseEvent);
+    expect(api.getDisplayedRowAtIndex(0)?.selected).toBe(true);
+
+    // Click second row
+    component.onRowClick(1, mouseEvent);
+    expect(api.getDisplayedRowAtIndex(0)?.selected).toBe(false);
+    expect(api.getDisplayedRowAtIndex(1)?.selected).toBe(true);
+  });
+
+  it('should keep multiple selection when using Ctrl key', () => {
+    const api = component.getApi();
+    const ctrlEvent = new MouseEvent('click', { ctrlKey: true });
+
+    component.onRowClick(0, ctrlEvent);
+    component.onRowClick(1, ctrlEvent);
+
+    expect(api.getDisplayedRowAtIndex(0)?.selected).toBe(true);
+    expect(api.getDisplayedRowAtIndex(1)?.selected).toBe(true);
+    expect(api.getSelectedRows().length).toBe(2);
+  });
+
+  it('should disable sorting and menu for dedicated selection column', () => {
+    const selectionCol = component.getApi().getAllColumns()[0];
+    expect(selectionCol.colId).toBe('ag-Grid-SelectionColumn');
+
+    expect(component.isSortable(selectionCol)).toBe(false);
+    expect(component.hasHeaderMenu(selectionCol)).toBe(false);
+    expect(component.getHeaderName(selectionCol)).toBe('');
+  });
+
+  it('should allow resizing for dedicated selection column', () => {
+    const selectionCol = component.getApi().getAllColumns()[0];
+    expect(component.isResizable(selectionCol)).toBe(true);
+  });
+});

package/src/lib/components/set-filter/set-filter.component.spec.ts

@@ -0,0 +1,191 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { SetFilterComponent } from './set-filter.component';
+
+describe('SetFilterComponent', () => {
+  let component: SetFilterComponent<string>;
+
+  const values = ['Engineering', 'Sales', 'Marketing', 'Engineering', 'Sales'];
+
+  beforeEach(() => {
+    component = new SetFilterComponent();
+  });
+
+  // ── initialSelectedValues ──────────────────────────────────────────────────
+
+  describe('initialSelectedValues input', () => {
+    it('should check all items when initialSelectedValues is null (default)', () => {
+      component.values = values;
+      component.initialSelectedValues = null;
+      component.ngOnInit();
+
+      expect(component.allValues.every((v) => v.selected)).toBe(true);
+    });
+
+    it('should pre-check only the provided values when initialSelectedValues is set', () => {
+      component.values = values;
+      component.initialSelectedValues = ['Engineering'];
+      component.ngOnInit();
+
+      const eng = component.allValues.find((v) => v.value === 'Engineering');
+      const sales = component.allValues.find((v) => v.value === 'Sales');
+      const mkt = component.allValues.find((v) => v.value === 'Marketing');
+
+      expect(eng?.selected).toBe(true);
+      expect(sales?.selected).toBe(false);
+      expect(mkt?.selected).toBe(false);
+    });
+
+    it('should populate selectedValues matching initialSelectedValues', () => {
+      component.values = values;
+      component.initialSelectedValues = ['Sales', 'Marketing'];
+      component.ngOnInit();
+
+      expect(component.selectedValues).toEqual(expect.arrayContaining(['Sales', 'Marketing']));
+      expect(component.selectedValues).not.toContain('Engineering');
+    });
+
+    it('should handle empty initialSelectedValues (none checked)', () => {
+      component.values = values;
+      component.initialSelectedValues = [];
+      component.ngOnInit();
+
+      expect(component.allValues.every((v) => !v.selected)).toBe(true);
+      expect(component.selectedValues).toEqual([]);
+    });
+
+    it('should handle initialSelectedValues with values not present in list gracefully', () => {
+      component.values = values;
+      component.initialSelectedValues = ['NonExistent'];
+      component.ngOnInit();
+
+      expect(component.allValues.every((v) => !v.selected)).toBe(true);
+    });
+  });
+
+  // ── resetFilter ────────────────────────────────────────────────────────────
+
+  describe('resetFilter', () => {
+    it('should re-select all items after reset, regardless of initialSelectedValues', () => {
+      component.values = values;
+      component.initialSelectedValues = ['Engineering'];
+      component.ngOnInit();
+
+      // Confirm only Engineering is selected before reset
+      expect(component.allValues.filter((v) => v.selected).length).toBe(1);
+
+      const emit = vi.fn();
+      component.filterChanged.emit = emit;
+      component.resetFilter();
+
+      // After reset, all items should be selected
+      expect(component.allValues.every((v) => v.selected)).toBe(true);
+      expect(emit).toHaveBeenCalledWith(
+        expect.arrayContaining(['Engineering', 'Sales', 'Marketing'])
+      );
+    });
+
+    it('should clear search text on reset', () => {
+      component.values = values;
+      component.ngOnInit();
+      component.searchText = 'Eng';
+
+      component.resetFilter();
+
+      expect(component.searchText).toBe('');
+    });
+  });
+
+  // ── selectAll / clearAll ───────────────────────────────────────────────────
+
+  describe('selectAll', () => {
+    it('should mark all items selected', () => {
+      component.values = values;
+      component.initialSelectedValues = ['Engineering'];
+      component.ngOnInit();
+
+      component.selectAll();
+
+      expect(component.allValues.every((v) => v.selected)).toBe(true);
+    });
+  });
+
+  describe('clearAll', () => {
+    it('should uncheck all items', () => {
+      component.values = values;
+      component.ngOnInit();
+
+      component.clearAll();
+
+      expect(component.allValues.every((v) => !v.selected)).toBe(true);
+      expect(component.selectedValues).toEqual([]);
+    });
+  });
+
+  // ── applyFilter ────────────────────────────────────────────────────────────
+
+  describe('applyFilter', () => {
+    it('should emit only selected values', () => {
+      component.values = values;
+      component.initialSelectedValues = ['Engineering'];
+      component.ngOnInit();
+
+      const emit = vi.fn();
+      component.filterChanged.emit = emit;
+      component.applyFilter();
+
+      expect(emit).toHaveBeenCalledWith(['Engineering']);
+    });
+  });
+
+  // ── filteredValues (search) ────────────────────────────────────────────────
+
+  describe('filteredValues', () => {
+    beforeEach(() => {
+      component.values = values;
+      component.ngOnInit();
+    });
+
+    it('should return all values when search is empty', () => {
+      expect(component.filteredValues.length).toBe(3); // unique: Eng, Sales, Mkt
+    });
+
+    it('should filter by search text (case-insensitive)', () => {
+      component.searchText = 'eng';
+      expect(component.filteredValues.length).toBe(1);
+      expect(component.filteredValues[0].value).toBe('Engineering');
+    });
+
+    it('should return empty when search matches nothing', () => {
+      component.searchText = 'zzz';
+      expect(component.filteredValues.length).toBe(0);
+    });
+  });
+
+  // ── value counts ──────────────────────────────────────────────────────────
+
+  describe('value counts', () => {
+    it('should count occurrences correctly', () => {
+      component.values = values; // Eng x2, Sales x2, Mkt x1
+      component.ngOnInit();
+
+      const eng = component.allValues.find((v) => v.value === 'Engineering');
+      const mkt = component.allValues.find((v) => v.value === 'Marketing');
+
+      expect(eng?.count).toBe(2);
+      expect(mkt?.count).toBe(1);
+    });
+  });
+
+  // ── valueFormatter ────────────────────────────────────────────────────────
+
+  describe('valueFormatter', () => {
+    it('should apply formatter to display values', () => {
+      component.values = ['eng', 'sales'];
+      component.valueFormatter = (v) => v.toUpperCase();
+      component.ngOnInit();
+
+      expect(component.allValues[0].displayValue).toBe('ENG');
+      expect(component.allValues[1].displayValue).toBe('SALES');
+    });
+  });
+});