Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch tests away from using enzyme.mount (components/higher-order/with-state/test/index.js) #7829

Merged
merged 1 commit into from
Jul 12, 2018
Merged

Switch tests away from using enzyme.mount (components/higher-order/with-state/test/index.js) #7829

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 22 additions & 5 deletions components/higher-order/with-state/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,29 @@
/**
* External dependencies
*/
import { mount } from 'enzyme';
import TestUtils from 'react-dom/test-utils';

/**
* Internal dependencies
*/
import withState from '../';

/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';

// this is needed because TestUtils does not accept a stateless component.
// anything run through a HOC ends up as a stateless component.
const getTestComponent = ( WrappedComponent ) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are using a similar HOC in other places should we implement it in a place where we can reuse it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:) Currently I've got pulls open for all the affected HOCs that implement this (or a variation of) when needed. I think there's definitely room for abstraction but I think that should be part of a larger discussion (via its own pull/issue) about creating our own abstraction for testing components. I'd like to focus on getting these pulls merged in first and then we can accumulate patterns that we notice across the various tests as a part of the discussion on the abstraction (I can contribute to that with patterns I noticed when doing these conversions).

Copy link
Contributor Author

@nerrad nerrad Jul 11, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also the current comment is currently against master branch incorrect. When/if #7557 gets implemented, then it will be completely correct because every HOC (created by createHigherOrderComponent will be wrapped by forwardRef).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are using a similar HOC in other places should we implement it in a place where we can reuse it?

We definitely should do it once we merge all PRs :) I'd prefer to do it in one go so we large enough codebase to sparkle proper discussion.

class TestComponent extends Component {
render() {
return <WrappedComponent { ...this.props } />;
}
}
return <TestComponent />;
};

describe( 'withState', () => {
it( 'should pass initial state and allow updates', () => {
const EnhancedComponent = withState( { count: 0 } )( ( { count, setState } ) => (
Expand All @@ -16,10 +32,11 @@ describe( 'withState', () => {
</button>
) );

const wrapper = mount( <EnhancedComponent /> );
const wrapper = TestUtils.renderIntoDocument( getTestComponent( EnhancedComponent ) );
const buttonElement = () => TestUtils.findRenderedDOMComponentWithTag( wrapper, 'button' );

expect( wrapper.html() ).toBe( '<button>0</button>' );
wrapper.find( 'button' ).simulate( 'click' );
expect( wrapper.html() ).toBe( '<button>1</button>' );
expect( buttonElement().outerHTML ).toBe( '<button>0</button>' );
TestUtils.Simulate.click( buttonElement() );
expect( buttonElement().outerHTML ).toBe( '<button>1</button>' );
} );
} );