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

@Component({
  imports: [<%= classify(name) %>],
  template: `<<%= selector %> [readonly]="false" />`,
})
class Host {}

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

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

  it('uses radiogroup semantics when interactive', () => {
    const group = fixture.nativeElement.querySelector('[role="radiogroup"]');
    const options = fixture.nativeElement.querySelectorAll('[role="radio"]');

    expect(group?.getAttribute('aria-labelledby')).toBeTruthy();
    expect(options.length).toBe(5);
    expect(options[3].getAttribute('aria-checked')).toBe('true');
  });

  it('updates checked rating on click', () => {
    const options = fixture.debugElement.queryAll(By.css('[role="radio"]'));

    options[1].triggerEventHandler('click');
    fixture.detectChanges();

    expect(fixture.nativeElement.querySelectorAll('[role="radio"]')[1].getAttribute('aria-checked')).toBe('true');
  });
});