e-tib.com/components/blocks/ReferencesSlider.test.tsx

import * as React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { ReferencesSlider, Reference } from './ReferencesSlider';

// Mock next/link to render standard <a> tag
vi.mock('next/link', () => ({
  default: vi.fn(({ children, href, onClick, ...props }: any) => {
    return (
      <a href={href} onClick={onClick} {...props}>
        {children}
      </a>
    );
  })
}));

// Mock next/image to render standard img tag
vi.mock('next/image', () => ({
  default: (props: any) => {
    return <img {...props} />;
  }
}));

describe('ReferencesSlider TDD', () => {
  const mockReferences: Reference[] = [
    {
      id: '1',
      title: 'Referenz Projekt Eins',
      slug: 'referenz-projekt-eins',
      category: 'Kabeltiefbau',
    },
    {
      id: '2',
      title: 'Referenz Projekt Zwei',
      slug: 'referenz-projekt-zwei',
      category: 'Bohrtechnik',
    }
  ];

  it('renders reference tiles correctly', () => {
    render(<ReferencesSlider references={mockReferences} />);
    
    expect(screen.getByText('Referenz Projekt Eins')).toBeTruthy();
    expect(screen.getByText('Referenz Projekt Zwei')).toBeTruthy();
  });

  it('wraps each tile in a link to /referenzen/[slug]', () => {
    render(<ReferencesSlider references={mockReferences} />);
    
    const links = screen.getAllByTestId('reference-tile-link');
    expect(links).toHaveLength(2);
    expect(links[0].getAttribute('href')).toBe('/referenzen/referenz-projekt-eins');
    expect(links[1].getAttribute('href')).toBe('/referenzen/referenz-projekt-zwei');
  });

  it('allows navigation on simple click (no drag)', () => {
    render(<ReferencesSlider references={mockReferences} />);
    
    const firstLink = screen.getAllByTestId('reference-tile-link')[0];
    
    // Simulate simple click sequence
    fireEvent.mouseDown(firstLink, { pageX: 100, clientX: 100 });
    fireEvent.mouseUp(firstLink);
    const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
    
    firstLink.dispatchEvent(clickEvent);
    
    expect(clickEvent.defaultPrevented).toBe(false);
  });

  it('prevents navigation if mouse was dragged', () => {
    render(<ReferencesSlider references={mockReferences} />);
    
    const firstLink = screen.getAllByTestId('reference-tile-link')[0];
    
    // Simulate drag sequence
    fireEvent.mouseDown(firstLink, { pageX: 100, clientX: 100 });
    // Simulate mouse move of 20px
    fireEvent.mouseMove(firstLink, { pageX: 120, clientX: 120 });
    fireEvent.mouseUp(firstLink);
    
    const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
    firstLink.dispatchEvent(clickEvent);
    
    expect(clickEvent.defaultPrevented).toBe(true);
  });
});