Fix more tests

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]}
   />
   <ControlEditor
@@ -51,6 +52,7 @@ exports[`renders ControlsTab 1`] = `
     handleLabelChange={[Function]}
     handleNumberOptionChange={[Function]}
     handleRemoveControl={[Function]}
+    key="2"
     moveControl={[Function]}
   />
   <div

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', false).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', false).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', false).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', false).simulate('click');
   const expectedParams = {
     'controls': [
       {

src/core_plugins/input_control_vis/public/components/vis/__snapshots__/vis.test.js.snap → 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`] = `
   >
     <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",

src/core_plugins/input_control_vis/public/components/vis/vis.test.js → src/core_plugins/input_control_vis/public/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', false).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', false).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', false).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);

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 {

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={

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();

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"
     />
     <div
       aria-label="Color selection is #ffeedd"
@@ -36,7 +36,7 @@ exports[`renders KuiColorPicker with an empty swatch when color is null 1`] = `
       aria-label="aria-label"
       class="kuiColorPicker__swatch kuiColorPicker__emptySwatch"
       data-test-subj="colorSwatch"
-      style="background:;"
+      style="background:"
     >
       <svg>
         <line
@@ -69,7 +69,7 @@ exports[`renders KuiColorPicker without a color label when showColorLabel is fal
       aria-label="aria-label"
       class="kuiColorPicker__swatch"
       data-test-subj="colorSwatch"
-      style="background:#ffffff;"
+      style="background:#ffffff"
     />
   </div>
 </div>

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');

ui_framework/src/components/form/text_input/text_input.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, shallow, mount } from 'enzyme';
-import { requiredProps } from '../../../test/required_props';
+import { requiredProps, findTestSubject } from '../../../test';
 import sinon from 'sinon';
 
 import {
@@ -55,8 +55,8 @@ describe('KuiTextInput', () => {
         );
 
         expect(
-          component.find('[data-test-subj="input"]').matchesElement(document.activeElement)
-        ).toBe(true);
+          findTestSubject(component, 'input')
+        ).toBe(document.activeElement);
       });
 
       test('does not focus the element by default', () => {
@@ -68,8 +68,8 @@ describe('KuiTextInput', () => {
         );
 
         expect(
-          component.find('[data-test-subj="input"]').matchesElement(document.activeElement)
-        ).toBe(false);
+          findTestSubject(component, 'input')
+        ).not.toBe(document.activeElement);
       });
     });
 

ui_framework/src/components/table/listing_table/listing_table.test.js

@@ -1,9 +1,6 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
-import { requiredProps } from '../../../test/required_props';
-import {
-  takeMountedSnapshot,
-} from 'ui_framework/src/test';
+import { requiredProps, takeMountedSnapshot } from '../../../test';
 import {
   KuiListingTable,
 } from './listing_table';