test(carousel): improve test coverage

HH-380

Author: nikomakela

src/core/carousel/__tests__/Carousel.test.tsx

@@ -0,0 +1,190 @@
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { Carousel } from '../Carousel';
+import { MOBILE_WIDTH } from '../constants';
+
+// Mock child components to isolate the Carousel's own logic
+jest.mock('../components/CarouselSlider', () => ({
+  CarouselSlider: ({
+    children,
+  }: {
+    children: React.ReactElement<unknown>[];
+  }) => <div data-testid="carousel-slider">{children}</div>,
+}));
+
+jest.mock('../components/CarouselSlideButton', () => ({
+  CarouselPreviousSlideButton: () => <button type="button">Previous</button>,
+  CarouselNextSlideButton: () => <button type="button">Next</button>,
+}));
+
+jest.mock('../components/CarouselSliderDot', () => ({
+  CarouselSlideDots: () => <div data-testid="carousel-dots" />,
+}));
+
+// Mock translation hook
+jest.mock('../../translation/useTranslationWithFallback', () => ({
+  useTranslationWithFallback: () => ({
+    t: (key: string) => {
+      if (key === 'carouselRegionLabelText') {
+        return 'Carousel: {title}';
+      }
+      return key;
+    },
+  }),
+}));
+
+const mockItems = [
+  <div key="1">Item 1</div>,
+  <div key="2">Item 2</div>,
+  <div key="3">Item 3</div>,
+  <div key="4">Item 4</div>,
+  <div key="5">Item 5</div>,
+];
+
+// Helper to set window width and fire resize event
+const fireResize = (width: number) => {
+  act(() => {
+    window.innerWidth = width;
+    window.dispatchEvent(new Event('resize'));
+  });
+};
+
+describe('Carousel', () => {
+  const originalInnerWidth = window.innerWidth;
+
+  afterEach(() => {
+    window.innerWidth = originalInnerWidth;
+  });
+
+  it('renders children and the slider', () => {
+    render(<Carousel>{mockItems}</Carousel>);
+    expect(screen.getByTestId('carousel-slider')).toBeInTheDocument();
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+    expect(screen.getByText('Item 3')).toBeInTheDocument();
+    expect(screen.getByText('Item 4')).toBeInTheDocument();
+    expect(screen.getByText('Item 5')).toBeInTheDocument();
+  });
+
+  it('renders with a correct ARIA region label', () => {
+    const title = 'My Test Carousel';
+    render(<Carousel title={title}>{mockItems}</Carousel>);
+    expect(
+      screen.getByRole('region', { name: `Carousel: ${title}` }),
+    ).toBeInTheDocument();
+  });
+
+  it('does not render dots by default', () => {
+    render(<Carousel>{mockItems}</Carousel>);
+    expect(screen.queryByTestId('carousel-dots')).not.toBeInTheDocument();
+  });
+
+  it('renders dots when withDots is true and there are multiple slides', () => {
+    // 5 items, 4 per slide = 2 slides
+    render(
+      <Carousel withDots itemsDesktop={4}>
+        {mockItems}
+      </Carousel>,
+    );
+    expect(screen.getByTestId('carousel-dots')).toBeInTheDocument();
+  });
+
+  it('does not render dots if there is only one slide', () => {
+    // 5 items, 5 per slide = 1 slide
+    render(
+      <Carousel withDots itemsDesktop={5}>
+        {mockItems}
+      </Carousel>,
+    );
+    expect(screen.queryByTestId('carousel-dots')).not.toBeInTheDocument();
+  });
+
+  it('renders navigation buttons when there are multiple slides', () => {
+    // 5 items, 4 per slide = 2 slides
+    render(<Carousel itemsDesktop={4}>{mockItems}</Carousel>);
+    expect(
+      screen.getByRole('button', { name: 'Previous' }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
+  });
+
+  it('does not render navigation buttons when there is only one slide', () => {
+    // 5 items, 5 per slide = 1 slide
+    render(<Carousel itemsDesktop={5}>{mockItems}</Carousel>);
+    expect(
+      screen.queryByRole('button', { name: 'Previous' }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Next' }),
+    ).not.toBeInTheDocument();
+  });
+
+  describe('responsiveness and slide calculation', () => {
+    it('calculates number of slides based on desktop view', () => {
+      fireResize(MOBILE_WIDTH + 1); // Desktop width
+      const { rerender } = render(
+        <Carousel itemsDesktop={2}>{mockItems}</Carousel>,
+      );
+
+      // 5 items / 2 per slide = 3 slides. Buttons and dots should show.
+      expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
+
+      rerender(<Carousel itemsDesktop={5}>{mockItems}</Carousel>);
+
+      // 5 items / 5 per slide = 1 slide. Buttons should disappear.
+      expect(
+        screen.queryByRole('button', { name: 'Next' }),
+      ).not.toBeInTheDocument();
+    });
+
+    it('calculates number of slides based on mobile view', () => {
+      fireResize(MOBILE_WIDTH); // Mobile width
+      const { rerender } = render(
+        <Carousel itemsMobile={1}>{mockItems}</Carousel>,
+      );
+
+      // 5 items / 1 per slide = 5 slides. Buttons should show.
+      expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
+
+      rerender(
+        <Carousel itemsMobile={2} itemsDesktop={5}>
+          {mockItems}
+        </Carousel>,
+      );
+
+      // 5 items / 2 per slide = 3 slides. Buttons should still show.
+      expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
+    });
+
+    it('re-calculates slides when window is resized', () => {
+      // Start with desktop view, 1 slide
+      fireResize(MOBILE_WIDTH + 1);
+      render(
+        <Carousel itemsDesktop={5} itemsMobile={2}>
+          {mockItems}
+        </Carousel>,
+      );
+      expect(
+        screen.queryByRole('button', { name: 'Next' }),
+      ).not.toBeInTheDocument();
+
+      // Resize to mobile, which should result in 3 slides
+      fireResize(MOBILE_WIDTH);
+
+      // Buttons should now be visible
+      expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
+    });
+
+    it('calculates number of slides correctly with hasMore prop', () => {
+      // 5 items + 1 "load more" slot = 6 items. 3 per slide = 2 slides.
+      render(
+        <Carousel itemsDesktop={3} hasMore onLoadMore={() => {}}>
+          {mockItems}
+        </Carousel>,
+      );
+      expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
+    });
+  });
+});

src/core/carousel/components/__tests__/CarouselSlideButton.test.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import {
+  CarouselNextSlideButton,
+  CarouselPreviousSlideButton,
+} from '../CarouselSlideButton';
+import { CarouselContext } from '../../context/CarouselContext';
+import type { CarouselContextType } from '../../types';
+import { initialCarouselContextValues } from '../../constants';
+
+// Mock the Icon components from hds-react to isolate our button components
+jest.mock('hds-react', () => ({
+  ...jest.requireActual('hds-react'),
+  IconAngleLeft: () => <div data-testid="icon-angle-left" />,
+  IconAngleRight: () => <div data-testid="icon-angle-right" />,
+}));
+
+// Mock useConfig to provide translations
+jest.mock('../../../configProvider/useConfig', () => ({
+  useConfig: () => ({
+    copy: {
+      previous: 'Previous',
+      next: 'Next',
+    },
+  }),
+}));
+
+describe('CarouselSlideButton', () => {
+  const mockHandleUpdateSlideProps = jest.fn();
+
+  // A helper function to render components with a mock context
+  const renderWithContext = (
+    ui: React.ReactElement,
+    providerProps: Partial<CarouselContextType>,
+  ) =>
+    render(
+      <CarouselContext.Provider
+        value={{
+          ...initialCarouselContextValues,
+          // Dummy functions for context fields that require them
+          setTransformValue: jest.fn(),
+          setNumberOfSlides: jest.fn(),
+          setItemsPerSlide: jest.fn(),
+          setCurrentSlide: jest.fn(),
+          setWidth: jest.fn(),
+          // Real mock and provided props
+          handleUpdateSlideProps: mockHandleUpdateSlideProps,
+          ...providerProps,
+        }}
+      >
+        {ui}
+      </CarouselContext.Provider>,
+    );
+
+  beforeEach(() => {
+    mockHandleUpdateSlideProps.mockClear();
+  });
+
+  describe('CarouselPreviousSlideButton', () => {
+    it('renders correctly and calls handler on click', () => {
+      renderWithContext(<CarouselPreviousSlideButton />, {
+        isReady: true,
+        currentSlide: 1,
+        numberOfSlides: 5,
+      });
+
+      const button = screen.getByRole('button', { name: 'Previous' });
+      expect(button).toBeInTheDocument();
+      expect(button).not.toBeDisabled();
+      expect(screen.getByTestId('icon-angle-left')).toBeInTheDocument();
+
+      fireEvent.click(button);
+      expect(mockHandleUpdateSlideProps).toHaveBeenCalledWith(-0);
+    });
+
+    it('wraps around to the last slide when on the first slide', () => {
+      renderWithContext(<CarouselPreviousSlideButton />, {
+        isReady: true,
+        currentSlide: 0,
+        numberOfSlides: 5,
+      });
+
+      fireEvent.click(screen.getByRole('button', { name: 'Previous' }));
+      expect(mockHandleUpdateSlideProps).toHaveBeenCalledWith(-4);
+    });
+
+    it('is disabled when not ready', () => {
+      renderWithContext(<CarouselPreviousSlideButton />, { isReady: false });
+      expect(screen.getByRole('button', { name: 'Previous' })).toBeDisabled();
+    });
+  });
+
+  describe('CarouselNextSlideButton', () => {
+    it('renders correctly and calls handler on click', () => {
+      renderWithContext(<CarouselNextSlideButton />, {
+        isReady: true,
+        currentSlide: 1,
+        numberOfSlides: 5,
+      });
+
+      const button = screen.getByRole('button', { name: 'Next' });
+      expect(button).toBeInTheDocument();
+      expect(button).not.toBeDisabled();
+      expect(screen.getByTestId('icon-angle-right')).toBeInTheDocument();
+
+      fireEvent.click(button);
+      expect(mockHandleUpdateSlideProps).toHaveBeenCalledWith(2);
+    });
+
+    it('wraps around to the first slide when on the last slide', () => {
+      renderWithContext(<CarouselNextSlideButton />, {
+        isReady: true,
+        currentSlide: 4,
+        numberOfSlides: 5,
+      });
+
+      fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+      expect(mockHandleUpdateSlideProps).toHaveBeenCalledWith(0);
+    });
+  });
+});