import { shallow } from 'enzyme';
import { Card, Nav } from 'reactstrap';
import { NavPillItem, NavPills } from '../../src/utils/NavPills';

describe('<NavPills />', () => {
  it.each([
    [ 'Foo' ],
    [ <span key="1">Hi!</span> ],
    [[ <NavPillItem key="1" to="" />, <span key="2">Hi!</span> ]],
  ])('throws error when any of the children is not a NavPillItem', (children) => {
    expect.assertions(1);

    try {
      shallow(<NavPills>{children}</NavPills>);
    } catch (e: any) {
      expect(e.message).toEqual('Only NavPillItem children are allowed inside NavPills.');
    }
  });

  it('renders provided items', () => {
    const wrapper = shallow(
      <NavPills>
        <NavPillItem to="1">1</NavPillItem>
        <NavPillItem to="2">2</NavPillItem>
        <NavPillItem to="3">3</NavPillItem>
      </NavPills>,
    );
    const card = wrapper.find(Card);
    const nav = wrapper.find(Nav);

    expect(card).toHaveLength(1);
    expect(card.prop('body')).toEqual(true);
    expect(nav).toHaveLength(1);
    expect(nav.prop('pills')).toEqual(true);
    expect(nav.prop('fill')).toEqual(true);
  });
});