react-accessible-tabs/es/components/Tab.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 Tab from './Tab';

describe('<Tab />', function () {
    it('renders li.tabs__tab-list-item[role="presentation"]', function () {
        var wrapper = shallow(React.createElement(Tab, null));

        expect(wrapper.is('li.tabs__tab-list-item[role="presentation"]')).toBe(true);
    });

    it('contains 1 a.tabs__trigger[role="tab"]', function () {
        var wrapper = shallow(React.createElement(Tab, null));

        expect(wrapper.find('a.tabs__trigger[role="tab"]').length).toBe(1);
    });

    it('a has correct content', function () {
        var wrapper = shallow(React.createElement(Tab, { label: data[0].label }));
        var a = wrapper.find('a');

        expect(a.text()).toBe('Tab 1');
    });

    it('a has correct aria states when selected', function () {
        var wrapper = shallow(React.createElement(Tab, { index: 0, selectedIndex: 0 }));
        var a = wrapper.find('a');

        expect(a.prop('aria-selected') && a.prop('className').indexOf('is-selected') > -1 && a.prop('tabIndex') === 0).toBe(true);
    });

    it('a has correct aria states when un-selected', function () {
        var wrapper = shallow(React.createElement(Tab, { index: 0, selectedIndex: 1 }));
        var a = wrapper.find('a');

        expect(!a.prop('aria-selected') && a.prop('className').indexOf('is-selected') === -1 && a.prop('tabIndex') === -1).toBe(true);
    });
});