/* eslint-disable testing-library/no-container */
import { mockMatchMedia, mockResizeObserver, render, screen } from '../../test-utils';
import { resetLiveRegionAnnouncementQueue } from '../../common/liveRegion/LiveRegion';
import { CriticalBanner, CriticalBannerProps } from './CriticalBanner';

mockMatchMedia();
mockResizeObserver();

describe('CriticalBanner', () => {
  const defaultProps: CriticalBannerProps = {
    description: 'Please verify your identity to continue using all features.',
  };

  beforeEach(() => {
    resetLiveRegionAnnouncementQueue();
  });

  it('applies mobile overhang classes by default', () => {
    const { container } = render(
      <CriticalBanner {...defaultProps} data-testid="critical-banner" />,
    );

    expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
    expect(container.querySelector('.wds-critical-banner-overhang')).toBeInTheDocument();
    expect(container.querySelector('.wds-critical-banner-overhang-query')).toBeInTheDocument();
  });

  it('wraps the banner in the css entry animation structure', () => {
    const { container } = render(
      <CriticalBanner {...defaultProps} data-testid="critical-banner" />,
    );

    expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
    expect(container.querySelector('.wds-critical-banner__entry-mask')).toBeInTheDocument();
    expect(container.querySelector('.wds-critical-banner__entry-track')).toBeInTheDocument();
  });
});
