import { TestBed } from '@angular/core/testing';
import { SectionConfig } from '../../shared/models/config';
import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
import { ProductCarouselWidgetComponent } from './product-carousel-widget.component';

function makeSection(columns?: number): SectionConfig {
  return { id: 's1', type: 'product-carousel', order: 0, layout: { columns }, widgets: [] } as unknown as SectionConfig;
}

describe('ProductCarouselWidgetComponent sizing regression (layout.columns)', () => {
  it('defaults to 4 items per page when layout.columns is unset', () => {
    const fixture = TestBed.createComponent(ProductCarouselWidgetComponent);
    fixture.componentInstance.section = makeSection(undefined);
    fixture.detectChanges();

    expect(fixture.componentInstance.itemsPerPage()).toBe(4);
  });

  it('reflects layout.columns when set', () => {
    const fixture = TestBed.createComponent(ProductCarouselWidgetComponent);
    fixture.componentInstance.section = makeSection(3);
    fixture.detectChanges();

    expect(fixture.componentInstance.itemsPerPage()).toBe(3);
  });

  it('applies the resolved value as the --items-per-page CSS custom property', () => {
    const fixture = TestBed.createComponent(ProductCarouselWidgetComponent);
    fixture.componentInstance.section = makeSection(2);
    fixture.detectChanges();

    const host = (fixture.nativeElement as HTMLElement).querySelector('.product-carousel-widget') as HTMLElement;
    expect(host.style.getPropertyValue('--items-per-page').trim()).toBe('2');
  });
});
