import { ComponentFixture, TestBed } from '@angular/core/testing';
import { <%= classify(name) %> } 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();
  });

  function radios(): HTMLElement[] {
    return Array.from(fixture.nativeElement.querySelectorAll('[role="radio"]'));
  }

  it('renders a labelled radiogroup with one selected item', () => {
    const group = fixture.nativeElement.querySelector('[role="radiogroup"]');
    const [monthly, yearly] = radios();

    expect(group.getAttribute('aria-labelledby')).toBeTruthy();
    expect(monthly.textContent?.trim()).toBe('Mensal');
    expect(monthly.getAttribute('aria-checked')).toBe('true');
    expect(monthly.tabIndex).toBe(0);
    expect(yearly.getAttribute('aria-checked')).toBe('false');
    expect(yearly.tabIndex).toBe(-1);
  });

  it('selects an option on click', () => {
    const [, yearly] = radios();
    yearly.click();
    fixture.detectChanges();

    expect(yearly.getAttribute('aria-checked')).toBe('true');
    expect(yearly.tabIndex).toBe(0);
  });

  it('moves focus and selection with arrow keys', () => {
    const [monthly, yearly] = radios();
    monthly.focus();
    monthly.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
    fixture.detectChanges();

    expect(document.activeElement).toBe(yearly);
    expect(yearly.getAttribute('aria-checked')).toBe('true');
  });
});