-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds basic withFocusReturn HOCtests. Covers cases dealing with the handling of the focus. Related to progress on #641. Adds an extra conditional to match if the body is focused the active elment should become the one bound to the HOC, this is necessary as in the HTML DOM spec it is not supposed to be possible to have `! document.activeElement` ever be true. Testing Instructions Run npm i && npm run test-unit ensure tests pass. Change Dashicon logic to ensure tests fail as they should. Verify disposable focus returning still works.
- Loading branch information
1 parent
ccf8728
commit 032f1b9
Showing
2 changed files
with
78 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { expect } from 'chai'; | ||
import { shallow, mount } from 'enzyme'; | ||
import { Component } from '../../../../element'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import withFocusReturn from '../'; | ||
|
||
class Test extends Component { | ||
render() { | ||
return ( | ||
<div className="test">Testing</div> | ||
); | ||
} | ||
} | ||
|
||
describe( 'withFocusReturn()', () => { | ||
describe( 'expected behavior', () => { | ||
const Composite = withFocusReturn( Test ); | ||
const activeElement = document.createElement( 'button' ); | ||
const switchFocusTo = document.createElement( 'input' ); | ||
|
||
beforeEach( () => { | ||
activeElement.focus(); | ||
} ); | ||
|
||
afterEach( () => { | ||
activeElement.blur(); | ||
} ); | ||
|
||
it( 'rendering with a basic <div> element', () => { | ||
const renderedComposite = shallow( <Composite /> ); | ||
const wrappedElement = renderedComposite.find( 'Test' ); | ||
const wrappedElementShallow = wrappedElement.shallow(); | ||
expect( wrappedElementShallow.hasClass( 'test' ) ).to.be.true(); | ||
expect( wrappedElementShallow.type() ).to.equal( 'div' ); | ||
expect( wrappedElementShallow.text() ).to.equal( 'Testing' ); | ||
} ); | ||
|
||
it( 'passing additonal props', () => { | ||
const renderedComposite = shallow( <Composite test="test" /> ); | ||
const wrappedElement = renderedComposite.find( 'Test' ); | ||
// Ensure that the wrapped Test element has the appropriate props. | ||
expect( wrappedElement.node.props.test ).to.equal( 'test' ); | ||
} ); | ||
|
||
it( 'when component mounts and unmounts', () => { | ||
const mountedComposite = mount( <Composite /> ); | ||
expect( mountedComposite.instance().activeElement ).to.equal( activeElement ); | ||
|
||
// Change activeElement. | ||
switchFocusTo.focus(); | ||
expect( document.activeElement ).to.equal( switchFocusTo ); | ||
|
||
// Should keep focus on switchFocusTo because it is not within HOC. | ||
mountedComposite.unmount(); | ||
expect( document.activeElement ).to.equal( switchFocusTo ); | ||
} ); | ||
|
||
it( 'should return focus to element associated with HOC', () => { | ||
const mountedComposite = mount( <Composite /> ); | ||
expect( mountedComposite.instance().activeElement ).to.equal( activeElement ); | ||
|
||
// Change activeElement. | ||
document.activeElement.blur(); | ||
expect( document.activeElement ).to.equal( document.body ); | ||
|
||
// Should not return to original activeElement because it is not contained in. | ||
mountedComposite.unmount(); | ||
expect( document.activeElement ).to.equal( activeElement ); | ||
} ); | ||
} ); | ||
} ); |