Skip to content

Commit

Permalink
Add tests to withFocusReturn HOC.
Browse files Browse the repository at this point in the history
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
BE-Webdesign committed May 30, 2017
1 parent ccf8728 commit 032f1b9
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 1 deletion.
2 changes: 1 addition & 1 deletion components/higher-order/with-focus-return/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
77 changes: 77 additions & 0 deletions components/higher-order/with-focus-return/test/index.js
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 );
} );
} );
} );

0 comments on commit 032f1b9

Please sign in to comment.