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.
cjcenizal · Dec 7, 2017 · 264a9df · 264a9df
1 parent 3da695d
commit 264a9df
Show file tree

Hide file tree

Showing 16 changed files with 141 additions and 117 deletions.
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/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
@@ -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
@@ -16,14 +16,14 @@
   "moduleNameMapper": {
     "^ui_framework/components": "<rootDir>/ui_framework/components",
     "^ui_framework/services": "<rootDir>/ui_framework/services",
-    "^ui_framework/src/test": "<rootDir>/ui_framework/src/test",
+    "^ui_framework/test": "<rootDir>/ui_framework/test",
     "^ui/(.*)": "<rootDir>/src/ui/public/$1",
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/dev/jest/mocks/file_mock.js",
     "\\.(css|less|scss)$": "<rootDir>/src/dev/jest/mocks/style_mock.js"
   },
   "setupFiles": [
     "<rootDir>/src/dev/jest/setup/babel_polyfill.js",
-    "<rootDir>/src/dev/jest/setup/request_animation_frame_polyfill.js"
+    "<rootDir>/src/dev/jest/setup/request_animation_frame_polyfill.js",
     "<rootDir>/src/dev/jest/setup/enzyme.js"
   ],
   "coverageDirectory": "<rootDir>/target/jest-coverage",

diff --git a/src/jest/setup/enzyme.js 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
@@ -2,23 +2,21 @@
 
 exports[`KuiCodeEditor behavior hint element should be disabled when the ui ace box gains focus 1`] = `
 <div
-  className="kuiCodeEditorKeyboardHint kuiCodeEditorKeyboardHint-isInactive"
+  class="kuiCodeEditorKeyboardHint"
   data-test-subj="codeEditorHint"
-  id={42}
-  onClick={[Function]}
-  onKeyDown={[Function]}
+  id="42"
   role="button"
-  tabIndex="0"
+  tabindex="0"
 >
   <p
-    className="kuiText kuiVerticalRhythmSmall"
+    class="kuiText kuiVerticalRhythmSmall"
   >
     Press Enter to start 
     editing
     .
   </p>
   <p
-    className="kuiText kuiVerticalRhythmSmall"
+    class="kuiText kuiVerticalRhythmSmall"
   >
     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`] = `
 <div
-  className="kuiCodeEditorKeyboardHint"
+  class="kuiCodeEditorKeyboardHint"
   data-test-subj="codeEditorHint"
-  id={42}
-  onClick={[Function]}
-  onKeyDown={[Function]}
+  id="42"
   role="button"
-  tabIndex="0"
+  tabindex="0"
 >
   <p
-    className="kuiText kuiVerticalRhythmSmall"
+    class="kuiText kuiVerticalRhythmSmall"
   >
     Press Enter to start 
     editing
     .
   </p>
   <p
-    className="kuiText kuiVerticalRhythmSmall"
+    class="kuiText kuiVerticalRhythmSmall"
+  >
+    When you’re done, press Escape to stop 
+    editing
+    .
+  </p>
+</div>
+`;
+
+exports[`KuiCodeEditor behavior hint element should be tabable 1`] = `
+<div
+  class="kuiCodeEditorKeyboardHint"
+  data-test-subj="codeEditorHint"
+  id="42"
+  role="button"
+  tabindex="0"
+>
+  <p
+    class="kuiText kuiVerticalRhythmSmall"
+  >
+    Press Enter to start 
+    editing
+    .
+  </p>
+  <p
+    class="kuiText kuiVerticalRhythmSmall"
   >
     When you’re done, press Escape to stop 
     editing
@@ -68,28 +89,12 @@ exports[`KuiCodeEditor is rendered 1`] = `
     <p
       class="kuiText kuiVerticalRhythmSmall"
     >
-      <!-- react-text: 4 -->
-      Press Enter to start 
-      <!-- /react-text -->
-      <!-- react-text: 5 -->
-      editing
-      <!-- /react-text -->
-      <!-- react-text: 6 -->
-      .
-      <!-- /react-text -->
+      Press Enter to start editing.
     </p>
     <p
       class="kuiText kuiVerticalRhythmSmall"
     >
-      <!-- react-text: 8 -->
-      When you’re done, press Escape to stop 
-      <!-- /react-text -->
-      <!-- react-text: 9 -->
-      editing
-      <!-- /react-text -->
-      <!-- react-text: 10 -->
-      .
-      <!-- /react-text -->
+      When you’re done, press Escape to stop editing.
     </p>
   </div>
   <div
@@ -197,28 +202,12 @@ exports[`KuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
     <p
       class="kuiText kuiVerticalRhythmSmall"
     >
-      <!-- react-text: 4 -->
-      Press Enter to start 
-      <!-- /react-text -->
-      <!-- react-text: 5 -->
-      interacting with the code
-      <!-- /react-text -->
-      <!-- react-text: 6 -->
-      .
-      <!-- /react-text -->
+      Press Enter to start interacting with the code.
     </p>
     <p
       class="kuiText kuiVerticalRhythmSmall"
     >
-      <!-- react-text: 8 -->
-      When you’re done, press Escape to stop 
-      <!-- /react-text -->
-      <!-- react-text: 9 -->
-      interacting with the code
-      <!-- /react-text -->
-      <!-- react-text: 10 -->
-      .
-      <!-- /react-text -->
+      When you’re done, press Escape to stop interacting with the code.
     </p>
   </div>
   <div

diff --git a/ui_framework/src/components/code_editor/code_editor.test.js b/ui_framework/src/components/code_editor/code_editor.test.js
@@ -4,6 +4,7 @@ import { mount } from 'enzyme';
 import { KuiCodeEditor } from './code_editor';
 import { keyCodes } from '../../services';
 import {
+  findTestSubject,
   requiredProps,
   takeMountedSnapshot,
 } from '../../test';
@@ -37,20 +38,21 @@ describe('KuiCodeEditor', () => {
 
     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
@@ -18,6 +18,21 @@ exports[`KuiContextMenuItem is rendered 1`] = `
 </button>
 `;
 
+exports[`KuiContextMenuItem props disabled is rendered 1`] = `
+<button
+  class="kuiContextMenuItem kuiContextMenuItem-disabled"
+  disabled=""
+>
+  <span
+    class="kuiContextMenu__itemLayout"
+  >
+    <span
+      class="kuiContextMenuItem__text"
+    />
+  </span>
+</button>
+`;
+
 exports[`KuiContextMenuItem props hasPanel is rendered 1`] = `
 <button
   class="kuiContextMenuItem"

diff --git a/ui_framework/src/components/context_menu/context_menu_item.test.js b/ui_framework/src/components/context_menu/context_menu_item.test.js
@@ -29,6 +29,17 @@ describe('KuiContextMenuItem', () => {
       });
     });
 
+    describe('disabled', () => {
+      test('is rendered', () => {
+        const component = render(
+          <KuiContextMenuItem disabled />
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+    });
+
     describe('onClick', () => {
       test(`isn't called upon instantiation`, () => {
         const onClickHandler = sinon.stub();
@@ -56,7 +67,7 @@ describe('KuiContextMenuItem', () => {
         const onClickHandler = sinon.stub();
 
         const component = mount(
-          <KuiContextMenuItem disabled={true} onClick={onClickHandler} />
+          <KuiContextMenuItem disabled onClick={onClickHandler} />
         );
 
         component.simulate('click');