// @flow
import React from 'react';
import { mountWrappedComponent, renderSnapshot } from '../../../../utils/tests';

import type { ExpanderProps } from './expander.proptypes';
import { Expander } from './index';

const DEFAULT_PROPS: ExpanderProps = {
  onToggle: () => {},
  headingComponent: <div>Show more</div>,
  children: <div>This is a child</div>,
  isOpen: false,
  headingComponentOpen: <div>Show less</div>,
  buttonStyles: {},
};

describe('Expander', () => {
  describe('snapshot', () => {
    it('matches the previous snapshot', () => {
      const expander = renderSnapshot(<Expander {...DEFAULT_PROPS} />);
      expect(expander).toMatchSnapshot();
    });
  });

  describe('children', () => {
    it('does not render children if it is not open', () => {
      const expander = mountWrappedComponent(<Expander {...DEFAULT_PROPS} />);

      expect(expander.contains(DEFAULT_PROPS.children)).toBe(false);
    });

    it('does render children if open', () => {
      const expander = mountWrappedComponent(
        <Expander {...DEFAULT_PROPS} isOpen />,
      );

      expect(expander.contains(DEFAULT_PROPS.children)).toBe(true);
    });
  });

  describe('heading', () => {
    it('renders a headingComponent by default', () => {
      const expander = mountWrappedComponent(<Expander {...DEFAULT_PROPS} />);

      expect(expander.contains(DEFAULT_PROPS.headingComponent)).toBe(true);
      const { headingComponentOpen } = DEFAULT_PROPS;
      if (headingComponentOpen) {
        expect(expander.contains(headingComponentOpen)).toBe(false);
      }
    });

    it('renders a headingComponentOpen if a headingComponentOpen is provided', () => {
      const expander = mountWrappedComponent(
        <Expander {...DEFAULT_PROPS} isOpen />,
      );

      expect(expander.contains(DEFAULT_PROPS.headingComponent)).toBe(false);
      const { headingComponentOpen } = DEFAULT_PROPS;
      if (headingComponentOpen) {
        expect(expander.contains(headingComponentOpen)).toBe(true);
      }
    });
  });
});
