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

let pathname = '/nurse/earnings';

jest.mock('@/i18n/navigation', () => ({
  usePathname: () => pathname,
}));

import RouteFadeIn from './RouteFadeIn';

describe('<RouteFadeIn/> component', () => {
  beforeEach(() => {
    pathname = '/nurse/earnings';
  });

  it('renders its children', () => {
    render(
      <ThemeProvider>
        <RouteFadeIn>
          <span>content</span>
        </RouteFadeIn>
      </ThemeProvider>,
    );
    expect(screen.getByText('content')).toBeInTheDocument();
  });

  it('marks the wrapper with the shared fade-in animation hook', () => {
    render(
      <ThemeProvider>
        <RouteFadeIn>
          <span>content</span>
        </RouteFadeIn>
      </ThemeProvider>,
    );
    expect(screen.getByText('content').parentElement).toHaveAttribute('data-bal-route-fade');
  });

  it('remounts (and would replay the animation) when the route changes', () => {
    const { rerender } = render(
      <ThemeProvider>
        <RouteFadeIn>
          <span data-testid="marker">a</span>
        </RouteFadeIn>
      </ThemeProvider>,
    );
    const first = screen.getByTestId('marker');

    pathname = '/nurse/visits';
    rerender(
      <ThemeProvider>
        <RouteFadeIn>
          <span data-testid="marker">b</span>
        </RouteFadeIn>
      </ThemeProvider>,
    );
    expect(screen.getByTestId('marker')).not.toBe(first);
  });
});
