import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { <%= classify(name) %>, <%= classify(name) %>Item } from './<%= dasherize(name) %>';

@Component({
  imports: [<%= classify(name) %>, <%= classify(name) %>Item],
  template: `
    <div <%= camelize(name) %> label="Text formatting">
      <button type="button" <%= camelize(name) %>Item value="bold">Bold</button>
      <button type="button" <%= camelize(name) %>Item value="italic">Italic</button>
      <button type="button" <%= camelize(name) %>Item value="underline">Underline</button>
    </div>
  `,
})
class HostComponent {}

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

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

  function buttons(): HTMLButtonElement[] {
    return Array.from(host.querySelectorAll('button'));
  }

  it('decorates consumer-owned markup with a labelled toolbar and roving tabindex', () => {
    const toolbar = host.querySelector('[role="toolbar"]');
    const [bold, italic] = buttons();

    expect(toolbar?.getAttribute('aria-label')).toBe('Text formatting');
    expect(bold.tabIndex).toBe(0);
    expect(italic.tabIndex).toBe(-1);
    expect(bold.getAttribute('aria-pressed')).toBe('false');
  });

  it('toggles button pressed state on click', () => {
    const [bold] = buttons();
    bold.click();
    fixture.detectChanges();

    expect(bold.getAttribute('aria-pressed')).toBe('true');
  });

  it('moves focus with ArrowRight and updates roving tabindex', () => {
    const [bold, italic] = buttons();
    bold.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
    fixture.detectChanges();

    expect(document.activeElement).toBe(italic);
    expect(italic.tabIndex).toBe(0);
    expect(bold.tabIndex).toBe(-1);
  });
});