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

@Component({
  imports: [<%= classify(name) %>],
  template: `
    <<%= selector %>
      label="PIN da transação"
      error="Informe seu PIN."
      [(value)]="pin"
    />
  `,
})
class HostComponent {
  pin = '';
}

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

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

  function input(): HTMLInputElement {
    return fixture.nativeElement.querySelector('input');
  }

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

  it('wires label, secure input attributes, hint/error, and visibility toggle', () => {
    const label = fixture.nativeElement.querySelector('label');
    const error = fixture.nativeElement.querySelector('.secure-code-field__error');

    expect(label.textContent).toContain('PIN da transação');
    expect(label.getAttribute('for')).toBe(input().id);
    expect(input().type).toBe('password');
    expect(input().inputMode).toBe('numeric');
    expect(input().autocomplete).toBe('current-password');
    expect(input().getAttribute('maxlength')).toBe('4');
    expect(input().getAttribute('aria-invalid')).toBe('true');
    expect(error.getAttribute('role')).toBe('alert');
    expect(toggle().getAttribute('aria-controls')).toBe(input().id);
    expect(toggle().getAttribute('aria-pressed')).toBe('false');
  });

  it('updates value and toggles between hidden and visible code', () => {
    input().value = '12a34';
    input().dispatchEvent(new Event('input', { bubbles: true }));
    fixture.detectChanges();

    expect(fixture.componentInstance.pin).toBe('1234');

    toggle().click();
    fixture.detectChanges();

    expect(input().type).toBe('text');
    expect(toggle().getAttribute('aria-pressed')).toBe('true');
  });
});