88 lines
3.1 KiB
TypeScript
88 lines
3.1 KiB
TypeScript
import { TestBed } from '@angular/core/testing';
|
|
import { HeroBannerComponent } from './hero-banner.component';
|
|
|
|
describe('HeroBannerComponent', () => {
|
|
it('renders desktop and mobile crop variants', async () => {
|
|
await TestBed.configureTestingModule({ imports: [HeroBannerComponent] }).compileComponents();
|
|
|
|
const fixture = TestBed.createComponent(HeroBannerComponent);
|
|
fixture.componentRef.setInput('heroConfig', {
|
|
background_image_id: {
|
|
desktop: 'https://example.com/desktop.jpg',
|
|
mobile: 'https://example.com/mobile.jpg',
|
|
},
|
|
});
|
|
fixture.detectChanges();
|
|
|
|
const element = fixture.nativeElement as HTMLElement;
|
|
|
|
expect(element.querySelector('source')?.getAttribute('srcset')).toBe(
|
|
'https://example.com/mobile.jpg',
|
|
);
|
|
expect(element.querySelector('img')?.getAttribute('src')).toBe(
|
|
'https://example.com/desktop.jpg',
|
|
);
|
|
expect(element.querySelector('.hero-banner')?.classList).toContain(
|
|
'hero-banner--with-media',
|
|
);
|
|
});
|
|
|
|
it('keeps the fallback banner sizing when there is no image', async () => {
|
|
await TestBed.configureTestingModule({ imports: [HeroBannerComponent] }).compileComponents();
|
|
|
|
const fixture = TestBed.createComponent(HeroBannerComponent);
|
|
fixture.componentRef.setInput('heroConfig', { title_html: 'Banner sin imagen' });
|
|
fixture.detectChanges();
|
|
|
|
const banner = (fixture.nativeElement as HTMLElement).querySelector('.hero-banner');
|
|
|
|
expect(banner?.classList).not.toContain('hero-banner--with-media');
|
|
});
|
|
|
|
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();
|
|
});
|
|
});
|