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

import SideBar from '.';
import data from './local.json';

describe('SideBar', () => {
  const current = 'uip';
  const node = mount(<SideBar activeDoc={current} categories={data} />);
  const sections = node.find('SideBarSection');

  it('Renders lists for each sections.', () => {
    const expectation = data.length;
    expect(sections).toHaveLength(expectation);
    expect(sections.find('h3:first-child')).toHaveLength(expectation);
    expect(sections.find('h3 + SideBarList')).toHaveLength(expectation);
  });

  it('Styles the current active page item.', () => {
    const active = node.find('.active');
    expect(active).toHaveLength(1);
    expect(active.getDOMNode().href).toContain(current);
  });

  it('Displays deep lists for subpages.', () => {
    expect(sections.find('ul ul')).toHaveLength(1);
  });

  it('Opens external links in a new tab.', () => {
    expect(sections.find('li > a[target="_blank"]').text()).toBe('Road Map');
    expect(sections.find('li > a[target="_blank"]')).toHaveLength(1);
  });
});
