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

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

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

  it('renders masked card details and switch controls', () => {
    expect(fixture.nativeElement.querySelector('h2').textContent).toContain('Controles do cartão');
    expect(fixture.nativeElement.textContent).toContain('4921');
    expect(fixture.nativeElement.querySelectorAll('[role="switch"]').length).toBeGreaterThan(0);
  });

  it('emits control changes with live status text', () => {
    let change: <%= classify(name) %>Change | null = null;
    fixture.componentInstance.controlChange.subscribe((event) => {
      change = event;
    });

    const international: HTMLInputElement = fixture.nativeElement.querySelectorAll('[role="switch"]')[1];
    international.click();
    fixture.detectChanges();

    expect(change).toEqual({ id: 'international', enabled: true });
    expect(fixture.nativeElement.querySelector('[aria-live="polite"]').textContent).toContain('ativado');
  });
});