From b2298b576d9fa30eed13c4d5514dfede5e12bb88 Mon Sep 17 00:00:00 2001
From: Alexander Melo <alexandermelox@gmail.com>
Date: Tue, 3 Dec 2024 07:43:52 -0500
Subject: [PATCH] test(carousel): adds test to increase coverage (#6393)

* feat(carousel): starts adding tests

* refactor(carousel): removes utils file

* feat(carousel): adds onScroll tests

* feat(carousel): adds reset scroll test and wheel disable

* feat(carousel): adds tests

---------

Co-authored-by: Anamika T S <47971732+anamikaanu96@users.noreply.github.com>
---
 .../src/components/Carousel/Carousel.test.js  | 61 ++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/packages/ibm-products/src/components/Carousel/Carousel.test.js b/packages/ibm-products/src/components/Carousel/Carousel.test.js
index df47436d7e..e0f1b3e744 100644
--- a/packages/ibm-products/src/components/Carousel/Carousel.test.js
+++ b/packages/ibm-products/src/components/Carousel/Carousel.test.js
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
 
 import { pkg } from '../../settings';
 import uuidv4 from '../../global/js/utils/uuidv4';
@@ -78,4 +78,63 @@ describe(componentName, () => {
       componentName
     );
   });
+
+  it('calls the onScroll prop and returns value from 0 to 1', async () => {
+    const onScroll = jest.fn().mockReturnValue(0.2);
+    render(
+      <Carousel
+        data-testid={dataTestId}
+        // eslint-disable-next-line
+        style={{ width: '10px', height: '20px' }} // we need to set width and height here to trigger scrollbars
+        onScroll={onScroll}
+      >
+        Very long paragraph to trigger scrolling.
+      </Carousel>
+    );
+
+    const element = screen.getByTestId(dataTestId);
+    expect(element).not.toBeNull();
+
+    await waitFor(() =>
+      fireEvent.scroll(element, { target: { scrollX: '20px' } })
+    );
+    expect(onScroll).toHaveBeenCalled();
+    expect(onScroll()).toBe(0.2);
+  });
+
+  it('resets the scroll when the window size changes', async () => {
+    const onScroll = jest.fn().mockReturnValue(0.2);
+
+    render(
+      <Carousel
+        data-testid={dataTestId}
+        // eslint-disable-next-line
+        style={{ width: '10px', height: '20px' }} // we need to set width and height here to trigger scrollbars
+        onScroll={onScroll}
+      >
+        Very long paragraph to trigger scrolling.
+      </Carousel>
+    );
+
+    const element = screen.getByTestId(dataTestId);
+    expect(onScroll).toHaveBeenCalledTimes(0);
+    expect(element.scrollLeft).toBe(0);
+
+    const scrollXAmount = 20;
+    await waitFor(() =>
+      fireEvent.scroll(element, { target: { scrollX: scrollXAmount } })
+    );
+    element.scrollLeft = scrollXAmount;
+    expect(element.scrollLeft).toBe(scrollXAmount);
+
+    // Change the viewport to 500px.
+    global.innerWidth = 500;
+
+    // Trigger the window resize event.
+    global.dispatchEvent(new Event('resize'));
+
+    expect(onScroll).toHaveBeenCalled();
+    element.scrollLeft = 0;
+    expect(element.scrollLeft).toBe(0);
+  });
 });