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 listbox(): HTMLElement {
    return fixture.nativeElement.querySelector('[role="listbox"]');
  }

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

  it('renders listbox semantics with active descendant', () => {
    const [first, second] = options();

    expect(listbox().getAttribute('aria-labelledby')).toBeTruthy();
    expect(listbox().getAttribute('aria-activedescendant')).toBe(first.id);
    expect(first.getAttribute('aria-selected')).toBe('true');
    expect(second.getAttribute('aria-selected')).toBe('false');
  });

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

    expect(listbox().getAttribute('aria-activedescendant')).toBe(second.id);
    expect(second.getAttribute('aria-selected')).toBe('true');
  });

  it('moves active option with keyboard', () => {
    listbox().dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
    fixture.detectChanges();

    expect(listbox().getAttribute('aria-activedescendant')).toBe(options()[1].id);

    listbox().dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
    fixture.detectChanges();

    expect(listbox().getAttribute('aria-activedescendant')).toBe(options()[0].id);
  });
});