import React from 'react';
import { mount, render } from 'enzyme';

import Tabs from '.';

describe('Tabs', () => {
  it('displays a set of tabbed content', () => {
    const node = render(
      <div>
        <Tabs>
          <div label="Gators">See ya later, alligator!</div>
          <div label="Crocs">After a while, crocodile!</div>
        </Tabs>
      </div>
    );

    expect(node.html()).toBe(
      '<div class="Tabs "><ol class="Tabs-list "><li class="Tabs-listItem Tabs-listItem_active">Gators</li><li class="Tabs-listItem">Crocs</li></ol>See ya later, alligator!</div>'
    );
  });

  it('should change the active tab when clicked', () => {
    const node = mount(
      <Tabs>
        <div label="Gators">See ya later, alligator!</div>
        <div label="Crocs">After a while, crocodile!</div>
      </Tabs>
    );

    node.find('li.Tabs-listItem').at(1).simulate('click');

    expect(node.find('li.Tabs-listItem').at(1).hasClass('Tabs-listItem_active')).toBe(true);
    expect(node.state().activeTab).toBe('Crocs');

    node.find('li.Tabs-listItem').at(0).simulate('click');

    expect(node.find('li.Tabs-listItem').at(0).hasClass('Tabs-listItem_active')).toBe(true);
    expect(node.find('li.Tabs-listItem').at(1).hasClass('Tabs-listItem_active')).toBe(false);
    expect(node.state().activeTab).toBe('Gators');
  });

  it('should fire an onClick event when the tab is changed', () => {
    const onClick = jest.fn();

    const node = mount(
      <Tabs onClick={onClick}>
        <div label="Gators">See ya later, alligator!</div>
        <div label="Crocs">After a while, crocodile!</div>
      </Tabs>
    );

    node.find('li.Tabs-listItem').at(1).simulate('click');

    expect(onClick).toHaveBeenCalled();
    expect(onClick.mock.calls[0][0]).toBe('Crocs');
  });
});
