react-accessible-tabs/es/components/Panels.spec.js

Accessible React tabs component

import React from 'react';
import { describe, it } from 'mocha';
import { shallow } from 'enzyme';
import expect from 'expect';

import data from '../../tools/testData';
import Panels from './Panels';

describe('<Panels />', function () {
    it('renders nothing with no data', function () {
        var wrapper = shallow(React.createElement(Panels, { data: [] }));

        expect(wrapper.type()).toBe(null);
    });

    it('renders div.tabs__panels', function () {
        var wrapper = shallow(React.createElement(Panels, { data: data }));

        expect(wrapper.is('div.tabs__panels')).toBe(true);
    });

    it('contains 3 <Panel />s', function () {
        var wrapper = shallow(React.createElement(Panels, { data: data }));

        expect(wrapper.html().match(/<section.*?class="tabs__panel.*?role="tabpanel".*?<\/section>/g).length).toBe(3);
    });

    it('.tabs__panel 1\'s [id] is i0-Tab1', function () {
        var wrapper = shallow(React.createElement(Panels, { data: data }));
        var tabPanel = wrapper.html().match(/<section.*?class="tabs__panel.*?role="tabpanel".*?<\/section>/)[0];

        expect(tabPanel.indexOf('id="i0-Tab1"') > -1).toBe(true);
    });
});