lucid-ui
Version:
A UI component library from AppNexus.
155 lines • 6.41 kB
JavaScript
import _omit from "lodash/omit";
import sinon from 'sinon';
import React from 'react';
import assert from 'assert';
import { shallow } from 'enzyme';
import { common } from '../../util/generic-tests';
import { TabsDumb as Tabs } from './Tabs';
describe('Tabs', function () {
common(Tabs, {
exemptChildComponents: ['Tab', 'Title']
});
describe('props', function () {
it('Tab as children', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Tab, null, "Foo Content"), /*#__PURE__*/React.createElement(Tabs.Tab, null, "Two")));
assert.equal(wrapper.find('.lucid-Tabs-content').text(), 'Foo Content');
});
it('Tab as props', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tabs, {
Tab: [{
children: 'Bert'
}, {
children: 'Ernie'
}]
}));
assert.equal(wrapper.find('.lucid-Tabs-bar').children().length, 2);
assert.equal(wrapper.find('.lucid-Tabs-content').text(), 'Bert');
});
it('Tab as props with Title', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tabs, {
Tab: [{
Title: 'Coolest',
children: 'Bert'
}, {
Title: 'Not so cool',
children: 'Ernie'
}]
}));
var tabBar = wrapper.find('.lucid-Tabs-bar').shallow();
assert.equal(tabBar.children().length, 2);
assert.equal(tabBar.childAt(0).prop('Title'), 'Coolest');
assert(tabBar.childAt(0).prop('isSelected'));
assert.equal(wrapper.find('.lucid-Tabs-content').text(), 'Bert');
});
it('Title as props', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Tab, {
Title: "Froyo"
}, "Yolo fo sho"), /*#__PURE__*/React.createElement(Tabs.Tab, null, "Broyoyo")));
var tabBar = wrapper.find('.lucid-Tabs-bar').shallow();
assert.equal(tabBar.childAt(0).prop('Title'), 'Froyo');
});
it('Title as children', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Tab, null, /*#__PURE__*/React.createElement(Tabs.Title, null, "Froyo"), "Yolo fo sho"), /*#__PURE__*/React.createElement(Tabs.Tab, null, "Broyoyo")));
var tabBar = wrapper.find('.lucid-Tabs-bar').shallow();
assert.equal(tabBar.childAt(0).prop('Title'), 'Froyo');
});
it('selectedIndex', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tabs, {
selectedIndex: 1
}, /*#__PURE__*/React.createElement(Tabs.Tab, {
Title: "Lollipop"
}, "Yuck"), /*#__PURE__*/React.createElement(Tabs.Tab, {
Title: "Slurpee"
}, "Yum")));
var tabBar = wrapper.find('.lucid-Tabs-bar').shallow();
assert(!tabBar.childAt(0).prop('isSelected'));
assert(tabBar.childAt(1).prop('isSelected'));
});
it('Tab.isSelected', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Tab, {
Title: "Lollipop"
}, "Yuck"), /*#__PURE__*/React.createElement(Tabs.Tab, {
isSelected: true,
Title: "Slurpee"
}, "Yum")));
var tabBar = wrapper.find('.lucid-Tabs-bar').shallow();
assert(!tabBar.childAt(0).prop('isSelected'));
assert(tabBar.childAt(1).prop('isSelected'));
});
it('last Tab.isSelected beats selectedIndex', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tabs, {
selectedIndex: 0
}, /*#__PURE__*/React.createElement(Tabs.Tab, {
Title: "One"
}, "One content"), /*#__PURE__*/React.createElement(Tabs.Tab, {
isSelected: true,
Title: "Two"
}, "Two content"), /*#__PURE__*/React.createElement(Tabs.Tab, {
isSelected: true,
Title: "Three"
}, "Three content")));
var tabBar = wrapper.find('.lucid-Tabs-bar').shallow();
assert(!tabBar.childAt(0).prop('isSelected'));
assert(tabBar.childAt(1).prop('isSelected'));
assert(tabBar.childAt(2).prop('isSelected'));
});
describe('onSelect', function () {
var onSelect = sinon.spy();
var clickEvent;
var wrapper;
var tabBar;
beforeEach(function () {
onSelect.reset();
clickEvent = 'event';
wrapper = shallow( /*#__PURE__*/React.createElement(Tabs, {
onSelect: onSelect
}, /*#__PURE__*/React.createElement(Tabs.Tab, {
isDisabled: true
}, "One"), /*#__PURE__*/React.createElement(Tabs.Tab, null, "Two")));
tabBar = wrapper.find('.lucid-Tabs-bar').shallow();
});
it('should call onSelect with the correct arguments', function () {
tabBar.childAt(1).shallow().simulate('click', clickEvent);
var selectedIndex = onSelect.args[0][0];
var meta = onSelect.args[0][1];
assert(onSelect.called);
assert.equal(selectedIndex, 1);
assert.equal(meta.event, clickEvent);
assert.deepEqual(_omit(meta.props, 'onSelect'), {
isLastTab: true,
isOpen: true,
isProgressive: false,
isSelected: false,
Title: '',
children: 'Two',
index: 1
});
});
it('should not call onSelect if the `Tab` isDisabled', function () {
tabBar.childAt(0).shallow().simulate('click', clickEvent);
assert(!onSelect.called);
});
});
it('isOpen', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tabs, {
isOpen: false,
selectedIndex: 0
}, /*#__PURE__*/React.createElement(Tabs.Tab, {
Title: "Lollipop"
}, "Yuck"), /*#__PURE__*/React.createElement(Tabs.Tab, {
Title: "Slurpee"
}, "Yum")));
assert.equal(wrapper.find('.lucid-Tabs-Tab-is-active-and-open').length, 0);
});
it('hasFullWidthTabs', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tabs, {
hasFullWidthTabs: false
}, /*#__PURE__*/React.createElement(Tabs.Tab, {
Title: "Lollipop"
}, "Yuck"), /*#__PURE__*/React.createElement(Tabs.Tab, {
Title: "Slurpee"
}, "Yum")));
assert.equal(wrapper.find('.lucid-Tabs-variable-width').length, 1);
});
});
});