tbianchini
/
shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add description_html to tenant heroConfig and update tests for hero banner rendering

This commit is contained in:
ncoronel 2026-08-03 15:08:13 -03:00
parent ffb586c348
commit cc884e3cc0
2 changed files with 22 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts
View File

@ -191,6 +191,7 @@ describe('StoreHomePageComponent', () => {
const tenant = createTenant({ const tenant = createTenant({
heroConfig: { heroConfig: {
title_html: '<h1>Fiesta Fútbol Infantil</h1>', title_html: '<h1>Fiesta Fútbol Infantil</h1>',
description_html: '<p>Viví una jornada inolvidable de fútbol infantil.</p>',
background_image_id: 'https://example.com/hero.jpg', background_image_id: 'https://example.com/hero.jpg',
}, },
}); });
@ -258,6 +259,7 @@ describe('StoreHomePageComponent', () => {
expect(hero).not.toBeNull(); expect(hero).not.toBeNull();
expect(hero.style.backgroundImage).toContain('https://example.com/hero.jpg'); expect(hero.style.backgroundImage).toContain('https://example.com/hero.jpg');
expect(hero.textContent).toContain('Fiesta Fútbol Infantil'); expect(hero.textContent).toContain('Fiesta Fútbol Infantil');
expect(hero.textContent).toContain('Viví una jornada inolvidable de fútbol infantil.');
expect(hero.textContent).toContain('Rosario, Santa Fe'); expect(hero.textContent).toContain('Rosario, Santa Fe');
expect(hero.textContent).toContain('2026-12-05, 2026-12-06'); expect(hero.textContent).toContain('2026-12-05, 2026-12-06');
const heroComponent = fixture.debugElement.query(By.directive(HeroBannerComponent)) const heroComponent = fixture.debugElement.query(By.directive(HeroBannerComponent))
@ -265,7 +267,7 @@ describe('StoreHomePageComponent', () => {
expect(heroComponent.eventConfig?.contact).toEqual(tenant.social_media); expect(heroComponent.eventConfig?.contact).toEqual(tenant.social_media);
}); });
it('maps the active event and tenant social media to the event config', async () => { it('renders only the active event data when the tenant does not have the hero extra', async () => {
const tenant = createTenant(); const tenant = createTenant();
tenant.active_event_id = 12; tenant.active_event_id = 12;
tenant.active_event = { tenant.active_event = {
@ -281,15 +283,6 @@ describe('StoreHomePageComponent', () => {
}, },
], ],
}; };
tenant.social_media = [
{
code: 'instagram',
icon: 'fa-brands fa-instagram',
name: 'Instagram',
url: 'https://instagram.com/fiesta',
},
];
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
imports: [StoreHomePageComponent], imports: [StoreHomePageComponent],
providers: [ providers: [
@ -308,25 +301,18 @@ describe('StoreHomePageComponent', () => {
const fixture = TestBed.createComponent(StoreHomePageComponent); const fixture = TestBed.createComponent(StoreHomePageComponent);
fixture.detectChanges(); fixture.detectChanges();
const eventConfig = ( const element = fixture.nativeElement as HTMLElement;
fixture.debugElement.query(By.directive(HeroBannerComponent)) const heroComponent = fixture.debugElement.query(By.directive(HeroBannerComponent))
.componentInstance as HeroBannerComponent .componentInstance as HeroBannerComponent;
).eventConfig;
expect(eventConfig).toEqual({ expect(heroComponent.heroConfig).toBeNull();
id: 12, expect(element.querySelector('.hero-banner')).toBeNull();
title: 'Fiesta Fútbol Infantil', expect(element.querySelector('.hero-banner-container')).toBeNull();
location: 'Sunchales, Santa Fe', expect(element.querySelector('.hero-content')).toBeNull();
dates: [ expect(element.querySelector('.event-card')).not.toBeNull();
{ expect(element.textContent).toContain('Fiesta Fútbol Infantil');
id: 25, expect(element.textContent).toContain('Sunchales, Santa Fe');
date: '2026-10-09', expect(element.textContent).toContain('2026-10-09');
start_time: '09:00:00',
end_time: '18:00:00',
},
],
contact: tenant.social_media,
});
}); });
it('requests another page for the selected featured group', async () => { it('requests another page for the selected featured group', async () => {

11
src/app/shared/components/hero-banner/hero-banner.component.html
View File

@ -1,6 +1,8 @@
<div class="hero-banner-container"> <div [class.hero-banner-container]="heroConfig">
<div <div
class="hero-banner position-relative rounded" [class.hero-banner]="heroConfig"
[class.position-relative]="heroConfig"
[class.rounded]="heroConfig"
[ngStyle]="{ [ngStyle]="{
'background-image': heroConfig?.background_image_id 'background-image': heroConfig?.background_image_id
? 'url(' + heroConfig.background_image_id + ')' ? 'url(' + heroConfig.background_image_id + ')'
@ -33,7 +35,10 @@
} }
@if (eventConfig) { @if (eventConfig) {
<div class="event-card-container position-absolute w-100 d-flex justify-content-center"> <div
class="event-card-container w-100 d-flex justify-content-center"
[class.position-absolute]="heroConfig"
>
<div class="event-card bg-white shadow rounded p-3 p-md-4 text-center"> <div class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
@if (eventConfig.title) { @if (eventConfig.title) {
<h3 class="event-title text-primary fw-bold mb-3">{{ eventConfig.title }}</h3> <h3 class="event-title text-primary fw-bold mb-3">{{ eventConfig.title }}</h3>