@tinya-code/gas-admin-ui 0.2.0-alpha.15 → 0.2.0-alpha.17

package/src/lib/fields/file/file.spec.ts

@@ -1,134 +0,0 @@
-import { HttpEvent, HttpEventType } from '@angular/common/http';
-import { TestBed } from '@angular/core/testing';
-import { Observable, of } from 'rxjs';
-import { vi } from 'vitest';
-
-import { FileField } from '../../core/models/schema.model';
-import { NotificationService } from '../../core/services/notification.service';
-import { UploadService } from '../../core/services/upload.service';
-import { FieldFile } from './file';
-
-/**
- * R9.5.3 — campo `file`: espejo de `FieldImage` para cualquier archivo.
- * Cubre el selector (template ref), el drop en los dos estados, la
- * validación de `accept`/`maxSizeMB` y el nombre derivado de la URL.
- */
-describe('Campo archivo', () => {
-  const NEW_URL = 'https://cdn.example.com/v1/produccion/adjuntos/informe_2024.pdf';
-  const uploadSpy = vi.fn((): Observable<HttpEvent<string>> =>
-    of({ type: HttpEventType.Response, body: NEW_URL } as HttpEvent<string>),
-  );
-  const notifyStub = { success: vi.fn(), error: vi.fn(), info: vi.fn() };
-
-  beforeEach(async () => {
-    uploadSpy.mockClear();
-    notifyStub.success.mockClear();
-    await TestBed.configureTestingModule({
-      imports: [FieldFile],
-      providers: [
-        { provide: UploadService, useValue: { uploadWithProgress: uploadSpy } },
-        { provide: NotificationService, useValue: notifyStub },
-      ],
-    }).compileComponents();
-  });
-
-  async function create(value: string, overrides: Partial<FileField> = {}) {
-    const fixture = TestBed.createComponent(FieldFile);
-    const field: FileField = { key: 'adjunto', label: 'Adjunto', type: 'file', ...overrides };
-    fixture.componentRef.setInput('field', field);
-    fixture.componentRef.setInput('value', value);
-    fixture.componentRef.setInput('resource', 'orders');
-    await fixture.whenStable();
-    fixture.detectChanges();
-    return fixture;
-  }
-
-  function findButton(fixture: { nativeElement: HTMLElement }, text: string): HTMLButtonElement {
-    const btn = Array.from(fixture.nativeElement.querySelectorAll('button')).find((b) =>
-      b.textContent?.includes(text),
-    );
-    if (!btn) throw new Error(`No se encontró el botón «${text}»`);
-    return btn;
-  }
-
-  function dispatchDrop(zone: Element, file: File): void {
-    const event = new Event('drop', { bubbles: true, cancelable: true });
-    Object.defineProperty(event, 'dataTransfer', { value: { files: [file] } });
-    zone.dispatchEvent(event);
-  }
-
-  const pdfFile = (): File => new File(['x'], 'informe.pdf', { type: 'application/pdf' });
-
-  it('el botón «Subir archivo» abre el selector de archivos', async () => {
-    const fixture = await create('');
-    const input = fixture.nativeElement.querySelector('input[type="file"]') as HTMLInputElement;
-    const clickSpy = vi.spyOn(input, 'click').mockImplementation(() => {});
-
-    findButton(fixture, 'Subir archivo').click();
-
-    expect(clickSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it('soltar un archivo lo sube pasando el nombre del campo (formats por campo)', async () => {
-    const fixture = await create('');
-    const zone = fixture.nativeElement.querySelector('[data-testid="file-dropzone"]');
-    expect(zone).not.toBeNull();
-
-    dispatchDrop(zone!, pdfFile());
-
-    expect(uploadSpy).toHaveBeenCalledWith(pdfFile(), 'orders', 'adjunto');
-    expect(fixture.componentInstance.value()).toBe(NEW_URL);
-    expect(notifyStub.success).toHaveBeenCalled();
-  });
-
-  it('el preview muestra el nombre derivado de la URL y el enlace «Abrir»', async () => {
-    const fixture = await create(NEW_URL);
-
-    expect(fixture.nativeElement.textContent).toContain('informe_2024.pdf');
-    const link = fixture.nativeElement.querySelector('a[target="_blank"]') as HTMLAnchorElement;
-    expect(link.getAttribute('href')).toBe(NEW_URL);
-  });
-
-  it('un archivo fuera de `accept` se rechaza en cliente sin subir', async () => {
-    const fixture = await create('', { accept: '.pdf' });
-    const zone = fixture.nativeElement.querySelector('[data-testid="file-dropzone"]')!;
-
-    dispatchDrop(zone, new File(['x'], 'foto.png', { type: 'image/png' }));
-    fixture.detectChanges();
-
-    expect(uploadSpy).not.toHaveBeenCalled();
-    expect(fixture.nativeElement.textContent).toContain('Formato no permitido');
-  });
-
-  it('un archivo que supera `maxSizeMB` se rechaza en cliente sin subir', async () => {
-    // ~0,104 bytes: el archivo de 1 byte ya la supera.
-    const fixture = await create('', { maxSizeMB: 0.0000001 });
-    const zone = fixture.nativeElement.querySelector('[data-testid="file-dropzone"]')!;
-
-    dispatchDrop(zone, pdfFile());
-    fixture.detectChanges();
-
-    expect(uploadSpy).not.toHaveBeenCalled();
-    expect(fixture.nativeElement.textContent).toContain('supera');
-  });
-
-  it('«Quitar» vacía el campo (campo no requerido)', async () => {
-    const fixture = await create(NEW_URL);
-
-    findButton(fixture, 'Quitar').click();
-    fixture.detectChanges();
-
-    expect(fixture.componentInstance.value()).toBe('');
-    expect(fixture.nativeElement.querySelector('[data-testid="file-dropzone"]')).not.toBeNull();
-  });
-
-  it('dragover se cancela por defecto (habilita el drop del navegador)', async () => {
-    const fixture = await create('');
-    const zone = fixture.nativeElement.querySelector('[data-testid="file-dropzone"]')!;
-    const event = new Event('dragover', { bubbles: true, cancelable: true });
-
-    zone.dispatchEvent(event);
-
-    expect(event.defaultPrevented).toBe(true);
-  });
-});

package/src/lib/fields/file/file.ts

@@ -1,281 +0,0 @@
-import { HttpEventType } from '@angular/common/http';
-import {
-  Component,
-  computed,
-  DestroyRef,
-  ElementRef,
-  inject,
-  input,
-  model,
-  output,
-  signal,
-  viewChild,
-} from '@angular/core';
-import type { FormValueControl } from '@angular/forms/signals';
-
-import type { FileField } from '../../core/models/schema.model';
-import { ApiError } from '../../core/models/api.model';
-import { NotificationService } from '../../core/services/notification.service';
-import { Button } from '../../shared/components/button/button';
-import { UploadService } from '../../core/services/upload.service';
-
-/**
- * Carga de archivo (base.md §7 · R9.5.3): el valor es SOLO la URL pública,
- * igual que `image`, pero para cualquier tipo de archivo (pdf, xlsx, zip…).
- *
- * Espejo de `FieldImage` (D27: es un control propio que no pasa por
- * `NgComponentOutlet`, porque su `value` es un `model()` que el host
- * sincroniza por `[formField]`). La ÚNICA diferencia de comportamiento: no
- * fuerza el prefijo `image/` — el catálogo de formatos lo define el backend
- * por campo (`formats` declarado) o la lista global, y el cliente sólo
- * respeta `accept`/`maxSizeMB` como validación de comodidad.
- *
- * Estados: vacío (zona punteada + arrastrar-soltar), subiendo (progreso; el
- * valor no cambia hasta la respuesta), con archivo (nombre + Quitar / Ver) y
- * error (conserva el archivo anterior).
- */
-@Component({
-  selector: 'app-field-file',
-  imports: [Button],
-  template: ` @if (error(); as message) {
-      <p
-        class="mb-2 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-xs text-danger"
-        role="alert"
-      >
-        {{ message }}
-      </p>
-    }
-    @if (uploading()) {
-      <div class="rounded-xl border border-neutral/20 bg-surface p-3" data-testid="file-uploading">
-        <div class="h-1.5 w-full overflow-hidden rounded-full bg-neutral/20">
-          <div
-            class="h-full rounded-full bg-primary transition-all"
-            [style.width.%]="progress()"
-          ></div>
-        </div>
-        <p class="mt-1 text-xs text-neutral">Subiendo… {{ progress() }}%</p>
-      </div>
-    } @else if (value()) {
-      <div
-        class="rounded-xl border border-neutral/20 bg-surface p-3"
-        data-testid="file-preview"
-        (dragover)="$event.preventDefault()"
-        (drop)="onDrop($event)"
-      >
-        <p class="truncate text-sm font-medium" [title]="value()">{{ fileName() }}</p>
-        <div class="mt-2 flex flex-wrap items-center gap-2">
-          <button
-            type="button"
-            app-button
-            variant="outline"
-            [disabled]="disabled()"
-            (click)="pickFile()"
-          >
-            Reemplazar
-          </button>
-          @if (!field().required) {
-            <button
-              type="button"
-              app-button
-              variant="outline"
-              [disabled]="disabled()"
-              (click)="clear()"
-            >
-              Quitar
-            </button>
-          }
-          <a
-            class="text-sm font-medium text-primary hover:underline"
-            [href]="value()"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Abrir
-          </a>
-        </div>
-      </div>
-    } @else {
-      <div
-        class="rounded-xl border-2 border-dashed border-neutral/30 p-6 text-center"
-        data-testid="file-dropzone"
-        (dragover)="$event.preventDefault()"
-        (drop)="onDrop($event)"
-      >
-        <p class="text-sm text-neutral">Arrastrá un archivo acá</p>
-        <button
-          type="button"
-          app-button
-          variant="outline"
-          class="mt-2"
-          [disabled]="disabled()"
-          (click)="pickFile()"
-        >
-          Subir archivo
-        </button>
-      </div>
-    }
-
-    <input
-      #fileInput
-      type="file"
-      class="sr-only"
-      [accept]="acceptAttr()"
-      [disabled]="disabled()"
-      (change)="onFileSelected($event)"
-    />`,
-})
-export class FieldFile implements FormValueControl<string> {
-  readonly field = input.required<FileField>();
-  /** Recurso dueño del archivo (firma de subida: carpeta de Cloudinary, §11.2). */
-  readonly resource = input('');
-
-  /** Sincronizado por el directive `FormField` del host. */
-  readonly value = model.required<string>();
-  readonly disabled = input(false);
-  /** Marca el campo como tocado (upload/clear/error), como el `blur` nativo. */
-  readonly touch = output<void>();
-
-  private readonly upload = inject(UploadService);
-  private readonly notifications = inject(NotificationService);
-  private readonly destroyRef = inject(DestroyRef);
-
-  protected readonly uploading = signal(false);
-  protected readonly progress = signal(0);
-  protected readonly error = signal<string | null>(null);
-
-  /**
-   * Nombre derivado de la URL para el preview. Cloudinary guarda el
-   * `public_id` al final del path (…/v123/produccion/adjuntos/archivo_xyz):
-   * lo presentable es el sufijo tras el último `/`, sin extensión ruidosa.
-   */
-  protected readonly fileName = computed(() => {
-    const url = this.value();
-    const segment = url.split('/').pop() ?? url;
-    return decodeURIComponent(segment);
-  });
-
-  /** `accept` de `<input type=file>`: el declarado o `''` (sin forzar `image/*`). */
-  protected readonly acceptAttr = computed(() => this.field().accept ?? '');
-
-  /**
-   * Template ref `#fileInput`: Angular NO auto-asigna las template refs a
-   * propiedades de clase (mismo motivo que en `FieldImage`).
-   */
-  private readonly fileInput = viewChild.required<ElementRef<HTMLInputElement>>('fileInput');
-  private uploadSub?: { unsubscribe(): void };
-
-  protected pickFile(): void {
-    this.fileInput().nativeElement.click();
-  }
-
-  protected clear(): void {
-    this.value.set('');
-    this.error.set(null);
-    this.touch.emit();
-  }
-
-  protected onFileSelected(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    const file = input.files?.[0];
-    // Permite volver a elegir el mismo archivo tras un error.
-    input.value = '';
-    if (file) {
-      this.startUpload(file);
-    }
-  }
-
-  protected onDrop(event: Event): void {
-    event.preventDefault();
-    const file = (event as DragEvent).dataTransfer?.files?.[0];
-    if (file) {
-      this.startUpload(file);
-    }
-  }
-
-  /** Valida en cliente (accept + maxSizeMB) y sube con progreso. */
-  private startUpload(file: File): void {
-    if (this.disabled()) {
-      return;
-    }
-    const problem = this.validate(file);
-    if (problem !== null) {
-      this.error.set(problem);
-      this.touch.emit();
-      return;
-    }
-    this.error.set(null);
-    this.uploading.set(true);
-    this.progress.set(0);
-    this.touch.emit();
-
-    this.uploadSub?.unsubscribe();
-    // El nombre del campo viaja siempre: si declara `formats`, el backend
-    // firma ESA lista; sin formatos firma la lista global (R9.5.3).
-    this.uploadSub = this.upload
-      .uploadWithProgress(file, this.resource(), this.field().key)
-      .subscribe({
-        next: (event) => {
-          if (event.type === HttpEventType.UploadProgress) {
-            if (event.total) {
-              this.progress.set(Math.round((event.loaded / event.total) * 100));
-            }
-            return;
-          }
-          if (event.type === HttpEventType.Response) {
-            const url = event.body ?? '';
-            this.uploading.set(false);
-            if (url === '') {
-              this.error.set('No se pudo subir el archivo.');
-              return;
-            }
-            this.value.set(url);
-            this.notifications.success('Archivo subido.');
-          }
-        },
-        error: (err: unknown) => {
-          this.uploading.set(false);
-          // El backend explica el motivo (firma inválida, 429 rate-limit…).
-          this.error.set(
-            err instanceof ApiError
-              ? err.message
-              : 'No se pudo subir el archivo. Revisa la conexión e inténtalo de nuevo.',
-          );
-        },
-      });
-    this.destroyRef.onDestroy(() => this.uploadSub?.unsubscribe());
-  }
-
-  private validate(file: File): string | null {
-    const accept = this.field().accept;
-    if (accept !== undefined && accept !== '' && !acceptMatches(accept, file)) {
-      return 'Formato no permitido para este campo.';
-    }
-    const maxSizeMB = this.field().maxSizeMB;
-    if (maxSizeMB !== undefined && file.size > maxSizeMB * 1024 * 1024) {
-      return `El archivo supera ${maxSizeMB} MB.`;
-    }
-    return null;
-  }
-}
-
-/** `accept` de `<input type=file>`: lista, `tipo/*` o extensión `.png`. */
-function acceptMatches(accept: string, file: File): boolean {
-  for (const raw of accept.split(',')) {
-    const entry = raw.trim().toLowerCase();
-    if (entry === '') {
-      continue;
-    }
-    if (entry.startsWith('.')) {
-      if (file.name.toLowerCase().endsWith(entry)) {
-        return true;
-      }
-    } else if (entry.endsWith('/*')) {
-      if (file.type.startsWith(entry.slice(0, -1))) {
-        return true;
-      }
-    } else if (file.type === entry) {
-      return true;
-    }
-  }
-  return false;
-}

package/src/lib/fields/group/group.descriptor.ts

@@ -1,21 +0,0 @@
-import type { RenderDescriptor } from '../../core/registry/render-registry';
-
-/** Descriptor del campo `group` (R3.3). */
-export const descriptor: RenderDescriptor = {
-  kind: 'field',
-  type: 'group',
-  since: '1.0',
-  load: () => import('./group').then((module) => module.FieldGroup),
-  // Contenedor: siembra un nodo por cada hijo declarado.
-  seed: 'recursive',
-  surfaces: ['form', 'display'],
-  // Compuesto: además de su árbol dibuja el template de sus hijos, que sólo
-  // existe en la plantilla del host. Él es quien decide recibirlo (R3.6).
-  inputs: (config, extras) => ({
-    field: config,
-    tree: extras.ctx.tree,
-    serverErrors: extras.ctx.serverErrors,
-    pathPrefix: extras.ctx.pathPrefix,
-    content: extras.groupContent,
-  }),
-};

package/src/lib/fields/group/group.ts

@@ -1,110 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { Component, computed, input, signal, type TemplateRef } from '@angular/core';
-
-import type { GroupField } from '../../core/models/schema.model';
-import { childTree, type RootTree } from '../field-node';
-
-/**
- * Grupo de campos (base.md §5.4).
- *
- * **Sin importar FieldHost**: los hijos los renderiza el despachador pasando
- * un `ng-template` (`content`) que este componente instancia con
- * `ngTemplateOutlet` en cada variante de chrome. Un import mutuo
- * `field-host ↔ group` rompe en runtime con `Cannot read properties of
- * undefined (reading 'ɵcmp')` y `ng build` NO lo detecta.
- *
- * **Por qué no `<ng-content>`**: con un `<ng-content>` por rama de display,
- * el compilador asigna slot secuencial a cada uno (`generateProjectionDefs`)
- * y el contenido del host cae sólo en el último slot — las ramas
- * `collapsible`/`inline` quedaban vacías. Un solo destino (`TemplateRef`)
- * evita los slots de proyección por completo.
- *
- * Presentaciones:
- * - `card` (por defecto): tarjeta con título.
- * - `collapsible`: `<details>` que se auto-abre si el grupo tiene problemas.
- * - `inline`: sólo la grilla, sin chrome.
- */
-@Component({
-  selector: 'app-field-group',
-  imports: [NgTemplateOutlet],
-  template: `
-    @if (display() === 'collapsible') {
-      <details
-        class="rounded-xl border border-neutral/20 bg-surface"
-        [open]="open() || hasProblem()"
-        (toggle)="onToggle($event)"
-      >
-        <summary
-          class="flex cursor-pointer items-center justify-between gap-2 rounded-xl px-4 py-3 text-section font-semibold hover:bg-neutral/5"
-        >
-          <span>
-            {{ field().label }}
-            @if (field().required) {
-              <span class="text-danger" aria-hidden="true">*</span>
-            }
-          </span>
-          @if (hasProblem()) {
-            <span class="text-xs font-medium text-danger">Revisar</span>
-          }
-        </summary>
-        <div class="px-4 pb-4">
-          <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
-            <ng-container [ngTemplateOutlet]="content()" />
-          </div>
-        </div>
-      </details>
-    } @else if (display() === 'inline') {
-      <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
-        <ng-container [ngTemplateOutlet]="content()" />
-      </div>
-    } @else {
-      <section class="rounded-xl border border-neutral/20 bg-surface p-4">
-        <h2 class="mb-3 text-section font-semibold">
-          {{ field().label }}
-          @if (field().required) {
-            <span class="text-danger" aria-hidden="true">*</span>
-          }
-          @if (hasProblem()) {
-            <span class="ml-2 text-xs font-medium text-danger">Revisar</span>
-          }
-        </h2>
-        <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
-          <ng-container [ngTemplateOutlet]="content()" />
-        </div>
-      </section>
-    }
-  `,
-})
-export class FieldGroup {
-  readonly field = input.required<GroupField>();
-  readonly tree = input.required<RootTree>();
-  /** Errores del backend: detecta rutas anidadas (`address.street`). */
-  readonly serverErrors = input<Record<string, string>>({});
-  /** Prefijo de ruta del grupo en el registro raíz (`address.`). */
-  readonly pathPrefix = input('');
-  /** Hijos: `ng-template` declarado en el case de grupo del FieldHost. */
-  readonly content = input.required<TemplateRef<unknown>>();
-
-  protected readonly display = computed(() => this.field().display ?? 'card');
-
-  /** Estado del subárbol: `invalid()`/`touched()` agregan a los hijos. */
-  private readonly state = computed(() =>
-    childTree<Record<string, unknown>>(this.tree(), this.field().key)(),
-  );
-
-  protected readonly hasProblem = computed(
-    () => (this.state().invalid() && this.state().touched()) || this.hasServerError(),
-  );
-
-  /** El usuario abrió/cerró el `<details>` a mano (se persiste en el binding). */
-  protected readonly open = signal(false);
-
-  protected onToggle(event: Event): void {
-    this.open.set((event.currentTarget as HTMLDetailsElement).open);
-  }
-
-  private hasServerError(): boolean {
-    const prefix = `${this.pathPrefix()}${this.field().key}.`;
-    return Object.keys(this.serverErrors()).some((path) => path.startsWith(prefix));
-  }
-}

package/src/lib/fields/image/image.descriptor.ts

@@ -1,12 +0,0 @@
-import type { RenderDescriptor } from '../../core/registry/render-registry';
-
-/** Descriptor del campo `image` (R3.3). */
-export const descriptor: RenderDescriptor = {
-  kind: 'field',
-  type: 'image',
-  since: '1.0',
-  load: () => import('./image').then((module) => module.FieldImage),
-  // Nace como cadena: los textos, fechas, urls, selects y relacionales.
-  seed: 'string',
-  surfaces: ['form', 'display'],
-};

package/src/lib/fields/image/image.spec.ts

@@ -1,117 +0,0 @@
-import { HttpEvent, HttpEventType } from '@angular/common/http';
-import { TestBed } from '@angular/core/testing';
-import { Observable, of } from 'rxjs';
-import { vi } from 'vitest';
-
-import { ImageField } from '../../core/models/schema.model';
-import { NotificationService } from '../../core/services/notification.service';
-import { UploadService } from '../../core/services/upload.service';
-import { FieldImage } from './image';
-
-/**
- * Regresión del selector de imagen: `#fileInput` es una template ref y
- * Angular NO la auto-asigna a la propiedad de clase — con el campo
- * `fileInput` en `undefined`, `pickFile()` no abría nada. Cubre también el
- * arrastre en los dos estados (zona vacía y preview).
- */
-describe('Campo imagen', () => {
-  const NEW_URL = 'https://cdn.example.com/nueva.png';
-  const uploadSpy = vi.fn((): Observable<HttpEvent<string>> =>
-    of({ type: HttpEventType.Response, body: NEW_URL } as HttpEvent<string>),
-  );
-  const notifyStub = { success: vi.fn(), error: vi.fn(), info: vi.fn() };
-
-  beforeEach(async () => {
-    uploadSpy.mockClear();
-    notifyStub.success.mockClear();
-    await TestBed.configureTestingModule({
-      imports: [FieldImage],
-      providers: [
-        { provide: UploadService, useValue: { uploadWithProgress: uploadSpy } },
-        { provide: NotificationService, useValue: notifyStub },
-      ],
-    }).compileComponents();
-  });
-
-  async function create(value: string) {
-    const fixture = TestBed.createComponent(FieldImage);
-    const field: ImageField = { key: 'image_url', label: 'Imagen', type: 'image' };
-    fixture.componentRef.setInput('field', field);
-    fixture.componentRef.setInput('value', value);
-    fixture.componentRef.setInput('resource', 'products');
-    await fixture.whenStable();
-    fixture.detectChanges();
-    return fixture;
-  }
-
-  function buttons(fixture: { nativeElement: HTMLElement }): HTMLButtonElement[] {
-    return Array.from(fixture.nativeElement.querySelectorAll('button'));
-  }
-
-  function findButton(fixture: { nativeElement: HTMLElement }, text: string): HTMLButtonElement {
-    const btn = buttons(fixture).find((b) => b.textContent?.includes(text));
-    if (!btn) throw new Error(`No se encontró el botón «${text}»`);
-    return btn;
-  }
-
-  function dispatchDrop(zone: Element, file: File): void {
-    const event = new Event('drop', { bubbles: true, cancelable: true });
-    Object.defineProperty(event, 'dataTransfer', { value: { files: [file] } });
-    zone.dispatchEvent(event);
-  }
-
-  const imageFile = (): File => new File(['x'], 'foto.png', { type: 'image/png' });
-
-  it('el botón «Subir imagen» abre el selector de archivos', async () => {
-    const fixture = await create('');
-    const input = fixture.nativeElement.querySelector('input[type="file"]') as HTMLInputElement;
-    const clickSpy = vi.spyOn(input, 'click').mockImplementation(() => {});
-
-    findButton(fixture, 'Subir imagen').click();
-
-    expect(clickSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it('el botón «Reemplazar» abre el selector de archivos', async () => {
-    const fixture = await create('https://cdn.example.com/vieja.png');
-    const input = fixture.nativeElement.querySelector('input[type="file"]') as HTMLInputElement;
-    const clickSpy = vi.spyOn(input, 'click').mockImplementation(() => {});
-
-    findButton(fixture, 'Reemplazar').click();
-
-    expect(clickSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it('soltar una imagen en la zona vacía la sube y setea el valor', async () => {
-    const fixture = await create('');
-    const zone = fixture.nativeElement.querySelector('[data-testid="image-dropzone"]');
-    expect(zone).not.toBeNull();
-
-    dispatchDrop(zone!, imageFile());
-
-    expect(uploadSpy).toHaveBeenCalledWith(imageFile(), 'products', 'image_url');
-    expect(fixture.componentInstance.value()).toBe(NEW_URL);
-    expect(notifyStub.success).toHaveBeenCalled();
-  });
-
-  it('soltar una imagen sobre el preview también la sube (reemplazo)', async () => {
-    const fixture = await create('https://cdn.example.com/vieja.png');
-    const preview = fixture.nativeElement.querySelector('[data-testid="image-preview"]');
-    expect(preview).not.toBeNull();
-
-    dispatchDrop(preview!, imageFile());
-
-    expect(uploadSpy).toHaveBeenCalledWith(imageFile(), 'products', 'image_url');
-    expect(fixture.componentInstance.value()).toBe(NEW_URL);
-  });
-
-  it('dragover se cancela por defecto (habilita el drop del navegador)', async () => {
-    const fixture = await create('');
-    const zone = fixture.nativeElement.querySelector('[data-testid="image-dropzone"]')!;
-    const event = new Event('dragover', { bubbles: true, cancelable: true });
-
-    zone.dispatchEvent(event);
-
-    expect(event.defaultPrevented).toBe(true);
-  });
-});