@block-auth.io/angular 0.2.10 → 0.3.0

package/src/lib/components/txns/internals/txn.component.test.ts

@@ -165,9 +165,38 @@ describe('Txn', () => {
     expect(client.txns.accept).toHaveBeenCalledWith({
       lifetime: 3600,
       userParams: { 'users-email': 'a@b.com' },
+      grantedParams: [],
+      revokedParams: [],
     });
   });
 
+  it('ACCEPT envía grantedParams/revokedParams y limpia el error previo de aceptación', async () => {
+    const client = makeClient();
+    client.state.$ui.setKey('acceptTxnError', 'Required data not authorized');
+    @Component({
+      standalone: true,
+      imports: [TxnComponent],
+      template: `<ba-txn
+        [selectedTxnPreParams]="{ appKey: 'k', to: '0xabc' }"
+        [grantedParams]="['users-email']"
+        [revokedParams]="['users-lastname']"
+      />`,
+    })
+    class Host {}
+    await render(Host, { providers: [provideBlockAuthClientForTest(client)] });
+    await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+    await fireEvent.click(screen.getByText('ACCEPT'));
+
+    expect(client.txns.accept).toHaveBeenCalledWith({
+      lifetime: 3600,
+      userParams: {},
+      grantedParams: ['users-email'],
+      revokedParams: ['users-lastname'],
+    });
+    expect(client.state.$ui.get().acceptTxnError).toBeNull();
+    expect(client.state.$ui.get().isAcceptingTxn).toBe(true);
+  });
+
   it('emite permissionsRequiredClicked/solicitedDataClicked (solo si hasSolicitedData)', async () => {
     const onPerm = vi.fn();
     const onSol = vi.fn();
@@ -232,4 +261,320 @@ describe('Txn', () => {
     ) as HTMLInputElement;
     expect(timeInput.value).toBe('02:00:00');
   });
+
+  const lifetimeSlider = () =>
+    document.getElementById('txn-lifetime-slider-slider') as HTMLInputElement;
+
+  it('"Quiero configurar el tiempo de mi sesión" abre el selector en un popup', async () => {
+    await render(TxnComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(lifetimeSlider()).toBeNull();
+    await fireEvent.click(
+      screen.getByRole('button', {
+        name: 'I want to configure my session time',
+      }),
+    );
+    const dialog = screen.getByRole('dialog', {
+      name: 'I want to configure my session time',
+    });
+    expect(dialog.classList.contains('bal-ba-glass-panel')).toBe(true);
+    expect(dialog.contains(lifetimeSlider())).toBe(true);
+    expect(lifetimeSlider().value).toBe('3600');
+    expect(
+      document.getElementById('btn-configure-session-time'),
+    ).not.toBeNull();
+  });
+
+  it('Aceptar cierra el popup y conserva el tiempo elegido junto al enlace', async () => {
+    await render(TxnComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    expect(document.getElementById('txn-lifetime-value')).toBeNull();
+    await fireEvent.click(
+      document.getElementById('btn-configure-session-time')!,
+    );
+    await fireEvent.input(lifetimeSlider(), { target: { value: '7200' } });
+    await fireEvent.click(document.getElementById('txn-lifetime-accept')!);
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(document.getElementById('txn-lifetime-value')?.textContent).toBe(
+      '02:00:00',
+    );
+    expect(
+      document
+        .querySelector('#btn-configure-session-time p')
+        ?.contains(document.getElementById('txn-lifetime-value')),
+    ).toBe(true);
+    await fireEvent.click(
+      document.getElementById('btn-configure-session-time')!,
+    );
+    expect(lifetimeSlider().value).toBe('7200');
+  });
+
+  it('cerrar con la x o fuera del popup conserva el tiempo elegido', async () => {
+    const { container } = await render(TxnComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    await fireEvent.click(
+      document.getElementById('btn-configure-session-time')!,
+    );
+    await fireEvent.input(lifetimeSlider(), { target: { value: '120' } });
+    await fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(document.getElementById('txn-lifetime-value')?.textContent).toBe(
+      '00:02:00',
+    );
+    await fireEvent.click(
+      document.getElementById('btn-configure-session-time')!,
+    );
+    await fireEvent.input(lifetimeSlider(), { target: { value: '60' } });
+    await fireEvent.click(container.querySelector('.bal-ba-glass-backdrop')!);
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(document.getElementById('txn-lifetime-value')?.textContent).toBe(
+      '00:01:00',
+    );
+  });
+
+  it('traduce el popup del tiempo de sesión', async () => {
+    setLocale('es');
+    await render(TxnComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    await fireEvent.click(
+      document.getElementById('btn-configure-session-time')!,
+    );
+    expect(
+      screen.getByRole('dialog', {
+        name: 'Quiero configurar el tiempo de mi sesión',
+      }),
+    ).toBeDefined();
+    expect(screen.getByRole('button', { name: 'Cerrar' })).toBeDefined();
+    expect(
+      document.getElementById('txn-lifetime-accept')?.textContent?.trim(),
+    ).toBe('ACEPTAR');
+  });
+
+  it('ACCEPT envía el lifetime elegido en el popup del tiempo de sesión', async () => {
+    const client = makeClient();
+    await render(TxnComponent, {
+      inputs: { selectedTxnPreParams: { appKey: 'app', to: '0xabc' } },
+      providers: [provideBlockAuthClientForTest(client)],
+    });
+    await fireEvent.click(
+      document.getElementById('btn-configure-session-time')!,
+    );
+    await fireEvent.input(lifetimeSlider(), { target: { value: '5400' } });
+    await fireEvent.click(document.getElementById('txn-lifetime-accept')!);
+    await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+    await fireEvent.click(document.getElementById('btn-txn-accept')!);
+    expect(client.txns.accept).toHaveBeenCalledWith(
+      expect.objectContaining({ lifetime: 5400 }),
+    );
+  });
+
+  const visibleArrows = (container: Element) =>
+    Array.from(container.querySelectorAll('[aria-hidden="true"]')).filter(
+      (el) =>
+        el.querySelector('.bal-ba-arrow') &&
+        !el.className.includes('bas-invisible'),
+    );
+
+  it('"Datos solicitados" queda desactivado cuando no hay datos', async () => {
+    const onSol = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [TxnComponent],
+      template: `<ba-txn (solicitedDataClicked)="s()" />`,
+    })
+    class Host {
+      s = onSol;
+    }
+    await render(Host, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    const btn = screen
+      .getByText('Solicited data')
+      .closest('button') as HTMLButtonElement;
+    expect(btn.disabled).toBe(true);
+    await fireEvent.click(btn);
+    expect(onSol).not.toHaveBeenCalled();
+  });
+
+  it('"Permisos requeridos" y "Datos solicitados" comparten el estilo glass de ancho completo y una línea', async () => {
+    const { container } = await render(TxnComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    const permissionsBtn = container.querySelector(
+      '#btn-txn-permissions-required',
+    ) as HTMLButtonElement;
+    const solicitedDataBtn = container.querySelector(
+      '#btn-txn-solicited-data',
+    ) as HTMLButtonElement;
+    for (const btn of [permissionsBtn, solicitedDataBtn]) {
+      expect(btn.classList.contains('bal-ba-glass-btn')).toBe(true);
+      expect(
+        btn.querySelector('.bal-ba-glass-btn-label')?.textContent?.trim(),
+      ).toBeTruthy();
+      expect(btn.querySelector('.bal-ba-arrow')).toBeNull();
+    }
+    expect(solicitedDataBtn.disabled).toBe(true);
+  });
+
+  it('las flechas de "Datos solicitados" van superpuestas a los lados, fuera del botón', async () => {
+    const { container } = await render(TxnComponent, {
+      inputs: { hasSolicitedData: true },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    const row = container.querySelector('#btn-txn-solicited-data')
+      ?.parentElement as HTMLElement;
+    expect(
+      row.querySelector('.bal-ba-glass-btn-arrow-left .bal-ba-arrow-right'),
+    ).toBeTruthy();
+    expect(
+      row.querySelector('.bal-ba-glass-btn-arrow-right .bal-ba-arrow-left'),
+    ).toBeTruthy();
+    expect(container.querySelectorAll('.bal-ba-arrow')).toHaveLength(2);
+  });
+
+  it('muestra siempre las flechas de "Datos solicitados" mientras falten datos', async () => {
+    const { container } = await render(TxnComponent, {
+      inputs: { hasSolicitedData: true, allRequiredFilled: false },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    expect(visibleArrows(container)).toHaveLength(2);
+    expect(
+      screen.getByText('Solicited data').closest('button')?.className,
+    ).toContain('bal-ba-glass-btn-pending');
+  });
+
+  it('oculta las flechas cuando no hay nada pendiente', async () => {
+    const { container } = await render(TxnComponent, {
+      inputs: { hasSolicitedData: true },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    expect(visibleArrows(container)).toHaveLength(0);
+    expect(
+      screen.getByText('Solicited data').closest('button')?.className,
+    ).not.toContain('bal-ba-glass-btn-pending');
+  });
+
+  it('solicitedDataPending manda sobre el cálculo por defecto', async () => {
+    const { container } = await render(TxnComponent, {
+      inputs: {
+        hasSolicitedData: true,
+        allRequiredFilled: false,
+        solicitedDataPending: false,
+      },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    expect(visibleArrows(container)).toHaveLength(0);
+  });
+
+  it('aplica el estilo glass a la casilla de política y a RECHAZAR/ACEPTAR', async () => {
+    const { container } = await render(TxnComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    const consent = screen.getByTestId('txn-pptc-toggle');
+    expect(consent.className).toContain('bal-ba-glass-consent');
+    expect(consent.className).not.toContain('bal-ba-glass-consent-checked');
+    await fireEvent.click(consent);
+    expect(consent.className).toContain('bal-ba-glass-consent-checked');
+    expect(container.querySelector('#btn-txn-reject')?.className).toContain(
+      'bal-ba-glass-action-reject',
+    );
+    expect(container.querySelector('#btn-txn-accept')?.className).toContain(
+      'bal-ba-glass-action-accept',
+    );
+    await fireEvent.click(
+      screen.getByText('I want to configure my session time'),
+    );
+    expect(container.querySelector('.bal-ba-glass-time')).not.toBeNull();
+    expect(container.querySelector('.bal-ba-glass-slider')).not.toBeNull();
+  });
+
+  it('al pasar por ACEPTAR deshabilitado sin política aceptada vibra la casilla', async () => {
+    const { container } = await render(TxnComponent, {
+      inputs: { hasSolicitedData: true, allRequiredFilled: false },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    await fireEvent.mouseEnter(screen.getByTestId('txn-accept-wrapper'));
+    expect(screen.getByTestId('txn-pptc-toggle').className).toContain(
+      'bal-ba-head-shake',
+    );
+    expect(
+      screen.getByText('Solicited data').closest('button')?.className,
+    ).not.toContain('bal-ba-head-shake');
+    expect(visibleArrows(container)).toHaveLength(2);
+  });
+
+  it('al pasar por ACEPTAR deshabilitado con datos pendientes vibra "Datos solicitados" y mantiene sus flechas', async () => {
+    const { container } = await render(TxnComponent, {
+      inputs: { hasSolicitedData: true, allRequiredFilled: false },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+    const wrapper = screen.getByTestId('txn-accept-wrapper');
+    await fireEvent.mouseEnter(wrapper);
+    const solicitedDataBtn = screen
+      .getByText('Solicited data')
+      .closest('button');
+    expect(solicitedDataBtn?.className).toContain('bal-ba-head-shake');
+    expect(
+      screen.getByText('Permissions required').closest('button')?.className,
+    ).not.toContain('bal-ba-head-shake');
+    expect(screen.getByTestId('txn-pptc-toggle').className).not.toContain(
+      'bal-ba-head-shake',
+    );
+    expect(visibleArrows(container)).toHaveLength(2);
+    await fireEvent.mouseLeave(wrapper);
+    expect(solicitedDataBtn?.className).not.toContain('bal-ba-head-shake');
+    expect(visibleArrows(container)).toHaveLength(2);
+  });
+
+  it('el foco en el contenedor de ACEPTAR deshabilitado también muestra la pista', async () => {
+    await render(TxnComponent, {
+      inputs: { hasSolicitedData: true, allRequiredFilled: false },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    const wrapper = screen.getByTestId('txn-accept-wrapper');
+    await fireEvent.focusIn(wrapper);
+    expect(screen.getByTestId('txn-pptc-toggle').className).toContain(
+      'bal-ba-head-shake',
+    );
+    await fireEvent.focusOut(wrapper);
+    expect(screen.getByTestId('txn-pptc-toggle').className).not.toContain(
+      'bal-ba-head-shake',
+    );
+  });
+
+  it('no muestra pistas al pasar por ACEPTAR habilitado', async () => {
+    const { container } = await render(TxnComponent, {
+      inputs: { hasSolicitedData: true },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+    await fireEvent.mouseEnter(screen.getByTestId('txn-accept-wrapper'));
+    expect(container.querySelector('.bal-ba-head-shake')).toBeNull();
+    expect(visibleArrows(container)).toHaveLength(0);
+  });
+
+  it('"Permisos requeridos" es un botón accesible que emite su evento', async () => {
+    const onPerm = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [TxnComponent],
+      template: `<ba-txn (permissionsRequiredClicked)="p()" />`,
+    })
+    class Host {
+      p = onPerm;
+    }
+    await render(Host, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    await fireEvent.click(
+      screen.getByRole('button', { name: 'Permissions required' }),
+    );
+    expect(onPerm).toHaveBeenCalledOnce();
+  });
 });