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

package/src/lib/pages/list-view/list-view.formats.spec.ts

@@ -0,0 +1,214 @@
+import { setSchemaCatalog } from '../../core/registry/schema-catalog';
+import { testCatalog } from '../../core/testing/test-catalog';
+
+setSchemaCatalog(testCatalog);
+
+import { type ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router, provideRouter } from '@angular/router';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+import { API_URL } from '../../core/tokens';
+import { ApiService } from '../../core/services/api.service';
+import type { ResourceSchema } from '../../core/models/schema.model';
+import { ListView } from './list-view';
+
+/** Fila suelta, para no depender del shape de un schema concreto. */
+type Row = Record<string, unknown>;
+
+/**
+ * Los 7 formatos, pintados por la vista (R4.3).
+ *
+ * `list-view` dejó de tener `@switch`: cada celda monta un
+ * `<app-render-host kind="column-format">` y el registro elige el formato.
+ * Este test es la prueba de paridad — la tabla sigue mostrando lo mismo — y
+ * de cableado — son 7 hosts los que cuelgan de la fila.
+ */
+describe('ListView — formatos de columna', () => {
+  const schema: ResourceSchema = {
+    id: 'demo',
+    label: 'Demo',
+    labelPlural: 'Demos',
+    kind: 'collection',
+    endpoint: { list: '/admin/demo', update: '/admin/demo/{key}' },
+    keyField: 'id',
+    titleField: 'name',
+    listColumns: [
+      { key: 'name', label: 'Nombre', format: 'text' },
+      { key: 'stock', label: 'Stock', format: 'number' },
+      { key: 'price', label: 'Precio', format: 'currency' },
+      { key: 'created', label: 'Creado', format: 'date' },
+      { key: 'status', label: 'Estado', format: 'badge' },
+      { key: 'image_url', label: 'Imagen', format: 'thumbnail' },
+      { key: 'active', label: 'Activo', format: 'boolean' },
+    ],
+    fields: [
+      { key: 'name', label: 'Nombre', type: 'text' },
+      { key: 'stock', label: 'Stock', type: 'number' },
+      { key: 'price', label: 'Precio', type: 'currency' },
+      { key: 'created', label: 'Creado', type: 'date' },
+      { key: 'status', label: 'Estado', type: 'text' },
+      { key: 'image_url', label: 'Imagen', type: 'image' },
+      { key: 'active', label: 'Activo', type: 'boolean' },
+    ],
+  };
+
+  /** Elemento raíz tipado del fixture (el `nativeElement` es `any`). */
+  interface DomFixture {
+    root: HTMLElement;
+    fixture: ComponentFixture<ListView>;
+  }
+
+  const fila = {
+    id: '1',
+    name: 'Teclado',
+    stock: 1234,
+    price: 1234.5,
+    created: '2026-12-25',
+    status: 'Activo',
+    image_url: 'https://x.test/a.png',
+    active: true,
+  };
+
+  async function create(
+    esquema: ResourceSchema = schema,
+    filas: Row[] = [fila],
+  ): Promise<DomFixture> {
+    await TestBed.configureTestingModule({
+      imports: [ListView],
+      providers: [
+        // Convención de `render-host.spec`: los servicios piden la URL.
+        { provide: API_URL, useValue: '/api' },
+        provideRouter([]),
+        { provide: Router, useValue: { navigate: vi.fn().mockResolvedValue(true) } },
+        {
+          provide: ApiService,
+          useValue: { list: vi.fn(() => of(filas)), get: vi.fn(() => of(filas[0])) },
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ListView);
+    fixture.componentRef.setInput('schema', esquema);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const root = fixture.nativeElement as HTMLElement;
+    // El `load()` de cada formato es un `import()` dinámico: se espera
+    // acotadamente a que la fila deje de estar en esqueleto.
+    for (let intento = 0; intento < 100 && root.querySelector('app-skeleton'); intento++) {
+      fixture.detectChanges();
+      await new Promise((resolve) => setTimeout(resolve, 1));
+    }
+    fixture.detectChanges();
+    return { root, fixture };
+  }
+
+  it('las 7 celda salen del registro y no de un @switch de la vista', async () => {
+    const { root } = await create();
+    const hosts = Array.from(root.querySelectorAll('tbody app-render-host'));
+    expect(hosts.length, 'una celda por columna').toBe(7);
+    expect(
+      hosts.every((host) => host.getAttribute('kind') === 'column-format'),
+      'todas resuelven kind column-format',
+    ).toBe(true);
+  });
+
+  it('la fila pinta cada formato con su paridad', async () => {
+    const { root } = await create();
+    const celdas = Array.from(root.querySelectorAll<HTMLElement>('tbody tr td')).map((td) =>
+      (td.textContent ?? '').replace(/\u00a0/g, ' '),
+    );
+
+    // text · number · currency · date · badge · thumbnail · boolean
+    expect(celdas[0]).toContain('Teclado');
+    expect(celdas[1]).toContain('1,234');
+    expect(celdas[2]).toContain('S/ 1,234.50');
+    expect(celdas[3]).toContain('25/12/2026');
+    expect(celdas[4]).toContain('Activo');
+    expect(celdas[5].trim(), 'la celda de imagen no lleva texto').toBe('');
+    expect(celdas[6].trim(), 'la celda booleana sólo lleva el interruptor').toBe('');
+  });
+
+  it('la miniatura y el interruptor siguen siendo los de siempre', async () => {
+    const { root } = await create();
+    const img = root.querySelector('tbody td img');
+    expect(img?.getAttribute('src')).toBe('https://x.test/a.png');
+
+    const box = root.querySelector<HTMLInputElement>('tbody td input[type="checkbox"]');
+    expect(box, 'el interruptor de active sigue apareciendo').not.toBeNull();
+    expect(box?.checked).toBe(true);
+    expect(box?.getAttribute('aria-label')).toBe('Activo: Teclado');
+  });
+  describe('ListView — formato por defecto (R4.4)', () => {
+    /** Columnas **sin** `format`: el tipo del campo es lo único que manda. */
+    const sinFormato: ResourceSchema = {
+      id: 'demo-44',
+      label: 'Demo',
+      labelPlural: 'Demos',
+      kind: 'collection',
+      endpoint: { list: '/admin/demo-44', update: '/admin/demo-44/{key}' },
+      keyField: 'id',
+      titleField: 'name',
+      listColumns: [
+        { key: 'name', label: 'Nombre' },
+        { key: 'status', label: 'Estado' },
+        { key: 'pickup_date', label: 'Retiro' },
+        { key: 'active', label: 'Activo' },
+        { key: 'photo', label: 'Foto' },
+      ],
+      fields: [
+        { key: 'name', label: 'Nombre', type: 'slug', from: 'name' },
+        {
+          key: 'status',
+          label: 'Estado',
+          type: 'select',
+          options: [{ value: 'preparacion', label: 'En preparación' }],
+        },
+        { key: 'pickup_date', label: 'Retiro', type: 'date' },
+        { key: 'active', label: 'Activo', type: 'boolean' },
+        { key: 'photo', label: 'Foto', type: 'image' },
+      ],
+    };
+
+    const fila: Row = {
+      id: '1',
+      name: 'teclado-mecanico',
+      status: 'preparacion',
+      pickup_date: '2026-12-25',
+      active: true,
+      photo: 'https://x.test/p.png',
+    };
+
+    it('cada columna sin format pinta el formato que le corresponde por tipo', async () => {
+      const { root } = await create(sinFormato, [fila]);
+      // Las 5 columnas + la celda de acciones que la vista añade al final.
+      const celdas = Array.from(root.querySelectorAll<HTMLElement>('tbody tr td')).slice(0, 5);
+      expect(celdas).toHaveLength(5);
+
+      // slug → text: sólo el valor, sin adornos.
+      expect(celdas[0].textContent).toContain('teclado-mecanico');
+      expect(celdas[0].querySelector('app-badge, input, img')).toBeNull();
+      // select → badge: el chip con la etiqueta de la opción.
+      expect(celdas[1].querySelector('app-badge')).not.toBeNull();
+      // date → date: la fecha ya formateada.
+      expect(celdas[2].textContent).toContain('25/12/2026');
+      // boolean → boolean: el interruptor de R4.3.
+      expect(celdas[3].querySelector('input[type="checkbox"]')).not.toBeNull();
+      // image → thumbnail: la miniatura.
+      expect(celdas[4].querySelector('img')).not.toBeNull();
+    });
+
+    it('el texto se ve como texto y el estado como chip con su etiqueta', async () => {
+      const { root } = await create(sinFormato, [fila]);
+      const celdas = Array.from(root.querySelectorAll<HTMLElement>('tbody tr td')).map((td) =>
+        (td.textContent ?? '').replace(/\u00a0/g, ' '),
+      );
+      expect(celdas[0]).toContain('teclado-mecanico');
+      expect(celdas[1]).toContain('En preparación');
+      expect(celdas[2]).toContain('25/12/2026');
+      expect(root.querySelector('tbody td img')?.getAttribute('src')).toBe('https://x.test/p.png');
+      const box = root.querySelector<HTMLInputElement>('tbody td input[type="checkbox"]');
+      expect(box?.checked).toBe(true);
+    });
+  });
+});