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 %> />`,
})
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;
  });

  it('renders slider semantics with label and value bounds', () => {
    const slider = host.querySelector<HTMLElement>('[role="slider"]');

    expect(slider).toBeTruthy();
    expect(slider?.getAttribute('aria-labelledby')).toBeTruthy();
    expect(slider?.getAttribute('aria-valuemin')).toBe('0');
    expect(slider?.getAttribute('aria-valuemax')).toBe('100');
    expect(slider?.getAttribute('aria-valuenow')).toBe('50');
  });

  it('updates value with keyboard commands and clamps to bounds', () => {
    const sliderDebug = fixture.debugElement.query(By.css('[role="slider"]'));
    const slider = sliderDebug.nativeElement as HTMLElement;

    sliderDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'ArrowRight' }));
    fixture.detectChanges();
    expect(slider.getAttribute('aria-valuenow')).toBe('51');

    sliderDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'PageDown' }));
    fixture.detectChanges();
    expect(slider.getAttribute('aria-valuenow')).toBe('41');

    sliderDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'Home' }));
    fixture.detectChanges();
    expect(slider.getAttribute('aria-valuenow')).toBe('0');

    sliderDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
    fixture.detectChanges();
    expect(slider.getAttribute('aria-valuenow')).toBe('0');

    sliderDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'End' }));
    fixture.detectChanges();
    expect(slider.getAttribute('aria-valuenow')).toBe('100');
  });
});