@times-components/ts-components 1.146.2-a0ffbb6bc2acbec91d140a39f6be06256e702094.5 → 1.146.2-c12ed7999a41984c2ba8c437357e7a5df1914881.48

package/src/components/carousel-component/__tests__/DefaultNavigationArrow.test.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { DefaultNavigationArrow } from '../DefaultNavigationArrow';
+
+describe('DefaultNavigationArrow', () => {
+  const mockOnClick = jest.fn();
+
+  beforeEach(() => {
+    mockOnClick.mockClear();
+  });
+
+  it('renders left arrow', () => {
+    render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    const button = screen.getByLabelText('Previous items');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders right arrow', () => {
+    render(
+      <DefaultNavigationArrow
+        direction="right"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    const button = screen.getByLabelText('Next items');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', () => {
+    render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    const button = screen.getByLabelText('Previous items');
+    fireEvent.click(button);
+
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onClick when disabled', () => {
+    render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={true}
+      />
+    );
+
+    const button = screen.getByLabelText('Previous items');
+    fireEvent.click(button);
+
+    expect(mockOnClick).not.toHaveBeenCalled();
+  });
+
+  it('applies disabled styling when disabled', () => {
+    render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={true}
+      />
+    );
+
+    const button = screen.getByLabelText('Previous items');
+    expect(button).toHaveAttribute('disabled');
+  });
+
+  it('renders SVG icon', () => {
+    const { container } = render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('has correct aria-label for accessibility', () => {
+    const { rerender } = render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    expect(screen.getByLabelText('Previous items')).toBeInTheDocument();
+
+    rerender(
+      <DefaultNavigationArrow
+        direction="right"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    expect(screen.getByLabelText('Next items')).toBeInTheDocument();
+  });
+
+  it('renders as a button element', () => {
+    render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    const button = screen.getByLabelText('Previous items');
+    expect(button.tagName).toBe('BUTTON');
+  });
+
+  it('applies correct styles based on direction', () => {
+    const { container, rerender } = render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    let button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+
+    rerender(
+      <DefaultNavigationArrow
+        direction="right"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+  });
+});

package/src/components/carousel-component/__tests__/DefaultPageDot.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { DefaultPageDot } from '../DefaultPageDot';
+
+describe('DefaultPageDot', () => {
+  const mockOnClick = jest.fn();
+
+  beforeEach(() => {
+    mockOnClick.mockClear();
+  });
+
+  it('renders active dot', () => {
+    render(<DefaultPageDot active={true} onClick={mockOnClick} index={0} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders inactive dot', () => {
+    render(<DefaultPageDot active={false} onClick={mockOnClick} index={0} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', () => {
+    render(<DefaultPageDot active={false} onClick={mockOnClick} index={0} />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders multiple dots with different indices', () => {
+    const { rerender } = render(
+      <DefaultPageDot active={true} onClick={mockOnClick} index={0} />
+    );
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+
+    rerender(<DefaultPageDot active={false} onClick={mockOnClick} index={1} />);
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('handles active state changes', () => {
+    const { rerender } = render(
+      <DefaultPageDot active={false} onClick={mockOnClick} index={0} />
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+
+    rerender(<DefaultPageDot active={true} onClick={mockOnClick} index={0} />);
+
+    expect(button).toBeInTheDocument();
+  });
+
+  it('applies different styling for active vs inactive state', () => {
+    const { container, rerender } = render(
+      <DefaultPageDot active={false} onClick={mockOnClick} index={0} />
+    );
+
+    const inactiveButton = container.querySelector('button');
+    expect(inactiveButton).toBeInTheDocument();
+
+    rerender(<DefaultPageDot active={true} onClick={mockOnClick} index={0} />);
+
+    const activeButton = container.querySelector('button');
+    expect(activeButton).toBeInTheDocument();
+  });
+
+  it('renders as a button element', () => {
+    render(<DefaultPageDot active={true} onClick={mockOnClick} index={0} />);
+
+    const button = screen.getByRole('button');
+    expect(button.tagName).toBe('BUTTON');
+  });
+
+  it('passes correct index to onClick handler', () => {
+    const { rerender } = render(
+      <DefaultPageDot active={false} onClick={mockOnClick} index={2} />
+    );
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+
+    rerender(<DefaultPageDot active={false} onClick={mockOnClick} index={5} />);
+
+    fireEvent.click(button);
+    expect(mockOnClick).toHaveBeenCalledTimes(2);
+  });
+
+  it('is focusable for keyboard navigation', () => {
+    render(<DefaultPageDot active={false} onClick={mockOnClick} index={0} />);
+
+    const button = screen.getByRole('button');
+    button.focus();
+    expect(document.activeElement).toBe(button);
+  });
+});