From f4e94f70b09be8e72ee3f24a588a6bf489ca8325 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 11 Dec 2017 15:26:47 -0700 Subject: [PATCH] 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 --- package.json | 33 +++---- .../__snapshots__/controls_tab.test.js.snap | 2 + .../components/editor/controls_tab.test.js | 10 +-- ...js.snap => input_control_vis.test.js.snap} | 4 + .../vis/{vis.js => input_control_vis.js} | 0 ...{vis.test.js => input_control_vis.test.js} | 11 +-- .../public/vis_controller.js | 2 +- .../__snapshots__/dashboard_grid.test.js.snap | 2 + .../dashboard/panel/dashboard_panel.test.js | 2 +- .../panel/dashboard_panel_container.test.js | 2 +- .../panel_header_container.test.js | 2 +- .../kibana/public/dashboard/styles/index.less | 4 + .../dashboard/top_nav/clone_modal.test.js | 9 +- ..._buttons.js => add_delete_buttons.test.js} | 6 +- .../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 +- .../{__tests__/yes_no.js => yes_no.test.js} | 6 +- src/dev/jest/config.json | 5 +- src/dev/jest/setup/enzyme.js | 4 + .../setup/request_animation_frame_polyfill.js | 4 + .../__snapshots__/code_editor.test.js.snap | 89 ++++++++----------- .../code_editor/code_editor.test.js | 23 ++--- .../__snapshots__/color_picker.test.js.snap | 6 +- .../color_picker/color_picker.test.js | 1 - .../context_menu_item.test.js.snap | 15 ++++ .../context_menu/context_menu_item.test.js | 13 ++- .../context_menu/context_menu_panel.test.js | 48 ++++------ .../form/text_input/text_input.test.js | 10 +-- .../components/modal/confirm_modal.test.js | 24 +++-- .../src/components/pager/pager.test.js | 6 +- .../pager/pager_button_group.test.js | 7 +- .../table/listing_table/listing_table.test.js | 5 +- ui_framework/src/test/find_test_subject.js | 13 +++ ui_framework/src/test/index.js | 1 + ui_framework/test/index.js | 1 + 38 files changed, 214 insertions(+), 171 deletions(-) rename src/core_plugins/input_control_vis/public/components/vis/__snapshots__/{vis.test.js.snap => input_control_vis.test.js.snap} (98%) rename src/core_plugins/input_control_vis/public/components/vis/{vis.js => input_control_vis.js} (100%) rename src/core_plugins/input_control_vis/public/components/vis/{vis.test.js => input_control_vis.test.js} (94%) rename src/core_plugins/metrics/public/components/{__tests__/add_delete_buttons.js => add_delete_buttons.test.js} (94%) rename src/core_plugins/metrics/public/components/{__tests__/yes_no.js => yes_no.test.js} (93%) create mode 100644 src/dev/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/package.json b/package.json index 1cf597cd1cdd2..0632f3c1318de 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", @@ -155,28 +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-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", @@ -184,8 +183,9 @@ "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/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap index ef492095b2dd7..99296d67edf26 100644 --- a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap +++ b/src/core_plugins/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]} />
{ 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/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/vis.test.js.snap b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap similarity index 98% rename from src/core_plugins/input_control_vis/public/components/vis/__snapshots__/vis.test.js.snap rename to src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap index 67734997dcdcb..d3f863b575c06 100644 --- a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/vis.test.js.snap +++ b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap @@ -12,6 +12,7 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = ` > { 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 index 32588b43dc73b..e6d5b8bb261e6 100644 --- 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 index 766b9e8f2dfee..bca26ea0e8472 100644 --- 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`] = ` >
}); }; const component = mount(); - 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 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/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less index 659150dcabbab..85bfa8689180e 100644 --- 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 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/core_plugins/metrics/public/components/__tests__/add_delete_buttons.js b/src/core_plugins/metrics/public/components/add_delete_buttons.test.js similarity index 94% rename from src/core_plugins/metrics/public/components/__tests__/add_delete_buttons.js rename to src/core_plugins/metrics/public/components/add_delete_buttons.test.js index debda175b69c8..202dc891c67d6 100644 --- a/src/core_plugins/metrics/public/components/__tests__/add_delete_buttons.js +++ b/src/core_plugins/metrics/public/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('', () => { +import AddDeleteButtons from './add_delete_buttons'; +describe('AddDeleteButtons', () => { it('calls onAdd={handleAdd}', () => { const handleAdd = sinon.spy(); const wrapper = shallow( @@ -61,5 +60,4 @@ describe('', () => { ); 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 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'; diff --git a/src/core_plugins/metrics/public/components/__tests__/yes_no.js b/src/core_plugins/metrics/public/components/yes_no.test.js similarity index 93% rename from src/core_plugins/metrics/public/components/__tests__/yes_no.js rename to src/core_plugins/metrics/public/components/yes_no.test.js index c0f53337b916e..a2b05d725493c 100644 --- a/src/core_plugins/metrics/public/components/__tests__/yes_no.js +++ b/src/core_plugins/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('', () => { +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('', () => { test: 0 }); }); - }); diff --git a/src/dev/jest/config.json b/src/dev/jest/config.json index 5e5c9f52cb10a..a30fe06e0c4f8 100644 --- a/src/dev/jest/config.json +++ b/src/dev/jest/config.json @@ -16,14 +16,15 @@ "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", "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() }); diff --git a/src/dev/jest/setup/request_animation_frame_polyfill.js b/src/dev/jest/setup/request_animation_frame_polyfill.js index 0c0dd13932df7..059b24602ead8 100644 --- a/src/dev/jest/setup/request_animation_frame_polyfill.js +++ b/src/dev/jest/setup/request_animation_frame_polyfill.js @@ -16,3 +16,7 @@ window.requestAnimationFrame = (() => { } }; })(); + +window.cancelAnimationFrame = (id) => { + clearTimeout(id); +}; 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').getDOMNode(); + 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'); + hint.simulate('keyup', { keyCode: keyCodes.ENTER }); + expect(findTestSubject(component, 'codeEditorHint').getDOMNode()).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'); + hint.simulate('keyup', { keyCode: keyCodes.ENTER }); component.instance().onBlurAce(); - expect(hint).toMatchSnapshot(); + expect(findTestSubject(component, 'codeEditorHint').getDOMNode()).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').getDOMNode(); + expect(hint).toBe(document.activeElement); }); }); }); diff --git a/ui_framework/src/components/color_picker/__snapshots__/color_picker.test.js.snap b/ui_framework/src/components/color_picker/__snapshots__/color_picker.test.js.snap index 01fa997444f96..660f947c68c21 100644 --- a/ui_framework/src/components/color_picker/__snapshots__/color_picker.test.js.snap +++ b/ui_framework/src/components/color_picker/__snapshots__/color_picker.test.js.snap @@ -12,7 +12,7 @@ exports[`renders KuiColorPicker 1`] = ` aria-label="aria-label" class="kuiColorPicker__swatch" data-test-subj="colorSwatch" - style="background:#ffeedd;" + style="background:#ffeedd" />
diff --git a/ui_framework/src/components/color_picker/color_picker.test.js b/ui_framework/src/components/color_picker/color_picker.test.js index 8c848634e342b..ae560fce67f59 100644 --- a/ui_framework/src/components/color_picker/color_picker.test.js +++ b/ui_framework/src/components/color_picker/color_picker.test.js @@ -102,7 +102,6 @@ test('Setting a new color calls onChange', () => { const event = { target: { value: '#000000' } }; const inputs = colorPicker.find('input'); expect(inputs.length).toBe(1); - inputs.get(0).value = ''; inputs.simulate('change', event); sinon.assert.calledOnce(onChange); sinon.assert.calledWith(onChange, '#000000'); 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`] = `