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

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 semantic navigation without app menu roles', () => {
    const nav = host.querySelector<HTMLElement>('nav');
    const links = Array.from(host.querySelectorAll<HTMLAnchorElement>('a'));

    expect(nav?.getAttribute('aria-label')).toBe('Principal');
    expect(host.querySelector('[role="menu"]')).toBeNull();
    expect(host.querySelector('[role="menuitem"]')).toBeNull();
    expect(links.map((link) => link.textContent?.trim())).toEqual(['Início', 'Primeiro produto', 'Segundo produto']);
  });

  it('toggles submenu visibility and ARIA state', () => {
    const button = host.querySelector<HTMLButtonElement>('button');
    const submenu = host.querySelector<HTMLUListElement>('ul ul');

    expect(button?.getAttribute('aria-expanded')).toBe('false');
    expect(button?.getAttribute('aria-controls')).toBe(submenu?.id);
    expect(submenu?.getAttribute('aria-labelledby')).toBe(button?.id);
    expect(submenu?.hidden).toBe(true);

    button?.click();
    fixture.detectChanges();

    expect(button?.getAttribute('aria-expanded')).toBe('true');
    expect(submenu?.hidden).toBe(false);
  });
});