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

var _Panel2 = _interopRequireDefault(_Panel);

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

(0, _mocha.describe)('<Panel />', function () {
    (0, _mocha.it)('renders section.tabs__panel[role="tabpanel"]', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Panel2.default, { children: _testData2.default[0].content }));

        (0, _expect2.default)(wrapper.is('section.tabs__panel[role="tabpanel"]')).toBe(true);
    });

    (0, _mocha.it)('section has correct aria states when selected', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Panel2.default, { index: 0, selectedIndex: 0 }));
        var section = wrapper.find('section');

        (0, _expect2.default)(!section.prop('aria-hidden') && section.prop('className').indexOf('is-hidden') === -1 && section.prop('tabIndex') === 0).toBe(true);
    });

    (0, _mocha.it)('section has correct aria states when un-selected', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Panel2.default, { index: 0, selectedIndex: 1 }));
        var section = wrapper.find('section');

        (0, _expect2.default)(section.prop('aria-hidden') && section.prop('className').indexOf('is-hidden') > -1 && section.prop('tabIndex') === -1).toBe(true);
    });

    (0, _mocha.it)('renders single React elements', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Panel2.default, { children: _testData2.default[0].content }));

        (0, _expect2.default)(wrapper.childAt(0).html()).toBe('<p>Tab 1 content</p>');
    });

    (0, _mocha.it)('renders single string elements', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Panel2.default, { children: _testData2.default[1].content }));

        (0, _expect2.default)(wrapper.childAt(0).html()).toBe('<div><p>Tab 2 content</p></div>');
    });

    (0, _mocha.it)('renders arrays of React and string elements', function () {
        var wrapper = (0, _enzyme.shallow)(_react2.default.createElement(_Panel2.default, { children: _testData2.default[2].content }));

        (0, _expect2.default)(wrapper.childAt(0).html() === '<p>Tab 3 content 1</p>' && wrapper.childAt(1).html() === '<div><p>Tab 3 content 2</p></div>').toBe(true);
    });
});