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

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

@Component({
  imports: [<%= classify(name) %>],
  template: `
    <<%= selector %>
      label="Close dialog"
      variant="inverse"
      size="lg"
      [disabled]="disabled"
      (buttonClick)="clickCount = clickCount + 1"
    />
  `,
})
class HostComponent {
  disabled = false;
  clickCount = 0;
}

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 a native close button with accessible name and visual variants', () => {
    const button = host.querySelector<HTMLButtonElement>('button');
    const icon = host.querySelector<HTMLElement>('.close-button__icon');

    expect(button?.type).toBe('button');
    expect(button?.getAttribute('aria-label')).toBe('Close dialog');
    expect(button?.classList.contains('close-button--inverse')).toBe(true);
    expect(button?.classList.contains('close-button--lg')).toBe(true);
    expect(icon?.getAttribute('aria-hidden')).toBe('true');
  });

  it('emits buttonClick only when enabled', () => {
    const component = fixture.componentInstance;
    const button = host.querySelector<HTMLButtonElement>('button');

    button?.click();
    fixture.detectChanges();
    expect(component.clickCount).toBe(1);

    component.disabled = true;
    fixture.detectChanges();

    button?.click();
    fixture.detectChanges();
    expect(component.clickCount).toBe(1);
    expect(button?.disabled).toBe(true);
  });
});