Find focused element in reagent
I am setting focus of an element as part of a simple Jasmine test
var node = React.findDOMNode(component.refs.input);
node.focus();
but when i check the focused element with document.activeElement it is always the element <body>
that has focus. My guess is that this is either because the element is not receiving focus, or the document is not real document .
I tried to grab the active item with no luck:
node.ownerDocument.activeElement
Why does the active element of the document never change?
source to share
You do not provide us with much information about your test, but I am assuming that you are using TestUtils.renderIntoDocument()
, and if so, that is why you are experiencing this problem.
Remember, this TestUtils.renderIntoDocument()
maps the component to a separate DOM node . Therefore, it is quite difficult to test the focus / blur functionality of nodes, or find nodes by name or class id, without using another function TestUtils
that uses the dedicated DOM node you give it.
As an example, let's say you have an example component that looks like this:
var Foo = React.createClass({
render : function () {
return (
<div className='foo'>
Sample Component
</div>
)
}
});
And a test like this:
it('renders a div with className of "foo"', function () {
var foo = TestUtils.renderIntoDocument(<Foo />); //creates detached DOM node
var array1 = TestUtils.scryRenderedDOMComponentsWithClass(foo, 'foo');
var array2 = document.getElementsByClassName('foo');
expect(array1.length).toEqual(1); //passes
expect(array2.length).toEqual(1); //fails
});
The first wait statement will go through because you are using a function TestUtils
that looks like a single DOM node created for the class name and finds it just fine. However, the second wait command will fail because the document root node does not actually have any children with the class name 'foo'.
However, there is a way around this. In my project, I have several React components that focus / blur nodes and use a few document features that you simply cannot test with TestUtils. So for these specific tests, I used a library called jasmine-react . Using this, you can render the components in the attached DOM nodes with jasmineReact.render()
, and after the test completes, it will take care of the cleanup.
So, re-writing this test from an earlier version will give you this:
it('renders a div with className of "foo"', function () {
var jasmineReact = require('jasmine-react-helpers');
var foo = jasmineReact.render(<Foo />, document.body);
var array1 = TestUtils.scryRenderedDOMComponentsWithClass(foo, 'foo');
var array2 = document.getElementsByClassName('foo');
expect(array1.length).toEqual(1); //passes
expect(array2.length).toEqual(1); //passes
});
I suppose it's worth mentioning that this jasmine-react repository owner is not actively supporting it (at least at the time I wrote this), but it seems to be working at the moment.
Hope this helps!
source to share