chore(testing): adds enzyme and updates exisiting tests

package.json

@@ -56,6 +56,8 @@
     "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",
     "eslint": "^4.14.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",

src/components/AboutModal/AboutModal.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
 import { noop } from '../../common/helpers';
 import {
   AboutModal,
@@ -8,7 +8,7 @@ import {
 } from '../../index';
 
 test('AboutModal renders correctly when hidden', () => {
-  const component = renderer.create(
+  const component = shallow(
     <AboutModal
       show={false}
       onHide={noop}
@@ -23,10 +23,10 @@ test('AboutModal renders correctly when hidden', () => {
         <AboutModalVersionItem label="Label" versionText="Version" />
       </AboutModalVersions>
     </AboutModal>
-  );
+  ).getElement();
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component).toMatchSnapshot();
+  expect(component.props.show).toBeFalsy();
 });
 
 /** TODO: requires https://github.com/react-bootstrap/react-overlays/issues/225

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

@@ -1,3 +1,89 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AboutModal renders correctly when hidden 1`] = `null`;
+exports[`AboutModal renders correctly when hidden 1`] = `
+<Modal
+  animation={true}
+  autoFocus={true}
+  backdrop={true}
+  bsClass="modal"
+  className=""
+  contentClassName="about-modal-pf"
+  dialogComponentClass={[Function]}
+  enforceFocus={true}
+  keyboard={true}
+  manager={
+    ModalManager {
+      "add": [Function],
+      "containers": Array [],
+      "data": Array [],
+      "handleContainerOverflow": true,
+      "hideSiblingNodes": true,
+      "isTopModal": [Function],
+      "modals": Array [],
+      "remove": [Function],
+    }
+  }
+  onHide={[Function]}
+  renderBackdrop={[Function]}
+  restoreFocus={true}
+  show={false}
+>
+  <ModalHeader
+    bsClass="modal-header"
+    closeButton={false}
+    closeLabel="Close"
+  >
+    <ModalCloseButton
+      className=""
+      closeText="Close"
+      onClick={[Function]}
+    />
+  </ModalHeader>
+  <ModalBody
+    bsClass="modal-body"
+    componentClass="div"
+  >
+    <h1>
+      Product Title
+    </h1>
+    <AboutModalVersions
+      className=""
+    >
+      <AboutModalVersionItem
+        className=""
+        label="Label"
+        versionText="Version"
+      />
+      <AboutModalVersionItem
+        className=""
+        label="Label"
+        versionText="Version"
+      />
+      <AboutModalVersionItem
+        className=""
+        label="Label"
+        versionText="Version"
+      />
+      <AboutModalVersionItem
+        className=""
+        label="Label"
+        versionText="Version"
+      />
+    </AboutModalVersions>
+    <div
+      className="trademark-pf"
+    >
+      Trademark and Copyright Information
+    </div>
+  </ModalBody>
+  <ModalFooter
+    bsClass="modal-footer"
+    componentClass="div"
+  >
+    <img
+      alt="Patternfly Logo"
+      src=""
+    />
+  </ModalFooter>
+</Modal>
+`;

src/components/Button/Button.test.js

@@ -1,26 +1,21 @@
-/* eslint-env jest */
-
 import React from 'react';
-import renderer from 'react-test-renderer';
-
+import { shallow } from 'enzyme';
 import Button from './Button';
 
 test('Button renders properly', () => {
-  const component = renderer.create(
+  const component = shallow(
     <Button id="button1">Default button</Button>
-  );
+  ).getElement();
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component).toMatchSnapshot();
 });
 
 test('Button allows to specify size and style', () => {
-  const component = renderer.create(
+  const component = shallow(
     <Button id="button1" bsStyle="primary" bsSize="large">
       Large Primary button
     </Button>
-  );
+  ).getElement();
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component).toMatchSnapshot();
 });

src/components/Button/DropdownButton.test.js

@@ -1,14 +1,12 @@
-/* eslint-env jest */
-
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
 
 import DropdownButton from './DropdownButton';
 import { MenuItem } from '../MenuItem';
 
 test('DropdownButton should renders properly', () => {
   DropdownButton.BUTTON_BS_STYLES.forEach(bsStyle => {
-    const component = renderer.create(
+    const component = shallow(
       <DropdownButton title={bsStyle} id={`dropdown-button-test-${bsStyle}`}>
         <MenuItem eventKey="1">Action</MenuItem>
         <MenuItem eventKey="2">Another action</MenuItem>
@@ -18,9 +16,8 @@ test('DropdownButton should renders properly', () => {
         <MenuItem divider />
         <MenuItem eventKey="4">Separated link</MenuItem>
       </DropdownButton>
-    );
+    ).getElement();
 
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });

src/components/Chart/AreaChart.test.js

@@ -1,5 +1,3 @@
-/* eslint-env jest */
-
 import React from 'react';
 import ShallowRenderer from 'react-test-renderer/shallow';
 

src/components/Chart/BarChart.test.js

@@ -1,30 +1,28 @@
-/* eslint-env jest */
-
 import React from 'react';
-import ShallowRenderer from 'react-test-renderer/shallow';
+import { shallow } from 'enzyme';
 
 import { BarChart, GroupedBarChart, StackedBarChart } from './index';
 
-const renderer = new ShallowRenderer();
-
 test('BarChart renders properly', () => {
   expect(
-    renderer.render(<BarChart id="area-1" data={{ columns: [['data', 42]] }} />)
+    shallow(
+      <BarChart id="area-1" data={{ columns: [['data', 42]] }} />
+    ).getElement()
   ).toMatchSnapshot();
 });
 
 test('GroupedBarChart renders properly', () => {
   expect(
-    renderer.render(
+    shallow(
       <GroupedBarChart id="area-2" data={{ columns: [['data', 42]] }} />
-    )
+    ).getElement()
   ).toMatchSnapshot();
 });
 
 test('StackedBarChart renders properly', () => {
   expect(
-    renderer.render(
+    shallow(
       <StackedBarChart id="area-3" data={{ columns: [['data', 42]] }} />
-    )
+    ).getElement()
   ).toMatchSnapshot();
 });

src/components/Chart/DonutChart.test.js

@@ -1,16 +1,12 @@
-/* eslint-env jest */
-
 import React from 'react';
-import ShallowRenderer from 'react-test-renderer/shallow';
+import { shallow } from 'enzyme';
 
 import { DonutChart } from './index';
 
-const renderer = new ShallowRenderer();
-
 test('DonutChart renders properly', () => {
   expect(
-    renderer.render(
+    shallow(
       <DonutChart id="area-1" data={{ columns: [['data', 42]] }} />
-    )
+    ).getElement()
   ).toMatchSnapshot();
 });

src/components/Chart/LineChart.test.js

@@ -1,32 +1,28 @@
-/* eslint-env jest */
-
 import React from 'react';
-import ShallowRenderer from 'react-test-renderer/shallow';
+import { shallow } from 'enzyme';
 
 import { LineChart, SingleLineChart, SparklineChart } from './index';
 
-const renderer = new ShallowRenderer();
-
 test('LineChart renders properly', () => {
   expect(
-    renderer.render(
+    shallow(
       <LineChart id="area-1" data={{ columns: [['data', 42]] }} />
-    )
+    ).getElement()
   ).toMatchSnapshot();
 });
 
 test('SingleLineChart renders properly', () => {
   expect(
-    renderer.render(
+    shallow(
       <SingleLineChart id="area-2" data={{ columns: [['data', 42]] }} />
-    )
+    ).getElement()
   ).toMatchSnapshot();
 });
 
 test('SparklineChart renders properly', () => {
   expect(
-    renderer.render(
+    shallow(
       <SparklineChart id="area-3" data={{ columns: [['data', 42]] }} />
-    )
+    ).getElement()
   ).toMatchSnapshot();
 });

src/components/VerticalNav/VerticalNavConstants.js

@@ -136,7 +136,7 @@ const wrongDepth = (props, expectedDepth) => {
     // eslint-disable-next-line no-console
     console.warn(
       `Warning: ${componentUsed} was used at ${
-      props.depth
+        props.depth
       } depth, but it is for ${expectedDepth} items.`
     );
   }

src/components/VerticalNav/VerticalNavItemHelper.js

@@ -284,24 +284,27 @@ class BaseVerticalNavItemHelper extends React.Component {
     return (
       <ListGroupItem
         listItem // Renders as <li>. Other props can change this, see logic in react-bootstrap's ListGroupItem.
-        className={cx({
-          [`${nextDepth}-nav-item-pf`]:
-            depth !== 'tertiary' &&
-            childItemComponents &&
-            childItemComponents.length > 0,
-          active: active || pinned, // This is the only class we have at the tertiary depth.
-          'is-hover': onPinnedPath || (depth !== 'tertiary' && hovered),
-          // This class is present at primary and secondary depths if selectedOnMobile is true,
-          // except for the primary depth, where it is only present if showMobileSecondary is also true.
-          'mobile-nav-item-pf':
-            selectedOnMobile &&
-            ((depth === 'primary' && showMobileSecondary) ||
-              depth === 'secondary'),
-          // This class is confusingly named, but the logic is more readable.
-          'mobile-secondary-item-pf':
-            selectedOnMobile && depth === 'primary' && showMobileTertiary
-          // I don't know, that's just how this stuff was in patternfly-ng...
-        }, className)}
+        className={cx(
+          {
+            [`${nextDepth}-nav-item-pf`]:
+              depth !== 'tertiary' &&
+              childItemComponents &&
+              childItemComponents.length > 0,
+            active: active || pinned, // This is the only class we have at the tertiary depth.
+            'is-hover': onPinnedPath || (depth !== 'tertiary' && hovered),
+            // This class is present at primary and secondary depths if selectedOnMobile is true,
+            // except for the primary depth, where it is only present if showMobileSecondary is also true.
+            'mobile-nav-item-pf':
+              selectedOnMobile &&
+              ((depth === 'primary' && showMobileSecondary) ||
+                depth === 'secondary'),
+            // This class is confusingly named, but the logic is more readable.
+            'mobile-secondary-item-pf':
+              selectedOnMobile && depth === 'primary' && showMobileTertiary
+            // I don't know, that's just how this stuff was in patternfly-ng...
+          },
+          className
+        )}
         onMouseEnter={this.onItemHover}
         // NOTE onItemBlur takes a boolean, we want to prevent it being passed a truthy event.
         onMouseLeave={e => this.onItemBlur(false)}
@@ -317,8 +320,8 @@ class BaseVerticalNavItemHelper extends React.Component {
                 {icon}
               </OverlayTrigger>
             ) : (
-                icon
-              ))}
+              icon
+            ))}
           <span className="list-group-item-value">{title}</span>
           {showBadges &&
             childBadgeComponents && (

src/test.env.js

@@ -1 +1,5 @@
 import 'raf/polyfill';
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });