// @flow
import React, { type Node } from 'react';
import {
  mountWrappedComponent,
  renderSnapshot,
  itIsAccessible,
} 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', () => {
    let expectedChildren: Node;

    beforeEach(() => {
      expect(DEFAULT_PROPS.children).toBeDefined();
      if (DEFAULT_PROPS.children != null) {
        expectedChildren = DEFAULT_PROPS.children;
      }
    });

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

      expect(expander.contains(expectedChildren)).toBe(false);
    });

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

      expect(expander.contains(expectedChildren)).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);
      }
    });
  });

  itIsAccessible(
    <div>
      <Expander {...DEFAULT_PROPS} isOpen />
    </div>,
  );
});
