OPHJOD-1291: Add test for CardCarousel and fix tab index bug

lib/components/CardCarousel/CardCarousel.stories.tsx

@@ -16,6 +16,13 @@ const design = {
   type: 'figma',
   url: 'https://www.figma.com/design/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client?node-id=7031-3025&t=hppCWVuC76hePJaZ-4',
 };
+
+const Link = ({ children, to, className }: { children: React.ReactNode; to?: string | object; className?: string }) => (
+  <a href={typeof to === 'string' ? to : '#'} className={className}>
+    {children}
+  </a>
+);
+
 export const Default: Story = {
   decorators: [
     (Story) => (
@@ -41,6 +48,8 @@ export const Default: Story = {
           description={`Description ${i + 1}`}
           imageSrc="https://images.unsplash.com/photo-1523464862212-d6631d073194?q=80&w=260"
           imageAlt={`Image ${i + 1}`}
+          to="#"
+          linkComponent={Link}
           tags={['Lorem', 'Ipsum', 'Dolor']}
         />
       ),

lib/components/CardCarousel/CardCarousel.test.tsx

@@ -0,0 +1,74 @@
+import { fireEvent, render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { CardCarousel, CardCarouselProps } from './CardCarousel';
+
+const renderComponent = (props: Partial<CardCarouselProps> = {}) => {
+  const defaultProps: CardCarouselProps = {
+    items: [
+      { id: '1', component: <div>Item 1</div> },
+      { id: '2', component: <div>Item 2</div> },
+      { id: '3', component: <div>Item 3</div> },
+    ],
+    itemWidth: 200,
+    gap: 16,
+    translations: {
+      nextTrigger: 'Next',
+      prevTrigger: 'Previous',
+      indicator: (index) => `Page ${index + 1}`,
+    },
+  };
+
+  return render(<CardCarousel {...defaultProps} {...props} />);
+};
+
+describe('CardCarousel', () => {
+  it('renders the carousel items', () => {
+    const { getByText } = renderComponent();
+    expect(getByText('Item 1')).toBeInTheDocument();
+    expect(getByText('Item 2')).toBeInTheDocument();
+    expect(getByText('Item 3')).toBeInTheDocument();
+  });
+
+  it('navigates to the next page', () => {
+    const { getByLabelText } = renderComponent();
+    const nextButton = getByLabelText('Next');
+    fireEvent.click(nextButton);
+    expect(nextButton).not.toBeDisabled();
+  });
+
+  it('navigates to the previous page', () => {
+    const { getByLabelText } = renderComponent();
+    const prevButton = getByLabelText('Previous');
+    fireEvent.click(prevButton);
+    expect(prevButton).toBeDisabled();
+  });
+
+  it('disables the next button on the last page', () => {
+    const { getByLabelText } = renderComponent();
+    const nextButton = getByLabelText('Next');
+    fireEvent.click(nextButton);
+    fireEvent.click(nextButton);
+    expect(nextButton).toBeDisabled();
+  });
+
+  it('disables the previous button on the first page', () => {
+    const { getByLabelText } = renderComponent();
+    const prevButton = getByLabelText('Previous');
+    expect(prevButton).toBeDisabled();
+  });
+
+  it('navigates to a specific page', () => {
+    const { getByText } = renderComponent();
+    const pageButton = getByText('Page 2');
+    fireEvent.click(pageButton);
+    expect(pageButton.parentElement).toHaveClass('ds:bg-accent');
+  });
+
+  it('handles enter key press for navigation', () => {
+    const { getByLabelText } = renderComponent();
+    const nextButton = getByLabelText('Next');
+    fireEvent.keyDown(nextButton, { key: 'Enter' });
+    fireEvent.keyDown(nextButton, { key: 'Enter' });
+    expect(nextButton).toBeDisabled();
+  });
+});

lib/components/CardCarousel/CardCarousel.tsx

@@ -105,8 +105,7 @@ export const CardCarousel = ({ items = [], translations, itemWidth, gap = 16 }:
             }
           };
           return (
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            <li key={item.id} style={{ width: itemWidth }} tabIndex={0} onFocus={onFocus}>
+            <li key={item.id} style={{ width: itemWidth }} onFocus={onFocus}>
               {item.component}
             </li>
           );

lib/theme.css

@@ -80,7 +80,7 @@
   --text-heading-5--font-weight: 400;
   --text-heading-5--line-height: 24px;
   --text-body-lg: 18px;
-  --text-body-lg--font-weight: 400;
+  --text-body-lg--font-weight: 500;
   --text-body-lg--line-height: 26px;
   --text-body-lg-mobile: 16px;
   --text-body-lg-mobile--font-weight: 400;
@@ -127,7 +127,7 @@
   --text-button-sm-mobile--letter-spacing: 0.28px;
   --text-tag: 14px;
   --text-tag--font-weight: 400;
-  --text-tag--line-height: 20px;
+  --text-tag--line-height: 16px;
   --text-attrib-title: 12px;
   --text-attrib-title--font-weight: 400;
   --text-attrib-title--line-height: 110%;

vitest.setup.ts

@@ -25,3 +25,5 @@ const ResizeObserverMock = vi.fn(() => ({
 }));
 
 vi.stubGlobal('ResizeObserver', ResizeObserverMock);
+
+Element.prototype.scrollTo = vi.fn();