diff --git a/components/higher-order/with-focus-return/index.js b/components/higher-order/with-focus-return/index.js index c583ed472a4104..7341d3dfc45dbb 100644 --- a/components/higher-order/with-focus-return/index.js +++ b/components/higher-order/with-focus-return/index.js @@ -23,7 +23,7 @@ function withFocusReturn( WrappedComponent ) { if ( this.activeElement && ( ( document.activeElement && wrapper && wrapper.contains( document.activeElement ) ) || - ! document.activeElement + ( ! document.activeElement || document.body === document.activeElement ) ) ) { this.activeElement.focus(); diff --git a/components/higher-order/with-focus-return/test/index.js b/components/higher-order/with-focus-return/test/index.js new file mode 100644 index 00000000000000..08bf5b1f355179 --- /dev/null +++ b/components/higher-order/with-focus-return/test/index.js @@ -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 ( +
Testing
+ ); + } +} + +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
element', () => { + const renderedComposite = shallow( ); + 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( ); + 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( ); + 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( ); + 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 ); + } ); + } ); +} );