import { shallow, mount } from 'enzyme';

import SlidingPanel, { EXIT_ANIMATION } from './SlidingPanel';

describe('SlidingPanel', () => {
  let component;
  const props = {
    open: true,
    position: 'left',
    children: null,
    className: undefined,
    slidingPanelPositionFixed: false,
    showSlidingPanelBorder: false,
    testId: undefined,
  };

  it('renders with right props', () => {
    component = mount(<SlidingPanel {...props} />);
    expect(component.find(SlidingPanel)).toHaveLength(1);
    expect(component.find(SlidingPanel).props()).toStrictEqual({ ...props });
  });

  it('renders CSSTransition with right props', () => {
    component = shallow(<SlidingPanel {...props} />);

    expect(cssTransition()).toHaveLength(1);

    expect(cssTransition().props()).toEqual({
      className: 'sliding-panel sliding-panel--open-left',
      children: null,
    });
  });

  it('adds fixed class', () => {
    component = shallow(<SlidingPanel {...props} slidingPanelPositionFixed />);
    expect(cssTransition().prop('className')).toBe(
      'sliding-panel sliding-panel--open-left sliding-panel--fixed',
    );
  });

  it('adds border classes if showSlidingPanelBorder is set to true', () => {
    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder />);
    expect(cssTransition().prop('className')).toBe(
      'sliding-panel sliding-panel--open-left sliding-panel--border-left',
    );
    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder={false} position="left" />);
    expect(cssTransition().prop('className')).toBe('sliding-panel sliding-panel--open-left');

    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder position="top" />);
    expect(cssTransition().prop('className')).toBe(
      'sliding-panel sliding-panel--open-top sliding-panel--border-top',
    );
  });

  const cssTransition = () => component.find('div');
});
