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

@Component({
  imports: [<%= classify(name) %>],
  template: `<<%= selector %> title="Simulador de crédito" (simulationSubmit)="submitted = $event" />`,
})
class HostComponent {
  submitted: <%= classify(name) %>Result | null = null;
}

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

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

  function input(name: string): HTMLInputElement {
    return fixture.nativeElement.querySelector(`input[name="${name}"]`);
  }

  it('renders numeric loan controls and an accessible output summary', () => {
    expect(fixture.nativeElement.querySelector('legend').textContent).toContain('Simulador de crédito');
    expect(input('principal').type).toBe('number');
    expect(input('months').type).toBe('number');
    expect(fixture.nativeElement.querySelector('output[role="status"]').textContent).toContain('Parcela estimada');
  });

  it('updates the simulation and emits the result', () => {
    input('principal').value = '20000';
    input('principal').dispatchEvent(new Event('input', { bubbles: true }));
    input('months').value = '24';
    input('months').dispatchEvent(new Event('input', { bubbles: true }));
    fixture.detectChanges();

    fixture.nativeElement.querySelector('form').dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
    fixture.detectChanges();

    expect(fixture.componentInstance.submitted?.principal).toBe(20000);
    expect(fixture.componentInstance.submitted?.months).toBe(24);
    expect(fixture.nativeElement.querySelectorAll('[role="status"]')[1].textContent).toContain('pronta para revisão');
  });
});