diff --git a/spec/components/Carousel/Carousel.test.tsx b/spec/components/Carousel/Carousel.test.tsx index 9adcff8..e29a134 100644 --- a/spec/components/Carousel/Carousel.test.tsx +++ b/spec/components/Carousel/Carousel.test.tsx @@ -255,6 +255,66 @@ describe('Carousel component', () => { expect(screen.queryByText('Product 1')).not.toBeInTheDocument(); }); + test('Ensure ProductCard componentOverrides are passed down', () => { + render( + ( +
+

{props.product?.name}

+ ${props.product?.price} +
+ ), + }, + }, + }} + />, + ); + + // All products should use the custom override + const customNames = screen.getAllByTestId('custom-product-name'); + const customPrices = screen.getAllByTestId('custom-product-price'); + + expect(customNames).toHaveLength(3); + expect(customNames[0].textContent).toEqual(mockProducts[0].name); + expect(customNames[1].textContent).toEqual(mockProducts[1].name); + expect(customNames[2].textContent).toEqual(mockProducts[2].name); + + expect(customPrices).toHaveLength(3); + expect(customPrices[0].textContent).toEqual(`$${mockProducts[0].price}`); + expect(customPrices[1].textContent).toEqual(`$${mockProducts[1].price}`); + expect(customPrices[2].textContent).toEqual(`$${mockProducts[2].price}`); + }); + + test('Ensure nested ProductCard componentOverrides are passed down', () => { + render( + ( +
+ {props.product?.imageUrl} +
+ ), + }, + }, + }, + }} + />, + ); + + // Nested override (ProductCard.image) should be applied + const customImages = screen.getAllByTestId('custom-image'); + expect(customImages).toHaveLength(3); + expect(customImages[0].textContent).toEqual(mockProducts[0].imageUrl); + }); + test('renders component override for navigation buttons', () => { render( (props: CarouselOpts) { return ( - + ); })} diff --git a/src/types/carouselTypes.ts b/src/types/carouselTypes.ts index 8aa5570..db2a0a0 100644 --- a/src/types/carouselTypes.ts +++ b/src/types/carouselTypes.ts @@ -1,4 +1,4 @@ -import type { Product } from '@/types/productCardTypes'; +import type { Product, ProductCardOverrides } from '@/types/productCardTypes'; import type { ComponentOverrideProps, IncludeComponentOverrides, @@ -66,7 +66,9 @@ export type CarouselItemRenderProps = CarouselRenderProps & { export type CarouselOverrides = ComponentOverrideProps> & { content?: ComponentOverrideProps>; - item?: ComponentOverrideProps>; + item?: ComponentOverrideProps> & { + productCard?: ProductCardOverrides; + }; previous?: ComponentOverrideProps>; next?: ComponentOverrideProps>; };