@dropi/ui-components 1.0.0

package/src/components-source/dropi-table/dropi-table.component.spec.ts

@@ -0,0 +1,578 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { DropiTableComponent } from './dropi-table.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { DatePipe, CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { of } from 'rxjs';
+import {
+  Pipe,
+  PipeTransform,
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import {
+  DropiTableColumn,
+  DropiTableConfiguration,
+  DropiTableRow,
+  DropiTableAction,
+  DropiTableBackendParams,
+} from '@app/utilities/interfaces/ui/dropi-table.interface';
+
+// Mock para CarrierImageUrl pipe
+@Pipe({ name: 'carrierImageUrl', standalone: true })
+export class MockCarrierImageUrlPipe implements PipeTransform {
+  transform(name: string): string {
+    return `assets/images/delivery/${name}.png`;
+  }
+}
+
+// Mock para CurrencyComponent
+@Component({
+  selector: 'app-currency',
+  standalone: true,
+  template: '<span>{{ value }}</span>',
+})
+export class MockCurrencyComponent {
+  @Input() value: any;
+  @Input() currency: string = 'USD';
+}
+
+// Mock para SpinnerComponent
+@Component({
+  selector: 'app-spinner',
+  standalone: true,
+  template: '<div class="spinner">Loading...</div>',
+})
+export class MockSpinnerComponent {
+  @Input() size: string = 'medium';
+}
+
+describe('DropiTableComponent', () => {
+  let component: DropiTableComponent;
+  let fixture: ComponentFixture<DropiTableComponent>;
+
+  const mockHeaders: DropiTableColumn[] = [
+    { key: 'id', label: 'ID', sortable: true },
+    { key: 'name', label: 'Name', sortable: true },
+    { key: 'price', label: 'Price', sortable: false },
+  ];
+
+  const mockData: DropiTableRow[] = [
+    {
+      id: { type: 'text', value: 1 },
+      name: { type: 'text', value: 'Product 1' },
+      price: { type: 'currency', value: 100 },
+    },
+    {
+      id: { type: 'text', value: 2 },
+      name: { type: 'text', value: 'Product 2' },
+      price: { type: 'currency', value: 200 },
+    },
+    {
+      id: { type: 'text', value: 3 },
+      name: { type: 'text', value: 'Product 3' },
+      price: { type: 'currency', value: 300 },
+    },
+  ];
+
+  const mockConfiguration: DropiTableConfiguration = {
+    showPaginator: true,
+    showSearch: false,
+    showCheckbox: false,
+    pageSizeConfiguration: [5, 10, 20],
+    rowActions: [],
+    backendPagination: false,
+  };
+
+  beforeEach(() => {
+    // Crear el componente directamente sin TestBed para evitar problemas de dependencias
+    component = new DropiTableComponent();
+    component.headers = mockHeaders;
+    component.data = mockData;
+    component.dropiTableConfiguration = { ...mockConfiguration };
+
+    // Mock fixture básico
+    fixture = {
+      componentInstance: component,
+      detectChanges: () => {},
+      nativeElement: {},
+    } as any;
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.currentPage).toBe(1);
+      expect(component.sortAsc).toBe(true);
+      expect(component.loading).toBe(false);
+      expect(component.hasActions).toBe(false);
+    });
+
+    it('should initialize data on ngOnInit with frontend pagination', () => {
+      component.ngOnInit();
+
+      expect(component.dataToShow).toBeDefined();
+      expect(component.dataToShow.length).toBeGreaterThan(0);
+    });
+
+    it('should set hasActions when rowActions are provided', () => {
+      component.dropiTableConfiguration.rowActions = [{ id: 1, label: 'Edit', icon: 'edit' }];
+
+      component.ngOnInit();
+
+      expect(component.hasActions).toBe(true);
+    });
+  });
+
+  describe('Paginación - Frontend', () => {
+    beforeEach(() => {
+      component.dropiTableConfiguration.backendPagination = false;
+      component.dropiTableConfiguration.showPaginator = true;
+      component.data = Array(25)
+        .fill(null)
+        .map((_, i) => ({
+          id: { type: 'text', value: i },
+          name: { type: 'text', value: `Product ${i}` },
+          price: { type: 'currency', value: i * 100 },
+        }));
+    });
+
+    it('should initialize pagination configuration', () => {
+      component.ngOnInit();
+
+      expect(component['pageSize']).toBe(5);
+      expect(component.totalPages).toBeDefined();
+    });
+
+    it('should set default page size configuration if not provided', () => {
+      component.dropiTableConfiguration.pageSizeConfiguration = undefined;
+
+      component.ngOnInit();
+
+      expect(component.dropiTableConfiguration.pageSizeConfiguration).toEqual([5, 10, 20]);
+    });
+
+    it('should paginate data correctly', () => {
+      component.ngOnInit();
+
+      expect(component.dataToShow.length).toBe(5);
+      expect(component.dataToShow[0].id.value).toBe(0);
+    });
+
+    it('should go to next page', () => {
+      component.ngOnInit();
+
+      component.goToPage(2);
+
+      expect(component.currentPage).toBe(2);
+      expect(component.dataToShow[0].id.value).toBe(5);
+    });
+
+    it('should change page size', () => {
+      component.ngOnInit();
+
+      component.onChangePageSize('10');
+
+      expect(component['pageSize']).toBe(10);
+      expect(component.currentPage).toBe(1);
+      expect(component.dataToShow.length).toBe(10);
+    });
+
+    it('should calculate total pages correctly', () => {
+      component.ngOnInit();
+
+      expect(component.totalPages).toBe(5); // 25 items / 5 per page
+    });
+  });
+
+  describe('Paginación - Backend', () => {
+    const mockBackendParams: DropiTableBackendParams = {
+      currentPage: 1,
+      pageSize: 10,
+      nextPage: 2,
+      totalPages: 5,
+      totalCount: 50,
+    };
+
+    beforeEach(() => {
+      component.dropiTableConfiguration.backendPagination = true;
+      component.dropiTableBackendParams = mockBackendParams;
+    });
+
+    it('should set backend params on init', () => {
+      component.ngOnInit();
+
+      expect(component.currentPage).toBe(1);
+      expect(component['pageSize']).toBe(10);
+      expect(component.totalPages).toBe(5);
+    });
+
+    it('should emit onPageChange when page changes', () => {
+      const emitSpy = jest.spyOn(component.onPageChange, 'emit');
+
+      component.ngOnInit();
+      component.goToPage(3);
+
+      expect(emitSpy).toHaveBeenCalledWith(3);
+    });
+
+    it('should emit onSizeChange when page size changes', () => {
+      const emitSpy = jest.spyOn(component.onSizeChange, 'emit');
+
+      component.ngOnInit();
+      component.onChangePageSize('20');
+
+      expect(emitSpy).toHaveBeenCalledWith(20);
+    });
+
+    it('should not paginate data locally with backend pagination', () => {
+      component.data = mockData;
+
+      component.ngOnInit();
+
+      expect(component.dataToShow).toEqual(mockData);
+    });
+  });
+
+  describe('Ordenamiento', () => {
+    beforeEach(() => {
+      component.data = [
+        {
+          id: { type: 'text', value: 3 },
+          name: { type: 'text', value: 'Charlie' },
+          price: { type: 'currency', value: 300 },
+        },
+        {
+          id: { type: 'text', value: 1 },
+          name: { type: 'text', value: 'Alice' },
+          price: { type: 'currency', value: 100 },
+        },
+        {
+          id: { type: 'text', value: 2 },
+          name: { type: 'text', value: 'Bob' },
+          price: { type: 'currency', value: 200 },
+        },
+      ];
+      // Reset sort state and configuration
+      (component as any).sortColumn = '';
+      component.sortAsc = true;
+      component.dropiTableConfiguration.backendPagination = false;
+      component.ngOnInit();
+    });
+
+    it('should sort data descending on first click of new column', () => {
+      const column = mockHeaders[0]; // id column
+
+      component.onSort(column);
+
+      // First click on a new column sets sortAsc to false (descending)
+      expect((component as any).sortColumn).toBe('id');
+      expect(component.sortAsc).toBe(false);
+    });
+
+    it('should toggle sort direction on subsequent clicks', () => {
+      const column = mockHeaders[0];
+
+      // First click - starts at false (descending)
+      component.onSort(column);
+      expect(component.sortAsc).toBe(false);
+
+      // Second click - toggles to true (ascending)
+      component.onSort(column);
+      expect(component.sortAsc).toBe(true);
+
+      // Third click - toggles to false (descending)
+      component.onSort(column);
+      expect(component.sortAsc).toBe(false);
+    });
+
+    it('should not sort non-sortable columns', () => {
+      const column = mockHeaders[2]; // price column (not sortable)
+      const originalData = [...component.dataToShow];
+
+      component.onSort(column);
+
+      expect(component.dataToShow).toEqual(originalData);
+    });
+
+    it('should emit onSortChange with backend pagination', () => {
+      component.dropiTableConfiguration.backendPagination = true;
+      const emitSpy = jest.spyOn(component.onSortChange, 'emit');
+      const column = mockHeaders[0];
+
+      component.onSort(column);
+
+      // First click on a new column sets asc to false
+      expect(emitSpy).toHaveBeenCalledWith({ column: 'id', asc: false });
+    });
+  });
+
+  describe('Búsqueda/Filtrado', () => {
+    beforeEach(() => {
+      component.dropiTableConfiguration.showSearch = true;
+      component.data = [
+        {
+          id: { type: 'text', value: 1 },
+          name: { type: 'text', value: 'Apple' },
+          price: { type: 'currency', value: 100 },
+        },
+        {
+          id: { type: 'text', value: 2 },
+          name: { type: 'text', value: 'Banana' },
+          price: { type: 'currency', value: 200 },
+        },
+        {
+          id: { type: 'text', value: 3 },
+          name: { type: 'text', value: 'Cherry' },
+          price: { type: 'currency', value: 300 },
+        },
+      ];
+      component.ngOnInit();
+    });
+
+    it('should filter data by search term', () => {
+      component.filteredData('Apple');
+
+      expect(component.dataToShow.length).toBe(1);
+      expect((component.dataToShow[0].name as any).value).toBe('Apple');
+    });
+
+    it('should be case insensitive', () => {
+      component.filteredData('banana');
+
+      expect(component.dataToShow.length).toBe(1);
+      expect((component.dataToShow[0].name as any).value).toBe('Banana');
+    });
+
+    it('should hide paginator when filtering', () => {
+      component.filteredData('Apple');
+
+      expect(component.hidePaginator).toBe(true);
+    });
+
+    it('should restore data when search is cleared', () => {
+      component.filteredData('Apple');
+      expect(component.dataToShow.length).toBe(1);
+
+      component.filteredData('');
+
+      expect(component.dataToShow.length).toBeGreaterThan(1);
+    });
+
+    it('should reset to page 1 when searching', fakeAsync(() => {
+      // Ensure we're not using backend pagination and search is enabled
+      component.dropiTableConfiguration.backendPagination = false;
+      component.dropiTableConfiguration.showSearch = true;
+      component.ngOnInit(); // Re-initialize to setup subscriptions
+
+      component.currentPage = 3;
+
+      component.searchTerm.setValue('test');
+
+      // Wait for debounceTime (500ms)
+      tick(500);
+
+      expect(component.currentPage).toBe(1);
+    }));
+  });
+
+  describe('Selección de filas', () => {
+    beforeEach(() => {
+      component.dropiTableConfiguration.showCheckbox = true;
+      component.ngOnInit();
+    });
+
+    it('should select a row', () => {
+      const emitSpy = jest.spyOn(component.rowsSelected, 'emit');
+      const row = component.dataToShow[0];
+
+      component.onSelectRow(true, row);
+
+      expect(emitSpy).toHaveBeenCalled();
+      expect(component['selectedRows']).toContain(row);
+    });
+
+    it('should deselect a row', () => {
+      const row = component.dataToShow[0];
+      component.onSelectRow(true, row);
+
+      component.onSelectRow(false, row);
+
+      expect(component['selectedRows']).not.toContain(row);
+    });
+
+    it('should select multiple rows', () => {
+      const row1 = component.dataToShow[0];
+      const row2 = component.dataToShow[1];
+
+      component.onSelectRow(true, row1);
+      component.onSelectRow(true, row2);
+
+      expect(component['selectedRows'].length).toBe(2);
+    });
+
+    it('should reset selected rows', () => {
+      component.onSelectRow(true, component.dataToShow[0]);
+      component.onSelectRow(true, component.dataToShow[1]);
+
+      component.resetSelectedRows();
+
+      expect(component['selectedRows'].length).toBe(0);
+    });
+  });
+
+  describe('Acciones de fila', () => {
+    const mockActions: DropiTableAction[] = [
+      { id: 1, label: 'Edit', icon: 'edit' },
+      { id: 2, label: 'Delete', icon: 'delete' },
+    ];
+
+    beforeEach(() => {
+      component.dropiTableConfiguration.rowActions = mockActions;
+      component.ngOnInit();
+      // Inicializar showActions en los datos mock
+      component.dataToShow.forEach((row) => {
+        row.showActions = false;
+      });
+    });
+
+    it('should emit action clicked', () => {
+      const emitSpy = jest.spyOn(component.actionClicked, 'emit');
+      const row = component.dataToShow[0];
+      const action = mockActions[0];
+
+      component.onActionClicked(row, action);
+
+      expect(emitSpy).toHaveBeenCalledWith({ row, action });
+    });
+
+    it('should toggle actions menu', () => {
+      const mockRef = { nativeElement: document.createElement('div') };
+
+      component.toggleActions(0, mockRef as any, false, 0);
+
+      expect(component.dataToShow[0].showActions).toBe(true);
+    });
+
+    it('should hide menu when toggling different row', () => {
+      const mockRef = { nativeElement: document.createElement('div') };
+
+      component.toggleActions(0, mockRef as any, false, 0);
+      expect(component.dataToShow[0].showActions).toBe(true);
+
+      component.toggleActions(1, mockRef as any, false, 0);
+
+      expect(component.dataToShow[0].showActions).toBe(false);
+    });
+
+    it('should hide menu after action clicked', () => {
+      const mockRef = { nativeElement: document.createElement('div') };
+      component.toggleActions(0, mockRef as any, false, 0);
+
+      component.onActionClicked(component.dataToShow[0], mockActions[0]);
+
+      expect(component.dataToShow[0].showActions).toBe(false);
+    });
+  });
+
+  describe('ngOnChanges', () => {
+    it('should update data when data changes', () => {
+      const spy = jest.spyOn(component, 'updateData');
+
+      component.ngOnChanges({
+        data: {
+          currentValue: mockData,
+          previousValue: [],
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should set backend params when data changes with backend pagination', () => {
+      component.dropiTableConfiguration.backendPagination = true;
+      const spy = jest.spyOn(component, 'setBackendParams');
+
+      component.ngOnChanges({
+        data: {
+          currentValue: mockData,
+          previousValue: [],
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Ciclo de vida', () => {
+    it('should unsubscribe on destroy', () => {
+      component.dropiTableConfiguration.showSearch = true;
+      component.ngOnInit();
+
+      const unsubscribeSpy = jest.spyOn(component['subscriptions'], 'unsubscribe');
+
+      component.ngOnDestroy();
+
+      expect(unsubscribeSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Estados de carga', () => {
+    it('should accept loading state', () => {
+      component.loading = true;
+      fixture.detectChanges();
+
+      expect(component.loading).toBe(true);
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete table workflow', () => {
+      // Setup
+      component.data = Array(20)
+        .fill(null)
+        .map((_, i) => ({
+          id: { type: 'text', value: i },
+          name: { type: 'text', value: `Product ${i}` },
+          price: { type: 'currency', value: i * 100 },
+        }));
+
+      // Create isolated configuration
+      component.dropiTableConfiguration = {
+        showPaginator: true,
+        showSearch: true,
+        showCheckbox: true,
+        pageSizeConfiguration: [5, 10, 20],
+        rowActions: [{ id: 1, label: 'Edit', icon: 'edit' }],
+        backendPagination: false,
+      };
+
+      // Initialize
+      component.ngOnInit();
+      expect(component.dataToShow.length).toBe(5);
+
+      // Sort
+      component.onSort(mockHeaders[0]);
+      expect(component['sortColumn']).toBe('id');
+
+      // Select row
+      const emitSpy = jest.spyOn(component.rowsSelected, 'emit');
+      component.onSelectRow(true, component.dataToShow[0]);
+      expect(emitSpy).toHaveBeenCalled();
+
+      // Change page
+      component.goToPage(2);
+      expect(component.currentPage).toBe(2);
+    });
+  });
+});