@alaarab/ogrid-angular-radix 2.0.4

package/src/__tests__/datagrid-table.component.spec.ts.skip

@@ -0,0 +1,417 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { DataGridTableComponent } from '../datagrid-table/datagrid-table.component';
+import type { IColumnDefinition, IOGridDataGridProps } from '@alaarab/ogrid-angular';
+
+interface TestRow {
+  id: string;
+  name: string;
+  status: string;
+  value: number;
+}
+
+describe('DataGridTableComponent', () => {
+  let component: DataGridTableComponent<TestRow>;
+  let fixture: ComponentFixture<DataGridTableComponent<TestRow>>;
+
+  const mockData: TestRow[] = [
+    { id: '1', name: 'Alpha', status: 'Active', value: 100 },
+    { id: '2', name: 'Beta', status: 'Closed', value: 200 },
+    { id: '3', name: 'Gamma', status: 'Active', value: 150 },
+  ];
+
+  const mockColumns: IColumnDefinition[] = [
+    { columnId: 'name', name: 'Name' },
+    { columnId: 'status', name: 'Status' },
+    { columnId: 'value', name: 'Value' },
+  ];
+
+  const getBasicProps = (): IOGridDataGridProps<TestRow> => ({
+    columns: mockColumns,
+    items: mockData,
+    getRowId: (row) => row.id,
+    visibleColumns: new Set(['name', 'status', 'value']),
+    filters: {},
+    filterOptions: {},
+    loadingFilterOptions: {},
+    onColumnSort: jest.fn(),
+    onFilterChange: jest.fn(),
+    sortBy: undefined,
+    sortDirection: 'asc',
+  });
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DataGridTableComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DataGridTableComponent<TestRow>);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('Basic rendering', () => {
+    it('should render table element', () => {
+      fixture.componentRef.setInput('props', getBasicProps());
+      fixture.detectChanges();
+
+      const table = fixture.debugElement.query(By.css('table'));
+      expect(table).toBeTruthy();
+    });
+
+    it('should render table headers for visible columns', () => {
+      fixture.componentRef.setInput('props', getBasicProps());
+      fixture.detectChanges();
+
+      const headers = fixture.debugElement.queryAll(By.css('thead th'));
+      expect(headers.length).toBe(3);
+    });
+
+    it('should render all rows', () => {
+      fixture.componentRef.setInput('props', getBasicProps());
+      fixture.detectChanges();
+
+      const rows = fixture.debugElement.queryAll(By.css('tbody tr'));
+      expect(rows.length).toBe(3);
+    });
+
+    it('should render cells for visible columns', () => {
+      fixture.componentRef.setInput('props', getBasicProps());
+      fixture.detectChanges();
+
+      const firstRow = fixture.debugElement.queryAll(By.css('tbody tr'))[0];
+      const cells = firstRow.queryAll(By.css('td'));
+      expect(cells.length).toBe(3);
+    });
+
+    it('should hide columns not in visibleColumns', () => {
+      const props = {
+        ...getBasicProps(),
+        visibleColumns: new Set(['name']),
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const headers = fixture.debugElement.queryAll(By.css('thead th'));
+      expect(headers.length).toBe(1);
+    });
+
+    it('should set aria-label when provided', () => {
+      const props = {
+        ...getBasicProps(),
+        'aria-label': 'Projects grid',
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const region = fixture.debugElement.query(By.css('[role="region"]'));
+      expect(region.nativeElement.getAttribute('aria-label')).toBe('Projects grid');
+    });
+
+    it('should set aria-labelledby when provided', () => {
+      const props = {
+        ...getBasicProps(),
+        'aria-labelledby': 'grid-heading',
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const region = fixture.debugElement.query(By.css('[role="region"]'));
+      expect(region.nativeElement.getAttribute('aria-labelledby')).toBe('grid-heading');
+    });
+  });
+
+  describe('Sorting', () => {
+    it('should show sort indicator on sorted column', () => {
+      const props = {
+        ...getBasicProps(),
+        sortBy: 'name',
+        sortDirection: 'asc' as const,
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const nameHeader = fixture.debugElement.query(
+        By.css('column-header-filter')
+      );
+      expect(nameHeader).toBeTruthy();
+    });
+
+    it('should call onColumnSort when sortable header clicked', () => {
+      const onColumnSortMock = jest.fn();
+      const props = {
+        ...getBasicProps(),
+        onColumnSort: onColumnSortMock,
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const sortButton = fixture.debugElement.query(
+        By.css('button[aria-label="Sort by Name"]')
+      );
+      sortButton.nativeElement.click();
+
+      expect(onColumnSortMock).toHaveBeenCalledWith('name');
+    });
+
+    it('should not call onColumnSort for non-sortable column', () => {
+      const onColumnSortMock = jest.fn();
+      const props = {
+        ...getBasicProps(),
+        onColumnSort: onColumnSortMock,
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      // Value column is not sortable
+      const headers = fixture.debugElement.queryAll(By.css('column-header-filter'));
+      const valueHeader = headers[2];
+
+      const sortButton = valueHeader.query(
+        By.css('button[aria-label^="Sort"]')
+      );
+      expect(sortButton).toBeNull();
+    });
+  });
+
+  describe('Filtering', () => {
+    it('should show filter icon for filterable columns', () => {
+      const props = {
+        ...getBasicProps(),
+        columns: [
+          { columnId: 'name', name: 'Name', sortable: true, filterable: { type: 'text' } },
+          { columnId: 'status', name: 'Status', sortable: true, filterable: { type: 'multiSelect', filterField: 'status' } },
+        ],
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const filterButtons = fixture.debugElement.queryAll(
+        By.css('button[aria-label^="Filter"]')
+      );
+      expect(filterButtons.length).toBe(2);
+    });
+
+    it('should call onFilterChange when filter applied', () => {
+      const onFilterChangeMock = jest.fn();
+      const props = {
+        ...getBasicProps(),
+        columns: [
+          { columnId: 'name', name: 'Name', sortable: true, filterable: { type: 'text' } },
+        ],
+        onFilterChange: onFilterChangeMock,
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      // Open filter popover
+      const filterButton = fixture.debugElement.query(
+        By.css('button[aria-label="Filter Name"]')
+      );
+      filterButton.nativeElement.click();
+      fixture.detectChanges();
+
+      // Enter text and apply
+      const input = fixture.debugElement.query(
+        By.css('input[placeholder="Enter search term..."]')
+      );
+      input.nativeElement.value = 'test';
+      input.nativeElement.dispatchEvent(new Event('input'));
+      fixture.detectChanges();
+
+      const applyButton = fixture.debugElement.query(
+        By.css('.ogrid-header-filter__action-btn--primary')
+      );
+      applyButton.nativeElement.click();
+
+      expect(onFilterChangeMock).toHaveBeenCalled();
+    });
+  });
+
+  describe('Empty state', () => {
+    it('should show empty state when no items', () => {
+      const props = {
+        ...getBasicProps(),
+        items: [],
+        emptyState: {
+          title: 'No data',
+          description: 'There are no items to display',
+        },
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const emptyState = fixture.nativeElement.textContent;
+      expect(emptyState).toContain('No data');
+    });
+
+    it('should show default empty state when no custom provided', () => {
+      const props = {
+        ...getBasicProps(),
+        items: [],
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const rows = fixture.debugElement.queryAll(By.css('tbody tr'));
+      expect(rows.length).toBe(0);
+    });
+  });
+
+  describe('Row selection', () => {
+    it('should show checkbox column when selectionMode is multiple', () => {
+      const props = {
+        ...getBasicProps(),
+        selectionMode: 'multiple' as const,
+        selectedRowKeys: new Set<string>(),
+        onSelectionChange: jest.fn(),
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const checkboxes = fixture.debugElement.queryAll(
+        By.css('input[type="checkbox"]')
+      );
+      expect(checkboxes.length).toBeGreaterThan(0);
+    });
+
+    it('should call onSelectionChange when row checkbox clicked', () => {
+      const onSelectionChangeMock = jest.fn();
+      const props = {
+        ...getBasicProps(),
+        selectionMode: 'multiple' as const,
+        selectedRowKeys: new Set<string>(),
+        onSelectionChange: onSelectionChangeMock,
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const checkboxes = fixture.debugElement.queryAll(
+        By.css('tbody input[type="checkbox"]')
+      );
+      checkboxes[0].nativeElement.click();
+
+      expect(onSelectionChangeMock).toHaveBeenCalled();
+    });
+
+    it('should highlight selected rows', () => {
+      const props = {
+        ...getBasicProps(),
+        selectionMode: 'multiple' as const,
+        selectedRowKeys: new Set(['1']),
+        onSelectionChange: jest.fn(),
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const firstRow = fixture.debugElement.queryAll(By.css('tbody tr'))[0];
+      expect(firstRow.nativeElement.classList.contains('ogrid-datagrid-table__row--selected')).toBe(true);
+    });
+  });
+
+  describe('Column groups', () => {
+    it('should render column groups header row', () => {
+      const props = {
+        ...getBasicProps(),
+        columnGroups: [
+          { label: 'Group 1', columns: ['name', 'status'] },
+        ],
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const groupRow = fixture.debugElement.query(By.css('thead tr:first-child'));
+      expect(groupRow).toBeTruthy();
+    });
+  });
+
+  describe('Loading state', () => {
+    it('should show loading indicator when isLoading is true', () => {
+      const props = {
+        ...getBasicProps(),
+        isLoading: true,
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      // Loading state may be shown in different ways
+      // Just verify component renders without error
+      const table = fixture.debugElement.query(By.css('table'));
+      expect(table).toBeTruthy();
+    });
+  });
+
+  describe('Custom cell rendering', () => {
+    it('should use custom cellValue when provided', () => {
+      const props = {
+        ...getBasicProps(),
+        columns: [
+          {
+            columnId: 'name',
+            name: 'Name',
+            sortable: true,
+            cellValue: (row: TestRow) => `Custom: ${row.name}`,
+          },
+        ],
+        visibleColumns: new Set(['name']),
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const firstCell = fixture.debugElement.query(By.css('tbody tr td'));
+      expect(firstCell.nativeElement.textContent.trim()).toBe('Custom: Alpha');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper table role', () => {
+      fixture.componentRef.setInput('props', getBasicProps());
+      fixture.detectChanges();
+
+      const table = fixture.debugElement.query(By.css('table'));
+      expect(table.nativeElement.getAttribute('role')).toBe('table');
+    });
+
+    it('should have proper row roles', () => {
+      fixture.componentRef.setInput('props', getBasicProps());
+      fixture.detectChanges();
+
+      const rows = fixture.debugElement.queryAll(By.css('tbody tr'));
+      rows.forEach((row) => {
+        expect(row.nativeElement.getAttribute('role')).toBe('row');
+      });
+    });
+
+    it('should have proper cell roles', () => {
+      fixture.componentRef.setInput('props', getBasicProps());
+      fixture.detectChanges();
+
+      const cells = fixture.debugElement.queryAll(By.css('tbody td'));
+      cells.forEach((cell) => {
+        expect(cell.nativeElement.getAttribute('role')).toBe('cell');
+      });
+    });
+  });
+
+  describe('Column pinning', () => {
+    it('should apply sticky positioning to pinned columns', () => {
+      const props = {
+        ...getBasicProps(),
+        columns: [
+          { columnId: 'name', name: 'Name', sortable: true, pinned: 'left' as const },
+          { columnId: 'status', name: 'Status', sortable: true },
+        ],
+      };
+      fixture.componentRef.setInput('props', props);
+      fixture.detectChanges();
+
+      const firstHeader = fixture.debugElement.query(By.css('thead th'));
+      const styles = firstHeader.nativeElement.style;
+      expect(styles.position).toBe('sticky');
+    });
+  });
+});

package/src/__tests__/exports.test.ts

@@ -0,0 +1,54 @@
+describe('@alaarab/ogrid-angular-radix exports', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let mod: any;
+
+  beforeAll(() => {
+    mod = require('../index');
+  });
+
+  // Angular Radix UI components
+  it('exports OGridComponent', () => {
+    expect(mod.OGridComponent).toBeDefined();
+  });
+
+  it('exports DataGridTableComponent', () => {
+    expect(mod.DataGridTableComponent).toBeDefined();
+  });
+
+  it('exports ColumnHeaderFilterComponent', () => {
+    expect(mod.ColumnHeaderFilterComponent).toBeDefined();
+  });
+
+  it('exports ColumnChooserComponent', () => {
+    expect(mod.ColumnChooserComponent).toBeDefined();
+  });
+
+  it('exports PaginationControlsComponent', () => {
+    expect(mod.PaginationControlsComponent).toBeDefined();
+  });
+
+  // Re-exports from @alaarab/ogrid-angular
+  it('re-exports OGridService from angular adapter', () => {
+    expect(mod.OGridService).toBeDefined();
+  });
+
+  it('re-exports DataGridStateService from angular adapter', () => {
+    expect(mod.DataGridStateService).toBeDefined();
+  });
+
+  it('re-exports headless components from angular adapter', () => {
+    expect(mod.OGridLayoutComponent).toBeDefined();
+    expect(mod.StatusBarComponent).toBeDefined();
+    expect(mod.GridContextMenuComponent).toBeDefined();
+    expect(mod.SideBarComponent).toBeDefined();
+  });
+
+  it('re-exports core utility functions', () => {
+    expect(mod.flattenColumns).toBeDefined();
+    expect(typeof mod.flattenColumns).toBe('function');
+    expect(mod.processClientSideData).toBeDefined();
+    expect(typeof mod.processClientSideData).toBe('function');
+    expect(mod.exportToCsv).toBeDefined();
+    expect(typeof mod.exportToCsv).toBe('function');
+  });
+});

package/src/__tests__/ogrid.component.spec.ts.skip

@@ -0,0 +1,236 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { OGridComponent } from '../ogrid/ogrid.component';
+import type { IOGridProps } from '@alaarab/ogrid-angular';
+
+interface TestRow {
+  id: string;
+  name: string;
+  status: string;
+}
+
+describe('OGridComponent', () => {
+  let component: OGridComponent<TestRow>;
+  let fixture: ComponentFixture<OGridComponent<TestRow>>;
+
+  const mockData: TestRow[] = [
+    { id: '1', name: 'Alpha', status: 'Active' },
+    { id: '2', name: 'Beta', status: 'Closed' },
+    { id: '3', name: 'Gamma', status: 'Active' },
+  ];
+
+  const getBasicProps = (): IOGridProps<TestRow> => ({
+    columns: [
+      { columnId: 'name', name: 'Name', sortable: true },
+      { columnId: 'status', name: 'Status', sortable: true },
+    ],
+    data: mockData,
+    getRowId: (row) => row.id,
+  });
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [OGridComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(OGridComponent<TestRow>);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should create OGridService instance', () => {
+    expect(component.ogridService).toBeTruthy();
+  });
+
+  it('should render OGridLayoutComponent', () => {
+    fixture.componentRef.setInput('props', getBasicProps());
+    fixture.detectChanges();
+
+    const layout = fixture.debugElement.query(By.css('ogrid-layout'));
+    expect(layout).toBeTruthy();
+  });
+
+  it('should render DataGridTableComponent', () => {
+    fixture.componentRef.setInput('props', getBasicProps());
+    fixture.detectChanges();
+
+    const dataGrid = fixture.debugElement.query(By.css('ogrid-datagrid-table'));
+    expect(dataGrid).toBeTruthy();
+  });
+
+  it('should render PaginationControlsComponent', () => {
+    fixture.componentRef.setInput('props', getBasicProps());
+    fixture.detectChanges();
+
+    const pagination = fixture.debugElement.query(By.css('ogrid-pagination-controls'));
+    expect(pagination).toBeTruthy();
+  });
+
+  it('should show ColumnChooser when columnChooser is toolbar', () => {
+    const props = {
+      ...getBasicProps(),
+      columnChooser: 'toolbar' as const,
+    };
+    fixture.componentRef.setInput('props', props);
+    fixture.detectChanges();
+
+    const columnChooser = fixture.debugElement.query(By.css('ogrid-column-chooser'));
+    expect(columnChooser).toBeTruthy();
+  });
+
+  it('should not show ColumnChooser when columnChooser is false', () => {
+    const props = {
+      ...getBasicProps(),
+      columnChooser: false,
+    };
+    fixture.componentRef.setInput('props', props);
+    fixture.detectChanges();
+
+    const columnChooser = fixture.debugElement.query(By.css('ogrid-column-chooser'));
+    expect(columnChooser).toBeNull();
+  });
+
+  it('should pass dataGridProps to DataGridTable', () => {
+    fixture.componentRef.setInput('props', getBasicProps());
+    fixture.detectChanges();
+
+    const dataGridProps = component.dataGridProps();
+    expect(dataGridProps).toBeDefined();
+    expect(dataGridProps.columns).toBeDefined();
+    expect(dataGridProps.items).toBeDefined();
+  });
+
+  it('should configure OGridService with props', () => {
+    const props = getBasicProps();
+    fixture.componentRef.setInput('props', props);
+    fixture.detectChanges();
+
+    const spy = jest.spyOn(component.ogridService, 'configure');
+    component.dataGridProps();
+    expect(spy).toHaveBeenCalledWith(props);
+  });
+
+  it('should handle page size change and reset to page 1', () => {
+    fixture.componentRef.setInput('props', getBasicProps());
+    fixture.detectChanges();
+
+    const setPageSizeSpy = jest.spyOn(component.ogridService.pagination(), 'setPageSize');
+    const setPageSpy = jest.spyOn(component.ogridService.pagination(), 'setPage');
+
+    component.onPageSizeChange(25);
+
+    expect(setPageSizeSpy).toHaveBeenCalledWith(25);
+    expect(setPageSpy).toHaveBeenCalledWith(1);
+  });
+
+  it('should support custom className', () => {
+    const props = {
+      ...getBasicProps(),
+      className: 'custom-grid-class',
+    };
+    fixture.componentRef.setInput('props', props);
+    fixture.detectChanges();
+
+    const layout = fixture.debugElement.query(By.css('ogrid-layout'));
+    // className is passed as input, verify it's set
+    expect(component.ogridService.className()).toBe('custom-grid-class');
+  });
+
+  it('should support initial sorting', () => {
+    const props = {
+      ...getBasicProps(),
+      initialSortBy: 'name',
+      initialSortDirection: 'desc' as const,
+    };
+    fixture.componentRef.setInput('props', props);
+    fixture.detectChanges();
+
+    // Trigger computation
+    component.dataGridProps();
+
+    const sort = component.ogridService.sort();
+    expect(sort.field).toBe('name');
+    expect(sort.direction).toBe('desc');
+  });
+
+  it('should support initial page size', () => {
+    const props = {
+      ...getBasicProps(),
+      initialPageSize: 25,
+    };
+    fixture.componentRef.setInput('props', props);
+    fixture.detectChanges();
+
+    component.dataGridProps();
+
+    const pagination = component.ogridService.pagination();
+    expect(pagination.pageSize).toBe(25);
+  });
+
+  it('should support custom pagination options', () => {
+    const props = {
+      ...getBasicProps(),
+      pageSizeOptions: [10, 25, 50, 100],
+    };
+    fixture.componentRef.setInput('props', props);
+    fixture.detectChanges();
+
+    component.dataGridProps();
+
+    const pagination = component.ogridService.pagination();
+    expect(pagination.pageSizeOptions).toEqual([10, 25, 50, 100]);
+  });
+
+  it('should support custom entity label', () => {
+    const props = {
+      ...getBasicProps(),
+      entityLabelPlural: 'projects',
+    };
+    fixture.componentRef.setInput('props', props);
+    fixture.detectChanges();
+
+    component.dataGridProps();
+
+    const pagination = component.ogridService.pagination();
+    expect(pagination.entityLabelPlural).toBe('projects');
+  });
+
+  it('should support disabling pagination', () => {
+    const props = {
+      ...getBasicProps(),
+      pagination: false,
+    };
+    fixture.componentRef.setInput('props', props);
+    fixture.detectChanges();
+
+    // Component should still render but pagination controls won't be shown
+    const layout = fixture.debugElement.query(By.css('ogrid-layout'));
+    expect(layout).toBeTruthy();
+  });
+
+  it('should support toolbar content', () => {
+    const props = {
+      ...getBasicProps(),
+      toolbar: 'Custom Toolbar Content',
+    };
+    fixture.componentRef.setInput('props', props);
+    fixture.detectChanges();
+
+    expect(component.ogridService.toolbar()).toBe('Custom Toolbar Content');
+  });
+
+  it('should support toolbarBelow content', () => {
+    const props = {
+      ...getBasicProps(),
+      toolbarBelow: 'Toolbar Below Content',
+    };
+    fixture.componentRef.setInput('props', props);
+    fixture.detectChanges();
+
+    expect(component.ogridService.toolbarBelow()).toBe('Toolbar Below Content');
+  });
+});