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

describe('<AppLoading/>', () => {
  it('renders a status region with the brand mark', () => {
    const { container } = render(
      <ThemeProvider>
        <AppLoading />
      </ThemeProvider>,
    );
    expect(container.querySelector('[role="status"]')).toBeInTheDocument();
    expect(container.querySelector('[data-icon="logo"]')).toBeInTheDocument();
  });

  it('forwards sx overrides to the root', () => {
    const { container } = render(
      <ThemeProvider>
        <AppLoading data-testid="loading-root" />
      </ThemeProvider>,
    );
    expect(container.querySelector('[data-testid="loading-root"]')).toBeInTheDocument();
  });
});