"use strict";

var _react = _interopRequireDefault(require("react"));

var R = _interopRequireWildcard(require("ramda"));

var _enzyme = _interopRequireWildcard(require("enzyme"));

var _ = require("../");

var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_enzyme.default.configure({
  adapter: new _enzymeAdapterReact.default()
});

describe('TabLayout', function () {
  var el = document.createElement('div');
  document.body.appendChild(el);
  var options = {
    attachTo: el
  };
  describe('functionaltesty', function () {
    test('should render', function () {
      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, null));
      expect(wrapper.find(_.TabLayout).length).toEqual(1);
    });
    test('should render tab header', function () {
      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, null));
      expect(wrapper.find('.vs-tab-header').length).toEqual(1);
    });
    test('should render child tabs', function () {
      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, {
        tabLayoutId: 'tabLayout1'
      }, _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab1"),
        content: _react.default.createElement("div", null, "Tab Content 1")
      }), _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab2"),
        content: _react.default.createElement("div", null, "Tab Content 2")
      }), _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab3"),
        content: _react.default.createElement("div", null, "Tab Content 3")
      })));
      expect(wrapper.find(_.TabLayout).length).toEqual(1);
      expect(wrapper.find('.vs-tab-label').length).toEqual(3);
      expect(R.map(function (label) {
        return label.text();
      }, wrapper.find('.vs-tab-label'))).toEqual(['Tab1', 'Tab2', 'Tab3']);
      expect(wrapper.find('.vs-tab-body').children().length).toEqual(3);
      expect(R.map(function (content) {
        return content.text();
      }, wrapper.find('.vs-tab-body').children())).toEqual(['Tab Content 1', 'Tab Content 2', 'Tab Content 3']);
    });
    test('should only show content for selected tab', function () {
      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, {
        tabLayoutId: 'tabLayout1',
        selectedIndex: 0
      }, _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab1"),
        content: _react.default.createElement("div", null, "Tab Content 1")
      }), _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab2"),
        content: _react.default.createElement("div", null, "Tab Content 2")
      }), _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab3"),
        content: _react.default.createElement("div", null, "Tab Content 3")
      })));
      expect(R.map(function (content) {
        return content.props().hidden;
      }, wrapper.find('.vs-tab-body').children())).toEqual([false, true, true]);
    });
    test('should call selectTab when tab clicked', function () {
      var clicks = 0;
      var clicksIndex = [];

      var mockSelectTab = function mockSelectTab(event, index) {
        clicks += 1;
        clicksIndex = R.concat(clicksIndex, [index]);
      };

      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, {
        tabLayoutId: 'tabLayout1',
        selectedIndex: 0,
        selectTab: mockSelectTab
      }, _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab"),
        content: _react.default.createElement("div", null, "Tab Content")
      })));
      var tabLabel = wrapper.find('.vs-tab-label').at(0);
      tabLabel.simulate('click');
      expect(clicks).toEqual(1);
      expect(clicksIndex.length).toEqual(1);
      expect(clicksIndex[0]).toEqual(0);
    });
    test('should not call selectTab if tab is disabled', function () {
      var clicks = 0;
      var clicksIndex = [];

      var mockSelectTab = function mockSelectTab(event, index) {
        clicks += 1;
        clicksIndex = R.concat(clicksIndex, index);
      };

      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, {
        tabLayoutId: 'tabLayout1',
        selectedIndex: 0,
        selectTab: mockSelectTab
      }, _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab"),
        content: _react.default.createElement("div", null, "Tab Content"),
        disabled: true
      })));
      var tabLabel = wrapper.find('.vs-tab-label').at(0);
      tabLabel.simulate('click');
      expect(clicks).toEqual(0);
      expect(clicksIndex.length).toEqual(0);
    });
    test('should call onTabClick when tab clicked and function exists', function () {
      var clicks = 0;

      var mockOnTabClick = function mockOnTabClick() {
        clicks += 1;
      };

      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, {
        tabLayoutId: 'tabLayout1',
        selectedIndex: 0,
        onTabClick: mockOnTabClick,
        selectTab: function selectTab() {}
      }, _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab"),
        content: _react.default.createElement("div", null, "Tab Content")
      })));
      var tabLabel = wrapper.find('.vs-tab-label').at(0);
      tabLabel.simulate('click');
      expect(clicks).toEqual(1);
    });
    test('should not call onTabClick if tab disabled', function () {
      var clicks = 0;

      var mockOnTabClick = function mockOnTabClick() {
        clicks += 1;
      };

      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, {
        tabLayoutId: 'tabLayout1',
        selectedIndex: 0,
        onTabClick: mockOnTabClick,
        selectTab: function selectTab() {}
      }, _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab"),
        content: _react.default.createElement("div", null, "Tab Content"),
        disabled: true
      })));
      var tabLabel = wrapper.find('.vs-tab-label').at(0);
      tabLabel.simulate('click');
      expect(clicks).toEqual(0);
    });
  });
  describe('styling', function () {
    test('should render tab underline with theme color when tab selected', function () {
      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, {
        tabLayoutId: 'tabLayout1',
        selectedIndex: 0
      }, _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab1"),
        content: _react.default.createElement("div", null, "Tab Content 1")
      }), _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab2"),
        content: _react.default.createElement("div", null, "Tab Content 2")
      })));
      var tabLabelClicked = wrapper.find('.vs-tab-label.vs-tab-label-clicked');
      var tabLabelContent = tabLabelClicked.at(0);
      var tabLabelContentWrapper = tabLabelContent.children().at(0);
      expect(tabLabelContentWrapper.props().style).toEqual({
        borderBottom: '4px solid #49c5b1'
      });
      var tabLabelInactive = wrapper.find('.vs-tab-label');
      var tabLabelContentInactive = tabLabelInactive.at(1);
      var tabLabelContentWrapperInactive = tabLabelContentInactive.children().at(0);
      expect(tabLabelContentWrapperInactive.props().style).toEqual({});
    });
    test('should highlight text on hover', function () {
      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, {
        tabLayoutId: 'tabLayout1',
        selectedIndex: 0
      }, _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab1"),
        content: _react.default.createElement("div", null, "Tab Content 1")
      }), _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab2"),
        content: _react.default.createElement("div", null, "Tab Content 2")
      })));
      var tabLabels = wrapper.find('.vs-tab-label');
      var tabLabelInactive = tabLabels.at(1);
      tabLabelInactive = tabLabelInactive.simulate('mouseover');
      tabLabelInactive.update();
      expect(wrapper.find('.vs-tab-label').at(1).props().style).toEqual({
        color: '#49c5b1',
        cursor: 'pointer'
      });
      tabLabelInactive.simulate('mouseleave');
      expect(tabLabelInactive.props().style).toEqual({
        color: '#888'
      });
    });
    test('should take custom accent color', function () {
      var themeColor = 'grey';
      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, {
        tabLayoutId: 'tabLayout1',
        selectedIndex: 0,
        themeColor: themeColor
      }, _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab1"),
        content: _react.default.createElement("div", null, "Tab Content 1")
      }), _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab2"),
        content: _react.default.createElement("div", null, "Tab Content 2")
      })));
      var tabLabelInactive = wrapper.find('.vs-tab-label').at(1);
      tabLabelInactive.simulate('mouseOver');
      expect(wrapper.find('.vs-tab-label').at(1).props().style).toEqual({
        color: themeColor,
        cursor: 'pointer'
      });
    });
    test('should not apply hover styling on selected tab', function () {
      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, {
        tabLayoutId: 'tabLayout1',
        selectedIndex: 0
      }, _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab1"),
        content: _react.default.createElement("div", null, "Tab Content 1")
      }), _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab2"),
        content: _react.default.createElement("div", null, "Tab Content 2")
      })));
      var tabLabels = wrapper.find('.vs-tab-label');
      var tabLabelInactive = tabLabels.at(0);
      tabLabelInactive.simulate('mouseOver');
      expect(tabLabelInactive.props().style).toEqual({});
    });
    test('should apply disabled class to disabled tab', function () {
      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, {
        tabLayoutId: 'tabLayout1',
        selectedIndex: 0
      }, _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab1"),
        content: _react.default.createElement("div", null, "Tab Content 1"),
        disabled: true
      })));
      var tabLabels = wrapper.find('.vs-tab-label.vs-tab-label-disabled');
      expect(tabLabels.length).toEqual(1);
    });
    test('should apply styles for floating header', function () {
      var headerHeight = '10px';
      var headerWidth = '100px';
      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.TabLayout, {
        tabLayoutId: 'tabLayout1',
        selectedIndex: 0,
        floatingHeader: true,
        headerHeight: headerHeight,
        headerWidth: headerWidth
      }, _react.default.createElement(_.Tab, {
        label: _react.default.createElement("div", null, "Tab1"),
        content: _react.default.createElement("div", null, "Tab Content 1"),
        disabled: true
      })));
      var floatingHeader = wrapper.find('.vs-tab-header.vs-tab-header-floating');
      var tabBody = wrapper.find('.vs-tab-body');
      expect(floatingHeader.length).toEqual(1);
      expect(floatingHeader.at(0).props().style.width).toEqual(headerWidth);
      expect(tabBody.at(0).props().style.paddingTop).toEqual(headerHeight);
    });
  });
});