Fix(Bs3): Remove unsafe lifecycles by upgrading uncontrollable… (react-bootstrap#4597)

Fix tests broken by using ReactTestUtils on forwardRef components. (See facebook/react#13455)

Author: nortonwong

package.json

@@ -125,7 +125,7 @@
     "react-overlays": "^0.8.0",
     "react-prop-types": "^0.4.0",
     "react-transition-group": "^2.0.0",
-    "uncontrollable": "^5.0.0",
+    "uncontrollable": "^7.0.2",
     "warning": "^3.0.0"
   },
   "release-script": {

src/Dropdown.js

@@ -8,7 +8,7 @@ import ReactDOM from 'react-dom';
 import all from 'prop-types-extra/lib/all';
 import elementType from 'prop-types-extra/lib/elementType';
 import isRequiredForA11y from 'prop-types-extra/lib/isRequiredForA11y';
-import uncontrollable from 'uncontrollable';
+import { uncontrollable } from 'uncontrollable';
 import warning from 'warning';
 
 import ButtonGroup from './ButtonGroup';

src/Navbar.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import elementType from 'prop-types-extra/lib/elementType';
-import uncontrollable from 'uncontrollable';
+import { uncontrollable } from 'uncontrollable';
 
 import Grid from './Grid';
 import NavbarBrand from './NavbarBrand';
@@ -259,8 +259,6 @@ UncontrollableNavbar.Text = createSimpleWrapper('p', 'text', 'NavbarText');
 UncontrollableNavbar.Link = createSimpleWrapper('a', 'link', 'NavbarLink');
 
 // Set bsStyles here so they can be overridden.
-export default bsStyles(
-  [Style.DEFAULT, Style.INVERSE],
-  Style.DEFAULT,
+export default bsStyles([Style.DEFAULT, Style.INVERSE], Style.DEFAULT)(
   UncontrollableNavbar
 );

src/Panel.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import uncontrollable from 'uncontrollable';
+import { uncontrollable } from 'uncontrollable';
 import warning from 'warning';
 
 import {

src/PanelGroup.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { cloneElement } from 'react';
-import uncontrollable from 'uncontrollable';
+import { uncontrollable } from 'uncontrollable';
 
 import {
   bsClass,

src/TabContainer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import uncontrollable from 'uncontrollable';
+import { uncontrollable } from 'uncontrollable';
 
 const TAB = 'tab';
 const PANE = 'pane';

src/Tabs.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import requiredForA11y from 'prop-types-extra/lib/isRequiredForA11y';
-import uncontrollable from 'uncontrollable';
+import { uncontrollable } from 'uncontrollable';
 import elementType from 'prop-types-extra/lib/elementType';
 
 import Nav from './Nav';

src/ToggleButtonGroup.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import invariant from 'invariant';
-import uncontrollable from 'uncontrollable';
+import { uncontrollable } from 'uncontrollable';
 
 import chainFunction from './utils/createChainedFunction';
 import ValidChildren from './utils/ValidComponentChildren';

src/utils/bootstrapUtils.js

@@ -178,7 +178,7 @@ export function splitBsPropsAndOmit(props, omittedPropNames) {
  * in order to validate the new variant.
  */
 export function addStyle(Component, ...styleVariant) {
-  bsStyles(styleVariant, Component);
+  bsStyles(styleVariant)(Component);
 }
 
 export const _curry = curry;

test/DropdownButtonSpec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-dom/test-utils';
+import { mount } from 'enzyme';
 
 import Dropdown from '../src/Dropdown';
 import DropdownButton from '../src/DropdownButton';
@@ -224,30 +225,24 @@ describe('<DropdownButton>', () => {
   });
 
   it('should pass defaultOpen to `<Dropdown>`', () => {
-    const instance = ReactTestUtils.renderIntoDocument(
+    const wrapper = mount(
       <DropdownButton id="test-id" title="title" defaultOpen>
         <MenuItem eventKey="1">MenuItem 1 content</MenuItem>
       </DropdownButton>
     );
 
-    const dropdown = ReactTestUtils.findRenderedComponentWithType(
-      instance,
-      Dropdown
-    );
-    const toggle = ReactTestUtils.findRenderedComponentWithType(
-      instance,
-      DropdownToggle
-    );
+    const dropdown = wrapper.find(Dropdown).first();
+    const toggle = wrapper.find(DropdownToggle).first();
 
-    expect(dropdown.props.defaultOpen).to.equal(true);
-    expect(toggle.props.defaultOpen).to.not.exist;
+    expect(dropdown.props().defaultOpen).to.equal(true);
+    expect(toggle.props().defaultOpen).to.not.exist;
   });
 
   it('should pass onMouseEnter and onMouseLeave to `<Dropdown>`', () => {
     const onMouseEnter = () => {};
     const onMouseLeave = () => {};
 
-    const instance = ReactTestUtils.renderIntoDocument(
+    const wrapper = mount(
       <DropdownButton
         id="test-id"
         title="title"
@@ -258,19 +253,13 @@ describe('<DropdownButton>', () => {
       </DropdownButton>
     );
 
-    const dropdown = ReactTestUtils.findRenderedComponentWithType(
-      instance,
-      Dropdown
-    );
-    const toggle = ReactTestUtils.findRenderedComponentWithType(
-      instance,
-      DropdownToggle
-    );
+    const dropdown = wrapper.find(Dropdown).first();
+    const toggle = wrapper.find(DropdownToggle).first();
 
-    expect(dropdown.props.onMouseEnter).to.equal(onMouseEnter);
-    expect(dropdown.props.onMouseLeave).to.equal(onMouseLeave);
+    expect(dropdown.props().onMouseEnter).to.equal(onMouseEnter);
+    expect(dropdown.props().onMouseLeave).to.equal(onMouseLeave);
 
-    expect(toggle.props.onMouseEnter).to.not.exist;
-    expect(toggle.props.onMouseLeave).to.not.exist;
+    expect(toggle.props().onMouseEnter).to.not.exist;
+    expect(toggle.props().onMouseLeave).to.not.exist;
   });
 });