react-accessible-tabs/lib/components/Tabs.spec.js

Accessible React tabs component

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _mocha = require('mocha');

var _enzyme = require('enzyme');

var _expect = require('expect');

var _expect2 = _interopRequireDefault(_expect);

var _testData = require('../../tools/testData');

var _testData2 = _interopRequireDefault(_testData);

var _Tabs = require('./Tabs');

var _Tabs2 = _interopRequireDefault(_Tabs);

var _TabList = require('./TabList');

var _TabList2 = _interopRequireDefault(_TabList);

var _Panels = require('./Panels');

var _Panels2 = _interopRequireDefault(_Panels);

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

var noop = function noop() {
    return null;
};

(0, _mocha.describe)('<Tabs />', function () {
    (0, _mocha.it)('renders nothing with no data', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Tabs2.default, null));

        (0, _expect2.default)(wrapper.type()).toBe(null);
    });

    (0, _mocha.it)('renders div.tab with data', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Tabs2.default, { data: _testData2.default }));

        (0, _expect2.default)(wrapper.is('div.tabs')).toBe(true);
    });

    (0, _mocha.it)('contains <TabList /> and <Panels />', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Tabs2.default, { data: _testData2.default }));

        (0, _expect2.default)(wrapper.containsAllMatchingElements([_react2.default.createElement(_TabList2.default, null), _react2.default.createElement(_Panels2.default, null)])).toBe(true);
    });

    (0, _mocha.it)('selectedIndex should be set to what\'s supplied', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Tabs2.default, { data: _testData2.default, initialSelectedIndex: 1 }));

        (0, _expect2.default)(wrapper.state('selectedIndex')).toBe(1);
    });

    (0, _mocha.it)('when initialSelectedIndex < 0, selectedIndex should be 0', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Tabs2.default, { data: _testData2.default, initialSelectedIndex: -1 }));

        (0, _expect2.default)(wrapper.state('selectedIndex')).toBe(0);
    });

    (0, _mocha.it)('when initialSelectedIndex > data.length, selectedIndex should be 0', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Tabs2.default, { data: _testData2.default, initialSelectedIndex: 10 }));

        (0, _expect2.default)(wrapper.state('selectedIndex')).toBe(0);
    });

    (0, _mocha.it)('when prev key pressed & index === 0, selectedIndex should === 0', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Tabs2.default, { data: _testData2.default, initialSelectedIndex: 0 }));

        wrapper.at(0).children().at(0).simulate('keyDown', { preventDefault: noop, key: 'ArrowLeft' });
        (0, _expect2.default)(wrapper.state('selectedIndex')).toBe(0);
    });

    (0, _mocha.it)('when prev key pressed & index === data.length - 1, selectedIndex should === data.length - 2', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Tabs2.default, { data: _testData2.default, initialSelectedIndex: _testData2.default.length - 1 }));

        wrapper.at(0).children().at(0).simulate('keyDown', { preventDefault: noop, key: 'ArrowLeft' });
        (0, _expect2.default)(wrapper.state('selectedIndex')).toBe(_testData2.default.length - 2);
    });

    (0, _mocha.it)('when next key pressed & index === 0, selectedIndex should === 1', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Tabs2.default, { data: _testData2.default, initialSelectedIndex: 0 }));

        wrapper.at(0).children().at(0).simulate('keyDown', { preventDefault: noop, key: 'ArrowRight' });
        (0, _expect2.default)(wrapper.state('selectedIndex')).toBe(1);
    });

    (0, _mocha.it)('when next key pressed & index === data.length - 1, selectedIndex should === data.length - 1', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Tabs2.default, { data: _testData2.default, initialSelectedIndex: _testData2.default.length - 1 }));

        wrapper.at(0).children().at(0).simulate('keyDown', { preventDefault: noop, key: 'ArrowRight' });
        (0, _expect2.default)(wrapper.state('selectedIndex')).toBe(_testData2.default.length - 1);
    });
});