chore(testing): adds enzyme and updates existing tests

package.json

@@ -56,6 +56,9 @@
     "coveralls": "^3.0.0",
     "css-loader": "^0.28.8",
     "cz-conventional-changelog": "^2.1.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.1",
     "eslint": "^4.14.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",
@@ -70,8 +73,10 @@
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-react": "^7.5.1",
     "eslint-plugin-standard": "^3.0.1",
-    "jest": "^22.0.4",
-    "jest-cli": "^22.0.4",
+    "istanbul-api": "1.2.2",
+    "istanbul-reports": "1.1.4",
+    "jest": "^22.4.2",
+    "jest-cli": "^22.4.2",
     "node-sass": "^4.7.2",
     "prettier": "^1.9.2",
     "prettier-eslint": "^8.8.1",
@@ -128,6 +133,9 @@
     ],
     "setupFiles": [
       "./src/test.env.js"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
     ]
   },
   "czConfig": {

src/components/AboutModal/AboutModal.test.js

@@ -1,54 +1,34 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { noop } from '../../common/helpers';
+import { mount } from 'enzyme';
 import {
   AboutModal,
   AboutModalVersions,
   AboutModalVersionItem
 } from '../../index';
 
-test('AboutModal renders correctly when hidden', () => {
-  const component = renderer.create(
-    <AboutModal
-      show={false}
-      onHide={noop}
-      productTitle="Product Title"
-      altLogo="Patternfly Logo"
-      trademarkText="Trademark and Copyright Information"
-    >
-      <AboutModalVersions>
-        <AboutModalVersionItem label="Label" versionText="Version" />
-        <AboutModalVersionItem label="Label" versionText="Version" />
-        <AboutModalVersionItem label="Label" versionText="Version" />
-        <AboutModalVersionItem label="Label" versionText="Version" />
-      </AboutModalVersions>
-    </AboutModal>
-  );
+const testAboutModal = props => (
+  <AboutModal
+    show={false}
+    onHide={jest.fn()}
+    productTitle="Product Title"
+    altLogo="Patternfly Logo"
+    trademarkText="Trademark and Copyright Information"
+    {...props}
+  >
+    <AboutModalVersions>
+      <AboutModalVersionItem label="Label" versionText="Version" />
+    </AboutModalVersions>
+  </AboutModal>
+);
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+test('AboutModal renders correctly when hidden', () => {
+  const component = mount(testAboutModal());
+  expect(component.render()).toMatchSnapshot();
+  expect(component.props().show).toBeFalsy();
 });
 
-/** TODO: requires https://github.com/react-bootstrap/react-overlays/issues/225
 test('AboutModal renders correctly when shown', () => {
-  const component = renderer.create(
-    <AboutModal
-      show
-      onHide={noop}
-      productTitle="Product Title"
-      altLogo="Patternfly Logo"
-      trademarkText="Trademark and Copyright Information"
-    >
-      <AboutModalVersions>
-        <AboutModalVersionItem label="Label" versionText="Version" />
-        <AboutModalVersionItem label="Label" versionText="Version" />
-        <AboutModalVersionItem label="Label" versionText="Version" />
-        <AboutModalVersionItem label="Label" versionText="Version" />
-      </AboutModalVersions>
-    </AboutModal>
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  const component = mount(testAboutModal({ show: true }));
+  expect(component.render()).toMatchSnapshot();
+  expect(component.props().show).toBeTruthy();
 });
-*/

src/components/AboutModal/__snapshots__/AboutModal.test.js.snap

@@ -1,3 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AboutModal renders correctly when hidden 1`] = `null`;
+
+exports[`AboutModal renders correctly when shown 1`] = `
+<div
+  role="dialog"
+>
+  <div
+    class="modal-backdrop fade in"
+  />
+  <div
+    class="fade in modal"
+    role="dialog"
+    style="display: block; padding-right: 0px;"
+    tabindex="-1"
+  >
+    <div
+      class="modal-dialog"
+    >
+      <div
+        class="modal-content about-modal-pf"
+        role="document"
+      >
+        <div
+          class="modal-header"
+        >
+          <button
+            class="close"
+          >
+            <span
+              aria-hidden="true"
+              class="pficon pficon-close"
+              title="Close"
+            />
+            <span
+              class="sr-only"
+            >
+              Close
+            </span>
+          </button>
+        </div>
+        <div
+          class="modal-body"
+        >
+          <h1>
+            Product Title
+          </h1>
+          <div
+            class="product-versions-pf"
+          >
+            <ul
+              class="list-unstyled"
+            >
+              <li
+                class=""
+              >
+                <strong>
+                  Label
+                </strong>
+                 Version
+              </li>
+            </ul>
+          </div>
+          <div
+            class="trademark-pf"
+          >
+            Trademark and Copyright Information
+          </div>
+        </div>
+        <div
+          class="modal-footer"
+        >
+          <img
+            alt="Patternfly Logo"
+            src=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/Alert/Alert.test.js

@@ -1,21 +1,18 @@
-/* eslint-env jest */
-
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
 import Alert from './Alert';
 import { ALERT_TYPES, DEPRECATED_ALERT_TYPES } from './AlertConstants';
 
 const ALL_ALERT_TYPES = [...ALERT_TYPES, ...DEPRECATED_ALERT_TYPES];
 
 const testAlertSnapshot = (type, onDismiss) => {
-  const component = renderer.create(
+  const component = mount(
     <Alert type={type} onDismiss={onDismiss}>
       <span>Alert Message!</span>
     </Alert>
   );
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 };
 
 ALL_ALERT_TYPES.forEach(type => {
@@ -33,3 +30,11 @@ ALL_ALERT_TYPES.forEach(type => {
     testAlertSnapshot(type, jest.fn());
   });
 });
+
+test('Alert correctly throws error given unsupported type', () => {
+  jest.spyOn(console, 'error').mockImplementation(() => {});
+  const invalidType = function test() {
+    mount(<Alert type="foo" />);
+  };
+  expect(invalidType).toThrowErrorMatchingSnapshot();
+});