import React from 'react';
import {render, screen} from '@testing-library/react';
import CategoriesSection from '../CategoriesSection';

jest.mock('next/link', () => {
  return ({children, href, ...props}: {children: React.ReactNode; href: string; [key: string]: unknown}) => (
    <a href={href} {...props}>{children}</a>
  );
});

jest.mock('framer-motion', () => ({
  motion: {
    div: ({children, ...props}: React.HTMLAttributes<HTMLDivElement>) => <div {...props}>{children}</div>,
  },
  useInView: () => true,
}));

describe('CategoriesSection', () => {
  it('shouldRenderFourCategoriesWithTitlesAndDescriptions', () => {
    render(<CategoriesSection locale="fr" />);
    expect(screen.getByText('category_festnoz')).toBeInTheDocument();
    expect(screen.getByText('category_concerts')).toBeInTheDocument();
    expect(screen.getByText('category_stages')).toBeInTheDocument();
    expect(screen.getByText('category_bagadou')).toBeInTheDocument();
    expect(screen.getByText('category_festnoz_desc')).toBeInTheDocument();
    expect(screen.getByText('category_concerts_desc')).toBeInTheDocument();
    expect(screen.getByText('category_stages_desc')).toBeInTheDocument();
    expect(screen.getByText('category_bagadou_desc')).toBeInTheDocument();
  });

  it('shouldLinkEachCardToTheAgenda', () => {
    render(<CategoriesSection locale="fr" />);
    const ctas = screen.getAllByText(/category_cta/);
    expect(ctas.length).toBe(4);
    ctas.forEach((cta) => {
      expect(cta.closest('a')).toHaveAttribute('href', '/fr/evenements');
    });
  });

  it('shouldRenderColoredShapeChips', () => {
    const {container} = render(<CategoriesSection locale="fr" />);
    expect(container.querySelectorAll('.tk-categories__chip').length).toBe(4);
    expect(container.querySelector('.tk-categories__shape--square')).toBeInTheDocument();
    expect(container.querySelector('.tk-categories__shape--circle')).toBeInTheDocument();
    expect(container.querySelector('.tk-categories__shape--diamond')).toBeInTheDocument();
    expect(container.querySelector('.tk-categories__shape--drop')).toBeInTheDocument();
  });
});