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

@Component({
  imports: [<%= classify(name) %>],
  template: `<<%= selector %> title="Gerenciar limites do Pix" (limitSubmit)="submitted = $event" />`,
})
class HostComponent {
  submitted: readonly <%= classify(name) %>Request[] | null = null;
}

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

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

  it('renders current limits with meter and numeric controls', () => {
    expect(fixture.nativeElement.querySelector('h2').textContent).toContain('Gerenciar limites do Pix');
    expect(fixture.nativeElement.querySelectorAll('meter').length).toBeGreaterThan(0);
    expect(fixture.nativeElement.querySelector('input[type="number"]').getAttribute('aria-describedby')).toBeTruthy();
  });

  it('emits requested limit changes', () => {
    const input: HTMLInputElement = fixture.nativeElement.querySelector('input[type="number"]');
    input.value = '2500';
    input.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?.[0].requested).toBe(2500);
    expect(fixture.nativeElement.querySelector('[role="status"]').textContent).toContain('pronta para aprovação');
  });
});