import { ThemeProvider } from '@wise/components-theming';

import { render, cleanup, screen } from '../test-utils';

import Loader from '.';

describe('Loader', () => {
  afterEach(cleanup);

  it('tests default state', () => {
    const { container } = render(<Loader />);
    expect(container.querySelectorAll('div.tw-loader--md')).toHaveLength(1);
    expect(container.querySelector('div[data-testid]')).toBeNull();
  });

  it('has data-testid prop', () => {
    const dataTestId = 'test-loader';
    render(<Loader data-testid={dataTestId} />);
    expect(screen.getByTestId(dataTestId)).toBeInTheDocument();
  });

  it('shows renders the next best size of loader when using a deprecated size on the new theme', () => {
    const { container, rerender } = render(
      <ThemeProvider theme="personal">
        <Loader {...{ small: true }} />
      </ThemeProvider>,
    );
    expect(container.querySelectorAll('div.tw-loader--sm')).toHaveLength(1);

    rerender(
      <ThemeProvider theme="personal">
        <Loader size="xs" />
      </ThemeProvider>,
    );
    expect(container.querySelectorAll('div.tw-loader--sm')).toHaveLength(1);

    rerender(
      <ThemeProvider theme="personal">
        <Loader size="lg" />
      </ThemeProvider>,
    );
    expect(container.querySelectorAll('div.tw-loader--md')).toHaveLength(1);

    rerender(
      <ThemeProvider theme="personal">
        <Loader size="xl" />
      </ThemeProvider>,
    );
    expect(container.querySelectorAll('div.tw-loader--md')).toHaveLength(1);
  });
});