import { TestBed } from '@angular/core/testing';
import { HeroBannerComponent } from './hero-banner.component';

describe('HeroBannerComponent', () => {
  it('expands and collapses the event schedules', async () => {
    await TestBed.configureTestingModule({ imports: [HeroBannerComponent] }).compileComponents();

    const fixture = TestBed.createComponent(HeroBannerComponent);
    fixture.componentRef.setInput('eventConfig', {
      title: 'Fiesta Nacional del Fútbol Infantil',
      location: 'Sunchales, Santa Fe',
      dates: [
        {
          id: 1,
          date: '2026-10-09',
          start_time: '10:00:00',
          end_time: '20:30:00',
        },
        {
          id: 2,
          date: '2026-10-10',
          start_time: '10:00:00',
          end_time: '22:00:00',
        },
      ],
    });
    fixture.detectChanges();

    const element = fixture.nativeElement as HTMLElement;
    const toggle = element.querySelector<HTMLButtonElement>('.event-schedule-toggle');

    expect(toggle?.textContent).toContain('Ver horarios');
    expect(toggle?.getAttribute('aria-expanded')).toBe('false');
    expect(element.querySelector('.event-schedules')).toBeNull();

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

    expect(toggle?.textContent).toContain('Ocultar horarios');
    expect(toggle?.getAttribute('aria-expanded')).toBe('true');
    expect(element.querySelectorAll('.event-schedules tbody tr')).toHaveLength(2);
    expect(element.querySelector('.event-schedules')?.textContent).toContain('9 de Octubre 2026');
    expect(element.querySelector('.event-schedules')?.textContent).toContain('10:00 - 20:30');

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

    expect(element.querySelector('.event-schedules')).toBeNull();
  });
});