it('should not fire "onSelect" event on disabled buttons', () => {
function onSelect() {
throw Error('this event should not happen');
}
const instance = ReactTestUtils.renderIntoDocument(
<Pagination
onSelect={onSelect}
last
next
ellipsis
maxButtons={1}
activePage={1}
items={0} />
);
const liElements = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'li');
// buttons are disabled
assert.include(liElements[0].className, 'disabled');
assert.include(liElements[1].className, 'disabled');
const pageButtons = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'a');
const nextButton = pageButtons[0];
const lastButton = pageButtons[1];
ReactTestUtils.Simulate.click( nextButton );
ReactTestUtils.Simulate.click( lastButton );
});
it('Should have tablist and tab roles', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Nav bsStyle="tabs" activeKey={1}>
<NavItem key={1}>Tab 1 content</NavItem>
<NavItem key={2}>Tab 2 content</NavItem>
</Nav>
);
let ul = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'ul')[0];
let navItem = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'a')[0];
assert.equal(React.findDOMNode(ul).getAttribute('role'), 'tablist');
assert.equal(React.findDOMNode(navItem).getAttribute('role'), 'tab');
});
it('can facilitate editing of entries', (done) => {
let {entrylist} = createEntryListWithoutRules();
let editFirstEntry = TestUtils.scryRenderedDOMComponentsWithTag(entrylist, 'a')[0];
let testValue = 'test-value';
let editHandler = Dispatcher.register((action, data) => {
if (action === ENTRYLIST_ENTRY_EDIT) {
let firstInput = TestUtils.scryRenderedDOMComponentsWithTag(entrylist, 'input')[0];
let updateEntry = TestUtils.findRenderedDOMComponentWithClass(entrylist, 'btn-default');
// accept user input
TestUtils.Simulate.change(firstInput.getDOMNode(), {target: {value: testValue}});
// click Update button to update the entry
TestUtils.Simulate.click(updateEntry);
}
});
let updateHandler = Dispatcher.register((action, data) => {
if (action === ENTRYLIST_NEW_ENTRY_ADD) {
Dispatcher.unregister(updateHandler);
expect(entrylist.state.entry.medicaidNumber).toEqual(testValue);
done();
}
});
// click Edit link on the first entry and update it
TestUtils.Simulate.click(editFirstEntry);
});
it('forwards onSelect handler to MenuItems', (done) => {
const selectedEvents = [];
const onSelect = (event, eventKey) => {
selectedEvents.push(eventKey);
if (selectedEvents.length === 4) {
selectedEvents.should.eql(['1', '2', '3', '4']);
done();
}
};
const instance = ReactTestUtils.renderIntoDocument(
<DropdownButton title='Simple Dropdown' onSelect={onSelect} id='test-id'>
<MenuItem eventKey='1'>Item 1</MenuItem>
<MenuItem eventKey='2'>Item 2</MenuItem>
<MenuItem eventKey='3'>Item 3</MenuItem>
<MenuItem eventKey='4'>Item 4</MenuItem>
</DropdownButton>
);
const menuItems = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'A');
menuItems.forEach(item => {
ReactTestUtils.Simulate.click(item);
});
});
it('have links of length 2', () => {
const link = TestUtils.scryRenderedDOMComponentsWithTag(
header, 'a'
);
expect(link.length).toEqual(2);
});
function getInputs(form) {
var inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag(form, 'input');
var result = {};
inputs.forEach((input) => {
result[input._owner.props.name] = input;
});
return result;
}
function testNonRenderedOutputFromElement(el){
let dom = TestUtils.renderIntoDocument(el);
let findArticle = TestUtils.findRenderedDOMComponentWithTag.bind(TestUtils, dom, 'article');
let divs = TestUtils.scryRenderedDOMComponentsWithTag(dom, 'div');
// should not render the Page component
expect(findArticle).toThrow();
// should render a single <div>
expect(divs.length).toEqual(1);
}
it('with first item focused when the key "up" is pressed last item gains focus', () => {
const instance = ReactDOM.render(simpleMenu, focusableContainer);
const items = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'A');
items.length.should.equal(4);
items[0].focus();
ReactTestUtils.Simulate.keyDown(document.activeElement, { keyCode: keycode('up') });
document.activeElement.should.equal(items[3]);
});
it('Should show the correct active button', () => {
let instance = ReactTestUtils.renderIntoDocument(
<Pagination
items={5}
activePage={3} />
);
let pageButtons = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'li');
assert.equal(pageButtons.length, 5);
pageButtons[2].className.should.match(/\bactive\b/);
});
function renderText(component) {
const result = ReactTestUtils.renderIntoDocument(component);
const elements = ReactTestUtils.scryRenderedDOMComponentsWithTag(result, 'span');
if (elements.length === 0) {
return null;
} else if (elements.length === 1) {
const element = ReactTestUtils.findRenderedDOMComponentWithTag(result, 'span');
return element.getDOMNode().textContent;
}
}
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('renders into component provided via schema node', function() {
var schema = Scalar({input: <input type="password" />});
var value = Value.create(schema);
var element = <Input value={value} className="someClass" />;
var component = TestUtils.renderIntoDocument(element);
var inputs = TestUtils.scryRenderedDOMComponentsWithTag(component, 'input');
assert.equal(inputs.length, 1);
var input = inputs[0];
assert.equal(input.getDOMNode().type, 'password');
assert.equal(input.getDOMNode().className, 'someClass');
});
it('renders into <input type="text" /> by default', function() {
var schema = Scalar();
var value = Value.create(schema);
var element = <Input value={value} className="someClass" />;
var component = TestUtils.renderIntoDocument(element);
var inputs = TestUtils.scryRenderedDOMComponentsWithTag(component, 'input');
assert.equal(inputs.length, 1);
var input = inputs[0];
assert.equal(input.getDOMNode().type, 'text');
assert.equal(input.getDOMNode().className, 'someClass');
});
it('when focused and closed sets focus on first menu item when the key "down" is pressed', () => {
const instance = ReactDOM.render(simpleDropdown, focusableContainer);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
buttonNode.focus();
ReactTestUtils.Simulate.keyDown(buttonNode, { keyCode: keycode('down') });
const firstMenuItemAnchor = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'A')[0];
document.activeElement.should.equal(firstMenuItemAnchor);
});
it('does not fire onSelect when header is clicked', () => {
const handleSelect = () => {
throw new Error('Should not invoke onSelect with divider flag applied');
};
const instance = ReactTestUtils.renderIntoDocument(
<MenuItem onSelect={handleSelect} header>Header content</MenuItem>
);
ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'A').length.should.equal(0);
const li = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'li');
ReactTestUtils.Simulate.click(li);
});
it('sets focus on next menu item when the key "down" is pressed', () => {
const instance = React.render(simpleMenu, focusableContainer);
const items = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'A');
items.length.should.equal(4);
items[0].getDOMNode().focus();
for (let i = 1; i < items.length; i++) {
ReactTestUtils.Simulate.keyDown(document.activeElement, { keyCode: keycode('down') });
document.activeElement.should.equal(items[i].getDOMNode());
}
});
let editHandler = Dispatcher.register((action, data) => {
if (action === ENTRYLIST_ENTRY_EDIT) {
let firstInput = TestUtils.scryRenderedDOMComponentsWithTag(entrylist, 'input')[0];
let updateEntry = TestUtils.findRenderedDOMComponentWithClass(entrylist, 'btn-default');
// accept user input
TestUtils.Simulate.change(firstInput.getDOMNode(), {target: {value: testValue}});
// click Update button to update the entry
TestUtils.Simulate.click(updateEntry);
}
});
it('sets focus on previous menu item when the key "up" is pressed', () => {
const instance = ReactDOM.render(simpleMenu, focusableContainer);
const items = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'A');
items.length.should.equal(4);
items[3].focus();
for (let i = 2; i >= 0; i--) {
ReactTestUtils.Simulate.keyDown(document.activeElement, { keyCode: keycode('up') });
document.activeElement.should.equal(items[i]);
}
});
it('Should set target attribute on anchor', function () {
instance = ReactTestUtils.renderIntoDocument(
<SplitButton title="Title" dropdownTitle="New title" href="/some/unique-thing/" target="_blank">
<MenuItem eventKey="1">MenuItem 1 content</MenuItem>
</SplitButton>
);
let anchors = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'a');
assert.equal(anchors.length, 2);
let linkElement = anchors[0].getDOMNode();
assert.equal(linkElement.target, '_blank');
});
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;
});
}
it('Should call onSelect when page button is selected', (done) => {
function onSelect(event, selectedEvent) {
assert.equal(selectedEvent.eventKey, 2);
done();
}
let instance = ReactTestUtils.renderIntoDocument(
<Pagination items={5} onSelect={onSelect} />
);
ReactTestUtils.Simulate.click(
ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'a')[1]
);
});
it('can facilitate removal of entries', (done) => {
let {entrylist} = createEntryListWithoutRules();
let removeFirstEntry = TestUtils.scryRenderedDOMComponentsWithTag(entrylist, 'a')[1];
let handler = Dispatcher.register((action, data) => {
if (action === ENTRYLIST_ENTRY_REMOVE) {
Dispatcher.unregister(handler);
expect(entrylist.state.entries.length).toEqual(fixture.model.medicaidNumbers.length - 1);
done();
}
});
expect(entrylist.state.entries.length).toEqual(fixture.model.medicaidNumbers.length);
TestUtils.Simulate.click(removeFirstEntry);
});
it('renders the register component', function() {
expect(registerDOM).toBeDefined();
var labels = TestUtils.scryRenderedDOMComponentsWithTag(register, 'label');
var emailLabel = Utils.findTextField(labels, 'email');
expect(emailLabel).toBeDefined();
var passwordLabel = Utils.findTextField(labels, 'password');
expect(passwordLabel).toBeDefined();
var confirmPasswordLabel = Utils.findTextField(labels, 'confirm password');
expect(confirmPasswordLabel).toBeDefined();
});
it('closes when child MenuItem is selected', () => {
const instance = ReactTestUtils.renderIntoDocument(
simpleDropdown
);
const node = ReactDOM.findDOMNode(instance);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
ReactTestUtils.Simulate.click(buttonNode);
node.className.should.match(/\bopen\b/);
const menuItem = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'A')[0];
ReactTestUtils.Simulate.click(menuItem);
node.className.should.not.match(/\bopen\b/);
});
it('Should only show part of buttons and active button in the middle of buttons when given maxButtons', () => {
let instance = ReactTestUtils.renderIntoDocument(
<Pagination
items={30}
activePage={10}
maxButtons={9} />
);
let pageButtons = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'li');
// 9 visible page buttons and 1 ellipsis button
assert.equal(pageButtons.length, 10);
// active button is the second one
assert.equal(pageButtons[0].firstChild.innerText, '6');
pageButtons[4].className.should.match(/\bactive\b/);
});
it('Should pass page number to buttonComponentClass', () => {
class DummyElement extends React.Component {
render() {
return <a href={`?page=${this.props.eventKey}`}>{this.props.eventKey}</a>;
}
}
let instance = ReactTestUtils.renderIntoDocument(
<Pagination items={5} buttonComponentClass={DummyElement}/>
);
const pageButtons = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'a');
assert.equal(pageButtons[1].getAttribute('href'), '?page=2');
});
it('changes to previous page', function() {
currentPage = 5;
totalPages = 10;
instance = TestUtils.renderIntoDocument(
React.createElement(Pagination, {
totalPages: totalPages,
currentPage: currentPage,
onChangePage: onChangePage}
)
);
var buttons = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'a');
var prevBtn = buttons[1];
TestUtils.Simulate.click(prevBtn);
expect(onChangePage).toBeCalledWith(currentPage - 1);
});
it('disables next and last button when on last page', function() {
currentPage = 9;
totalPages = 10;
instance = TestUtils.renderIntoDocument(
React.createElement(Pagination, {
totalPages: totalPages,
currentPage: currentPage,
onChangePage: onChangePage}
)
);
var buttons = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'a');
TestUtils.Simulate.click(buttons[buttons.length - 2]);
TestUtils.Simulate.click(buttons[buttons.length - 1]);
expect(onChangePage).not.toBeCalled();
});
it('when open and the key "esc" is pressed the menu is closed and focus is returned to the button', () => {
const instance = ReactDOM.render(
<Dropdown defaultOpen role="menuitem" id="test-id">
{dropdownChildren}
</Dropdown>
, focusableContainer);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
const firstMenuItemAnchor = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'A')[0];
document.activeElement.should.equal(firstMenuItemAnchor);
ReactTestUtils.Simulate.keyDown(firstMenuItemAnchor, { type: 'keydown', keyCode: keycode('esc') });
document.activeElement.should.equal(buttonNode);
});
it('changes to previous page', function() {
currentPage = 5;
totalPages = 10;
instance = TestUtils.renderIntoDocument(
<Pagination
totalPages={totalPages}
currentPage={currentPage}
onChangePage={onChangePage}
/>
);
var buttons = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'a');
var prevBtn = buttons[1];
TestUtils.Simulate.click(prevBtn);
expect(onChangePage).toBeCalledWith(currentPage - 1);
});