import React from 'react';

import Transition from '../../components/Transition';
import { shallow } from '../enzyme';

describe('Transition', () => {
  it('should be defined', () => {
    expect(Transition).toBeDefined();
  });

  it('should render correctly', () => {
    const tree = shallow(
      <Transition in={true} timeout={500} animation="slide-in-bottom">
        <div>test</div>
      </Transition>
    );
    expect(tree).toMatchSnapshot();
  });

  it('should update classname', () => {
    const tree = shallow(
      <Transition
        in={true}
        classNames="myclass"
        timeout={500}
        animation="slide-in-bottom"
      >
        <div>test</div>
      </Transition>
    );
    expect(tree.find('div').text()).toContain('test');
    expect(tree.find('div').length).toBe(1);
    expect(tree.find('CSSTransition').hasClass('slide-in-bottom')).toEqual(
      false
    );
  });

  it('used as wrapper', () => {
    const tree = shallow(
      <Transition
        in={true}
        wrapper={true}
        timeout={500}
        animation="slide-in-bottom"
      >
        <div>test</div>
      </Transition>
    );
    expect(tree.find('div').length).toBe(2);
  });
});