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.

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-focus-outside/test/index.js) #7827

Conversation

nerrad
Copy link
Contributor

@nerrad nerrad commented Jul 9, 2018

Description

This switches all tests in components/higher-order/with-focus-outside/test/index.js from using enzyme.shallow and enzyme.mount to React.TestUtils. This is because enzyme does not fully support React 16.3+ (and movement to do so is really slow). This will fix issues with breakage due to the enzyme incompatibility as components receive React 16.3+ features (such as forwardRef usage in #7557).

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.

This switches all tests in `components/higher-order/with-focus-outside/test/index.js` from using enzyme.shallow  and enzyme.mount to `React.TestUtils`.  This is because `enzyme` does not fully support React 16.3+ (and movement to do so is really slow). This will fix issues with breakage due to the enzyme incompatibility as components receive React 16.3+ features (such as `forwardRef` usage in #7557).
@nerrad nerrad requested a review from aduth July 9, 2018 14:36
@nerrad nerrad self-assigned this Jul 9, 2018
@nerrad nerrad added [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. [Type] Refactoring labels Jul 9, 2018
Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

I had two minor comments, let me know what you think.

@@ -12,9 +12,12 @@ import { Component } from '@wordpress/element';
* Internal dependencies
*/
import withFocusOutside from '../';
import ReactDOM from 'react-dom';

jest.useFakeTimers();
Copy link
Member

Choose a reason for hiding this comment

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

Aside: we have fake timers enabled by default ...

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That was already in this test, so likely can just be an additional improvement to the original test?

Copy link
Member

Choose a reason for hiding this comment

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

If you can remove at the same time, it would be awesome. It should work 😓

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ya looks like tests pass fine with it removed.

return <TestComponent />;
};

const simulateEvent = ( event, position = 0 ) => {
Copy link
Member

Choose a reason for hiding this comment

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

position is confusing in this context. I assumed this is position on the screen at first. Did you mean index?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

change implemented


jest.useFakeTimers();

let wrapper, callback;
Copy link
Member

Choose a reason for hiding this comment

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

Can we rename callback to onFocusOutside to make it easier to read since it is now hidden inside beforeEach method?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

change implemented

@nerrad nerrad requested a review from gziolo July 12, 2018 17:00
Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

Great, thanks!
🚢

@gziolo gziolo merged commit db0b772 into master Jul 13, 2018
@gziolo gziolo deleted the update/with-focus-outside.js-replace-usage-of-enzyme.mount-with-React.TestUtils branch July 13, 2018 06:22
@gziolo gziolo added this to the 3.3 milestone Jul 13, 2018
@ellatrix ellatrix added [Type] Code Quality Issues or PRs that relate to code quality and removed [Type] Code Quality Issues or PRs that relate to code quality labels Nov 27, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants