add interactions to storybook

Author: oliverabrahams

dotcom-rendering/src/components/CarouselNavigationButtons.tsx

@@ -101,6 +101,7 @@ export const CarouselNavigationButtons = ({
 				}
 				size="small"
 				disabled={!previousButtonEnabled}
+				data-testid="carousel-back-button"
 				aria-label="previous"
 				value="previous"
 				data-link-name={dataLinkNamePreviousButton}
@@ -109,6 +110,7 @@ export const CarouselNavigationButtons = ({
 			<Button
 				hideLabel={true}
 				iconSide="left"
+				data-testid="carousel-forward-button"
 				icon={<SvgChevronRightSingle />}
 				onClick={onClickNextButton}
 				priority="tertiary"

dotcom-rendering/src/components/ScrollableProducts.stories.tsx

@@ -6,7 +6,7 @@ import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { ScrollableProduct } from './ScrollableProduct.importable';
 
 const meta = {
-	title: 'Article Carousel/Scrollable Products',
+	title: 'Components/Scrollable Products',
 	component: ScrollableProduct,
 	parameters: {
 		chromatic: {
@@ -19,15 +19,32 @@ const meta = {
 	},
 	args: {
 		products: [
-			{ ...exampleProduct, h2Id: 'product' },
 			{
 				...exampleProduct,
+				primaryHeadingHtml: '<em>Product 0</em>',
+				h2Id: 'product',
+			},
+			{
+				...exampleProduct,
+				primaryHeadingHtml: '<em>Product 1</em>',
 				h2Id: 'product-1',
 				productName: 'Lorem ipsum dolor sit amet',
 			},
-			{ ...exampleProduct, h2Id: 'product-2' },
-			{ ...exampleProduct, h2Id: 'product-3' },
-			{ ...exampleProduct, h2Id: 'product-4' },
+			{
+				...exampleProduct,
+				primaryHeadingHtml: '<em>Product 2</em>',
+				h2Id: 'product-2',
+			},
+			{
+				...exampleProduct,
+				primaryHeadingHtml: '<em>Product 3</em>',
+				h2Id: 'product-3',
+			},
+			{
+				...exampleProduct,
+				primaryHeadingHtml: '<em>Product 4</em>',
+				h2Id: 'product-4',
+			},
 		],
 		format: {
 			design: ArticleDesign.Review,
@@ -78,3 +95,24 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const With5Cards = {} satisfies Story;
+
+export const ClickForwardArrow = {
+	play: async ({ canvas, userEvent }) => {
+		await userEvent.click(canvas.getByTestId('carousel-forward-button'));
+	},
+} satisfies Story;
+
+// Function to emulate pausing between interactions
+function sleep(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export const ClickForwardTwiceAndBackOnce = {
+	play: async ({ canvas, userEvent }) => {
+		await userEvent.click(canvas.getByTestId('carousel-forward-button'));
+		await sleep(500);
+		await userEvent.click(canvas.getByTestId('carousel-forward-button'));
+		await sleep(500);
+		await userEvent.click(canvas.getByTestId('carousel-back-button'));
+	},
+} satisfies Story;