Upgrade to react 16.0.0 (#15469) (#15530)

* get kibana to start with react 16.0.0 * ensure width and height for dashboard grid * Update to Enzyme 3.x. (#12) * Fix tests broken by Enzyme upgrade (#13) * Update to Enzyme 3.x. (#12) * Add findTestSubject test helper. Fix KuiCodeEditor tests. * Fix KuiContextMenu tests. * Fix KuiConfirmModal tests. * Fix tests for KuiPager. * Update KuiConfirmModal tests to use findTestSubject helper. * Publish test helpers from ui_framework. Fix DashboardCloneModal tests. * Fix more tests (#14) * Fix DashboardPanelContainer tests. * Update KuiColorPicker tests. * Fix ControlsTab tests. * Rename vis to input_control_vis. Update and fix InputControlVis tests. * Fix KuiListingTable tests. * Fix KuiTextInput tests. * Update DashboardGrid test snapshots. * Fix test file names (#15) * Remove old enzyme setup file. * Add .test to YesNo and AddDeleteButtons test files. * needed window.cancelAnimationFrame to accompany requestAnimationFrame * remove getDOMNode function call from findTestSubject
elastic · Dec 11, 2017 · f4e94f7 · f4e94f7
1 parent b58beed
commit f4e94f7
Show file tree

Hide file tree

Showing 38 changed files with 214 additions and 171 deletions.
diff --git a/package.json b/package.json
@@ -123,7 +123,7 @@
     "expose-loader": "0.7.3",
     "extract-text-webpack-plugin": "3.0.1",
     "file-loader": "1.1.4",
-    "focus-trap-react": "3.0.3",
+    "focus-trap-react": "3.0.5",
     "font-awesome": "4.4.0",
     "glob": "5.0.13",
     "glob-all": "3.0.1",
@@ -155,37 +155,37 @@
     "mkdirp": "0.5.1",
     "moment": "2.13.0",
     "moment-timezone": "0.5.4",
-    "ngreact": "0.3.0",
+    "ngreact": "0.5.1",
     "no-ui-slider": "1.2.0",
     "node-fetch": "1.3.2",
     "pegjs": "0.9.0",
     "postcss-loader": "2.0.6",
     "prop-types": "15.5.8",
     "proxy-from-env": "1.0.0",
-    "pui-react-overlay-trigger": "7.5.4",
-    "pui-react-tooltip": "7.5.4",
+    "pui-react-overlay-trigger": "8.3.3",
+    "pui-react-tooltip": "8.3.3",
     "querystring-browser": "1.0.4",
     "raw-loader": "0.5.1",
-    "react": "15.6.1",
+    "react": "16.0.0",
     "react-ace": "5.2.2",
-    "react-test-renderer": "15.6.1",
-    "react-addons-test-utils": "15.6.0",
-    "react-anything-sortable": "1.6.1",
+    "react-addons-test-utils": "15.6.2",
+    "react-anything-sortable": "1.7.3",
     "react-color": "2.11.7",
-    "react-dom": "15.6.1",
+    "react-dom": "16.0.0",
     "react-grid-layout": "0.16.0",
     "react-input-autosize": "1.1.0",
     "react-input-range": "1.2.1",
-    "react-markdown": "2.4.2",
+    "react-markdown": "3.1.0",
     "react-redux": "5.0.5",
     "react-router": "2.0.0",
     "react-router-dom": "4.2.2",
     "react-router-redux": "4.0.4",
     "react-select": "1.0.0-rc.5",
     "react-sizeme": "2.3.4",
     "react-sortable": "1.1.0",
-    "react-toggle": "3.0.1",
-    "reactcss": "1.0.7",
+    "react-test-renderer": "16.0.0",
+    "react-toggle": "4.0.2",
+    "reactcss": "1.2.3",
     "redux": "3.7.2",
     "redux-actions": "2.2.1",
     "redux-thunk": "2.2.0",
@@ -228,8 +228,9 @@
     "chokidar": "1.6.0",
     "chromedriver": "2.33.2",
     "classnames": "2.2.5",
-    "enzyme": "2.9.1",
-    "enzyme-to-json": "1.4.5",
+    "enzyme": "3.2.0",
+    "enzyme-adapter-react-16": "1.1.0",
+    "enzyme-to-json": "3.1.4",
     "eslint": "4.10.0",
     "eslint-plugin-babel": "4.1.2",
     "eslint-plugin-import": "2.8.0",
@@ -260,8 +261,8 @@
     "husky": "0.8.1",
     "image-diff": "1.6.0",
     "istanbul-instrumenter-loader": "3.0.0",
-    "jest": "21.0.1",
-    "jest-cli": "21.0.1",
+    "jest": "21.2.1",
+    "jest-cli": "21.2.1",
     "jsdom": "9.9.1",
     "karma": "1.7.0",
     "karma-chrome-launcher": "2.1.1",

diff --git a/...lugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap b/...lugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
@@ -27,6 +27,7 @@ exports[`renders ControlsTab 1`] = `
     handleLabelChange={[Function]}
     handleNumberOptionChange={[Function]}
     handleRemoveControl={[Function]}
+    key="1"
     moveControl={[Function]}
   />
   <ControlEditor
@@ -51,6 +52,7 @@ exports[`renders ControlsTab 1`] = `
     handleLabelChange={[Function]}
     handleNumberOptionChange={[Function]}
     handleRemoveControl={[Function]}
+    key="2"
     moveControl={[Function]}
   />
   <div

diff --git a/src/core_plugins/input_control_vis/public/components/editor/controls_tab.test.js b/src/core_plugins/input_control_vis/public/components/editor/controls_tab.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import sinon from 'sinon';
 import { mount, shallow } from 'enzyme';
-
+import { findTestSubject } from 'ui_framework/test';
 import {
   ControlsTab,
 } from './controls_tab';
@@ -84,7 +84,7 @@ test('add control btn', () => {
     scope={scopeMock}
     stageEditorParams={stageEditorParams}
   />);
-  component.find('[data-test-subj="inputControlEditorAddBtn"]').simulate('click');
+  findTestSubject(component, 'inputControlEditorAddBtn').simulate('click');
   // Use custom match function since control.id is dynamically generated and never the same.
   sinon.assert.calledWith(stageEditorParams, sinon.match((newParams) => {
     if (newParams.controls.length !== 3) {
@@ -99,7 +99,7 @@ test('remove control btn', () => {
     scope={scopeMock}
     stageEditorParams={stageEditorParams}
   />);
-  component.find('[data-test-subj="inputControlEditorRemoveControl0"]').simulate('click');
+  findTestSubject(component, 'inputControlEditorRemoveControl0').simulate('click');
   const expectedParams = {
     'controls': [
       {
@@ -123,7 +123,7 @@ test('move down control btn', () => {
     scope={scopeMock}
     stageEditorParams={stageEditorParams}
   />);
-  component.find('[data-test-subj="inputControlEditorMoveDownControl0"]').simulate('click');
+  findTestSubject(component, 'inputControlEditorMoveDownControl0').simulate('click');
   const expectedParams = {
     'controls': [
       {
@@ -159,7 +159,7 @@ test('move up control btn', () => {
     scope={scopeMock}
     stageEditorParams={stageEditorParams}
   />);
-  component.find('[data-test-subj="inputControlEditorMoveUpControl1"]').simulate('click');
+  findTestSubject(component, 'inputControlEditorMoveUpControl1').simulate('click');
   const expectedParams = {
     'controls': [
       {

diff --git a/...onents/vis/__snapshots__/vis.test.js.snap → ...napshots__/input_control_vis.test.js.snap b/...onents/vis/__snapshots__/vis.test.js.snap → ...napshots__/input_control_vis.test.js.snap
@@ -12,6 +12,7 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
   >
     <KuiFlexItem
       grow={true}
+      key="mock-list-control"
       style={
         Object {
           "minWidth": "250px",
@@ -106,6 +107,7 @@ exports[`Clear btns enabled when there are values 1`] = `
   >
     <KuiFlexItem
       grow={true}
+      key="mock-list-control"
       style={
         Object {
           "minWidth": "250px",
@@ -200,6 +202,7 @@ exports[`Renders list control 1`] = `
   >
     <KuiFlexItem
       grow={true}
+      key="mock-list-control"
       style={
         Object {
           "minWidth": "250px",
@@ -294,6 +297,7 @@ exports[`Renders range control 1`] = `
   >
     <KuiFlexItem
       grow={true}
+      key="mock-range-control"
       style={
         Object {
           "minWidth": "250px",

diff --git a/..._control_vis/public/components/vis/vis.js → ...ublic/components/vis/input_control_vis.js b/..._control_vis/public/components/vis/vis.js → ...ublic/components/vis/input_control_vis.js
diff --git a/...rol_vis/public/components/vis/vis.test.js → .../components/vis/input_control_vis.test.js b/...rol_vis/public/components/vis/vis.test.js → .../components/vis/input_control_vis.test.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import sinon from 'sinon';
 import { mount, shallow } from 'enzyme';
+import { findTestSubject } from 'ui_framework/test';
 
 import {
   InputControlVis,
-} from './vis';
+} from './input_control_vis';
 
 const mockListControl = {
   id: 'mock-list-control',
@@ -114,7 +115,7 @@ test('clearControls', () => {
     hasChanges={() => { return true; }}
     hasValues={() => { return true; }}
   />);
-  component.find('[data-test-subj="inputControlClearBtn"]').simulate('click');
+  findTestSubject(component, 'inputControlClearBtn').simulate('click');
   sinon.assert.calledOnce(clearControls);
   sinon.assert.notCalled(submitFilters);
   sinon.assert.notCalled(resetControls);
@@ -132,7 +133,7 @@ test('submitFilters', () => {
     hasChanges={() => { return true; }}
     hasValues={() => { return true; }}
   />);
-  component.find('[data-test-subj="inputControlSubmitBtn"]').simulate('click');
+  findTestSubject(component, 'inputControlSubmitBtn').simulate('click');
   sinon.assert.calledOnce(submitFilters);
   sinon.assert.notCalled(clearControls);
   sinon.assert.notCalled(resetControls);
@@ -150,7 +151,7 @@ test('resetControls', () => {
     hasChanges={() => { return true; }}
     hasValues={() => { return true; }}
   />);
-  component.find('[data-test-subj="inputControlCancelBtn"]').simulate('click');
+  findTestSubject(component, 'inputControlCancelBtn').simulate('click');
   sinon.assert.calledOnce(resetControls);
   sinon.assert.notCalled(clearControls);
   sinon.assert.notCalled(submitFilters);
@@ -168,7 +169,7 @@ test('stageFilter list control', () => {
     hasChanges={() => { return true; }}
     hasValues={() => { return true; }}
   />);
-  const reactSelectInput = component.find(`#${mockListControl.id}`);
+  const reactSelectInput = component.find(`#${mockListControl.id}`).hostNodes();
   reactSelectInput.simulate('change', { target: { value: 'choice1' } });
   reactSelectInput.simulate('keyDown', { keyCode: 9, key: 'Tab' });
   sinon.assert.notCalled(clearControls);

diff --git a/src/core_plugins/input_control_vis/public/vis_controller.js b/src/core_plugins/input_control_vis/public/vis_controller.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { InputControlVis } from './components/vis/vis';
+import { InputControlVis } from './components/vis/input_control_vis';
 import { controlFactory } from './control/control_factory';
 
 class VisController {

diff --git a/src/core_plugins/kibana/public/dashboard/grid/__snapshots__/dashboard_grid.test.js.snap b/src/core_plugins/kibana/public/dashboard/grid/__snapshots__/dashboard_grid.test.js.snap
@@ -26,6 +26,7 @@ exports[`renders DashboardGrid 1`] = `
 >
   <div
     className=""
+    key="1"
   >
     <Connect(DashboardPanel)
       embeddableFactory={
@@ -45,6 +46,7 @@ exports[`renders DashboardGrid 1`] = `
   </div>
   <div
     className=""
+    key="2"
   >
     <Connect(DashboardPanel)
       embeddableFactory={

diff --git a/src/core_plugins/kibana/public/dashboard/panel/dashboard_panel.test.js b/src/core_plugins/kibana/public/dashboard/panel/dashboard_panel.test.js
@@ -14,7 +14,7 @@ import { getEmbeddableFactoryMock } from '../__tests__/get_embeddable_factories_
 
 import {
   takeMountedSnapshot,
-} from 'ui_framework/src/test';
+} from 'ui_framework/test';
 
 function getProps(props = {}) {
   const defaultTestProps = {

diff --git a/src/core_plugins/kibana/public/dashboard/panel/dashboard_panel_container.test.js b/src/core_plugins/kibana/public/dashboard/panel/dashboard_panel_container.test.js
@@ -35,8 +35,8 @@ test('renders an error when embeddableFactory.render throws an error', (done) =>
     });
   };
   const component = mount(<Provider store={store}><DashboardPanelContainer {...props} /></Provider>);
-
   setTimeout(() => {
+    component.update();
     const panelError = component.find(PanelError);
     expect(panelError.length).toBe(1);
     done();

diff --git a/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header_container.test.js b/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header_container.test.js
@@ -16,7 +16,7 @@ import {
 import { getEmbeddableFactoryMock } from '../../__tests__/get_embeddable_factories_mock';
 import {
   TestSubjects,
-} from 'ui_framework/src/test';
+} from 'ui_framework/test';
 
 function getProps(props = {}) {
   const defaultTestProps = {

diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less
@@ -405,9 +405,13 @@ dashboard-viewport-provider {
 }
 
 .dashboard-viewport {
+  height: 100%;
+  width: 100%;
   background-color: @dashboard-bg;
 }
 .dashboard-viewport-with-margins {
+  height: 100%;
+  width: 100%;
   background-color: @dashboard-bg-with-margins;
 }
 

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.test.js b/src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.test.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import sinon from 'sinon';
 import { mount, render } from 'enzyme';
+import {
+  findTestSubject,
+} from 'ui_framework/test';
 
 import {
   DashboardCloneModal,
@@ -32,14 +35,14 @@ test('renders DashboardCloneModal', () => {
 
 test('onClone', () => {
   createComponent();
-  component.find('[data-test-subj="cloneConfirmButton"]').simulate('click');
+  findTestSubject(component, 'cloneConfirmButton', false).simulate('click');
   sinon.assert.calledWith(onClone, 'dash title');
   sinon.assert.notCalled(onClose);
 });
 
 test('onClose', () => {
   createComponent();
-  component.find('[data-test-subj="cloneCancelButton"]').simulate('click');
+  findTestSubject(component, 'cloneCancelButton', false).simulate('click');
   sinon.assert.calledOnce(onClose);
   sinon.assert.notCalled(onClone);
 });
@@ -48,6 +51,6 @@ test('title', () => {
   createComponent();
   const event = { target: { value: 'a' } };
   component.find('input').simulate('change', event);
-  component.find('[data-test-subj="cloneConfirmButton"]').simulate('click');
+  findTestSubject(component, 'cloneConfirmButton', false).simulate('click');
   sinon.assert.calledWith(onClone, 'a');
 });
diff --git a/...omponents/__tests__/add_delete_buttons.js → ...lic/components/add_delete_buttons.test.js b/...omponents/__tests__/add_delete_buttons.js → ...lic/components/add_delete_buttons.test.js
@@ -2,10 +2,9 @@ import React from 'react';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
-import AddDeleteButtons from '../add_delete_buttons';
-
-describe('<AddDeleteButtons />', () => {
+import AddDeleteButtons from './add_delete_buttons';
 
+describe('AddDeleteButtons', () => {
   it('calls onAdd={handleAdd}', () => {
     const handleAdd = sinon.spy();
     const wrapper = shallow(
@@ -61,5 +60,4 @@ describe('<AddDeleteButtons />', () => {
     );
     expect(wrapper.find({ text: 'Clone' })).to.have.length(0);
   });
-
 });
diff --git a/src/core_plugins/metrics/public/components/aggs/math.js b/src/core_plugins/metrics/public/components/aggs/math.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import _ from 'lodash';
 import uuid from 'uuid';
 import AggRow from './agg_row';

diff --git a/src/core_plugins/metrics/public/components/panel_config/table.js b/src/core_plugins/metrics/public/components/panel_config/table.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import FieldSelect from '../aggs/field_select';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';

diff --git a/src/core_plugins/metrics/public/components/vis_types/table/config.js b/src/core_plugins/metrics/public/components/vis_types/table/config.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import uuid from 'uuid';
 import DataFormatPicker from '../../data_format_picker';
 import createSelectHandler from '../../lib/create_select_handler';

diff --git a/src/core_plugins/metrics/public/components/vis_types/table/series.js b/src/core_plugins/metrics/public/components/vis_types/table/series.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import AddDeleteButtons from '../../add_delete_buttons';
 import SeriesConfig from './config';
 import Sortable from 'react-anything-sortable';

diff --git a/src/core_plugins/metrics/public/components/vis_types/table/vis.js b/src/core_plugins/metrics/public/components/vis_types/table/vis.js
@@ -1,5 +1,6 @@
 import _ from 'lodash';
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import ticFormatter from '../../lib/tick_formatter';
 import calculateLabel from '../../../../common/calculate_label';
 import { isSortable } from './is_sortable';

diff --git a/...ics/public/components/__tests__/yes_no.js → .../metrics/public/components/yes_no.test.js b/...ics/public/components/__tests__/yes_no.js → .../metrics/public/components/yes_no.test.js
@@ -2,10 +2,9 @@ import React from 'react';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
-import YesNo from '../yes_no';
-
-describe('<YesNo />', () => {
+import YesNo from './yes_no';
 
+describe('YesNo', () => {
   it('call onChange={handleChange} on yes', () => {
     const handleChange = sinon.spy();
     const wrapper = shallow(
@@ -29,5 +28,4 @@ describe('<YesNo />', () => {
       test: 0
     });
   });
-
 });