@block-auth.io/angular 0.2.10 → 0.3.0

package/src/lib/components/txns/internals/solicited-data-modal.component.test.ts

@@ -1,10 +1,11 @@
-import { describe, it, expect, afterEach } from 'vitest';
+import { describe, it, expect, afterEach, vi } from 'vitest';
 import { Component } from '@angular/core';
 import { render, screen, fireEvent } from '@testing-library/angular';
-import { setLocale } from '@block-auth.io/core';
+import { setLocale, type TxnDataParam } from '@block-auth.io/core';
 import {
   SolicitedDataModalComponent,
   type ParamChange,
+  type ShareChange,
 } from './solicited-data-modal.component';
 
 // Port de packages/react/src/components/txns/internals/SolicitedDataModal.test.tsx
@@ -45,6 +46,30 @@ describe('SolicitedDataModal', () => {
     expect(screen.getByText('Opcional')).toBeDefined();
   });
 
+  it('marca los obligatorios y los opcionales con texto discreto en lugar del asterisco', async () => {
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [requiredParams]="['users-email']"
+        [optionalParams]="['users-phone']"
+      />`,
+    })
+    class Host {}
+    await render(Host);
+    const emailLabel = document.querySelector(
+      'label[for="solicited-data-users-email"]'
+    ) as HTMLLabelElement;
+    const phoneLabel = document.querySelector(
+      'label[for="solicited-data-users-phone"]'
+    ) as HTMLLabelElement;
+    expect(emailLabel.querySelector('.bal-ba-glass-label-required')?.textContent).toBe('Required');
+    expect(phoneLabel.querySelector('.bal-ba-glass-label-optional')?.textContent).toBe('Optional');
+    expect(screen.queryByText('*')).toBeNull();
+    expect(screen.getByLabelText(/Email\s*Required/)).toBe(fieldInput('users-email'));
+    expect(document.querySelector('.bal-ba-glass-badge')).toBeNull();
+  });
+
   it('emite paramChange al escribir y validationChange según validez', async () => {
     const paramChanges: ParamChange[] = [];
     const validationChanges: boolean[] = [];
@@ -97,8 +122,540 @@ describe('SolicitedDataModal', () => {
     await render(Host);
     const input = screen.getByRole('textbox');
     await fireEvent.blur(input);
+    expect(screen.getByText('Enter a valid email (e.g. name@domain.com)')).toBeDefined();
+  });
+});
+
+const serverParams: TxnDataParam[] = [
+  { slug: 'users-firstname', mode: 'required', status: 'shared', value: 'Ana' },
+  {
+    slug: 'users-lastname',
+    mode: 'optional',
+    status: 'granted',
+    value: 'Pérez',
+  },
+  {
+    slug: 'users-email',
+    mode: 'required',
+    status: 'consent',
+    value: 'ana@block-auth.io',
+  },
+  { slug: 'users-phone', mode: 'required', status: 'missing', value: null },
+];
+
+const fieldInput = (slug: string) =>
+  document.getElementById(`solicited-data-${slug}`) as HTMLInputElement;
+const shareSwitch = (slug: string) =>
+  document.getElementById(`solicited-data-share-${slug}`) as HTMLButtonElement;
+const isShared = (slug: string) => shareSwitch(slug).getAttribute('aria-checked') === 'true';
+
+describe('SolicitedDataModal con los datos pedidos por el servidor', () => {
+  afterEach(() => setLocale('en'));
+
+  it('muestra todos los datos con su valor de perfil y el interruptor Ceder', async () => {
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal [params]="params" />`,
+    })
+    class Host {
+      params = serverParams;
+    }
+    await render(Host);
+    expect(screen.getByText('First Name')).toBeDefined();
+    expect(screen.getByText('Last Name')).toBeDefined();
+    expect(fieldInput('users-firstname').value).toBe('Ana');
+    expect(fieldInput('users-lastname').value).toBe('Pérez');
+    expect(fieldInput('users-email').value).toBe('ana@block-auth.io');
+    expect(fieldInput('users-phone').value).toBe('');
+    expect(fieldInput('users-phone').type).toBe('tel');
+    expect(shareSwitch('users-email').getAttribute('role')).toBe('switch');
+    expect(isShared('users-firstname')).toBe(true);
+    expect(shareSwitch('users-firstname').disabled).toBe(false);
+    expect(isShared('users-lastname')).toBe(true);
+    expect(isShared('users-email')).toBe(false);
+    expect(isShared('users-phone')).toBe(false);
+    expect(fieldInput('users-firstname').readOnly).toBe(false);
+    expect(screen.getByLabelText('Clear field First Name')).toBeDefined();
+  });
+
+  it('emite shareChange al activar Ceder', async () => {
+    const shareChanges: ShareChange[] = [];
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal [params]="params" (shareChange)="sc($event)" />`,
+    })
+    class Host {
+      params = serverParams;
+      sc = (e: ShareChange) => shareChanges.push(e);
+    }
+    await render(Host);
+    await fireEvent.click(screen.getByRole('switch', { name: 'Share Email' }));
+    expect(shareChanges[shareChanges.length - 1]).toEqual({
+      slug: 'users-email',
+      shared: true,
+    });
+  });
+
+  it('emite shareChange al desactivar Ceder', async () => {
+    const shareChanges: ShareChange[] = [];
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal [params]="params" (shareChange)="sc($event)" />`,
+    })
+    class Host {
+      params = serverParams;
+      sc = (e: ShareChange) => shareChanges.push(e);
+    }
+    await render(Host);
+    await fireEvent.click(screen.getByRole('switch', { name: 'Share Last Name' }));
+    expect(shareChanges[shareChanges.length - 1]).toEqual({
+      slug: 'users-lastname',
+      shared: false,
+    });
+  });
+
+  it('muestra la x para limpiar solo si el campo tiene contenido', async () => {
+    const paramChanges: ParamChange[] = [];
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal [params]="params" (paramChange)="pc($event)" />`,
+    })
+    class Host {
+      params = serverParams;
+      pc = (e: ParamChange) => paramChanges.push(e);
+    }
+    await render(Host);
+    expect(screen.queryByLabelText('Clear field Phone')).toBeNull();
+    await fireEvent.click(screen.getByLabelText('Clear field Email'));
+    expect(paramChanges[paramChanges.length - 1]).toEqual({
+      slug: 'users-email',
+      value: '',
+    });
+    expect(document.activeElement).toBe(fieldInput('users-email'));
+  });
+
+  it('ofrece Guardar y Deshacer cuando el valor cambia', async () => {
+    const saved: string[] = [];
+    const undone: string[] = [];
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [params]="params"
+        [userParamValues]="{ 'users-email': 'otra@block-auth.io' }"
+        [sharedParams]="{ 'users-email': true }"
+        (saveParam)="sp($event)"
+        (undoParam)="up($event)"
+      />`,
+    })
+    class Host {
+      params = serverParams;
+      sp = (slug: string) => saved.push(slug);
+      up = (slug: string) => undone.push(slug);
+    }
+    await render(Host);
+    expect(screen.getByText('Save or undo the change')).toBeDefined();
+    await fireEvent.click(screen.getByText('Save'));
+    expect(saved).toEqual(['users-email']);
+    await fireEvent.click(screen.getByText('Undo'));
+    expect(undone).toEqual(['users-email']);
+  });
+
+  it('indica que el valor guardado irá al perfil y no permite guardar uno inválido', async () => {
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [params]="params"
+        [userParamValues]="{
+          'users-email': 'otra@block-auth.io',
+          'users-phone': 'abc'
+        }"
+        [savedParams]="{ 'users-email': 'otra@block-auth.io' }"
+        [sharedParams]="{ 'users-email': true }"
+      />`,
+    })
+    class Host {
+      params = serverParams;
+    }
+    await render(Host);
+    expect(screen.getByText('It will be saved to your profile on accept')).toBeDefined();
     expect(
-      screen.getByText('Enter a valid email (e.g. name@domain.com)'),
-    ).toBeDefined();
+      (document.getElementById('solicited-data-save-users-phone') as HTMLButtonElement).disabled
+    ).toBe(true);
+    await fireEvent.blur(fieldInput('users-phone'));
+    expect(screen.getByText(/valid phone/i)).toBeDefined();
+    expect(fieldInput('users-phone').getAttribute('aria-invalid')).toBe('true');
+    expect(fieldInput('users-phone').getAttribute('aria-describedby')).toBe(
+      'solicited-data-users-phone-error'
+    );
+  });
+
+  it('avisa mientras falte un obligatorio y muestra el error del servidor', async () => {
+    const validationChanges: boolean[] = [];
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [params]="params"
+        [sharedParams]="{ 'users-email': true }"
+        errorTxt="Server error"
+        (validationChange)="vc($event)"
+      />`,
+    })
+    class Host {
+      params = serverParams;
+      vc = (v: boolean) => validationChanges.push(v);
+    }
+    await render(Host);
+    const notice = document.getElementById('solicited-data-notice')!;
+    expect(notice.textContent?.trim()).toBe('Authorize or fill in the required data to continue');
+    expect(notice.querySelector('.bal-ba-glass-notice-icon')?.getAttribute('aria-hidden')).toBe(
+      'true'
+    );
+    expect(validationChanges[validationChanges.length - 1]).toBe(false);
+    expect(screen.getByRole('alert').textContent?.trim()).toBe('Server error');
+  });
+
+  it('oculta el aviso cuando no falta ningún obligatorio', async () => {
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [requiredParams]="['users-email']"
+        [userParamValues]="{ 'users-email': 'user@test.com' }"
+      />`,
+    })
+    class Host {}
+    await render(Host);
+    expect(document.getElementById('solicited-data-notice')).toBeNull();
+  });
+});
+
+const card = (slug: string) => fieldInput(slug).closest('.bal-ba-glass-field') as HTMLElement;
+const isPending = (slug: string) => card(slug).classList.contains('bal-ba-glass-field-pending');
+
+describe('SolicitedDataModal campos vacíos y pendientes', () => {
+  afterEach(() => setLocale('en'));
+
+  it('destaca solo las tarjetas obligatorias pendientes', async () => {
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [params]="params"
+        [userParamValues]="{ 'users-lastname': '' }"
+      />`,
+    })
+    class Host {
+      params = serverParams;
+    }
+    await render(Host);
+    expect(isPending('users-email')).toBe(true);
+    expect(isPending('users-phone')).toBe(true);
+    expect(isPending('users-firstname')).toBe(false);
+    expect(isPending('users-lastname')).toBe(false);
+  });
+
+  it('deja de destacar la tarjeta al resolverse', async () => {
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal [params]="params" [sharedParams]="shared" />`,
+    })
+    class Host {
+      params = serverParams;
+      shared: Record<string, boolean> = {};
+    }
+    const { fixture } = await render(Host);
+    expect(isPending('users-email')).toBe(true);
+    fixture.componentInstance.shared = { 'users-email': true };
+    fixture.detectChanges();
+    expect(isPending('users-email')).toBe(false);
+  });
+
+  it('deshabilita y desmarca Ceder si el campo está vacío', async () => {
+    const shareChanges: ShareChange[] = [];
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [params]="params"
+        [userParamValues]="{ 'users-lastname': ' ' }"
+        (shareChange)="sc($event)"
+      />`,
+    })
+    class Host {
+      params = serverParams;
+      sc = (e: ShareChange) => shareChanges.push(e);
+    }
+    await render(Host);
+    expect(shareSwitch('users-phone').disabled).toBe(true);
+    expect(isShared('users-lastname')).toBe(false);
+    expect(shareSwitch('users-lastname').disabled).toBe(true);
+    await fireEvent.click(shareSwitch('users-lastname'));
+    expect(shareChanges).toEqual([]);
+    expect(shareSwitch('users-email').disabled).toBe(false);
+  });
+
+  it('permite guardar un campo vaciado y avisa de que no se cederá', async () => {
+    const saved: string[] = [];
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [params]="params"
+        [userParamValues]="{ 'users-lastname': '' }"
+        [savedParams]="savedParams"
+        (saveParam)="sp($event)"
+      />`,
+    })
+    class Host {
+      params = serverParams;
+      savedParams: Record<string, string> = {};
+      sp = (slug: string) => saved.push(slug);
+    }
+    const { fixture } = await render(Host);
+    const save = document.getElementById('solicited-data-save-users-lastname') as HTMLButtonElement;
+    expect(save.disabled).toBe(false);
+    await fireEvent.click(save);
+    expect(saved).toEqual(['users-lastname']);
+    fixture.componentInstance.savedParams = { 'users-lastname': '' };
+    fixture.detectChanges();
+    expect(screen.getByText('This data will not be shared')).toBeDefined();
+    expect(
+      screen
+        .getByText('This data will not be shared')
+        .classList.contains('bal-ba-glass-hint-success')
+    ).toBe(false);
+    expect(isShared('users-lastname')).toBe(false);
+    expect(shareSwitch('users-lastname').disabled).toBe(true);
+    expect(document.getElementById('solicited-data-save-users-lastname')).toBeNull();
+  });
+
+  it('coloca Deshacer a la izquierda y Guardar a la derecha', async () => {
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [params]="params"
+        [userParamValues]="{ 'users-email': 'otra@block-auth.io' }"
+      />`,
+    })
+    class Host {
+      params = serverParams;
+    }
+    await render(Host);
+    const buttons = Array.from(
+      document.querySelectorAll('.bal-ba-glass-decision-actions button')
+    ).map((button) => button.id);
+    expect(buttons).toEqual(['solicited-data-undo-users-email', 'solicited-data-save-users-email']);
+  });
+
+  it('traduce el aviso de dato no cedido', async () => {
+    setLocale('es');
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [params]="params"
+        [userParamValues]="{ 'users-lastname': '' }"
+        [savedParams]="{ 'users-lastname': '' }"
+      />`,
+    })
+    class Host {
+      params = serverParams;
+    }
+    await render(Host);
+    expect(screen.getByText('Este dato no se cederá')).toBeDefined();
+  });
+});
+
+describe('SolicitedDataModal scroll de la lista', () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  const scrollArea = () => document.querySelector('.bal-ba-glass-scroll') as HTMLElement;
+
+  @Component({
+    standalone: true,
+    imports: [SolicitedDataModalComponent],
+    template: `<ba-solicited-data-modal [params]="params" />`,
+  })
+  class Host {
+    params = serverParams;
+  }
+
+  it('no difumina los bordes si el contenido cabe', async () => {
+    await render(Host);
+    expect(scrollArea().classList.contains('bal-ba-glass-scroll-overflow')).toBe(false);
+  });
+
+  it('difumina los bordes solo cuando hay desbordamiento', async () => {
+    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockReturnValue(600);
+    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(400);
+    const { fixture } = await render(Host);
+    fixture.detectChanges();
+    expect(scrollArea().classList.contains('bal-ba-glass-scroll-overflow')).toBe(true);
+  });
+});
+
+describe('SolicitedDataModal botón de cerrar', () => {
+  afterEach(() => setLocale('en'));
+
+  it('emite closed al pulsar el botón de cerrar', async () => {
+    let closes = 0;
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [requiredParams]="['users-email']"
+        [closable]="true"
+        (closed)="onClosed()"
+      />`,
+    })
+    class Host {
+      onClosed = () => closes++;
+    }
+    await render(Host);
+    await fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(closes).toBe(1);
+  });
+
+  it('traduce el botón de cerrar', async () => {
+    setLocale('es');
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal [requiredParams]="['users-email']" [closable]="true" />`,
+    })
+    class Host {}
+    await render(Host);
+    expect(screen.getByRole('button', { name: 'Cerrar' })).toBeDefined();
+  });
+
+  it('Aceptar abajo emite accepted sin aceptar el login', async () => {
+    let accepts = 0;
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [requiredParams]="['users-email']"
+        [closable]="true"
+        [acceptable]="true"
+        (accepted)="onAccepted()"
+      />`,
+    })
+    class Host {
+      onAccepted = () => accepts++;
+    }
+    await render(Host);
+    const accept = screen.getByRole('button', { name: 'Accept' });
+    expect(accept.id).toBe('solicited-data-accept');
+    expect(accept.closest('.bal-ba-glass-scroll')).toBeNull();
+    expect(accept.parentElement?.lastElementChild).toBe(accept);
+    await fireEvent.click(accept);
+    expect(accepts).toBe(1);
+  });
+
+  it('traduce el botón Aceptar', async () => {
+    setLocale('es');
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [requiredParams]="['users-email']"
+        [acceptable]="true"
+      />`,
+    })
+    class Host {}
+    await render(Host);
+    expect(screen.getByRole('button', { name: 'Aceptar' })).toBeDefined();
+  });
+
+  it('no muestra Aceptar si no es aceptable', async () => {
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal [requiredParams]="['users-email']" />`,
+    })
+    class Host {}
+    await render(Host);
+    expect(document.getElementById('solicited-data-accept')).toBeNull();
+  });
+
+  it('no muestra el botón de cerrar si no es cerrable', async () => {
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal [requiredParams]="['users-email']" />`,
+    })
+    class Host {}
+    await render(Host);
+    expect(screen.queryByRole('button', { name: 'Close' })).toBeNull();
+  });
+});
+
+describe('SolicitedDataModal sin respuesta del servidor', () => {
+  it('muestra los campos de uiConfig sin Ceder ni Guardar', async () => {
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [requiredParams]="['users-email']"
+        [userParamValues]="{ 'users-email': 'ana@block-auth.io' }"
+      />`,
+    })
+    class Host {}
+    await render(Host);
+    expect(fieldInput('users-email').value).toBe('ana@block-auth.io');
+    expect(shareSwitch('users-email')).toBeNull();
+    expect(screen.queryByText('Save')).toBeNull();
+    expect(screen.getByLabelText('Clear field Email')).toBeDefined();
+  });
+});
+
+describe('SolicitedDataModal teléfono', () => {
+  const phoneParams = (status: 'shared' | 'consent'): TxnDataParam[] => [
+    { slug: 'users-phone', mode: 'required', status, value: '+34634343343' },
+  ];
+
+  it('el teléfono shared se edita con el selector de país', async () => {
+    await render(SolicitedDataModalComponent, {
+      componentInputs: { params: phoneParams('shared') },
+    });
+    const phone = document.getElementById('solicited-data-users-phone') as HTMLInputElement;
+    expect(phone.value).toBe('634 34 33 43');
+    expect(phone.readOnly).toBe(false);
+    expect(document.getElementById('solicited-data-users-phone-country')).not.toBeNull();
+    expect(screen.getByLabelText('Clear field Phone')).toBeDefined();
+  });
+
+  it('separa país y número y emite el valor en E.164', async () => {
+    const paramChanges: ParamChange[] = [];
+    await render(SolicitedDataModalComponent, {
+      componentInputs: { params: phoneParams('consent') },
+      on: { paramChange: (change: ParamChange) => paramChanges.push(change) },
+    });
+    const country = document.getElementById(
+      'solicited-data-users-phone-country'
+    ) as HTMLButtonElement;
+    const phone = document.getElementById('solicited-data-users-phone') as HTMLInputElement;
+    expect(country.textContent).toContain('+34');
+    expect(phone.value).toBe('634 34 33 43');
+    expect((screen.getByText('Phone').closest('label') as HTMLLabelElement).htmlFor).toBe(
+      'solicited-data-users-phone'
+    );
+    await fireEvent.input(phone, { target: { value: '634 34 33 44' } });
+    expect(paramChanges[paramChanges.length - 1]).toEqual({
+      slug: 'users-phone',
+      value: '+34634343344',
+    });
+    await fireEvent.click(screen.getByLabelText('Clear field Phone'));
+    expect(paramChanges[paramChanges.length - 1]).toEqual({ slug: 'users-phone', value: '' });
+    expect(document.activeElement).toBe(phone);
   });
 });