import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { <%= classify(name) %> } from './<%= dasherize(name) %>';

@Component({
  imports: [<%= classify(name) %>],
  template: `
    <<%= selector %>
      title="Atividade da conta"
      currencyCode="BRL"
      [transactions]="transactions"
    />
  `,
})
class HostComponent {
  transactions = [
    {
      id: 'txn-1',
      date: '2026-07-24',
      description: 'Transferência TED',
      merchant: 'Acme Corp',
      amount: -1250.9,
      status: 'Compensado',
      category: 'Transferência',
    },
  ];
}

@Component({
  imports: [<%= classify(name) %>],
  template: `
    <<%= selector %>
      title="Atividade da conta"
      [transactions]="[]"
    />
  `,
})
class EmptyHostComponent {}

describe('<%= classify(name) %>', () => {
  let fixture: ComponentFixture<HostComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({ imports: [HostComponent, EmptyHostComponent] }).compileComponents();
    fixture = TestBed.createComponent(HostComponent);
    fixture.detectChanges();
  });

  it('renders a native table with caption, scoped headers, date, status, and amount semantics', () => {
    const table = fixture.nativeElement.querySelector('table');
    const caption = fixture.nativeElement.querySelector('caption');
    const rowHeader = fixture.nativeElement.querySelector('tbody th[scope="row"]');
    const time = fixture.nativeElement.querySelector('time');
    const amount = fixture.nativeElement.querySelector('data');

    expect(table).toBeTruthy();
    expect(caption.textContent).toContain('Atividade da conta');
    expect(rowHeader.textContent).toContain('Transferência TED');
    expect(rowHeader.textContent).toContain('Acme Corp');
    expect(time.getAttribute('datetime')).toBe('2026-07-24');
    expect(fixture.nativeElement.textContent).toContain('Compensado');
    expect(amount.getAttribute('value')).toBe('-1250.9');
    expect(amount.getAttribute('aria-label')).toContain('Débito');
  });

  it('renders an empty state inside the table body', () => {
    const emptyFixture = TestBed.createComponent(EmptyHostComponent);
    emptyFixture.detectChanges();

    expect(emptyFixture.nativeElement.querySelector('tbody tr').textContent).toContain('Nenhuma transação encontrada.');
  });
});