it('renders custom menu', () => {
const instance = ReactTestUtils.renderIntoDocument(
<Dropdown title='Single child' id='test-id'>
<Dropdown.Toggle>Child Text</Dropdown.Toggle>
<CustomMenu bsRole='menu'>
<MenuItem>Item 1</MenuItem>
</CustomMenu>
</Dropdown>
);
ReactTestUtils.scryRenderedComponentsWithType(instance, DropdownMenu).length.should.equal(0);
ReactTestUtils.scryRenderedComponentsWithType(instance, CustomMenu).length.should.equal(1);
});
it('Should have children with the correct DOM properties', () => {
let instance = ReactTestUtils.renderIntoDocument(
<Tabs activeKey={1}>
<Tab title="Tab 1" className="custom" id="pane0id" eventKey={1}>Tab 1 content</Tab>
<Tab title="Tab 2" tabClassName="tcustom" eventKey={2}>Tab 2 content</Tab>
</Tabs>
);
let panes = ReactTestUtils.scryRenderedComponentsWithType(instance, Tab);
let navs = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
assert.ok(ReactDOM.findDOMNode(panes[0]).className.match(/\bcustom\b/));
assert.ok(ReactDOM.findDOMNode(navs[1]).className.match(/\btcustom\b/));
assert.equal(ReactDOM.findDOMNode(panes[0]).id, 'pane0id');
});
it('renders grid elements', () => {
const cols = ReactTestUtils.scryRenderedComponentsWithType(
instance, Col
);
expect(cols).to.have.length(2);
});
it('Should render menu correctly', function () {
let Parent = React.createClass({
render: function(){
return (
<DropdownMenu>
<MenuItem eventKey="1" ref="item1">MenuItem 1 content</MenuItem>
<MenuItem eventKey="2" ref="item2">MenuItem 2 content</MenuItem>
</DropdownMenu>
);
}
});
let instance = ReactTestUtils.renderIntoDocument(<Parent/>);
let node = instance.getDOMNode();
assert.ok(node.className.match(/\bdropdown-menu\b/));
assert.equal(node.nodeName, 'UL');
assert.equal(node.getAttribute('role'), 'menu');
let allMenuItems = ReactTestUtils.scryRenderedComponentsWithType(instance, MenuItem);
assert.equal(allMenuItems.length, 2);
assert.equal(allMenuItems[0], instance.refs.item1);
assert.equal(allMenuItems[1], instance.refs.item2);
});
it('doesn\'t render grid elements', () => {
const cols = ReactTestUtils.scryRenderedComponentsWithType(
instance, Col
);
expect(cols).to.be.empty;
});
it('only the active tab should be focusable', () => {
let tabs = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
expect(ReactDOM.findDOMNode(tabs[0]).firstChild.getAttribute('tabindex')).to.equal('0');
expect(ReactDOM.findDOMNode(tabs[1]).firstChild.getAttribute('tabindex')).to.equal('-1');
expect(ReactDOM.findDOMNode(tabs[2]).firstChild.getAttribute('tabindex')).to.equal('-1');
});
it('Should add aria-selected to the nav item for the selected tab', () => {
let tabs = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
let link1 = ReactTestUtils.findRenderedDOMComponentWithTag(tabs[0], 'a');
let link2 = ReactTestUtils.findRenderedDOMComponentWithTag(tabs[1], 'a');
assert.equal(link1.getAttribute('aria-selected'), 'false');
assert.equal(link2.getAttribute('aria-selected'), 'true');
});
it('allows getting a reference to rendered item by index', () => {
render();
var item0 = component.getItemByIndex(0);
var item1 = component.getItemByIndex(1);
var items = ReactTestUtils.scryRenderedComponentsWithType(component, RepeatingFieldset.Item);
assert.equal(item0, items[0]);
assert.equal(item1, items[1]);
});
it('only renders one menu', function() {
const instance = ReactTestUtils.renderIntoDocument(
<Dropdown title='Single child' id='test-id'>
<Dropdown.Toggle>Child Text</Dropdown.Toggle>
<CustomMenu bsRole='menu'>
<MenuItem>Item 1</MenuItem>
</CustomMenu>
<DropdownMenu>
<MenuItem>Item 1</MenuItem>
</DropdownMenu>
</Dropdown>
);
ReactTestUtils.scryRenderedComponentsWithType(instance, DropdownMenu).length.should.equal(0);
ReactTestUtils.scryRenderedComponentsWithType(instance, CustomMenu).length.should.equal(1);
shouldWarn(/Duplicate children.*bsRole: menu/);
});
it('should not open the menu when other button is clicked', function() {
const instance = ReactTestUtils.renderIntoDocument(simple);
const buttonNode = React.findDOMNode(ReactTestUtils.scryRenderedComponentsWithType(instance, Button)[0]);
const splitButtonNode = React.findDOMNode(instance);
splitButtonNode.className.should.not.match(/open/);
ReactTestUtils.Simulate.click(buttonNode);
splitButtonNode.className.should.not.match(/open/);
});
beforeEach(function() {
app = TestUtils.renderIntoDocument(<App />);
form = app.refs.form;
fields = {};
inputs = {};
TestUtils.scryRenderedComponentsWithType(form, Field).forEach(function(field) {
fields[field.value().name] = field;
inputs[field.value().name] = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
});
});
it('should invoke onClick when SplitButton.Button is clicked (prop)', function(done) {
const instance = ReactTestUtils.renderIntoDocument(
<SplitButton title='Title' id='test-id' onClick={ () => done() }>
<MenuItem>Item 1</MenuItem>
</SplitButton>
);
const buttonNode = React.findDOMNode(ReactTestUtils.scryRenderedComponentsWithType(instance, Button)[0]);
ReactTestUtils.Simulate.click(buttonNode);
});
it('Should support a single "ListGroupItem" child', () => {
let instance = ReactTestUtils.renderIntoDocument(
<ListGroup>
<ListGroupItem>Only Child</ListGroupItem>
</ListGroup>
);
let items = ReactTestUtils.scryRenderedComponentsWithType(instance, ListGroupItem);
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(items[0], 'list-group-item'));
});
it('should not set onSelect to child with no onSelect prop', function () {
instance = ReactTestUtils.renderIntoDocument(
<DropdownButton title="Title">
<MenuItem eventKey={1}>MenuItem 1 content</MenuItem>
<MenuItem eventKey={2}>MenuItem 2 content</MenuItem>
</DropdownButton>
);
let menuItems = ReactTestUtils.scryRenderedComponentsWithType(instance, MenuItem);
assert.notOk(menuItems[0].props.onSelect);
});
function render(props) {
onChange = sinon.spy();
onUpdate = sinon.spy();
props = merge(props, {schema: <TestSchema />, onChange, onUpdate});
form = TestUtils.renderIntoDocument(Form(props));
fields = {};
boxes = TestUtils.scryRenderedDOMComponentsWithTag(form, 'input');
TestUtils.scryRenderedComponentsWithType(form, Field).forEach(function(field) {
fields[field.value().name] = field;
});
}
it('Should set navItem prop on passed in buttons', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Nav bsStyle="pills" activeHref="#item2">
<Button eventKey={1}>Button 1 content</Button>
<NavItem eventKey={2} href="#item2">Pill 2 content</NavItem>
</Nav>
);
let items = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
assert.ok(items[0].props.navItem);
});
it('Should render menu correctly', function () {
instance = ReactTestUtils.renderIntoDocument(
<DropdownButton title="Title">
<MenuItem eventKey="1">MenuItem 1 content</MenuItem>
<MenuItem eventKey="2">MenuItem 2 content</MenuItem>
</DropdownButton>
);
let menu = ReactTestUtils.findRenderedComponentWithType(instance, DropdownMenu);
let allMenuItems = ReactTestUtils.scryRenderedComponentsWithType(menu, MenuItem);
assert.equal(allMenuItems.length, 2);
});
it('should render the comments', function (){
var nowStamp = Math.floor(Date.now() / 1000);
var comments = [
{'author': 'Santiago', 'msg': 'Msg 1', id: 1, 'timestamp': nowStamp},
{'author': 'Pablo', 'msg': 'Msg 2', id: 2, 'timestamp': nowStamp-3600},
{'author': 'Sergio', 'msg': 'Msg 3', id: 3, 'timestamp': nowStamp-86400},
{'author': 'Anuk', 'msg': 'Msg 4', id: 4, 'timestamp': nowStamp-604800}
];
component = TestUtils.renderIntoDocument(<CommentList data={comments}/>);
var result = TestUtils.scryRenderedComponentsWithType(component, CommentModel);
expect(result.length).toBe(4);
});
it('Should support a single "ListGroupItem" child contained in an array', () => {
let child = [<ListGroupItem key={42}>Only Child in array</ListGroupItem>];
let instance = ReactTestUtils.renderIntoDocument(
<ListGroup>
{child}
</ListGroup>
);
let items = ReactTestUtils.scryRenderedComponentsWithType(instance, ListGroupItem);
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(items[0], 'list-group-item'));
});
it('should focus the next tab on arrow key', () => {
let tabs = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
let firstAnchor = ReactDOM.findDOMNode(tabs[0]).firstChild;
let lastAnchor = ReactDOM.findDOMNode(tabs[2]).firstChild; // skip disabled
firstAnchor.focus();
ReactTestUtils.Simulate.keyDown(firstAnchor, { keyCode: keycode('right') });
expect(instance.getActiveKey() === 2);
expect(document.activeElement).to.equal(lastAnchor);
});
it('should call onSort when headerRender triggers sort', () => {
// arrange
spyOn(testProps, 'onSort');
headerRow = TestUtils.renderIntoDocument(<HeaderRow {...testProps} sortColumn={testProps.columns[sortableColIdx].key} sortDirection={'ASC'} />);
let headerCells = TestUtils.scryRenderedComponentsWithType(headerRow, HeaderCellStub);
let sortableHeaderRenderer = headerCells[sortableColIdx].props.renderer;
// act
sortableHeaderRenderer.props.onSort('title', 'DESC');
// assert
expect(testProps.onSort).toHaveBeenCalled();
expect(testProps.onSort.mostRecentCall.args[0]).toEqual('title');
expect(testProps.onSort.mostRecentCall.args[1]).toEqual('DESC');
});
it('Should set the correct item active by href', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Nav bsStyle="pills" activeHref="#item2">
<NavItem eventKey={1} href="#item1">Pill 1 content</NavItem>
<NavItem eventKey={2} href="#item2">Pill 2 content</NavItem>
</Nav>
);
let items = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
assert.ok(items[1].props.active);
assert.notOk(items[0].props.active);
});
it('Should have children with the correct DOM properties', function () {
let instance = ReactTestUtils.renderIntoDocument(
<TabbedArea activeKey={1}>
<TabPane tab="Tab 1" className="custom" id="pane0id" eventKey={1}>Tab 1 content</TabPane>
<TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
</TabbedArea>
);
let panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane);
assert.ok(React.findDOMNode(panes[0]).className.match(/\bcustom\b/));
assert.equal(React.findDOMNode(panes[0]).id, 'pane0id');
});
it('Should pass className to rendered Tab NavItem', function () {
let instance = ReactTestUtils.renderIntoDocument(
<TabbedArea activeKey={3}>
<TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
<TabPane className="pull-right" tab="Tab 2" eventKey={3}>Tab 3 content</TabPane>
</TabbedArea>
);
let tabPane = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane);
assert.equal(tabPane.length, 2);
assert.equal(React.findDOMNode(tabPane[1]).getAttribute('class').match(/pull-right/)[0], 'pull-right');
});
it('Should support multiple "ListGroupItem" children', function () {
let instance = ReactTestUtils.renderIntoDocument(
<ListGroup>
<ListGroupItem>1st Child</ListGroupItem>
<ListGroupItem>2nd Child</ListGroupItem>
</ListGroup>
);
let items = ReactTestUtils.scryRenderedComponentsWithType(instance, ListGroupItem);
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(items[0], 'list-group-item'));
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(items[1], 'list-group-item'));
});
function render(props) {
onChange = sinon.spy();
onUpdate = sinon.spy();
props = merge(props, {schema: TestMapping(), onChange, onUpdate});
form = TestUtils.renderIntoDocument(<Form {...props} />);
fields = {};
boxes = TestUtils.scryRenderedDOMComponentsWithTag(form, 'input');
TestUtils.scryRenderedComponentsWithType(form, Field).forEach(function(field) {
var path = field.props.value.keyPath;
var name = path[path.length - 1];
fields[name] = field;
});
}
function findFieldsInputs() {
fields = []
inputs = []
removeButtons = TestUtils.scryRenderedDOMComponentsWithClass(
form,
'rf-RepeatingFieldset__remove'
);
TestUtils.scryRenderedComponentsWithType(form, Field).forEach(function(field) {
fields.push(field);
inputs.push(TestUtils.findRenderedDOMComponentWithTag(field, 'input'));
});
}
beforeEach(function() {
onChange = sinon.spy();
onUpdate = sinon.spy();
form = <Form schema={schema} onChange={onChange} onUpdate={onUpdate} />;
form = TestUtils.renderIntoDocument(form);
fields = {};
inputs = {};
TestUtils.scryRenderedComponentsWithType(form, Field).forEach(function(field) {
var path = field.props.value.path;
var name = path[path.length - 1];
fields[name] = field;
inputs[name] = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
});
});
it('Should call `onClick` with target attribute', function (done) {
function handleClick(key, href, target) {
assert.equal(target, '_blank');
done();
}
instance = ReactTestUtils.renderIntoDocument(
<SplitButton title="Title" dropdownTitle="New title" href="/some/unique-thing/" target="_blank" onClick={handleClick}>
<MenuItem eventKey="1">MenuItem 1 content</MenuItem>
</SplitButton>
);
let buttons = ReactTestUtils.scryRenderedComponentsWithType(instance, Button);
ReactTestUtils.Simulate.click(ReactTestUtils.findRenderedDOMComponentWithTag(buttons[0], 'a'));
});
it('Should show the correct first tab with no active key value', function () {
let instance = ReactTestUtils.renderIntoDocument(
<TabbedArea>
<TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
<TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
</TabbedArea>
);
let tabbedArea = ReactTestUtils.findRenderedComponentWithType(instance, TabbedArea);
let panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane);
assert.equal(panes[0].props.active, true);
assert.equal(panes[1].props.active, false);
assert.equal(tabbedArea.refs.tabs.props.activeKey, 1);
});