import React from 'react';
import {render, screen, fireEvent} from '@testing-library/react';
import HeroSection from '@/components/Homepage/HeroSection';
import NavigationLoader from '../NavigationLoader';

jest.mock('next/navigation', () => ({
  usePathname: () => '/fr',
  useRouter: () => ({push: jest.fn()}),
}));

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

describe('NavigationLoader wired to the homepage hero search', () => {
  it('shouldShowLoaderWhenHeroSearchIsSubmitted', () => {
    render(
      <>
        <NavigationLoader />
        <HeroSection locale="fr" />
      </>
    );
    expect(screen.queryByTestId('navigation-loader')).not.toBeInTheDocument();

    fireEvent.submit(screen.getByRole('search'));

    expect(screen.getByTestId('navigation-loader')).toBeInTheDocument();
  });
});