feat(storefront): show event date notices

src/app/app.spec.ts

@@ -1,14 +1,12 @@
 import '@angular/compiler';
 import { signal } from '@angular/core';
 import { TestBed, getTestBed } from '@angular/core/testing';
-import {
-  BrowserTestingModule,
-  platformBrowserTesting
-} from '@angular/platform-browser/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 import { provideRouter } from '@angular/router';
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 
 import { App } from './app';
+import { EventDateNoticeService } from './core/services/event-date-notice.service';
 import { Tenant } from './core/services/tenant.interface';
 import { TenantService } from './core/services/tenant.service';
 
@@ -27,7 +25,7 @@ const tenant: Tenant = {
   footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
   footer_logo: 'https://example.com/footer.png',
-  categories: []
+  categories: [],
 };
 
 function createTenantServiceStub(status: 'ready' | 'not-found', currentTenant: Tenant | null) {
@@ -38,17 +36,14 @@ function createTenantServiceStub(status: 'ready' | 'not-found', currentTenant: T
     tenant: tenantState.asReadonly(),
     status: statusState.asReadonly(),
     getTenant: () => tenantState(),
-    bootstrap: vi.fn().mockResolvedValue(undefined)
+    bootstrap: vi.fn().mockResolvedValue(undefined),
   };
 }
 
 describe('App', () => {
   beforeAll(() => {
     try {
-      getTestBed().initTestEnvironment(
-        BrowserTestingModule,
-        platformBrowserTesting()
-      );
+      getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
     } catch {
       // Test environment may already be initialized by another setup entrypoint.
     }
@@ -65,9 +60,9 @@ describe('App', () => {
         provideRouter([]),
         {
           provide: TenantService,
-          useValue: createTenantServiceStub('ready', tenant)
-        }
-      ]
+          useValue: createTenantServiceStub('ready', tenant),
+        },
+      ],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(App);
@@ -75,26 +70,27 @@ describe('App', () => {
 
     expect(fixture.componentInstance).toBeTruthy();
     expect(fixture.nativeElement.style.getPropertyValue('--tenant-primary')).toBe(
-      tenant.primary_color
+      tenant.primary_color,
     );
     expect(fixture.nativeElement.style.getPropertyValue('--tenant-secondary')).toBe(
-      tenant.secondary_color
+      tenant.secondary_color,
     );
     expect(fixture.nativeElement.style.getPropertyValue('--tenant-danger')).toBe(
-      tenant.danger_color
+      tenant.danger_color,
     );
     expect(fixture.nativeElement.style.getPropertyValue('--tenant-primary-rgb')).toBe(
-      '99, 118, 243'
+      '99, 118, 243',
     );
     expect(fixture.nativeElement.style.getPropertyValue('--tenant-secondary-rgb')).toBe(
-      '160, 160, 160'
+      '160, 160, 160',
     );
     expect(fixture.nativeElement.style.getPropertyValue('--tenant-danger-rgb')).toBe(
-      '255, 136, 136'
+      '255, 136, 136',
     );
     expect(document.title).toBe(tenant.site_title);
-    expect(document.head.querySelector<HTMLLinkElement>('link[rel~="icon"]')?.getAttribute('href'))
-      .toBe(tenant.favicon);
+    expect(
+      document.head.querySelector<HTMLLinkElement>('link[rel~="icon"]')?.getAttribute('href'),
+    ).toBe(tenant.favicon);
   });
 
   it('renders the tenant not found screen when the tenant is missing', async () => {
@@ -104,17 +100,65 @@ describe('App', () => {
         provideRouter([]),
         {
           provide: TenantService,
-          useValue: createTenantServiceStub('not-found', null)
-        }
-      ]
+          useValue: createTenantServiceStub('not-found', null),
+        },
+      ],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
 
-    expect(fixture.nativeElement.textContent).toContain('No encontramos una tienda para este dominio');
+    expect(fixture.nativeElement.textContent).toContain(
+      'No encontramos una tienda para este dominio',
+    );
     expect(document.title).toBe('ShopitFront');
-    expect(document.head.querySelector<HTMLLinkElement>('link[rel~="icon"]')?.getAttribute('href'))
-      .toBe("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
+    expect(
+      document.head.querySelector<HTMLLinkElement>('link[rel~="icon"]')?.getAttribute('href'),
+    ).toBe("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
+  });
+
+  it('shows the date notices returned by the tenant bootstrap once', async () => {
+    const show = vi.fn();
+    const dateNotices = [
+      {
+        type: 'suspended' as const,
+        title: 'FECHA CANCELADA!',
+        message: [
+          { text: 'La fecha del ', bold: false },
+          { text: '09 de Octubre de 2026', bold: true },
+          { text: ' ha sido cancelada.', bold: false },
+        ],
+      },
+    ];
+
+    await TestBed.configureTestingModule({
+      imports: [App],
+      providers: [
+        provideRouter([]),
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub('ready', {
+            ...tenant,
+            event: {
+              title: 'Festival',
+              location: 'Predio',
+              dates: [],
+              date_notices: dateNotices,
+            },
+          }),
+        },
+        {
+          provide: EventDateNoticeService,
+          useValue: { show },
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+    fixture.detectChanges();
+
+    expect(show).toHaveBeenCalledOnce();
+    expect(show).toHaveBeenCalledWith(dateNotices);
   });
 });