Files
shopit-front/src/app/shared/components/event-date-notice-modal/event-date-notice-modal.component.spec.ts

59 lines
2.1 KiB
TypeScript

import '@angular/compiler';
import { TestBed, getTestBed } from '@angular/core/testing';
import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
import { EventDateNotice } from '../../../core/services/event-date-notice.service';
import { MODAL_DATA, ModalRef } from '../../../core/services/modal.service';
import { EventDateNoticeModalComponent } from './event-date-notice-modal.component';
describe('EventDateNoticeModalComponent', () => {
beforeAll(() => {
try {
getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
} catch {
// Test environment may already be initialized by another setup entrypoint.
}
});
afterEach(() => {
TestBed.resetTestingModule();
});
it('renders the precalculated message and emphasizes its marked parts', async () => {
const close = vi.fn();
const data: EventDateNotice = {
type: 'rescheduled',
change_ids: [1, 2],
title: 'FECHAS REPROGRAMADAS!',
message: [
{ text: 'Las fechas del ', bold: false },
{ text: '09 y 10 de Octubre de 2026', bold: true },
{ text: ' han sido reprogramadas, ', bold: false },
{ text: 'respectivamente', bold: true },
{ text: '.', bold: false },
],
};
await TestBed.configureTestingModule({
imports: [EventDateNoticeModalComponent],
providers: [
{ provide: MODAL_DATA, useValue: data },
{ provide: ModalRef, useValue: { close } },
],
}).compileComponents();
const fixture = TestBed.createComponent(EventDateNoticeModalComponent);
fixture.detectChanges();
const element = fixture.nativeElement as HTMLElement;
expect(element.querySelector('h2')?.textContent).toContain(data.title);
expect(
[...element.querySelectorAll('b')].map((strong) => strong.textContent?.trim()),
).toEqual(['09 y 10 de Octubre de 2026', 'respectivamente']);
element.querySelector('button')?.click();
expect(close).toHaveBeenCalledOnce();
});
});