From 3ac09355be7d242ab9d3f02c5c4eed5660d8dd68 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 6 Dec 2017 15:26:25 -0700 Subject: [PATCH 1/8] get kibana to start with react 16.0.0 --- package.json | 18 +++++++++--------- .../metrics/public/components/aggs/math.js | 3 ++- .../public/components/panel_config/table.js | 3 ++- .../components/vis_types/table/config.js | 3 ++- .../components/vis_types/table/series.js | 3 ++- .../public/components/vis_types/table/vis.js | 3 ++- 6 files changed, 19 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 3781b13313837..e900b5f95fffd 100644 --- a/package.json +++ b/package.json @@ -155,27 +155,27 @@ "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-addons-test-utils": "15.6.0", - "react-anything-sortable": "1.6.1", + "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", @@ -184,8 +184,8 @@ "react-sizeme": "2.3.4", "react-sortable": "1.1.0", "react-test-renderer": "15.6.1", - "react-toggle": "3.0.1", - "reactcss": "1.0.7", + "react-toggle": "4.0.2", + "reactcss": "1.2.3", "redux": "3.7.2", "redux-actions": "2.2.1", "redux-thunk": "2.2.0", diff --git a/src/core_plugins/metrics/public/components/aggs/math.js b/src/core_plugins/metrics/public/components/aggs/math.js index c0003ed381f1a..ffa339da228d2 100644 --- 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 index 85aa74862aaa3..ca20a15ff50de 100644 --- 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 index fc2511e246f4d..94b6c2fc20d8c 100644 --- 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 index ad4df66232462..6eb8e3a1baa58 100644 --- 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 index 2a3056eabeaac..68527fff658a2 100644 --- 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'; From 08141503c980d44831bcf48adcfbffb970cc1c8d Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 6 Dec 2017 18:55:17 -0700 Subject: [PATCH 2/8] ensure width and height for dashboard grid --- src/core_plugins/kibana/public/dashboard/styles/index.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less index f39dba8a9f18e..651d28f89eb27 100644 --- a/src/core_plugins/kibana/public/dashboard/styles/index.less +++ b/src/core_plugins/kibana/public/dashboard/styles/index.less @@ -404,9 +404,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; } From 3da695d0ffbe0aa1986af91032b9e3e15478082d Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 6 Dec 2017 18:59:22 -0800 Subject: [PATCH 3/8] Update to Enzyme 3.x. (#12) --- package.json | 15 ++++++++------- src/dev/jest/config.json | 1 + src/dev/jest/setup/enzyme.js | 4 ++++ 3 files changed, 13 insertions(+), 7 deletions(-) create mode 100644 src/dev/jest/setup/enzyme.js diff --git a/package.json b/package.json index e900b5f95fffd..d9bb2513f7d9d 100644 --- 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", @@ -168,7 +168,7 @@ "raw-loader": "0.5.1", "react": "16.0.0", "react-ace": "5.2.2", - "react-addons-test-utils": "15.6.0", + "react-addons-test-utils": "15.6.2", "react-anything-sortable": "1.7.3", "react-color": "2.11.7", "react-dom": "16.0.0", @@ -183,7 +183,7 @@ "react-select": "1.0.0-rc.5", "react-sizeme": "2.3.4", "react-sortable": "1.1.0", - "react-test-renderer": "15.6.1", + "react-test-renderer": "16.0.0", "react-toggle": "4.0.2", "reactcss": "1.2.3", "redux": "3.7.2", @@ -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/src/dev/jest/config.json b/src/dev/jest/config.json index 5e5c9f52cb10a..f1eb6a82a0129 100644 --- a/src/dev/jest/config.json +++ b/src/dev/jest/config.json @@ -24,6 +24,7 @@ "setupFiles": [ "/src/dev/jest/setup/babel_polyfill.js", "/src/dev/jest/setup/request_animation_frame_polyfill.js" + "/src/dev/jest/setup/enzyme.js" ], "coverageDirectory": "/target/jest-coverage", "coverageReporters": [ diff --git a/src/dev/jest/setup/enzyme.js b/src/dev/jest/setup/enzyme.js new file mode 100644 index 0000000000000..82edfc9e5adea --- /dev/null +++ b/src/dev/jest/setup/enzyme.js @@ -0,0 +1,4 @@ +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +configure({ adapter: new Adapter() }); From 264a9df75021e7bc4724e2637a8c0777d1f44407 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 7 Dec 2017 11:21:02 -0800 Subject: [PATCH 4/8] 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. --- .../dashboard/panel/dashboard_panel.test.js | 2 +- .../panel_header_container.test.js | 2 +- .../dashboard/top_nav/clone_modal.test.js | 9 +- src/dev/jest/config.json | 4 +- src/jest/setup/enzyme.js | 4 + .../__snapshots__/code_editor.test.js.snap | 89 ++++++++----------- .../code_editor/code_editor.test.js | 23 ++--- .../context_menu_item.test.js.snap | 15 ++++ .../context_menu/context_menu_item.test.js | 13 ++- .../context_menu/context_menu_panel.test.js | 48 ++++------ .../components/modal/confirm_modal.test.js | 24 +++-- .../src/components/pager/pager.test.js | 6 +- .../pager/pager_button_group.test.js | 7 +- ui_framework/src/test/find_test_subject.js | 10 +++ ui_framework/src/test/index.js | 1 + ui_framework/test/index.js | 1 + 16 files changed, 141 insertions(+), 117 deletions(-) create mode 100644 src/jest/setup/enzyme.js create mode 100644 ui_framework/src/test/find_test_subject.js create mode 100644 ui_framework/test/index.js 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 index 35d1b1ab11384..322936be9a722 100644 --- 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/panel_header/panel_header_container.test.js b/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header_container.test.js index 0ff43bcc65411..4b91d80dd9caa 100644 --- 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/top_nav/clone_modal.test.js b/src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.test.js index 80947ab8200c7..3638aa6eab185 100644 --- 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/src/dev/jest/config.json b/src/dev/jest/config.json index f1eb6a82a0129..a30fe06e0c4f8 100644 --- a/src/dev/jest/config.json +++ b/src/dev/jest/config.json @@ -16,14 +16,14 @@ "moduleNameMapper": { "^ui_framework/components": "/ui_framework/components", "^ui_framework/services": "/ui_framework/services", - "^ui_framework/src/test": "/ui_framework/src/test", + "^ui_framework/test": "/ui_framework/test", "^ui/(.*)": "/src/ui/public/$1", "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/src/dev/jest/mocks/file_mock.js", "\\.(css|less|scss)$": "/src/dev/jest/mocks/style_mock.js" }, "setupFiles": [ "/src/dev/jest/setup/babel_polyfill.js", - "/src/dev/jest/setup/request_animation_frame_polyfill.js" + "/src/dev/jest/setup/request_animation_frame_polyfill.js", "/src/dev/jest/setup/enzyme.js" ], "coverageDirectory": "/target/jest-coverage", diff --git a/src/jest/setup/enzyme.js b/src/jest/setup/enzyme.js new file mode 100644 index 0000000000000..82edfc9e5adea --- /dev/null +++ b/src/jest/setup/enzyme.js @@ -0,0 +1,4 @@ +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +configure({ adapter: new Adapter() }); diff --git a/ui_framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap b/ui_framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap index 971c88b219d5f..1778b94580ad5 100644 --- a/ui_framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap +++ b/ui_framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap @@ -2,23 +2,21 @@ exports[`KuiCodeEditor behavior hint element should be disabled when the ui ace box gains focus 1`] = `

Press Enter to start editing .

When you’re done, press Escape to stop editing @@ -29,23 +27,46 @@ exports[`KuiCodeEditor behavior hint element should be disabled when the ui ace exports[`KuiCodeEditor behavior hint element should be enabled when the ui ace box loses focus 1`] = `

Press Enter to start editing .

+ When you’re done, press Escape to stop + editing + . +

+
+`; + +exports[`KuiCodeEditor behavior hint element should be tabable 1`] = ` +
+

+ Press Enter to start + editing + . +

+

When you’re done, press Escape to stop editing @@ -68,28 +89,12 @@ exports[`KuiCodeEditor is rendered 1`] = `

- - Press Enter to start - - - editing - - - . - + Press Enter to start editing.

- - When you’re done, press Escape to stop - - - editing - - - . - + When you’re done, press Escape to stop editing.

- - Press Enter to start - - - interacting with the code - - - . - + Press Enter to start interacting with the code.

- - When you’re done, press Escape to stop - - - interacting with the code - - - . - + When you’re done, press Escape to stop interacting with the code.

{ describe('hint element', () => { test('should be tabable', () => { - expect(component.find('[data-test-subj="codeEditorHint"]').prop('tabIndex')).toBe('0'); + const hint = findTestSubject(component, 'codeEditorHint'); + expect(hint).toMatchSnapshot(); }); test('should be disabled when the ui ace box gains focus', () => { - const hint = component.find('[data-test-subj="codeEditorHint"]'); - hint.simulate('keydown', { keyCode: keyCodes.ENTER }); - expect(hint).toMatchSnapshot(); + const hint = findTestSubject(component, 'codeEditorHint', false); + hint.simulate('keyup', { keyCode: keyCodes.ENTER }); + expect(findTestSubject(component, 'codeEditorHint')).toMatchSnapshot(); }); test('should be enabled when the ui ace box loses focus', () => { - const hint = component.find('[data-test-subj="codeEditorHint"]'); - hint.simulate('keydown', { keyCode: keyCodes.ENTER }); + const hint = findTestSubject(component, 'codeEditorHint', false); + hint.simulate('keyup', { keyCode: keyCodes.ENTER }); component.instance().onBlurAce(); - expect(hint).toMatchSnapshot(); + expect(findTestSubject(component, 'codeEditorHint')).toMatchSnapshot(); }); }); @@ -66,11 +68,10 @@ describe('KuiCodeEditor', () => { component.instance().onKeydownAce({ preventDefault: () => {}, stopPropagation: () => {}, - keyCode: keyCodes.ESCAPE + keyCode: keyCodes.ESCAPE, }); - expect( - component.find('[data-test-subj="codeEditorHint"]').matchesElement(document.activeElement) - ).toBe(true); + const hint = findTestSubject(component, 'codeEditorHint'); + expect(hint).toBe(document.activeElement); }); }); }); diff --git a/ui_framework/src/components/context_menu/__snapshots__/context_menu_item.test.js.snap b/ui_framework/src/components/context_menu/__snapshots__/context_menu_item.test.js.snap index de10f1d71ac7e..a11599a5244f5 100644 --- a/ui_framework/src/components/context_menu/__snapshots__/context_menu_item.test.js.snap +++ b/ui_framework/src/components/context_menu/__snapshots__/context_menu_item.test.js.snap @@ -18,6 +18,21 @@ exports[`KuiContextMenuItem is rendered 1`] = ` `; +exports[`KuiContextMenuItem props disabled is rendered 1`] = ` + +`; + exports[`KuiContextMenuItem props hasPanel is rendered 1`] = `