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="Conta corrente principal"
      accountName="Conta corrente pessoal"
      accountNumber="**** 4098"
      currencyCode="BRL"
      [balance]="8240.45"
      [availableBalance]="7990.45"
    />
  `,
})
class HostComponent {}

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

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

  function article(): HTMLElement {
    return fixture.nativeElement.querySelector('article');
  }

  function toggleButton(): HTMLButtonElement {
    return fixture.nativeElement.querySelector('button');
  }

  it('renders account identity and labels the article from its heading', () => {
    const heading = fixture.nativeElement.querySelector('h2');

    expect(heading.textContent).toContain('Conta corrente principal');
    expect(article().getAttribute('aria-labelledby')).toBe(heading.id);
    expect(fixture.nativeElement.textContent).toContain('Conta corrente pessoal');
    expect(fixture.nativeElement.textContent).toContain('**** 4098');
  });

  it('renders balances and lets the user hide them', () => {
    expect(fixture.nativeElement.textContent).toContain('R$8,240.45');
    expect(toggleButton().getAttribute('aria-pressed')).toBe('false');

    toggleButton().click();
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toContain('Oculto');
    expect(fixture.nativeElement.textContent).not.toContain('R$8,240.45');
    expect(toggleButton().getAttribute('aria-pressed')).toBe('true');
    expect(toggleButton().getAttribute('aria-controls')).toBeTruthy();
  });
});