import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { <%= classify(name) %>, <%= classify(name) %>Content } from './<%= dasherize(name) %>';

@Component({
  imports: [<%= classify(name) %>, <%= classify(name) %>Content],
  template: `
    <<%= selector %> label="Show profile details" [(expanded)]="expanded" [preserveContent]="preserveContent">
      <ng-template <%= camelize(name) %>Content>
        <p>Profile details</p>
      </ng-template>
    </<%= selector %>>
  `,
})
class HostComponent {
  expanded = false;
  preserveContent = true;
}

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [HostComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(HostComponent);
    fixture.detectChanges();
  });

  function button(): HTMLButtonElement {
    return fixture.nativeElement.querySelector('button');
  }

  function panel(): HTMLElement {
    return fixture.nativeElement.querySelector('div');
  }

  it('renders button and panel with ARIA relationships', () => {
    expect(button().textContent?.trim()).toBe('Show profile details');
    expect(button().getAttribute('aria-expanded')).toBe('false');
    expect(button().getAttribute('aria-controls')).toBe(panel().id);
    expect(panel().getAttribute('aria-labelledby')).toBe(button().id);
    expect(panel().hidden).toBe(true);
  });

  it('toggles expanded state from the trigger button', () => {
    button().click();
    fixture.detectChanges();

    expect(fixture.componentInstance.expanded).toBe(true);
    expect(button().getAttribute('aria-expanded')).toBe('true');
    expect(panel().hidden).toBe(false);
    expect(panel().textContent).toContain('Profile details');
  });

  it('preserves content after first render when preserveContent is enabled', () => {
    button().click();
    fixture.detectChanges();
    button().click();
    fixture.detectChanges();

    expect(panel().hidden).toBe(true);
    expect(panel().textContent).toContain('Profile details');
  });
});