import { Breakpoint, Position } from '..';
import { mockMatchMedia, render, screen } from '../../test-utils';
import React, { forwardRef } from 'react';

import ResponsivePanel from './ResponsivePanel';

mockMatchMedia();

describe('ResponsivePanel', () => {
  const props = {
    arrow: true,
    children: 'content',
    open: true,
    position: Position.TOP,
    title: 'title',
    anchorRef: jest.fn(),
    onClose: jest.fn(),
  };
  afterEach(() => {
    jest.clearAllMocks();
  });

  let container;

  describe('on desktop', () => {
    it('renders Panel', async () => {
      render(
        <ResponsivePanel {...props} intialOpen>
          children
        </ResponsivePanel>,
      );

      expect(screen.getByRole('dialog')).not.toHaveAttribute('aria-modal');
    });
  });

  describe('on mobile', () => {
    beforeEach(() => {
      global.innerWidth = Breakpoint.SMALL - 1;
    });

    it('renders bottomSheet', async () => {
      render(
        <ResponsivePanel {...props} open>
          children
        </ResponsivePanel>,
      );

      expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal');
    });
  });
});
