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

jest.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
}));

import EscrowExplainer from './EscrowExplainer';

describe('<EscrowExplainer/> component', () => {
  it('always renders the mandated EscrowNotice', () => {
    render(
      <ThemeProvider>
        <EscrowExplainer />
      </ThemeProvider>,
    );
    expect(screen.getByTestId('escrow-notice')).toBeInTheDocument();
  });

  it('the 3-step explainer is collapsed by default and expands on toggle', async () => {
    const user = userEvent.setup();
    render(
      <ThemeProvider>
        <EscrowExplainer />
      </ThemeProvider>,
    );
    expect(screen.getByText('escrow_step_pay')).not.toBeVisible();

    await user.click(screen.getByRole('button', { name: 'escrow_explainer_toggle' }));
    expect(screen.getByText('escrow_step_pay')).toBeVisible();
    expect(screen.getByText('escrow_step_hold')).toBeVisible();
    expect(screen.getByText('escrow_step_release')).toBeVisible();
    expect(screen.getByText('escrow_cancellation_note')).toBeVisible();
  });
});