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

import * as WidgetToolbar from 'src/main/components/WidgetToolbar';

describe('src/main/components/WidgetToolbar', () => {
  describe('WidgetToolbar', () => {
    it('allows passing an arbitrary class name', () => {
      // Given
      const component = shallow(
        <WidgetToolbar.WidgetToolbar className="test">
          <span>It works!</span>
        </WidgetToolbar.WidgetToolbar>
      );

      // Then
      expect(component.hasClass('test')).toBe(true);
    });

    it('renders a right-side toolbar', () => {
      // Given
      const component = shallow(
        <WidgetToolbar.WidgetToolbar right>
          <span>It works!</span>
        </WidgetToolbar.WidgetToolbar>
      );

      // Then
      expect(component.hasClass('left')).toBe(false);
      expect(component.hasClass('right')).toBe(true);
    });

    it('renders a left-side toolbar', () => {
      // Given
      const component = shallow(
        <WidgetToolbar.WidgetToolbar>
          <span>It works!</span>
        </WidgetToolbar.WidgetToolbar>
      );

      // Then
      expect(component.hasClass('left')).toBe(true);
      expect(component.hasClass('right')).toBe(false);
    });

    it('renders the children', () => {
      // Given
      const children = <span>It works!</span>;
      const component = shallow(
        <WidgetToolbar.WidgetToolbar right>
          {children}
        </WidgetToolbar.WidgetToolbar>
      );

      // Then
      expect(component.contains(children)).toBe(true);
    });
  });

  describe('WidgetToolbar.Item', () => {
    it('allows passing an arbitrary class name', () => {
      // Given
      const component = shallow(
        <WidgetToolbar.WidgetToolbar.Item className="test">
          <span>It works!</span>
        </WidgetToolbar.WidgetToolbar.Item>
      );

      // Then
      expect(component.hasClass('test')).toBe(true);
    });

    it('renders a danger item', () => {
      // Given
      const component = shallow(
        <WidgetToolbar.WidgetToolbar.Item danger>
          <span>It works!</span>
        </WidgetToolbar.WidgetToolbar.Item>
      );

      // Then
      expect(component.hasClass('danger')).toBe(true);
    });

    it('renders the children', () => {
      // Given
      const children = <span>It works!</span>;
      const component = shallow(
        <WidgetToolbar.WidgetToolbar.Item>
          {children}
        </WidgetToolbar.WidgetToolbar.Item>
      );

      // Then
      expect(component.contains(children)).toBe(true);
    });
  });
});