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

describe('<QueryStateGate/>', () => {
  const wrap = (ui: React.ReactNode) => render(<ThemeProvider>{ui}</ThemeProvider>);
  const base = {
    onRetry: jest.fn(),
    errorMessage: 'Failed',
    retryLabel: 'Retry',
    skeleton: <div>SKELETON</div>,
    empty: <div>EMPTY</div>,
  };

  it('renders the skeleton while loading, even if isError/isEmpty are also true', () => {
    wrap(
      <QueryStateGate {...base} isLoading isError isEmpty>
        <div>DATA</div>
      </QueryStateGate>,
    );
    expect(screen.getByText('SKELETON')).toBeInTheDocument();
  });

  it('renders the error state before checking isEmpty — an error is never an empty', () => {
    wrap(
      <QueryStateGate {...base} isLoading={false} isError isEmpty>
        <div>DATA</div>
      </QueryStateGate>,
    );
    expect(screen.getByText('Failed')).toBeInTheDocument();
    expect(screen.queryByText('EMPTY')).not.toBeInTheDocument();
  });

  it('renders empty when not loading/erroring but isEmpty', () => {
    wrap(
      <QueryStateGate {...base} isLoading={false} isError={false} isEmpty>
        <div>DATA</div>
      </QueryStateGate>,
    );
    expect(screen.getByText('EMPTY')).toBeInTheDocument();
  });

  it('renders children when data is present', () => {
    wrap(
      <QueryStateGate {...base} isLoading={false} isError={false} isEmpty={false}>
        <div>DATA</div>
      </QueryStateGate>,
    );
    expect(screen.getByText('DATA')).toBeInTheDocument();
  });
});
