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

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

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1,281 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,117 @@
+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);
+  });
+});