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

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

@Component({
  imports: [<%= classify(name) %>, <%= classify(name) %>Item],
  template: `
    <nav <%= camelize(name) %>>
      <ol>
        @for (item of trail; track item.href) {
          <li>
            <a <%= camelize(name) %>Item [href]="item.href" [current]="item.current">{{ item.label }}</a>
          </li>
        }
      </ol>
    </nav>
  `,
})
class HostComponent {
  readonly trail = [
    { label: 'Home', href: '/', current: false },
    { label: 'Category', href: '/category', current: false },
    { label: 'Current item', href: '/category/current-item', current: true },
  ];
}

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('decorates consumer-owned markup with breadcrumb navigation semantics', () => {
    const nav = host.querySelector<HTMLElement>('nav');
    const links = Array.from(host.querySelectorAll<HTMLAnchorElement>('a'));

    expect(nav?.getAttribute('aria-label')).toBe('Breadcrumb');
    expect(links.length).toBe(3);
    expect(links[0].getAttribute('aria-current')).toBeNull();
    expect(links[2].getAttribute('aria-current')).toBe('page');
  });
});