@dropi/ui-components 1.0.0

package/src/components-source/date-picker/date-picker.component.spec.ts

@@ -0,0 +1,510 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { CalendarModule } from 'primeng/calendar';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AnimationEvent } from '@angular/animations';
+
+import { DatePickerComponent } from './date-picker.component';
+
+describe('DatePickerComponent', () => {
+  let component: DatePickerComponent;
+  let fixture: ComponentFixture<DatePickerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DatePickerComponent, FormsModule, CalendarModule, BrowserAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DatePickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('Component Initialization', () => {
+    it('should initialize with default values', () => {
+      expect(component.loading).toBe(false);
+      expect(component.setRight).toBe(false);
+      expect(component.required).toBe(false);
+      expect(component.showIcon).toBe(false);
+      expect(component.showTime).toBe(false);
+      expect(component.isInvalid).toBe(false);
+      expect(component.placeholder).toBe('DD/MM/YYYY');
+      expect(component.label).toBeNull();
+    });
+
+    it('should accept input properties', () => {
+      component.label = 'Test Label';
+      component.placeholder = 'Select Date';
+      component.required = true;
+      component.loading = true;
+      component.setRight = true;
+      component.showIcon = true;
+      component.showTime = true;
+      component.isInvalid = true;
+
+      expect(component.label).toBe('Test Label');
+      expect(component.placeholder).toBe('Select Date');
+      expect(component.required).toBe(true);
+      expect(component.loading).toBe(true);
+      expect(component.setRight).toBe(true);
+      expect(component.showIcon).toBe(true);
+      expect(component.showTime).toBe(true);
+      expect(component.isInvalid).toBe(true);
+    });
+
+    it('should handle selectedDate input properly', () => {
+      const testDate = new Date('2023-06-15');
+      component.selectedDate = testDate;
+
+      expect(component.selectedDate).toEqual(testDate);
+    });
+
+    it('should handle null selectedDate', () => {
+      component.selectedDate = null;
+      expect(component.selectedDate).toBeNull();
+    });
+
+    it('should handle undefined selectedDate', () => {
+      component.selectedDate = undefined;
+      expect(component.selectedDate).toBeFalsy();
+    });
+
+    it('should handle string selectedDate in YYYY-MM-DD format', () => {
+      const dateString = '2023-06-15';
+      component.selectedDate = dateString;
+
+      expect(component.selectedDate).toBeInstanceOf(Date);
+      const date = component.selectedDate as Date;
+      expect(date.getFullYear()).toBe(2023);
+      expect(date.getMonth()).toBe(5); // June is month 5 (0-indexed)
+      expect(date.getDate()).toBe(15);
+    });
+
+    it('should handle string selectedDate with timezone', () => {
+      const dateString = '2023-06-15T10:30:00Z';
+      component.selectedDate = dateString;
+
+      expect(component.selectedDate).toBeInstanceOf(Date);
+      const date = component.selectedDate as Date;
+      expect(date.getFullYear()).toBe(2023);
+    });
+  });
+
+  describe('Date Range Validation', () => {
+    it('should accept minDate and maxDate', () => {
+      const minDate = new Date('2023-01-01');
+      const maxDate = new Date('2023-12-31');
+
+      component.minDate = minDate;
+      component.maxDate = maxDate;
+
+      expect(component.minDate).toBe(minDate);
+      expect(component.maxDate).toBe(maxDate);
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('should emit onChangeDate when date is selected', () => {
+      const emitSpy = jest.spyOn(component.onChangeDate, 'emit');
+      const touchSpy = jest.spyOn(component, 'onTouch');
+      const testDate = new Date('2023-06-15');
+
+      component.onSelect(testDate);
+
+      expect(emitSpy).toHaveBeenCalledWith(testDate);
+      expect(touchSpy).toHaveBeenCalled();
+    });
+
+    it('should emit onClosePanel when calendar is closed', () => {
+      const emitSpy = jest.spyOn(component.onClosePanel, 'emit');
+      const mockAnimationEvent = {
+        fromState: 'void',
+        toState: 'visible',
+        totalTime: 0,
+        phaseName: 'done',
+        element: null,
+        triggerName: 'calendar',
+        disabled: false,
+      } as AnimationEvent;
+
+      component.onClose(mockAnimationEvent);
+      expect(emitSpy).toHaveBeenCalledWith(mockAnimationEvent);
+    });
+
+    it('should handle null date selection', () => {
+      const emitSpy = jest.spyOn(component.onChangeDate, 'emit');
+      const touchSpy = jest.spyOn(component, 'onTouch');
+
+      component.onSelect(null);
+
+      expect(emitSpy).toHaveBeenCalledWith(null);
+      expect(touchSpy).toHaveBeenCalled();
+    });
+
+    it('should handle undefined date selection', () => {
+      const emitSpy = jest.spyOn(component.onChangeDate, 'emit');
+      const touchSpy = jest.spyOn(component, 'onTouch');
+
+      component.onSelect(undefined);
+
+      expect(emitSpy).toHaveBeenCalledWith(undefined);
+      expect(touchSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Template rendering', () => {
+    it('should render when not loading', () => {
+      component.loading = false;
+      fixture.detectChanges();
+
+      const compiled = fixture.nativeElement;
+      expect(compiled.querySelector('.date-picker-range')).toBeTruthy();
+      expect(compiled.querySelector('.loading')).toBeFalsy();
+    });
+
+    it('should show loading skeleton when loading', () => {
+      component.loading = true;
+      fixture.detectChanges();
+
+      // Verificar que el estado loading está activo
+      expect(component.loading).toBe(true);
+    });
+
+    it('should display label when provided', () => {
+      component.label = 'Test Label';
+      component.loading = false;
+      fixture.detectChanges();
+
+      const compiled = fixture.nativeElement;
+      const labelElement = compiled.querySelector('.label');
+      expect(labelElement).toBeTruthy();
+      expect(labelElement.textContent.trim()).toBe('Test Label');
+    });
+
+    it('should not display label when not provided', () => {
+      component.label = null;
+      component.loading = false;
+      fixture.detectChanges();
+
+      const compiled = fixture.nativeElement;
+      expect(compiled.querySelector('.label')).toBeFalsy();
+    });
+
+    it('should apply calendar-left class when setRight is false', () => {
+      component.setRight = false;
+      component.loading = false;
+      fixture.detectChanges();
+
+      const compiled = fixture.nativeElement;
+      const datePickerRange = compiled.querySelector('.date-picker-range');
+      expect(datePickerRange).toBeTruthy();
+      expect(datePickerRange.classList.contains('calendar-left')).toBe(true);
+    });
+
+    it('should not apply calendar-left class when setRight is true', () => {
+      component.setRight = true;
+      component.loading = false;
+      fixture.detectChanges();
+
+      const compiled = fixture.nativeElement;
+      const datePickerRange = compiled.querySelector('.date-picker-range');
+      expect(datePickerRange).toBeTruthy();
+      expect(datePickerRange.classList.contains('calendar-left')).toBe(false);
+    });
+
+    it('should apply date-is-invalid class when isInvalid is true', () => {
+      component.isInvalid = true;
+      component.loading = false;
+      fixture.detectChanges();
+
+      const compiled = fixture.nativeElement;
+      const calendarElement = compiled.querySelector('p-calendar');
+      expect(calendarElement).toBeTruthy();
+      // Note: checking for the ngClass binding, actual CSS class application depends on PrimeNG
+    });
+
+    it('should show calendar icon when showIcon is true', () => {
+      component.showIcon = true;
+      component.loading = false;
+      fixture.detectChanges();
+
+      const compiled = fixture.nativeElement;
+      const calendarElement = compiled.querySelector('p-calendar');
+      expect(calendarElement).toBeTruthy();
+    });
+  });
+
+  describe('Calendar Configuration', () => {
+    beforeEach(() => {
+      component.loading = false;
+      fixture.detectChanges();
+    });
+
+    it('should configure calendar with correct properties', () => {
+      component.placeholder = 'Select date';
+      component.required = true;
+      component.showIcon = true;
+      component.showTime = true;
+      fixture.detectChanges();
+
+      const calendarElement = fixture.nativeElement.querySelector('p-calendar');
+      expect(calendarElement).toBeTruthy();
+    });
+
+    it('should handle disabled state when loading', () => {
+      component.loading = true;
+      fixture.detectChanges();
+
+      // Calendar should not be visible when loading
+      const calendarElement = fixture.nativeElement.querySelector('p-calendar');
+      expect(calendarElement).toBeFalsy();
+    });
+
+    it('should configure date format correctly', () => {
+      component.loading = false;
+      fixture.detectChanges();
+
+      // Calendar should be configured with DD/MM/YYYY format
+      const calendarElement = fixture.nativeElement.querySelector('p-calendar');
+      expect(calendarElement).toBeTruthy();
+    });
+  });
+
+  describe('Value Accessor Implementation', () => {
+    it('should register onChange function', () => {
+      const mockFn = jest.fn();
+      component.registerOnChange(mockFn);
+
+      expect(component.onChange).toBe(mockFn);
+    });
+
+    it('should register onTouched function', () => {
+      const mockFn = jest.fn();
+      component.registerOnTouched(mockFn);
+
+      expect(component.onTouch).toBe(mockFn);
+    });
+
+    it('should write value correctly with Date object', () => {
+      const testDate = new Date('2023-06-15');
+      component.writeValue(testDate);
+
+      expect(component.selectedDate).toEqual(testDate);
+    });
+
+    it('should write value correctly with date string', () => {
+      const testDate = '2023-06-15';
+      component.writeValue(testDate);
+
+      // El setter parseToLocalDate convierte el string a Date en hora local
+      expect(component.selectedDate).toBeInstanceOf(Date);
+      const date = component.selectedDate as Date;
+      expect(date.getFullYear()).toBe(2023);
+      expect(date.getMonth()).toBe(5); // June
+      expect(date.getDate()).toBe(15);
+    });
+
+    it('should handle null writeValue', () => {
+      component.writeValue(null);
+      expect(component.selectedDate).toBeDefined();
+    });
+
+    it('should handle undefined writeValue', () => {
+      component.writeValue(undefined);
+      expect(component.selectedDate).toBeDefined();
+    });
+
+    it('should handle null or undefined input correctly', () => {
+      component.writeValue(null);
+      expect(component.selectedDate).toBeDefined();
+
+      component.writeValue(undefined);
+      expect(component.selectedDate).toBeDefined();
+    });
+  });
+
+  describe('Date Selection Scenarios', () => {
+    it('should handle date selection with valid date', () => {
+      const emitSpy = jest.spyOn(component.onChangeDate, 'emit');
+      const validDate = new Date('2023-12-25');
+
+      component.onSelect(validDate);
+
+      expect(emitSpy).toHaveBeenCalledWith(validDate);
+      expect(emitSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle multiple rapid date selections', () => {
+      const emitSpy = jest.spyOn(component.onChangeDate, 'emit');
+      const date1 = new Date('2023-01-01');
+      const date2 = new Date('2023-02-01');
+      const date3 = new Date('2023-03-01');
+
+      component.onSelect(date1);
+      component.onSelect(date2);
+      component.onSelect(date3);
+
+      expect(emitSpy).toHaveBeenCalledTimes(3);
+      expect(emitSpy).toHaveBeenNthCalledWith(1, date1);
+      expect(emitSpy).toHaveBeenNthCalledWith(2, date2);
+      expect(emitSpy).toHaveBeenNthCalledWith(3, date3);
+    });
+
+    it('should call onTouch for each selection', () => {
+      const touchSpy = jest.spyOn(component, 'onTouch');
+      const date1 = new Date('2023-01-01');
+      const date2 = new Date('2023-02-01');
+
+      component.onSelect(date1);
+      component.onSelect(date2);
+
+      expect(touchSpy).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty string as label', () => {
+      component.label = '';
+      fixture.detectChanges();
+
+      const compiled = fixture.nativeElement;
+      const labelElement = compiled.querySelector('.label');
+      // Cuando el label está vacío, el elemento no se renderiza debido al *ngIf="label"
+      expect(labelElement).toBeFalsy();
+    });
+
+    it('should maintain state consistency during loading transitions', () => {
+      // Initial state
+      expect(component.loading).toBe(false);
+
+      // Switch to loading
+      component.loading = true;
+      fixture.detectChanges();
+      // El componente puede tener diferente estructura de loading
+      expect(component.loading).toBe(true);
+
+      // Switch back to loaded
+      component.loading = false;
+      fixture.detectChanges();
+      expect(fixture.nativeElement.querySelector('.date-picker-range')).toBeTruthy();
+    });
+
+    it('should handle invalid date strings gracefully', () => {
+      expect(() => {
+        component.selectedDate = 'invalid-date';
+      }).not.toThrow();
+    });
+
+    it('should handle very old dates', () => {
+      const oldDate = new Date('1900-01-01');
+      component.selectedDate = oldDate;
+
+      expect(component.selectedDate).toEqual(oldDate);
+    });
+
+    it('should handle very future dates', () => {
+      const futureDate = new Date('2100-12-31');
+      component.selectedDate = futureDate;
+
+      expect(component.selectedDate).toEqual(futureDate);
+    });
+  });
+
+  describe('Integration Tests', () => {
+    it('should work with all features enabled', () => {
+      component.label = 'Integration Test';
+      component.placeholder = 'Pick a date and time';
+      component.required = true;
+      component.showIcon = true;
+      component.showTime = true;
+      component.setRight = true;
+      component.isInvalid = false;
+      component.loading = false;
+
+      fixture.detectChanges();
+
+      const compiled = fixture.nativeElement;
+      expect(compiled.querySelector('.date-picker-range')).toBeTruthy();
+      expect(compiled.querySelector('.label')).toBeTruthy();
+      expect(compiled.querySelector('.calendar-left')).toBeFalsy();
+    });
+
+    it('should properly handle min and max date constraints', () => {
+      const minDate = new Date('2023-01-01');
+      const maxDate = new Date('2023-12-31');
+
+      component.minDate = minDate;
+      component.maxDate = maxDate;
+      component.loading = false;
+
+      fixture.detectChanges();
+
+      expect(component.minDate).toBe(minDate);
+      expect(component.maxDate).toBe(maxDate);
+    });
+
+    it('should handle form integration workflow', () => {
+      // Register form control callbacks
+      const onChangeFn = jest.fn();
+      const onTouchFn = jest.fn();
+
+      component.registerOnChange(onChangeFn);
+      component.registerOnTouched(onTouchFn);
+
+      // Write initial value
+      const initialDate = new Date('2023-06-15');
+      component.writeValue(initialDate);
+      expect(component.selectedDate).toEqual(initialDate);
+
+      // Simulate user interaction
+      const newDate = new Date(2023, 6, 20); // July 20, 2023 (month is 0-indexed)
+      component.onSelect(newDate);
+
+      // onChange should be called with formatted string
+      expect(onChangeFn).toHaveBeenCalledWith('2023-07-20');
+      expect(onTouchFn).toHaveBeenCalled();
+    });
+
+    it('should handle complete date picker lifecycle', () => {
+      // Setup
+      component.label = 'Select Date';
+      component.placeholder = 'Choose a date';
+      component.minDate = new Date('2023-01-01');
+      component.maxDate = new Date('2023-12-31');
+      component.loading = false;
+
+      fixture.detectChanges();
+
+      // Verify initial state
+      expect(component.selectedDate).toBeDefined();
+
+      // Select a date
+      const selectedDate = new Date('2023-06-15');
+      const emitSpy = jest.spyOn(component.onChangeDate, 'emit');
+
+      component.onSelect(selectedDate);
+
+      expect(emitSpy).toHaveBeenCalledWith(selectedDate);
+
+      // Close calendar
+      const closeEvent = {
+        fromState: 'visible',
+        toState: 'void',
+        totalTime: 150,
+        phaseName: 'done',
+        element: null,
+        triggerName: 'calendar',
+        disabled: false,
+      } as AnimationEvent;
+
+      const closeSpy = jest.spyOn(component.onClosePanel, 'emit');
+      component.onClose(closeEvent);
+
+      expect(closeSpy).toHaveBeenCalledWith(closeEvent);
+    });
+  });
+});