@dropi/ui-components 1.0.0

package/src/components-source/dropi-file-upload/dropi-file-upload.component.spec.ts

@@ -0,0 +1,398 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiFileUploadComponent } from './dropi-file-upload.component';
+import { UploadFileService } from '@app/services/ui/upload-file.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgZone } from '@angular/core';
+import { of, throwError } from 'rxjs';
+import { UploadParams, FileItem } from '../../utilities/interfaces/ui/upload.model';
+
+describe('DropiFileUploadComponent', () => {
+  let component: DropiFileUploadComponent;
+  let fixture: ComponentFixture<DropiFileUploadComponent>;
+  let mockUploadService: any;
+  let mockNgZone: any;
+
+  const mockParams: UploadParams = {
+    title: 'Upload Files',
+    label: 'Select files',
+    previewType: 'card',
+    multiple: true,
+    maxFiles: 5,
+    maxFileSizeMB: 10,
+    accept: ['IMAGE', 'PDF'],
+    compress: false,
+    maxHeight: 1000,
+    maxWidth: 1000,
+    path: '/uploads',
+    onlyView: false,
+  };
+
+  beforeEach(() => {
+    mockUploadService = {
+      uploadFileWithProgress: jest.fn().mockReturnValue(of({ response: '/path/to/file.jpg' })),
+      deletePublishedFile: jest.fn().mockReturnValue(of(true)),
+    };
+
+    mockNgZone = {
+      run: jest.fn((fn) => fn()),
+    };
+
+    // Crear el componente directamente sin TestBed
+    component = new DropiFileUploadComponent(mockUploadService, mockNgZone);
+    fixture = {
+      componentInstance: component,
+      detectChanges: () => {},
+      nativeElement: {},
+    } as any;
+    component.params = mockParams;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.dragOver).toBe(false);
+      expect(component.selectedFiles).toEqual([]);
+      expect(component.error).toBe(false);
+    });
+
+    it('should accept upload parameters', () => {
+      expect(component.params.maxFiles).toBe(5);
+      expect(component.params.maxFileSizeMB).toBe(10);
+      expect(component.params.multiple).toBe(true);
+    });
+  });
+
+  describe('Validación de archivos', () => {
+    it('should validate file type correctly', () => {
+      const validFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
+      const files = [validFile];
+
+      component.handleFiles(files);
+
+      expect(component.error).toBe(false);
+      expect(component.selectedFiles.length).toBe(1);
+    });
+
+    it('should reject invalid file type', () => {
+      const invalidFile = new File(['content'], 'test.exe', { type: 'application/exe' });
+      const files = [invalidFile];
+
+      component.handleFiles(files);
+
+      expect(component.error).toBe(true);
+      expect(component.errorMessage).toBe('conditions exceeded');
+    });
+
+    it('should validate file size', () => {
+      const largeContent = new Array(15 * 1024 * 1024).join('a'); // 15MB
+      const largeFile = new File([largeContent], 'large.jpg', { type: 'image/jpeg' });
+
+      component.handleFiles([largeFile]);
+
+      expect(component.error).toBe(true);
+      expect(component.errorMessage).toBe('File size exceeded');
+    });
+
+    it('should validate max files limit', () => {
+      const files = Array(10)
+        .fill(null)
+        .map((_, i) => new File(['content'], `file${i}.jpg`, { type: 'image/jpeg' }));
+
+      component.handleFiles(files);
+
+      expect(component.error).toBe(true);
+      expect(component.errorMessage).toBe('exceded max Files');
+    });
+  });
+
+  describe('Subida de archivos', () => {
+    it('should upload file successfully', (done) => {
+      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
+
+      component.handleFiles([file]);
+
+      setTimeout(() => {
+        expect(mockUploadService.uploadFileWithProgress).toHaveBeenCalled();
+        expect(component.selectedFiles[0].state).toBe('complete');
+        done();
+      }, 100);
+    });
+
+    it('should emit uploaded URLs', (done) => {
+      const emitSpy = jest.spyOn(component.uploadedUrlsChange, 'emit');
+      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
+
+      mockUploadService.uploadFileWithProgress.mockReturnValue(
+        of(100, { response: '/uploaded/test.jpg' }),
+      );
+
+      component.handleFiles([file]);
+
+      setTimeout(() => {
+        expect(emitSpy).toHaveBeenCalled();
+        done();
+      }, 100);
+    });
+
+    it('should handle upload error', (done) => {
+      mockUploadService.uploadFileWithProgress.mockReturnValue(
+        throwError(() => new Error('Upload failed')),
+      );
+
+      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
+      component.handleFiles([file]);
+
+      setTimeout(() => {
+        expect(component.error).toBe(true);
+        expect(component.errorMessage).toBe('upload file error');
+        done();
+      }, 100);
+    });
+
+    it('should update progress during upload', (done) => {
+      mockUploadService.uploadFileWithProgress.mockReturnValue(of(50, 75, 100));
+
+      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
+      component.handleFiles([file]);
+
+      setTimeout(() => {
+        expect(component.selectedFiles[0].progress).toBeGreaterThan(0);
+        done();
+      }, 100);
+    });
+  });
+
+  describe('Eliminación de archivos', () => {
+    it('should confirm delete', () => {
+      const fileItem: FileItem = {
+        id: '1',
+        file: new File([''], 'test.jpg'),
+        progress: 100,
+        state: 'complete',
+        typeView: 'card',
+        fileType: 'image',
+      };
+
+      component.confirmDelete(fileItem);
+
+      expect(fileItem.state).toBe('confirm-delete');
+    });
+
+    it('should cancel delete', () => {
+      const fileItem: FileItem = {
+        id: '1',
+        file: new File([''], 'test.jpg'),
+        progress: 100,
+        state: 'confirm-delete',
+        typeView: 'card',
+        fileType: 'image',
+      };
+
+      component.cancelDelete(fileItem);
+
+      expect(fileItem.state).toBe('complete');
+    });
+
+    it('should delete file from list', () => {
+      const fileItem: FileItem = {
+        id: '1',
+        file: new File([''], 'test.jpg'),
+        progress: 100,
+        state: 'complete',
+        typeView: 'card',
+        fileType: 'image',
+      };
+      component.selectedFiles = [fileItem];
+
+      component.deleteFile(fileItem);
+
+      expect(component.selectedFiles.length).toBe(0);
+    });
+
+    it('should delete uploaded file from server', (done) => {
+      const fileItem: FileItem = {
+        id: '1',
+        file: null,
+        progress: 100,
+        state: 'complete',
+        typeView: 'card',
+        fileType: 'image',
+        uploadedUrl: '/path/file.jpg',
+      };
+      component.selectedFiles = [fileItem];
+
+      component['removeFile'](fileItem);
+
+      setTimeout(() => {
+        expect(mockUploadService.deletePublishedFile).toHaveBeenCalledWith('/path/file.jpg');
+        done();
+      }, 100);
+    });
+  });
+
+  describe('Imágenes precargadas', () => {
+    it('should set precharged images', () => {
+      const paths = ['/img1.jpg', '/img2.jpg'];
+      const baseUrl = 'https://cdn.example.com';
+      const emitSpy = jest.spyOn(component.uploadedUrlsChange, 'emit');
+
+      component.setPrechargedImages(paths, baseUrl);
+
+      expect(component.selectedFiles.length).toBe(2);
+      expect(component.selectedFiles[0].previewUrl).toBe(`${baseUrl}/${paths[0]}`);
+      expect(component.selectedFiles[0].state).toBe('complete');
+      expect(emitSpy).toHaveBeenCalledWith(paths);
+    });
+
+    it('should detect PDF files in preloaded images', () => {
+      const paths = ['/document.pdf'];
+      const baseUrl = 'https://cdn.example.com';
+
+      component.setPrechargedImages(paths, baseUrl);
+
+      expect(component.selectedFiles[0].fileType).toBe('document');
+    });
+  });
+
+  describe('Tipos de archivo', () => {
+    it('should detect image file type', () => {
+      const file = new File([''], 'test.jpg', { type: 'image/jpeg' });
+
+      const fileType = component.getFileType(file);
+
+      expect(fileType).toBe('image');
+    });
+
+    it('should detect document file type', () => {
+      const file = new File([''], 'test.pdf', { type: 'application/pdf' });
+
+      const fileType = component.getFileType(file);
+
+      expect(fileType).toBe('document');
+    });
+
+    it('should get correct view type for image grid', () => {
+      component.params.previewType = 'grid';
+      const file = new File([''], 'test.jpg', { type: 'image/jpeg' });
+
+      const viewType = component.getFileViewType(file);
+
+      expect(viewType).toBe('grid');
+    });
+
+    it('should get card view type for non-image', () => {
+      component.params.previewType = 'grid';
+      const file = new File([''], 'test.pdf', { type: 'application/pdf' });
+
+      const viewType = component.getFileViewType(file);
+
+      expect(viewType).toBe('card');
+    });
+  });
+
+  describe('Tipos MIME aceptados', () => {
+    it('should return accepted MIME types', () => {
+      component.params.accept = ['IMAGE', 'PDF'];
+
+      const mimeTypes = component.acceptedMimeTypes;
+
+      expect(mimeTypes).toContain('image/jpeg');
+      expect(mimeTypes).toContain('application/pdf');
+    });
+
+    it('should return wildcard when no accept specified', () => {
+      component.params.accept = [];
+
+      const mimeTypes = component.acceptedMimeTypes;
+
+      expect(mimeTypes).toEqual(['*']);
+    });
+  });
+
+  describe('Generación de IDs', () => {
+    it('should generate unique ID for file', () => {
+      const file = new File([''], 'test.jpg');
+
+      const id1 = component.generateId(file);
+      const id2 = component.generateId(file);
+
+      expect(id1).not.toBe(id2);
+      expect(id1).toContain('test.jpg');
+    });
+  });
+
+  describe('Manejo de eventos', () => {
+    it('should handle onFilesAdded event', () => {
+      const spy = jest.spyOn(component, 'handleFiles');
+      const files = [new File([''], 'test.jpg', { type: 'image/jpeg' })];
+
+      component.onFilesAdded(files);
+
+      expect(spy).toHaveBeenCalledWith(files);
+    });
+
+    it('should handle file action events', () => {
+      const fileItem: FileItem = {
+        id: '1',
+        file: null,
+        progress: 100,
+        state: 'complete',
+        typeView: 'card',
+        fileType: 'image',
+      };
+
+      component.onFileAction({ file: fileItem, type: 'delete' });
+
+      expect(fileItem.state).toBe('confirm-delete');
+    });
+  });
+
+  describe('Manejo de errores', () => {
+    it('should show error message', () => {
+      component.showError('Test error');
+
+      expect(component.error).toBe(true);
+      expect(component.errorMessage).toBe('Test error');
+    });
+
+    it('should clear error on successful upload', () => {
+      component.error = true;
+      const file = new File([''], 'test.jpg', { type: 'image/jpeg' });
+
+      component.handleFiles([file]);
+
+      expect(component.error).toBe(false);
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete upload workflow', (done) => {
+      const emitSpy = jest.spyOn(component.uploadedUrlsChange, 'emit');
+      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
+
+      // Upload
+      component.handleFiles([file]);
+
+      setTimeout(() => {
+        expect(component.selectedFiles.length).toBe(1);
+        expect(component.selectedFiles[0].state).toBe('complete');
+        expect(emitSpy).toHaveBeenCalled();
+
+        // Delete
+        component.confirmDelete(component.selectedFiles[0]);
+        expect(component.selectedFiles[0].state).toBe('confirm-delete');
+
+        component['removeFile'](component.selectedFiles[0]);
+
+        setTimeout(() => {
+          expect(mockUploadService.deletePublishedFile).toHaveBeenCalled();
+          done();
+        }, 100);
+      }, 100);
+    });
+  });
+});

package/src/components-source/dropi-file-upload/dropi-file-upload.component.stories.ts

@@ -0,0 +1,139 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { DropiFileUploadComponent } from './dropi-file-upload.component';
+import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { DropZoneComponent } from './drop-zone/drop-zone.component';
+import { FileListComponent } from './file-list/file-list.component';
+import { AlertComponent } from '../alert/alert.component';
+import { CommonModule } from '@angular/common';
+import { concat, interval, of, Subject } from 'rxjs';
+import { UploadFileService } from '@app/services/ui/upload-file.service';
+import { delay, map, take } from 'rxjs/operators';
+import { DropiImageOverlayComponent } from '../dropi-image-overlay/dropi-image-overlay.component';
+
+class MockUploadFileService {
+  private triggerInputSubject = new Subject<void>();
+  triggerInput$ = this.triggerInputSubject.asObservable();
+
+  triggerInput() {
+    this.triggerInputSubject.next();
+  }
+  uploadFileWithProgress(file: File, path: string, fileType: string) {
+    const progress$ = interval(100).pipe(
+      take(11),
+      map((i) => i * 10),
+    );
+
+    const finalResponse$ = of({ response: `recharges/voucher/voucher.pdf` });
+
+    return concat(progress$, finalResponse$);
+  }
+
+  deletePublishedFile(url: string, fileType: string) {
+    return of(true).pipe(delay(300));
+  }
+}
+const meta: Meta<DropiFileUploadComponent> & { argTypes: Record<string, any> } = {
+  title: 'UI Dropi/File Upload',
+  component: DropiFileUploadComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        DropiImageOverlayComponent,
+
+        TranslateModule.forRoot({
+          loader: { provide: TranslateLoader, useValue: TranslateLoader },
+        }),
+        DropZoneComponent,
+        FileListComponent,
+        AlertComponent,
+      ],
+      providers: [
+        {
+          provide: TranslateService,
+          useClass: TranslateService,
+        },
+        {
+          provide: UploadFileService,
+          useClass: MockUploadFileService,
+        },
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=191-2299&m=dev', // Reemplazar con URL real
+    },
+  },
+  tags: ['autodocs'],
+  // ---- aquí overrideamos el tipo de argTypes para aceptar cualquiera ----
+  argTypes: {
+    // control “objeto” para todo params
+    params: {
+      description: 'Configuration options for file upload',
+      control: { type: 'object' },
+    },
+    uploadedUrlsChange: {
+      action: 'uploadedUrlsChange',
+      description: 'Emitted when upload is completed and URLs are returned',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiFileUploadComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-dropi-file-upload [params]="params"></app-dropi-file-upload>
+
+      <dropi-image-overlay></dropi-image-overlay>
+    `,
+  }),
+  args: {
+    params: {
+      title: 'Images',
+      label: 'Upload images',
+      accept: ['PNG', 'JPG', 'PDF'],
+      multiple: true,
+      maxFileSizeMB: 1,
+      previewType: 'card',
+      path: 'test/upload',
+      compress: false,
+      maxWidth: 500,
+      maxHeight: 500,
+      maxFiles: 2,
+    },
+  },
+};
+
+export const Grid: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-dropi-file-upload [params]="params"></app-dropi-file-upload>
+
+      <dropi-image-overlay></dropi-image-overlay>
+    `,
+  }),
+  args: {
+    params: {
+      title: 'Grid Images',
+      label: 'Upload images',
+      accept: ['PNG', 'JPG'],
+      multiple: true,
+      maxFileSizeMB: 10,
+      previewType: 'grid',
+      path: 'test/upload',
+      compress: false,
+      maxWidth: 500,
+      maxHeight: 500,
+      maxFiles: 20,
+      onlyView: false,
+    },
+  },
+};