2016-03-28 18:29:25 +03:00
|
|
|
import expect from 'expect';
|
|
|
|
import utils from '../../utils/testing';
|
|
|
|
import ReactTestUtils from 'react-addons-test-utils';
|
|
|
|
|
|
|
|
import React, { Component } from 'react';
|
2016-08-12 05:55:45 +03:00
|
|
|
import ReactDOM from 'react-dom';
|
2016-03-28 18:29:25 +03:00
|
|
|
|
2016-08-12 05:55:45 +03:00
|
|
|
import Tabs, { Tabs as RawTabs } from '../Tabs';
|
2016-03-28 18:29:25 +03:00
|
|
|
import Tab from '../Tab';
|
|
|
|
import TabContent from '../TabContent';
|
2017-01-05 04:42:18 +03:00
|
|
|
import theme from '../theme.css';
|
2016-08-12 05:55:45 +03:00
|
|
|
|
2016-08-12 06:31:08 +03:00
|
|
|
const getRenderedClassName = (tree, TargetComponent) => {
|
|
|
|
const rendered = ReactTestUtils.findRenderedComponentWithType(tree, TargetComponent);
|
2016-08-12 05:55:45 +03:00
|
|
|
return ReactDOM.findDOMNode(rendered).getAttribute('class');
|
|
|
|
};
|
2016-03-28 18:29:25 +03:00
|
|
|
|
|
|
|
describe('Tabs', function () {
|
|
|
|
let tabContents, composition;
|
|
|
|
|
2016-08-30 23:08:22 +03:00
|
|
|
class Composition extends Component {
|
|
|
|
constructor () {
|
|
|
|
super();
|
|
|
|
this.state = { index: 0 };
|
2016-03-28 18:29:25 +03:00
|
|
|
}
|
|
|
|
|
2016-08-30 23:08:22 +03:00
|
|
|
render () {
|
|
|
|
return (
|
|
|
|
<Tabs index={this.state.index} {...this.props}>
|
|
|
|
<Tab label="tab1">tab1</Tab>
|
|
|
|
<Tab label="tab2">tab2</Tab>
|
|
|
|
</Tabs>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
it('defaults to only rendering the current tab', function () {
|
2016-03-28 18:29:25 +03:00
|
|
|
// initial render
|
|
|
|
composition = utils.renderComponent(Composition);
|
|
|
|
|
|
|
|
tabContents = ReactTestUtils
|
|
|
|
.scryRenderedComponentsWithType(composition, TabContent);
|
|
|
|
|
|
|
|
expect(tabContents.length).toEqual(1);
|
|
|
|
expect(tabContents[0].props.tabIndex).toEqual(0);
|
|
|
|
|
|
|
|
// after tab change
|
|
|
|
composition.setState({ index: 1 });
|
|
|
|
composition.forceUpdate();
|
|
|
|
|
|
|
|
tabContents = ReactTestUtils
|
|
|
|
.scryRenderedComponentsWithType(composition, TabContent);
|
|
|
|
|
|
|
|
expect(tabContents.length).toEqual(1);
|
|
|
|
expect(tabContents[0].props.tabIndex).toEqual(1);
|
|
|
|
});
|
|
|
|
|
2016-08-30 23:08:22 +03:00
|
|
|
it('renders inactive tabs when hideMode is set to display', function () {
|
|
|
|
// initial render
|
|
|
|
composition = utils.renderComponent(Composition, { hideMode: 'display' });
|
|
|
|
|
|
|
|
tabContents = ReactTestUtils
|
|
|
|
.scryRenderedComponentsWithType(composition, TabContent);
|
|
|
|
|
|
|
|
expect(tabContents.length).toEqual(2);
|
|
|
|
|
|
|
|
let tabOne = tabContents.find((tab) => (tab.props.children === 'tab1'));
|
|
|
|
let tabTwo = tabContents.find((tab) => (tab.props.children === 'tab2'));
|
|
|
|
|
|
|
|
expect(tabOne.props.hidden).toEqual(false);
|
|
|
|
expect(tabTwo.props.hidden).toEqual(true);
|
|
|
|
|
|
|
|
// after tab change
|
|
|
|
composition.setState({ index: 1 });
|
|
|
|
composition.forceUpdate();
|
|
|
|
|
|
|
|
tabContents = ReactTestUtils
|
|
|
|
.scryRenderedComponentsWithType(composition, TabContent);
|
|
|
|
|
|
|
|
expect(tabContents.length).toEqual(2);
|
|
|
|
|
|
|
|
tabOne = tabContents.find((tab) => (tab.props.children === 'tab1'));
|
|
|
|
tabTwo = tabContents.find((tab) => (tab.props.children === 'tab2'));
|
|
|
|
|
|
|
|
expect(tabOne.props.hidden).toEqual(true);
|
|
|
|
expect(tabTwo.props.hidden).toEqual(false);
|
|
|
|
});
|
|
|
|
|
2016-08-12 06:31:08 +03:00
|
|
|
describe('#render', function () {
|
|
|
|
it('does not use fixed by default', function () {
|
2016-08-12 05:55:45 +03:00
|
|
|
const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
|
|
|
|
const className = getRenderedClassName(tree, RawTabs);
|
|
|
|
expect(className).toNotContain(theme.fixed);
|
|
|
|
});
|
|
|
|
|
2016-08-12 06:31:08 +03:00
|
|
|
it('uses fixed when set', function () {
|
2016-08-12 05:55:45 +03:00
|
|
|
const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} fixed />);
|
|
|
|
const className = getRenderedClassName(tree, RawTabs);
|
|
|
|
expect(className).toContain(theme.fixed);
|
|
|
|
});
|
|
|
|
|
2016-08-12 06:31:08 +03:00
|
|
|
it('does not use inverse by default', function () {
|
2016-08-12 05:55:45 +03:00
|
|
|
const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
|
|
|
|
const className = getRenderedClassName(tree, RawTabs);
|
|
|
|
expect(className).toNotContain(theme.inverse);
|
|
|
|
});
|
|
|
|
|
2016-08-12 06:31:08 +03:00
|
|
|
it('uses inverse when set', function () {
|
2016-08-12 05:55:45 +03:00
|
|
|
const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} inverse />);
|
|
|
|
const className = getRenderedClassName(tree, RawTabs);
|
|
|
|
expect(className).toContain(theme.inverse);
|
|
|
|
});
|
|
|
|
});
|
2016-03-28 18:29:25 +03:00
|
|
|
});
|