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('wires the trigger to a hidden tooltip description', () => {
    const button = host.querySelector<HTMLButtonElement>('button');
    const tooltip = host.querySelector<HTMLElement>('[role="tooltip"]');

    expect(button?.getAttribute('aria-describedby')).toBe(tooltip?.id);
    expect(tooltip?.hidden).toBe(true);
    expect(tooltip?.textContent?.trim()).toBe('Texto da dica');
  });

  it('shows on hover/focus and hides on leave/blur/Escape', () => {
    const buttonDebug = fixture.debugElement.query(By.css('button'));
    const tooltip = host.querySelector<HTMLElement>('[role="tooltip"]');

    buttonDebug.triggerEventHandler('mouseenter');
    fixture.detectChanges();
    expect(tooltip?.hidden).toBe(false);

    buttonDebug.triggerEventHandler('mouseleave');
    fixture.detectChanges();
    expect(tooltip?.hidden).toBe(true);

    buttonDebug.triggerEventHandler('focus');
    fixture.detectChanges();
    expect(tooltip?.hidden).toBe(false);

    buttonDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'Escape' }));
    fixture.detectChanges();
    expect(tooltip?.hidden).toBe(true);
  });
});