it('passes open, event, and source correctly when child selected', () => {
const spy = sinon.spy();
const instance = ReactTestUtils.renderIntoDocument(
<Dropdown id="test-id" onToggle={spy}>
<Dropdown.Toggle key="toggle">
Child Title
</Dropdown.Toggle>
<Dropdown.Menu key="menu">
<MenuItem eventKey={1}>Item 1</MenuItem>
</Dropdown.Menu>
</Dropdown>
);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
const childNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
expect(spy).to.not.have.been.called;
ReactTestUtils.Simulate.click(buttonNode);
expect(spy).to.have.been.calledOnce;
ReactTestUtils.Simulate.click(childNode);
expect(spy).to.have.been.calledTwice;
expect(spy.getCall(1).args.length).to.equal(3);
expect(spy.getCall(1).args[0]).to.equal(false);
expect(spy.getCall(1).args[1]).to.be.an('object');
assert.deepEqual(spy.getCall(1).args[2], { source: 'select' });
});
it('drag to upload', (done) => {
const input = TestUtils.findRenderedDOMComponentWithTag(uploader, 'input');
const files = [{
name: 'success.png',
toString() {
return this.name;
},
}];
files.item = (i) => files[i];
handlers.onSuccess = (ret, file) => {
expect(ret[1]).to.eql(file.name);
expect(file).to.have.property('uid');
done();
};
handlers.onError = (err) => {
done(err);
};
Simulate.drop(input, { dataTransfer: { files } });
setTimeout(() => {
requests[0].respond(200, {}, `["","${files[0].name}"]`);
}, 100);
});
it('when open and the key "tab" is pressed the menu is closed and focus is progress to the next focusable element', done => {
const instance = ReactDOM.render(
<Grid>
{simpleDropdown}
<input type="text" id="next-focusable" />
</Grid>, focusableContainer);
// Need to use Grid instead of div above to make instance a composite
// element, to make this call legal.
const node = ReactTestUtils.findRenderedComponentWithType(instance, Dropdown);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(node, 'BUTTON');
ReactTestUtils.Simulate.click(buttonNode);
buttonNode.getAttribute('aria-expanded').should.equal('true');
ReactTestUtils.Simulate.keyDown(buttonNode, { key: keycode('tab'), keyCode: keycode('tab') });
setTimeout(() => {
buttonNode.getAttribute('aria-expanded').should.equal('false');
done();
});
// simulating a tab event doesn't actually shift focus.
// at least that seems to be the case according to SO.
// hence no assert on the input having focus.
});
it('has aria-labelledby same id as toggle button', () => {
const instance = ReactTestUtils.renderIntoDocument(simpleDropdown);
const node = ReactDOM.findDOMNode(instance);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
const menuNode = node.children[1];
buttonNode.getAttribute('id').should.equal(menuNode.getAttribute('aria-labelledby'));
});
test('passes textarea through to editor for toggling', () => {
const textarea = {id: 'the text area'}
const element = React.createElement(SwitchEditorControl, {textarea})
const component = TestUtils.renderIntoDocument(element)
const link = TestUtils.findRenderedDOMComponentWithTag(component, 'a')
TestUtils.Simulate.click(ReactDOM.findDOMNode(link))
ok(RichContentEditor.callOnRCE.calledWith(textarea))
})
test('changes text on each click', () => {
const textarea = {}
const element = React.createElement(SwitchEditorControl, {textarea})
const component = TestUtils.renderIntoDocument(element)
const link = TestUtils.findRenderedDOMComponentWithTag(component, 'a')
equal(link.className, 'switch-views__link switch-views__link__html')
TestUtils.Simulate.click(ReactDOM.findDOMNode(link))
equal(link.className, 'switch-views__link switch-views__link__rce')
})
it('when focused and closed toggles open when the key "down" is pressed', () => {
const instance = ReactTestUtils.renderIntoDocument(simpleDropdown);
const node = ReactDOM.findDOMNode(instance);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
ReactTestUtils.Simulate.keyDown(buttonNode, { keyCode: keycode('down') });
node.className.should.match(/\bopen\b/);
buttonNode.getAttribute('aria-expanded').should.equal('true');
});
it('should render children', () => {
const instance = ReactTestUtils.renderIntoDocument(
<Modal.Body>
<strong>Content</strong>
</Modal.Body>
);
assert.ok(
ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong')
);
});
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('calls the function on change', () => {
var checkbox = TestUtils.findRenderedDOMComponentWithTag(verifier, 'input')
expect(checkbox.checked).toBeTruthy()
TestUtils.Simulate.change(checkbox, {
target: {
checked: false
}
})
expect(onVerify).toBeCalled()
})
it ( 'can be rendered', () => {
const rendered = ReactTestUtils.renderIntoDocument(
<LanguageAutocomplete
onChange={NOOP}
provided={[]}
value="en" />
);
assert.ok( rendered );
const input = ReactTestUtils.findRenderedDOMComponentWithTag( rendered, 'input' );
assert.ok( input );
assert.equal( input.value, 'en' );
} );
it('opens if dropdown contains no focusable menu item', () => {
const instance = ReactTestUtils.renderIntoDocument(
<Dropdown title="custom child" id="dropdown">
<Dropdown.Toggle>Toggle</Dropdown.Toggle>
<Dropdown.Menu>
<li>Some custom nonfocusable content</li>
</Dropdown.Menu>
</Dropdown>
);
const node = ReactDOM.findDOMNode(instance);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
ReactTestUtils.Simulate.click(buttonNode);
node.className.should.match(/\bopen\b/);
});
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('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('renders as disabled after signature', () => {
const verifier = TestUtils.renderIntoDocument(
<Wrapper>
<Verifier
verified={false}
onVerify={onVerify}
type="quality"
isFetching={false}
code={10}
/>
</Wrapper>
)
const input = TestUtils.findRenderedDOMComponentWithTag(verifier, 'input')
expect(ReactDOM.findDOMNode(input).hasAttribute('disabled')).toBe(true)
})
it('passes open, event, and source correctly when opened with keydown', () => {
const spy = sinon.spy();
const instance = ReactTestUtils.renderIntoDocument(
<Dropdown id="test-id" onToggle={spy}>
{dropdownChildren}
</Dropdown>
);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
ReactTestUtils.Simulate.keyDown(buttonNode, { key: 'Down Arrow', keyCode: 40, which: 40 });
expect(spy).to.have.been.calledOnce;
expect(spy.getCall(0).args.length).to.equal(3);
expect(spy.getCall(0).args[0]).to.equal(true);
expect(spy.getCall(0).args[1]).to.be.an('object');
assert.deepEqual(spy.getCall(0).args[2], { source: 'keydown' });
});
it('drag unaccepted type files to upload will not trigger onStart', (done) => {
const input = TestUtils.findRenderedDOMComponentWithTag(uploader, 'input');
const files = [{
name: 'success.jpg',
toString() {
return this.name;
},
}];
files.item = (i) => files[i];
Simulate.drop(input, { dataTransfer: { files } });
const mockStart = jest.fn();
handlers.onStart = mockStart;
setTimeout(() => {
expect(mockStart.mock.calls.length).to.be(0);
done();
}, 100);
});
it('renders toggle with Dropdown.Toggle', () => {
const instance = ReactTestUtils.renderIntoDocument(
simpleDropdown
);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
buttonNode.textContent.should.match(/Child Title/);
buttonNode.tagName.should.equal('BUTTON');
buttonNode.className.should.match(/\bbtn[ $]/);
buttonNode.className.should.match(/\bbtn-default\b/);
buttonNode.className.should.match(/\bdropdown-toggle\b/);
buttonNode.getAttribute('type').should.equal('button');
buttonNode.getAttribute('aria-expanded').should.equal('false');
buttonNode.getAttribute('id').should.be.ok;
});
it('toggles open/closed when clicked', () => {
const instance = ReactTestUtils.renderIntoDocument(simpleDropdown);
const node = ReactDOM.findDOMNode(instance);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
node.className.should.not.match(/\bopen\b/);
buttonNode.getAttribute('aria-expanded').should.equal('false');
ReactTestUtils.Simulate.click(buttonNode);
node.className.should.match(/\bopen\b/);
buttonNode.getAttribute('aria-expanded').should.equal('true');
ReactTestUtils.Simulate.click(buttonNode);
node.className.should.not.match(/\bopen\b/);
buttonNode.getAttribute('aria-expanded').should.equal('false');
});
it('passes open, event, and source correctly when closed with click', () => {
const spy = sinon.spy();
const instance = ReactTestUtils.renderIntoDocument(
<Dropdown id="test-id" onToggle={spy}>
{dropdownChildren}
</Dropdown>
);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
expect(spy).to.not.have.been.called;
ReactTestUtils.Simulate.click(buttonNode);
expect(spy).to.have.been.calledOnce;
ReactTestUtils.Simulate.click(buttonNode);
expect(spy).to.have.been.calledTwice;
expect(spy.getCall(1).args.length).to.equal(3);
expect(spy.getCall(1).args[0]).to.equal(false);
expect(spy.getCall(1).args[1]).to.be.an('object');
assert.deepEqual(spy.getCall(1).args[2], { source: 'click' });
});
it('does not close when onToggle is controlled', () => {
const handleSelect = () => {};
const instance = ReactTestUtils.renderIntoDocument(
<Dropdown open onToggle={handleSelect} id="test-id">
{dropdownChildren}
</Dropdown>
);
const node = ReactDOM.findDOMNode(instance);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
const menuItem = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'A')[0];
ReactTestUtils.Simulate.click(buttonNode);
node.className.should.match(/\bopen\b/);
ReactTestUtils.Simulate.click(menuItem);
node.className.should.match(/\bopen\b/);
});
it ( 'can be changed via keyboard', () => {
let value = 'en';
const onChange = newValue => { value = newValue; };
const rendered = ReactTestUtils.renderIntoDocument(
<LanguageAutocomplete
datavalue={value}
onChange={onChange}
provided={[]}
value="en" />
);
assert.ok( rendered );
const input = ReactTestUtils.findRenderedDOMComponentWithTag( rendered, 'input' );
assert.ok( input );
input.value = 'ru';
ReactTestUtils.Simulate.change( input );
assert.equal( value, 'ru' );
} );
it('closes when clicked outside', () => {
const instance = ReactTestUtils.renderIntoDocument(simpleDropdown);
const node = ReactDOM.findDOMNode(instance);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
node.className.should.not.match(/\bopen\b/);
buttonNode.getAttribute('aria-expanded').should.equal('false');
ReactTestUtils.Simulate.click(buttonNode);
node.className.should.match(/\bopen\b/);
buttonNode.getAttribute('aria-expanded').should.equal('true');
// Use native events as the click doesn't have to be in the React portion
const event = new MouseEvent('click');
document.dispatchEvent(event);
node.className.should.not.match(/\bopen\b/);
buttonNode.getAttribute('aria-expanded').should.equal('false');
});
it('renders the previous submissions', () => {
const previous = TestUtils.renderIntoDocument(
<Wrapper>
<InstitutionSubmissionHistory
submissions={submissions}
institutionId="123456"
filingPeriod="2017"
onDownloadClick={onDownloadClick}
/>
</Wrapper>
)
const previousNode = ReactDOM.findDOMNode(previous)
expect(previousNode).toBeDefined()
const ol = TestUtils.findRenderedDOMComponentWithTag(previous, 'ol')
expect(ol.children.length).toBe(5)
const links = TestUtils.scryRenderedDOMComponentsWithTag(previous, 'a')
expect(links.length).toBe(4)
})
ReactDOM.render(<Uploader action={action} />, node, function init() {
uploader = this;
const input = TestUtils.findRenderedDOMComponentWithTag(uploader, 'input');
const files = [{
name: 'success.png',
toString() {
return this.name;
},
}];
files.item = (i) => files[i];
Simulate.change(input, { target: { files } });
setTimeout(() => {
expect(requests.length).to.be(0);
setTimeout(() => {
console.log(requests);
expect(requests.length).to.be(1);
expect(requests[0].url).to.be('/upload.do');
done();
}, 1000);
}, 100);
});
test('renders the list of developer_keys when there are some', () => {
const applicationState = {
createLtiKey: {isLtiKey: false},
listDeveloperKeyScopes,
createOrEditDeveloperKey: {},
listDeveloperKeys: {
listDeveloperKeysPending: false,
listDeveloperKeysSuccessful: false,
list: [
{
id: "111",
api_key: "abc12345678",
created_at: "2012-06-07T20:36:50Z"
}
]
},
};
const component = renderComponent({ applicationState });
const renderedText = ReactDOM.findDOMNode(TestUtils.findRenderedDOMComponentWithTag(component, 'table')).innerHTML;
ok(renderedText.includes("111"))
})
it('upload error', (done) => {
const input = TestUtils.findRenderedDOMComponentWithTag(uploader, 'input');
const files = [{
name: 'error.png',
toString() {
return this.name;
},
}];
files.item = (i) => files[i];
handlers.onError = (err, ret) => {
expect(err instanceof Error).to.equal(true);
expect(err.status).to.equal(400);
expect(ret).to.equal('error 400');
done();
};
Simulate.change(input, { target: { files } });
setTimeout(() => {
requests[0].respond(400, {}, `error 400`);
}, 100);
});
it('unaccepted type files to upload will not trigger onStart', (done) => {
const input = TestUtils.findRenderedDOMComponentWithTag(uploader, 'input');
const files = {
name: 'foo',
children: [
{
name: 'bar',
children: [
{
name: 'unaccepted.webp',
},
],
},
],
};
Simulate.drop(input, { dataTransfer: { items: [makeDataTransferItem(files)] } });
const mockStart = jest.fn();
handlers.onStart = mockStart;
setTimeout(() => {
expect(mockStart.mock.calls.length).to.be(0);
done();
}, 100);
});
it('button has aria-haspopup attribute (As per W3C WAI-ARIA Spec)', () => {
const instance = ReactTestUtils.renderIntoDocument(simpleDropdown);
const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
buttonNode.getAttribute('aria-haspopup').should.equal('true');
});
ReactDOM.render(<Uploader id="bamboo" />, node, function init() {
expect(TestUtils.findRenderedDOMComponentWithTag(this, 'input').id).to.be('bamboo');
done();
});