@alaarab/ogrid-angular-radix 2.0.4

package/src/__tests__/column-chooser.component.spec.ts.skip

@@ -0,0 +1,195 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { ColumnChooserComponent } from '../column-chooser/column-chooser.component';
+import type { IColumnDefinition } from '@alaarab/ogrid-angular';
+
+describe('ColumnChooserComponent', () => {
+  let component: ColumnChooserComponent;
+  let fixture: ComponentFixture<ColumnChooserComponent>;
+
+  const mockColumns: IColumnDefinition[] = [
+    { columnId: 'name', name: 'Name' },
+    { columnId: 'status', name: 'Status' },
+    { columnId: 'priority', name: 'Priority' },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ColumnChooserComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ColumnChooserComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display column count in trigger button', () => {
+    fixture.componentRef.setInput('columns', mockColumns);
+    fixture.componentRef.setInput('visibleColumns', new Set(['name', 'status']));
+    fixture.detectChanges();
+
+    const trigger = fixture.debugElement.query(By.css('.ogrid-column-chooser__trigger'));
+    expect(trigger.nativeElement.textContent).toContain('Columns (2/3)');
+  });
+
+  it('should toggle dropdown when trigger clicked', () => {
+    fixture.componentRef.setInput('columns', mockColumns);
+    fixture.componentRef.setInput('visibleColumns', new Set(['name']));
+    fixture.detectChanges();
+
+    const trigger = fixture.debugElement.query(By.css('.ogrid-column-chooser__trigger'));
+
+    // Initially closed
+    expect(component.isOpen()).toBe(false);
+    let dropdown = fixture.debugElement.query(By.css('.ogrid-column-chooser__dropdown'));
+    expect(dropdown).toBeNull();
+
+    // Click to open
+    trigger.nativeElement.click();
+    fixture.detectChanges();
+    expect(component.isOpen()).toBe(true);
+    dropdown = fixture.debugElement.query(By.css('.ogrid-column-chooser__dropdown'));
+    expect(dropdown).toBeTruthy();
+
+    // Click to close
+    trigger.nativeElement.click();
+    fixture.detectChanges();
+    expect(component.isOpen()).toBe(false);
+  });
+
+  it('should show aria-expanded attribute', () => {
+    fixture.componentRef.setInput('columns', mockColumns);
+    fixture.componentRef.setInput('visibleColumns', new Set(['name']));
+    fixture.detectChanges();
+
+    const trigger = fixture.debugElement.query(By.css('.ogrid-column-chooser__trigger'));
+
+    expect(trigger.nativeElement.getAttribute('aria-expanded')).toBe('false');
+
+    component.toggle();
+    fixture.detectChanges();
+
+    expect(trigger.nativeElement.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should render all columns as checkboxes', () => {
+    fixture.componentRef.setInput('columns', mockColumns);
+    fixture.componentRef.setInput('visibleColumns', new Set(['name', 'status']));
+    component.isOpen.set(true);
+    fixture.detectChanges();
+
+    const items = fixture.debugElement.queryAll(By.css('.ogrid-column-chooser__item'));
+    expect(items.length).toBe(3);
+
+    const checkboxes = fixture.debugElement.queryAll(By.css('input[type="checkbox"]'));
+    expect(checkboxes.length).toBe(3);
+  });
+
+  it('should check visible columns', () => {
+    fixture.componentRef.setInput('columns', mockColumns);
+    fixture.componentRef.setInput('visibleColumns', new Set(['name', 'priority']));
+    component.isOpen.set(true);
+    fixture.detectChanges();
+
+    const checkboxes = fixture.debugElement.queryAll(By.css('input[type="checkbox"]'));
+    expect(checkboxes[0].nativeElement.checked).toBe(true); // name
+    expect(checkboxes[1].nativeElement.checked).toBe(false); // status
+    expect(checkboxes[2].nativeElement.checked).toBe(true); // priority
+  });
+
+  it('should emit visibilityChange when checkbox toggled', () => {
+    fixture.componentRef.setInput('columns', mockColumns);
+    fixture.componentRef.setInput('visibleColumns', new Set(['name']));
+    component.isOpen.set(true);
+    fixture.detectChanges();
+
+    const visibilityChangeSpy = jest.fn();
+    component.visibilityChange.subscribe(visibilityChangeSpy);
+
+    const checkboxes = fixture.debugElement.queryAll(By.css('input[type="checkbox"]'));
+
+    // Toggle status checkbox (currently unchecked)
+    checkboxes[1].nativeElement.checked = true;
+    checkboxes[1].nativeElement.dispatchEvent(new Event('change'));
+    fixture.detectChanges();
+
+    expect(visibilityChangeSpy).toHaveBeenCalledWith({
+      columnKey: 'status',
+      visible: true,
+    });
+  });
+
+  it('should emit visibilityChange for all columns when selectAll clicked', () => {
+    fixture.componentRef.setInput('columns', mockColumns);
+    fixture.componentRef.setInput('visibleColumns', new Set(['name']));
+    component.isOpen.set(true);
+    fixture.detectChanges();
+
+    const visibilityChangeSpy = jest.fn();
+    component.visibilityChange.subscribe(visibilityChangeSpy);
+
+    const selectAllBtn = fixture.debugElement.queryAll(By.css('.ogrid-column-chooser__btn'))[1];
+    selectAllBtn.nativeElement.click();
+    fixture.detectChanges();
+
+    // Should emit for status and priority (not already visible)
+    expect(visibilityChangeSpy).toHaveBeenCalledTimes(2);
+    expect(visibilityChangeSpy).toHaveBeenCalledWith({ columnKey: 'status', visible: true });
+    expect(visibilityChangeSpy).toHaveBeenCalledWith({ columnKey: 'priority', visible: true });
+  });
+
+  it('should emit visibilityChange for all columns when clearAll clicked', () => {
+    fixture.componentRef.setInput('columns', mockColumns);
+    fixture.componentRef.setInput('visibleColumns', new Set(['name', 'status', 'priority']));
+    component.isOpen.set(true);
+    fixture.detectChanges();
+
+    const visibilityChangeSpy = jest.fn();
+    component.visibilityChange.subscribe(visibilityChangeSpy);
+
+    const clearAllBtn = fixture.debugElement.queryAll(By.css('.ogrid-column-chooser__btn'))[0];
+    clearAllBtn.nativeElement.click();
+    fixture.detectChanges();
+
+    // Should emit for all 3 columns
+    expect(visibilityChangeSpy).toHaveBeenCalledTimes(3);
+    expect(visibilityChangeSpy).toHaveBeenCalledWith({ columnKey: 'name', visible: false });
+    expect(visibilityChangeSpy).toHaveBeenCalledWith({ columnKey: 'status', visible: false });
+    expect(visibilityChangeSpy).toHaveBeenCalledWith({ columnKey: 'priority', visible: false });
+  });
+
+  it('should close dropdown when clicking outside', () => {
+    fixture.componentRef.setInput('columns', mockColumns);
+    fixture.componentRef.setInput('visibleColumns', new Set(['name']));
+    component.isOpen.set(true);
+    fixture.detectChanges();
+
+    // Simulate click outside
+    const outsideElement = document.createElement('div');
+    document.body.appendChild(outsideElement);
+
+    const event = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(event, 'target', { value: outsideElement, enumerable: true });
+
+    component.onDocumentClick(event);
+    fixture.detectChanges();
+
+    expect(component.isOpen()).toBe(false);
+
+    document.body.removeChild(outsideElement);
+  });
+
+  it('should display correct header text', () => {
+    fixture.componentRef.setInput('columns', mockColumns);
+    fixture.componentRef.setInput('visibleColumns', new Set(['name', 'status']));
+    component.isOpen.set(true);
+    fixture.detectChanges();
+
+    const header = fixture.debugElement.query(By.css('.ogrid-column-chooser__header'));
+    expect(header.nativeElement.textContent).toContain('Select Columns (2 of 3)');
+  });
+});

package/src/__tests__/column-header-filter.component.spec.ts.skip

@@ -0,0 +1,401 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
+
+describe('ColumnHeaderFilterComponent', () => {
+  let component: ColumnHeaderFilterComponent;
+  let fixture: ComponentFixture<ColumnHeaderFilterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ColumnHeaderFilterComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ColumnHeaderFilterComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render column name', () => {
+    fixture.componentRef.setInput('columnKey', 'name');
+    fixture.componentRef.setInput('columnName', 'Full Name');
+    fixture.componentRef.setInput('filterType', 'none');
+    fixture.detectChanges();
+
+    const headerLabel = fixture.debugElement.query(By.css('[data-header-label]'));
+    expect(headerLabel.nativeElement.textContent.trim()).toBe('Full Name');
+  });
+
+  describe('Sort button', () => {
+    it('should show sort button when onSort provided', () => {
+      fixture.componentRef.setInput('columnKey', 'name');
+      fixture.componentRef.setInput('columnName', 'Name');
+      fixture.componentRef.setInput('filterType', 'none');
+      fixture.componentRef.setInput('onSort', jest.fn());
+      fixture.detectChanges();
+
+      const sortButton = fixture.debugElement.query(
+        By.css('button[aria-label="Sort by Name"]')
+      );
+      expect(sortButton).toBeTruthy();
+    });
+
+    it('should not show sort button when onSort not provided', () => {
+      fixture.componentRef.setInput('columnKey', 'name');
+      fixture.componentRef.setInput('columnName', 'Name');
+      fixture.componentRef.setInput('filterType', 'none');
+      fixture.detectChanges();
+
+      const sortButton = fixture.debugElement.query(
+        By.css('button[aria-label="Sort by Name"]')
+      );
+      expect(sortButton).toBeNull();
+    });
+
+    it('should call onSort when sort button clicked', () => {
+      const onSortMock = jest.fn();
+      fixture.componentRef.setInput('columnKey', 'name');
+      fixture.componentRef.setInput('columnName', 'Name');
+      fixture.componentRef.setInput('filterType', 'none');
+      fixture.componentRef.setInput('onSort', onSortMock);
+      fixture.detectChanges();
+
+      const sortButton = fixture.debugElement.query(
+        By.css('button[aria-label="Sort by Name"]')
+      );
+      sortButton.nativeElement.click();
+
+      expect(onSortMock).toHaveBeenCalled();
+    });
+
+    it('should show ascending indicator when sorted ascending', () => {
+      fixture.componentRef.setInput('columnKey', 'name');
+      fixture.componentRef.setInput('columnName', 'Name');
+      fixture.componentRef.setInput('filterType', 'none');
+      fixture.componentRef.setInput('onSort', jest.fn());
+      fixture.componentRef.setInput('isSorted', true);
+      fixture.componentRef.setInput('isSortedDescending', false);
+      fixture.detectChanges();
+
+      const sortButton = fixture.debugElement.query(
+        By.css('button[aria-label="Sort by Name"]')
+      );
+      expect(sortButton.nativeElement.textContent.trim()).toBe('▲');
+    });
+
+    it('should show descending indicator when sorted descending', () => {
+      fixture.componentRef.setInput('columnKey', 'name');
+      fixture.componentRef.setInput('columnName', 'Name');
+      fixture.componentRef.setInput('filterType', 'none');
+      fixture.componentRef.setInput('onSort', jest.fn());
+      fixture.componentRef.setInput('isSorted', true);
+      fixture.componentRef.setInput('isSortedDescending', true);
+      fixture.detectChanges();
+
+      const sortButton = fixture.debugElement.query(
+        By.css('button[aria-label="Sort by Name"]')
+      );
+      expect(sortButton.nativeElement.textContent.trim()).toBe('▼');
+    });
+  });
+
+  describe('Filter button', () => {
+    it('should show filter button when filterType is not none', () => {
+      fixture.componentRef.setInput('columnKey', 'name');
+      fixture.componentRef.setInput('columnName', 'Name');
+      fixture.componentRef.setInput('filterType', 'text');
+      fixture.detectChanges();
+
+      const filterButton = fixture.debugElement.query(
+        By.css('button[aria-label="Filter Name"]')
+      );
+      expect(filterButton).toBeTruthy();
+    });
+
+    it('should not show filter button when filterType is none', () => {
+      fixture.componentRef.setInput('columnKey', 'name');
+      fixture.componentRef.setInput('columnName', 'Name');
+      fixture.componentRef.setInput('filterType', 'none');
+      fixture.detectChanges();
+
+      const filterButton = fixture.debugElement.query(
+        By.css('button[aria-label="Filter Name"]')
+      );
+      expect(filterButton).toBeNull();
+    });
+
+    it('should toggle popover when filter button clicked', () => {
+      fixture.componentRef.setInput('columnKey', 'name');
+      fixture.componentRef.setInput('columnName', 'Name');
+      fixture.componentRef.setInput('filterType', 'text');
+      fixture.detectChanges();
+
+      const filterButton = fixture.debugElement.query(
+        By.css('button[aria-label="Filter Name"]')
+      );
+
+      // Open popover
+      filterButton.nativeElement.click();
+      fixture.detectChanges();
+      expect(component.isFilterOpen()).toBe(true);
+      let popover = fixture.debugElement.query(By.css('.ogrid-header-filter__popover'));
+      expect(popover).toBeTruthy();
+
+      // Close popover
+      filterButton.nativeElement.click();
+      fixture.detectChanges();
+      expect(component.isFilterOpen()).toBe(false);
+      popover = fixture.debugElement.query(By.css('.ogrid-header-filter__popover'));
+      expect(popover).toBeNull();
+    });
+
+    it('should show active indicator when filter has value', () => {
+      fixture.componentRef.setInput('columnKey', 'name');
+      fixture.componentRef.setInput('columnName', 'Name');
+      fixture.componentRef.setInput('filterType', 'text');
+      fixture.componentRef.setInput('textValue', 'test');
+      fixture.detectChanges();
+
+      const filterButton = fixture.debugElement.query(
+        By.css('button[aria-label="Filter Name"]')
+      );
+      const dot = filterButton.query(By.css('.ogrid-header-filter__dot'));
+      expect(dot).toBeTruthy();
+    });
+  });
+
+  describe('Text filter', () => {
+    beforeEach(() => {
+      fixture.componentRef.setInput('columnKey', 'name');
+      fixture.componentRef.setInput('columnName', 'Name');
+      fixture.componentRef.setInput('filterType', 'text');
+      fixture.componentRef.setInput('textValue', '');
+      fixture.componentRef.setInput('onTextChange', jest.fn());
+    });
+
+    it('should render text input when popover open', () => {
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      const input = fixture.debugElement.query(
+        By.css('input[type="text"][placeholder="Enter search term..."]')
+      );
+      expect(input).toBeTruthy();
+    });
+
+    it('should call onTextChange when Apply clicked', () => {
+      const onTextChangeMock = jest.fn();
+      fixture.componentRef.setInput('onTextChange', onTextChangeMock);
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      const input = fixture.debugElement.query(
+        By.css('input[type="text"][placeholder="Enter search term..."]')
+      );
+      input.nativeElement.value = 'test value';
+      input.nativeElement.dispatchEvent(new Event('input'));
+      fixture.detectChanges();
+
+      const applyButton = fixture.debugElement.queryAll(
+        By.css('.ogrid-header-filter__action-btn--primary')
+      )[0];
+      applyButton.nativeElement.click();
+
+      expect(onTextChangeMock).toHaveBeenCalledWith('test value');
+    });
+
+    it('should call onTextChange with empty string when Clear clicked', () => {
+      const onTextChangeMock = jest.fn();
+      fixture.componentRef.setInput('onTextChange', onTextChangeMock);
+      fixture.componentRef.setInput('textValue', 'existing');
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      const clearButton = fixture.debugElement.queryAll(
+        By.css('.ogrid-header-filter__action-btn')
+      )[0];
+      clearButton.nativeElement.click();
+
+      expect(onTextChangeMock).toHaveBeenCalledWith('');
+    });
+
+    it('should disable Clear button when no text value', () => {
+      fixture.componentRef.setInput('textValue', '');
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      const clearButton = fixture.debugElement.queryAll(
+        By.css('.ogrid-header-filter__action-btn')
+      )[0];
+      expect(clearButton.nativeElement.disabled).toBe(true);
+    });
+  });
+
+  describe('MultiSelect filter', () => {
+    const options = ['Option 1', 'Option 2', 'Option 3'];
+
+    beforeEach(() => {
+      fixture.componentRef.setInput('columnKey', 'status');
+      fixture.componentRef.setInput('columnName', 'Status');
+      fixture.componentRef.setInput('filterType', 'multiSelect');
+      fixture.componentRef.setInput('options', options);
+      fixture.componentRef.setInput('selectedValues', []);
+      fixture.componentRef.setInput('onFilterChange', jest.fn());
+    });
+
+    it('should render options list when popover open', () => {
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      const optionLabels = fixture.debugElement.queryAll(
+        By.css('.ogrid-header-filter__option')
+      );
+      expect(optionLabels.length).toBe(3);
+    });
+
+    it('should show loading state', () => {
+      fixture.componentRef.setInput('isLoadingOptions', true);
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      const loading = fixture.debugElement.query(By.css('.ogrid-header-filter__loading'));
+      expect(loading).toBeTruthy();
+      expect(loading.nativeElement.textContent).toContain('Loading');
+    });
+
+    it('should filter options based on search text', () => {
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      const searchInput = fixture.debugElement.query(
+        By.css('input[type="text"][placeholder="Search..."]')
+      );
+      searchInput.nativeElement.value = '2';
+      searchInput.nativeElement.dispatchEvent(new Event('input'));
+      fixture.detectChanges();
+
+      const optionLabels = fixture.debugElement.queryAll(
+        By.css('.ogrid-header-filter__option')
+      );
+      expect(optionLabels.length).toBe(1);
+      expect(optionLabels[0].nativeElement.textContent).toContain('Option 2');
+    });
+
+    it('should show empty state when no options match search', () => {
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      const searchInput = fixture.debugElement.query(
+        By.css('input[type="text"][placeholder="Search..."]')
+      );
+      searchInput.nativeElement.value = 'nonexistent';
+      searchInput.nativeElement.dispatchEvent(new Event('input'));
+      fixture.detectChanges();
+
+      const empty = fixture.debugElement.query(By.css('.ogrid-header-filter__empty'));
+      expect(empty).toBeTruthy();
+      expect(empty.nativeElement.textContent).toContain('No options found');
+    });
+
+    it('should check selected options', () => {
+      fixture.componentRef.setInput('selectedValues', ['Option 1', 'Option 3']);
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      const checkboxes = fixture.debugElement.queryAll(
+        By.css('.ogrid-header-filter__option input[type="checkbox"]')
+      );
+      expect(checkboxes[0].nativeElement.checked).toBe(true);
+      expect(checkboxes[1].nativeElement.checked).toBe(false);
+      expect(checkboxes[2].nativeElement.checked).toBe(true);
+    });
+
+    it('should call onFilterChange when Apply clicked', () => {
+      const onFilterChangeMock = jest.fn();
+      fixture.componentRef.setInput('onFilterChange', onFilterChangeMock);
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      // Toggle first checkbox
+      const checkboxes = fixture.debugElement.queryAll(
+        By.css('.ogrid-header-filter__option input[type="checkbox"]')
+      );
+      checkboxes[0].nativeElement.checked = true;
+      checkboxes[0].nativeElement.dispatchEvent(new Event('change'));
+      fixture.detectChanges();
+
+      const applyButton = fixture.debugElement.queryAll(
+        By.css('.ogrid-header-filter__action-btn--primary')
+      )[0];
+      applyButton.nativeElement.click();
+
+      expect(onFilterChangeMock).toHaveBeenCalledWith(['Option 1']);
+    });
+
+    it('should select all filtered options when Select All clicked', () => {
+      const onFilterChangeMock = jest.fn();
+      fixture.componentRef.setInput('onFilterChange', onFilterChangeMock);
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      const selectAllButton = fixture.debugElement.queryAll(
+        By.css('.ogrid-header-filter__select-actions .ogrid-header-filter__action-btn')
+      )[0];
+      selectAllButton.nativeElement.click();
+      fixture.detectChanges();
+
+      const applyButton = fixture.debugElement.queryAll(
+        By.css('.ogrid-header-filter__action-btn--primary')
+      )[0];
+      applyButton.nativeElement.click();
+
+      expect(onFilterChangeMock).toHaveBeenCalledWith(['Option 1', 'Option 2', 'Option 3']);
+    });
+
+    it('should clear selection when Clear clicked in multiSelect actions', () => {
+      fixture.componentRef.setInput('selectedValues', ['Option 1', 'Option 2']);
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      const clearButton = fixture.debugElement.queryAll(
+        By.css('.ogrid-header-filter__select-actions .ogrid-header-filter__action-btn')
+      )[1];
+      clearButton.nativeElement.click();
+      fixture.detectChanges();
+
+      const checkboxes = fixture.debugElement.queryAll(
+        By.css('.ogrid-header-filter__option input[type="checkbox"]')
+      );
+      expect(checkboxes.every((cb) => !cb.nativeElement.checked)).toBe(true);
+    });
+  });
+
+  describe('Date filter', () => {
+    beforeEach(() => {
+      fixture.componentRef.setInput('columnKey', 'createdDate');
+      fixture.componentRef.setInput('columnName', 'Created Date');
+      fixture.componentRef.setInput('filterType', 'date');
+      fixture.componentRef.setInput('onDateChange', jest.fn());
+    });
+
+    it('should render date operator dropdown', () => {
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      const select = fixture.debugElement.query(By.css('select'));
+      expect(select).toBeTruthy();
+    });
+
+    it('should render date input fields', () => {
+      component.isFilterOpen.set(true);
+      fixture.detectChanges();
+
+      const dateInputs = fixture.debugElement.queryAll(By.css('input[type="date"]'));
+      expect(dateInputs.length).toBeGreaterThan(0);
+    });
+  });
+});