react-accessible-tabs/lib/components/TabList.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 _TabList = require('./TabList');

var _TabList2 = _interopRequireDefault(_TabList);

var _Tab = require('./Tab');

var _Tab2 = _interopRequireDefault(_Tab);

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

(0, _mocha.describe)('<TabList />', function () {
    (0, _mocha.it)('renders nothing with no data', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_TabList2.default, { data: [] }));

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

    (0, _mocha.it)('renders ul.tabs__tab-list[role="tablist"]', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_TabList2.default, { data: _testData2.default }));

        (0, _expect2.default)(wrapper.is('ul.tabs__tab-list[role="tablist"]')).toBe(true);
    });

    (0, _mocha.it)('contains <Tab /> component', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_TabList2.default, { data: _testData2.default }));

        (0, _expect2.default)(wrapper.containsMatchingElement(_react2.default.createElement(_Tab2.default, null))).toBe(true);
    });

    (0, _mocha.it)('contains 3 <Tab />s', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_TabList2.default, { data: _testData2.default }));

        (0, _expect2.default)(wrapper.html().match(/<li class="tabs__tab-list-item".*?><\/li>/g).length).toBe(3);
    });

    (0, _mocha.it)('.tabs__tab-list-item 1\'s [aria-controls] & [href] is i0-Tab1', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_TabList2.default, { data: _testData2.default }));
        var tabListItem = wrapper.html().match(/<li class="tabs__tab-list-item".*?><\/li>/)[0];

        (0, _expect2.default)(tabListItem.indexOf('aria-controls="i0-Tab1"') > -1 && tabListItem.indexOf('href="#i0-Tab1"') > -1).toBe(true);
    });
});