@dropi/ui-components 1.0.0

package/src/components-source/alert-modal/alert-modal.component.spec.ts

@@ -0,0 +1,557 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { AlertModalComponent, ModalParams } from './alert-modal.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { SettingsService } from '@app/services/setting.service';
+import { TemplateAlertModalService } from '@app/ui/alert-modal/services/template-alert-modal.service';
+import { LoadingType } from '@app/utilities/enums/ui/alert-modal.enum';
+import { Subject, of } from 'rxjs';
+
+describe('AlertModalComponent', () => {
+  let component: AlertModalComponent;
+  let fixture: ComponentFixture<AlertModalComponent>;
+  let mockSettingsService: any;
+  let mockTemplateService: any;
+  let mockTranslateService: any;
+  let templateSubject: Subject<any>;
+
+  beforeEach(async () => {
+    templateSubject = new Subject();
+
+    mockSettingsService = {
+      getBrandInfo: jest.fn().mockReturnValue({ name: 'Dropi' }),
+    };
+
+    mockTemplateService = {
+      currentTemplate$: templateSubject.asObservable(),
+    };
+
+    mockTranslateService = {
+      instant: jest.fn().mockReturnValue('Aceptar'),
+      get: jest.fn().mockReturnValue(of('Aceptar')),
+    };
+
+    // Crear el componente directamente sin TestBed para evitar problemas de dependencias
+    component = new AlertModalComponent(
+      mockTemplateService,
+      mockSettingsService,
+      mockTranslateService,
+    );
+
+    // 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 loading values', () => {
+      expect(component.loadingType).toBe(LoadingType.Bowling);
+      expect(component.loadingTitle).toBe('Cargando...');
+      expect(component.loadingMessage).toBe('Por favor, espere un momento');
+      expect(component.withLoadingProgressBar).toBe(false);
+    });
+
+    it('should get brand name on init', () => {
+      component.ngOnInit();
+
+      expect(mockSettingsService.getBrandInfo).toHaveBeenCalled();
+      expect(component.brandName).toBe('dropi');
+    });
+
+    it('should subscribe to template service', () => {
+      component.ngOnInit();
+
+      const template = {} as any;
+      const context = { data: 'test' };
+
+      templateSubject.next({ template, context });
+
+      expect(component.alertTemplate).toBe(template);
+      expect(component.contextTemplate).toEqual(context);
+    });
+  });
+
+  describe('Parámetros del modal', () => {
+    const baseParams: ModalParams = {
+      tittle: 'Test Title',
+      type: 'success',
+      message: 'Test message',
+    };
+
+    it('should update params correctly', () => {
+      component.params = baseParams;
+      component.updateParams();
+
+      expect(component.tittle).toBe('Test Title');
+      expect(component.type).toBe('success');
+      expect(component.message).toBe('Test message');
+    });
+
+    it('should set default primary button text', () => {
+      component.params = baseParams;
+      component.updateParams();
+
+      expect(component.primaryButton).toBe('Aceptar');
+    });
+
+    it('should accept custom primary button text', () => {
+      component.params = { ...baseParams, primaryButton: 'Confirmar' };
+      component.updateParams();
+
+      expect(component.primaryButton).toBe('Confirmar');
+    });
+
+    it('should handle secondary button', () => {
+      component.params = { ...baseParams, secondaryButton: 'Cancelar' };
+      component.updateParams();
+
+      expect(component.secondaryButton).toBe('Cancelar');
+    });
+
+    it('should set displayButtons to false when specified', () => {
+      component.params = { ...baseParams, displayButtons: false };
+      component.updateParams();
+
+      expect(component.displayButtons).toBe(false);
+    });
+
+    it('should keep displayButtons true by default', () => {
+      component.params = baseParams;
+      component.updateParams();
+
+      expect(component.displayButtons).toBe(true);
+    });
+
+    it('should handle custom loading parameters', () => {
+      component.params = {
+        ...baseParams,
+        loadingType: LoadingType.Heart,
+        loadingTitle: 'Custom loading',
+        loadingMessage: 'Please wait...',
+        withLoadingProgressBar: true,
+      };
+      component.updateParams();
+
+      expect(component.loadingType).toBe(LoadingType.Heart);
+      expect(component.loadingTitle).toBe('Custom loading');
+      expect(component.loadingMessage).toBe('Please wait...');
+      expect(component.withLoadingProgressBar).toBe(true);
+    });
+  });
+
+  describe('Tipos de modal', () => {
+    it('should set question animation', () => {
+      component.type = 'question';
+      component.decideAnimation();
+
+      expect(component.sourceAnimation).toBe('/assets/lottie-files/question.json');
+    });
+
+    it('should set warning animation', () => {
+      component.type = 'warning';
+      component.decideAnimation();
+
+      expect(component.sourceAnimation).toBe('/assets/lottie-files/warning.json');
+    });
+
+    it('should set success animation', () => {
+      component.type = 'success';
+      component.decideAnimation();
+
+      expect(component.sourceAnimation).toBe('/assets/lottie-files/success.json');
+    });
+
+    it('should set error animation', () => {
+      component.type = 'error';
+      component.decideAnimation();
+
+      expect(component.sourceAnimation).toBe('/assets/lottie-files/failure.json');
+    });
+
+    it('should set empty animation for loading', () => {
+      component.type = 'loading';
+      component.decideAnimation();
+
+      expect(component.sourceAnimation).toBe('');
+    });
+
+    it('should set empty animation for unknown type', () => {
+      component.type = 'unknown' as any;
+      component.decideAnimation();
+
+      expect(component.sourceAnimation).toBe('');
+    });
+  });
+
+  describe('Imágenes de marca blanca', () => {
+    it('should return info image for question type', () => {
+      component.type = 'question';
+      const image = component.decideImgWhiteBrand();
+
+      expect(image).toBe('/assets/img/white-brands-events/info.png');
+    });
+
+    it('should return warning image for warning type', () => {
+      component.type = 'warning';
+      const image = component.decideImgWhiteBrand();
+
+      expect(image).toBe('/assets/img/white-brands-events/warning.png');
+    });
+
+    it('should return success image for success type', () => {
+      component.type = 'success';
+      const image = component.decideImgWhiteBrand();
+
+      expect(image).toBe('/assets/img/white-brands-events/success.png');
+    });
+
+    it('should return error image for error type', () => {
+      component.type = 'error';
+      const image = component.decideImgWhiteBrand();
+
+      expect(image).toBe('/assets/img/white-brands-events/error.png');
+    });
+
+    it('should return empty string for unknown type', () => {
+      component.type = 'unknown' as any;
+      const image = component.decideImgWhiteBrand();
+
+      expect(image).toBe('');
+    });
+  });
+
+  describe('Animaciones de carga', () => {
+    it('should set Bowling animation for Dropi', () => {
+      component.brandName = 'dropi';
+      component.loadingType = LoadingType.Bowling;
+      component.decideLoadingAnimation();
+
+      expect(component.loadingAnimation.path).toBe('/assets/lottie-files/loading.json');
+      expect(component.loadingAnimation.width).toBe('300px');
+      expect(component.loadingAnimation.height).toBe('300px');
+    });
+
+    it('should set Bowling animation for other brands', () => {
+      component.brandName = 'otherbrand';
+      component.loadingType = LoadingType.Bowling;
+      component.decideLoadingAnimation();
+
+      expect(component.loadingAnimation.path).toBe('/assets/lottie-files/loading-mb.json');
+    });
+
+    it('should set Heart animation', () => {
+      component.loadingType = LoadingType.Heart;
+      component.decideLoadingAnimation();
+
+      expect(component.loadingAnimation.path).toBe('/assets/lottie-files/heart.json');
+      expect(component.loadingAnimation.width).toBe('180px');
+      expect(component.loadingAnimation.height).toBe('180px');
+      expect(component.loadingAnimation.marginBottom).toBe('15px');
+    });
+  });
+
+  describe('Control de visibilidad', () => {
+    it('should close modal', () => {
+      const emitSpy = jest.spyOn(component.modalOpenChange, 'emit');
+      component.visible = true;
+
+      component.closeModal();
+
+      expect(component.visible).toBe(false);
+      expect(emitSpy).toHaveBeenCalledWith(false);
+    });
+
+    it('should emit onHide event', () => {
+      const emitSpy = jest.spyOn(component.onHide, 'emit');
+
+      component.onHideModal();
+
+      expect(emitSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Acciones de botones', () => {
+    it('should emit primaryButtonEvent and close modal', () => {
+      const emitSpy = jest.spyOn(component.primaryButtonEvent, 'emit');
+      component.visible = true;
+      component.isStep = false;
+
+      component.primaryButtonAction();
+
+      expect(emitSpy).toHaveBeenCalledWith(true);
+      expect(component.visible).toBe(false);
+    });
+
+    it('should not close modal when isStep is true', () => {
+      const emitSpy = jest.spyOn(component.primaryButtonEvent, 'emit');
+      component.visible = true;
+      component.isStep = true;
+
+      component.primaryButtonAction();
+
+      expect(emitSpy).toHaveBeenCalledWith(true);
+      expect(component.visible).toBe(true);
+    });
+
+    it('should emit secondaryButtonEvent and close modal', () => {
+      const emitSpy = jest.spyOn(component.secondaryButtonEvent, 'emit');
+      component.visible = true;
+
+      component.secondaryButtonAction();
+
+      expect(emitSpy).toHaveBeenCalledWith(true);
+      expect(component.visible).toBe(false);
+    });
+  });
+
+  describe('Cuenta regresiva', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('should start countdown', () => {
+      component.params = {
+        tittle: 'Test',
+        message: 'Test',
+        applyCountRegresive: true,
+        timer: 10,
+      };
+
+      component.startCountRegresive();
+
+      expect(component.countRegresive).toBe(10);
+
+      jest.advanceTimersByTime(1000);
+      expect(component.countRegresive).toBe(9);
+
+      jest.advanceTimersByTime(1000);
+      expect(component.countRegresive).toBe(8);
+    });
+
+    it('should stop countdown at zero', () => {
+      component.params = {
+        tittle: 'Test',
+        message: 'Test',
+        applyCountRegresive: true,
+        timer: 2,
+      };
+
+      component.startCountRegresive();
+
+      // After 1 second, should be 1
+      jest.advanceTimersByTime(1000);
+      expect(component.countRegresive).toBe(1);
+
+      // After 2 seconds total, should be 0 and stop
+      jest.advanceTimersByTime(1000);
+      expect(component.countRegresive).toBe(0);
+    });
+
+    it('should clear previous interval before starting new one', () => {
+      component.params = {
+        tittle: 'Test',
+        message: 'Test',
+        applyCountRegresive: true,
+        timer: 5,
+      };
+
+      component.startCountRegresive();
+      jest.advanceTimersByTime(2000);
+      expect(component.countRegresive).toBe(3);
+
+      // Start again
+      component.startCountRegresive();
+      expect(component.countRegresive).toBe(5);
+    });
+
+    it('should start countdown on visible change', () => {
+      component.params = {
+        tittle: 'Test',
+        message: 'Test',
+        applyCountRegresive: true,
+        timer: 10,
+      };
+      component.visible = true;
+
+      component.updateParams();
+
+      expect(component.countRegresive).toBe(10);
+    });
+  });
+
+  describe('ngOnChanges', () => {
+    it('should update params on changes', () => {
+      const params: ModalParams = {
+        tittle: 'New Title',
+        type: 'success',
+        message: 'New message',
+      };
+
+      component.params = params;
+      component.ngOnChanges({
+        params: {
+          currentValue: params,
+          previousValue: null,
+          firstChange: true,
+          isFirstChange: () => true,
+        },
+      });
+
+      expect(component.tittle).toBe('New Title');
+      expect(component.message).toBe('New message');
+    });
+
+    it('should update animation on changes', () => {
+      component.params = {
+        tittle: 'Test',
+        message: 'Test',
+        type: 'error',
+      };
+
+      component.ngOnChanges({
+        params: {
+          currentValue: component.params,
+          previousValue: null,
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      expect(component.sourceAnimation).toBe('/assets/lottie-files/failure.json');
+    });
+
+    it('should update white brand image on changes', () => {
+      component.params = {
+        tittle: 'Test',
+        message: 'Test',
+        type: 'success',
+      };
+
+      component.ngOnChanges({
+        params: {
+          currentValue: component.params,
+          previousValue: null,
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      expect(component.imageWhiteBrand).toBe('/assets/img/white-brands-events/success.png');
+    });
+  });
+
+  describe('Ciclo de vida', () => {
+    it('should unsubscribe on destroy', () => {
+      component.ngOnInit();
+
+      const nextSpy = jest.spyOn(component['destroy$'], 'next');
+      const completeSpy = jest.spyOn(component['destroy$'], 'complete');
+
+      component.ngOnDestroy();
+
+      expect(nextSpy).toHaveBeenCalled();
+      expect(completeSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete success modal workflow', () => {
+      const params: ModalParams = {
+        tittle: 'Success',
+        type: 'success',
+        message: 'Operation completed',
+        primaryButton: 'OK',
+        secondaryButton: 'Cancel',
+      };
+
+      component.params = params;
+      component.visible = true;
+      component.ngOnInit();
+
+      // Should set all properties
+      expect(component.tittle).toBe('Success');
+      expect(component.type).toBe('success');
+      expect(component.sourceAnimation).toBe('/assets/lottie-files/success.json');
+
+      // Primary action
+      const primarySpy = jest.spyOn(component.primaryButtonEvent, 'emit');
+      component.primaryButtonAction();
+      expect(primarySpy).toHaveBeenCalledWith(true);
+      expect(component.visible).toBe(false);
+    });
+
+    it('should handle complete error modal workflow', () => {
+      const params: ModalParams = {
+        tittle: 'Error',
+        type: 'error',
+        message: 'Operation failed',
+      };
+
+      component.params = params;
+      component.visible = true;
+      component.ngOnInit();
+      // Trigger ngOnChanges to set imageWhiteBrand
+      component.ngOnChanges({
+        params: {
+          currentValue: params,
+          previousValue: null,
+          firstChange: true,
+          isFirstChange: () => true,
+        },
+      });
+
+      expect(component.sourceAnimation).toBe('/assets/lottie-files/failure.json');
+      expect(component.imageWhiteBrand).toBe('/assets/img/white-brands-events/error.png');
+    });
+
+    it('should handle loading modal with progress', () => {
+      const params: ModalParams = {
+        tittle: 'Loading',
+        type: 'loading',
+        message: 'Please wait',
+        loadingType: LoadingType.Heart,
+        withLoadingProgressBar: true,
+      };
+
+      component.params = params;
+      component.loading = true;
+      component.ngOnInit();
+
+      expect(component.loadingAnimation.path).toBe('/assets/lottie-files/heart.json');
+      expect(component.withLoadingProgressBar).toBe(true);
+    });
+
+    it('should handle modal with countdown', fakeAsync(() => {
+      jest.useFakeTimers();
+
+      const params: ModalParams = {
+        tittle: 'Countdown',
+        type: 'question',
+        message: 'Closing in...',
+        applyCountRegresive: true,
+        timer: 5,
+      };
+
+      component.params = params;
+      component.visible = true;
+      component.updateParams();
+
+      expect(component.countRegresive).toBe(5);
+
+      jest.advanceTimersByTime(3000);
+      expect(component.countRegresive).toBe(2);
+
+      jest.useRealTimers();
+    }));
+  });
+});