Fix all tests that were disabled before React 15.4

See facebook/react#7386 for a discussion.

test/components/BackgroundDimmer.test.js

@@ -1,15 +1,9 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-// Because of this bug: https://github.com/facebook/react/issues/7386
-// Should be fixed in react 15.4
-// import { shallow } from 'enzyme';
+import { shallow } from 'enzyme';
 
 import BackgroundDimmer from '../../src/background-dimmer';
 
-// Because of this bug: https://github.com/facebook/react/issues/7386
-// Should be fixed in react 15.4
-jest.mock('react-dom');
-
 const content = <div className='content'>content</div>;
 
 describe('BackgroundDimmer', () => {
@@ -23,11 +17,9 @@ describe('BackgroundDimmer', () => {
     expect(component).toMatchSnapshot();
   });
 
-  // Ignored because of this bug: https://github.com/facebook/react/issues/7386
-  // Should be fixed in react 15.4
-  xit('invokes the callback when the background is clicked', () => {
+  it('invokes the callback when the background is clicked', () => {
     const onClickOutside = jest.fn();
-    const dimmer = shallow( // eslint-disable-line no-undef
+    const dimmer = shallow(
       <BackgroundDimmer onClickOutside={onClickOutside}>
         {content}
       </BackgroundDimmer>
@@ -36,11 +28,9 @@ describe('BackgroundDimmer', () => {
     expect(onClickOutside).toBeCalled();
   });
 
-  // Ignored because of this bug: https://github.com/facebook/react/issues/7386
-  // Should be fixed in react 15.4
-  xit('doesn\'t invoke the callback when the content is clicked', () => {
+  it('doesn\'t invoke the callback when the content is clicked', () => {
     const onClickOutside = jest.fn();
-    const dimmer = shallow( // eslint-disable-line no-undef
+    const dimmer = shallow(
       <BackgroundDimmer onClickOutside={onClickOutside}>
         {content}
       </BackgroundDimmer>

test/components/Dropdown.test.js

@@ -3,10 +3,6 @@ import renderer from 'react-test-renderer';
 
 import Dropdown from '../../src/dropdown';
 
-// Because of this bug: https://github.com/facebook/react/issues/7386
-// Should be fixed in react 15.4
-jest.mock('react-dom');
-
 const exampleProps = {
   ...Dropdown.defaultProps,
   id: '12345',

test/components/LoadingSpinner.test.js

@@ -1,29 +1,43 @@
 import React from 'react';
-// import renderer from 'react-test-renderer';
-import { shallow } from 'enzyme';
-
-// Because of this bug: https://github.com/facebook/react/issues/7386
-// Should be fixed in react 15.4
-// jest.mock('react-dom');
+import { shallow, mount } from 'enzyme';
 
 import LoadingSpinner from '../../src/loading-spinner';
 
 describe('LoadingSpinner', () => {
 
-  // disabled because react-dome is mocked out, see above
-  xit('renders correctly', () => {
-    const component = renderer.create( // eslint-disable-line no-undef
-      <LoadingSpinner />
+  it('renders correctly', () => {
+    const component = mount(
+      <div style={{ position: 'relative' }}>
+        <LoadingSpinner />
+      </div>
+    );
+    expect(component.html()).toMatchSnapshot();
+  });
+
+  it('renders correctly with a message', () => {
+    const component = mount(
+      <div style={{ position: 'relative' }}>
+        <LoadingSpinner message={{ content: 'loading awesome content' }} />
+      </div>
     );
-    expect(component).toMatchSnapshot();
+    expect(component.html()).toMatchSnapshot();
   });
 
-  // disabled because react-dome is mocked out, see above
-  xit('renders correctly with a message', () => {
-    const component = renderer.create( // eslint-disable-line no-undef
-      <LoadingSpinner message={{ content: 'loading awesome content' }} />
+  it('renders with a warning when parent is not relative or absolute', () => {
+    /* eslint-disable no-console */
+    const warn = jest.fn();
+    const originalWarn = console.warn;
+    console.warn = warn;
+    mount(
+      <div style={{ position: 'static' }}>
+        <LoadingSpinner />
+      </div>
     );
-    expect(component).toMatchSnapshot();
+    expect(warn).toHaveBeenCalledTimes(1);
+    const warnArguments = warn.mock.calls[0];
+    expect(warnArguments[0]).toMatchSnapshot();
+    console.warn = originalWarn;
+    /* eslint-enable no-console */
   });
 
   it('computes message content and style', () => {

test/components/Menu.test.js

@@ -1,5 +1,4 @@
 import React from 'react';
-// import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import { Menu } from '../../src/DropdownMenu';
 
@@ -12,14 +11,11 @@ const exampleProps = {
 
 describe('Menu', () => {
 
-  // ignored because react-test-renderer cannot co-exist with enzyme
-  // because of this bug: https://github.com/facebook/react/issues/7386
-  // Should be fixed in react 15.4
-  xit('renders correctly', () => {
-    const component = renderer.create( // eslint-disable-line no-undef
+  it('renders correctly', () => {
+    const component = mount(
       <Menu {...exampleProps} />
     );
-    expect(component).toMatchSnapshot();
+    expect(component.html()).toMatchSnapshot();
   });
 
   it('triggers onClick only on options that are not disabled', () => {

test/components/StatefulButton.test.js

@@ -1,13 +1,9 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
 
 import StatefulButton from '../../src/button/StatefulButton';
 import clone from 'lodash/clone';
 
-// Because of this bug: https://github.com/facebook/react/issues/7386
-// Should be fixed in react 15.4
-jest.mock('react-dom');
-
 function timeoutPromise(millis) {
   return new Promise((resolve) => {
     setTimeout(resolve, millis);
@@ -38,13 +34,11 @@ function mkComponent(overrides) {
 
 describe('StatefulButton', () => {
 
-  // ignored because react-dom is mocked (see above)
-  // which is used by TextOverflow (used by Button, used by StatefulButton)
-  xit('renders correctly', () => {
-    const component = renderer.create(
+  it('renders correctly', () => {
+    const component = mount(
       <StatefulButton {...exampleProps} />
     );
-    expect(component).toMatchSnapshot();
+    expect(component.html()).toMatchSnapshot();
   });
 
   it('behaves correctly in base state', () => {

test/components/TimePicker.test.js

@@ -1,14 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
 
 import TimePicker, {
   parseInTimeFormat, H24, H12, toOption, filterTime, createTimeList, makeOptions, inputError
 } from '../../src/time-picker/TimePicker';
 
-// Because of this bug: https://github.com/facebook/react/issues/7386
-// Should be fixed in react 15.4
-jest.mock('react-dom');
-
 const exampleProps = {
   ...TimePicker.defaultProps,
   id: '12345',
@@ -26,13 +22,11 @@ const timePicker = new TimePicker(exampleProps);
 
 describe('TimePicker', () => {
 
-  // ignored because react-dom is mocked (see above)
-  // it causes problem with AutosizeInput when using refs
-  xit('renders correctly', () => {
-    const component = renderer.create(
+  it('renders correctly', () => {
+    const component = mount(
       <TimePicker {...exampleProps} />
     );
-    expect(component).toMatchSnapshot();
+    expect(component.html()).toMatchSnapshot();
   });
 
   describe('getLocals', () => {

test/components/__snapshots__/LoadingSpinner.test.js.snap

@@ -0,0 +1,5 @@
+exports[`LoadingSpinner renders correctly 1`] = `"<div style=\"position: relative;\"><div class=\"loading-spinner\"><div class=\"loading-spinner-overlay\" style=\"background-color: rgba(255, 255, 255, 0.9);\"><div class=\"spinner\" style=\"font-size: 3em;\"></div></div></div></div>"`;
+
+exports[`LoadingSpinner renders correctly with a message 1`] = `"<div style=\"position: relative;\"><div class=\"loading-spinner\"><div class=\"loading-spinner-overlay\" style=\"background-color: rgba(255, 255, 255, 0.9);\"><div class=\"spinner\" style=\"font-size: 3em;\"></div><div class=\"message\" style=\"margin-top: 3em; font-size: 16px;\">loading awesome content</div></div></div></div>"`;
+
+exports[`LoadingSpinner renders with a warning when parent is not relative or absolute 1`] = `"LoadingSpinner\'s parent node style should have \"position: relative\" or \"position: absolute\""`;

test/components/__snapshots__/Menu.test.js.snap

@@ -0,0 +1 @@
+exports[`Menu renders correctly 1`] = `"<div class=\"menu\" style=\"max-height: -20px;\"><div class=\"menu-row\"><div class=\"react-flex-view align-content-center menu-item\"><div class=\"react-flex-view menu-item-title\">Preferences</div><div class=\"react-flex-view justify-content-end menu-item-metadata\"></div></div></div><div class=\"menu-row\"><div class=\"react-flex-view align-content-center menu-item\"><div class=\"react-flex-view menu-item-title\">Preferences</div><div class=\"react-flex-view justify-content-end menu-item-metadata\"></div></div></div></div>"`;

test/components/__snapshots__/StatefulButton.test.js.snap

@@ -0,0 +1 @@
+exports[`StatefulButton renders correctly 1`] = `"<div class=\"button\" style=\"display: inline-block;\"><div class=\"react-flex-view align-content-center justify-content-center button-inner is-default is-medium is-ready\"><!-- react-text: 3 --><!-- /react-text --><div class=\"react-flex-view flex-column justify-content-center align-content-center button-label\"><div style=\"width: 100%;\"><div><span style=\"display: block; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; position: relative;\">BeautifulButton<div class=\"resize-sensor\" style=\"position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; z-index: -1; visibility: hidden;\"><div class=\"resize-sensor-expand\" style=\"position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;\"><div style=\"position: absolute; left: 0; top: 0; transition: 0s;\"></div></div><div class=\"resize-sensor-shrink\" style=\"position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;\"><div style=\"position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%\"></div></div></div></span><span style=\"position: fixed; visibility: hidden; pointer-events: none; top: 0px; left: 0px;\">BeautifulButton</span></div></div></div></div></div>"`;

test/components/__snapshots__/TimePicker.test.js.snap

@@ -0,0 +1 @@
+exports[`TimePicker renders correctly 1`] = `"<div class=\"Select dropdown time-picker fancy-class-name is-medium Select--single is-searchable has-value\"><div class=\"Select-control\" style=\"margin: 10px; position: relative;\"><span class=\"Select-multi-value-wrapper\" id=\"react-select-2--value\"><div class=\"Select-value\"><span class=\"Select-value-label\" role=\"option\" aria-selected=\"true\" id=\"react-select-2--value-item\">06:30</span></div><div class=\"Select-input\" style=\"display: inline-block;\"><input role=\"combobox\" aria-expanded=\"false\" aria-owns=\"\" aria-haspopup=\"false\" aria-activedescendant=\"react-select-2--value\" value=\"\" style=\"box-sizing: content-box;\"><div style=\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal;\"></div></div></span><span class=\"Select-arrow-zone\"><span class=\"Select-arrow\"></span></span></div></div>"`;