chore(testing): updates remaining tests to enzyme (#282)

patternfly · Mar 23, 2018 · 6356892 · 6356892
1 parent 14bf3a8
commit 6356892
Show file tree

Hide file tree

Showing 15 changed files with 600 additions and 732 deletions.
diff --git a/package.json b/package.json
@@ -86,7 +86,6 @@
     "react": "^16.2.0",
     "react-dev-utils": "^5.0.0",
     "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.2.0",
     "sass-loader": "^6.0.6",
     "semantic-release": "^12.2.0",
     "style-loader": "^0.19.1",

diff --git a/src/components/Cards/AggregateStatusCard/AggregateStatusCard.test.js b/src/components/Cards/AggregateStatusCard/AggregateStatusCard.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
 import { Icon } from '../../Icon';
 import {
   AggregateStatusCount,
@@ -8,16 +8,15 @@ import {
 } from './index';
 
 test('Aggregate Status Card Count is working properly', () => {
-  const component = renderer.create(
+  const component = mount(
     <AggregateStatusCount> 9 </AggregateStatusCount>
   );
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
 
 test('Aggregate Status Notification is working properly', () => {
-  const component = renderer.create(
+  const component = mount(
     <AggregateStatusNotification>
       {' '}
       <a
@@ -32,15 +31,13 @@ test('Aggregate Status Notification is working properly', () => {
     </AggregateStatusNotification>
   );
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
 
 test('Aggregate Status Notifications is working properly', () => {
-  const component = renderer.create(
+  const component = mount(
     <AggregateStatusNotifications>Card Content</AggregateStatusNotifications>
   );
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
diff --git a/src/components/Cards/AggregateStatusCard/__snapshots__/AggregateStatusCard.test.js.snap b/src/components/Cards/AggregateStatusCard/__snapshots__/AggregateStatusCard.test.js.snap
@@ -2,27 +2,27 @@
 
 exports[`Aggregate Status Card Count is working properly 1`] = `
 <span
-  className="card-pf-aggregate-status-count"
+  class="card-pf-aggregate-status-count"
 >
    9 
 </span>
 `;
 
 exports[`Aggregate Status Notification is working properly 1`] = `
 <span
-  className="card-pf-aggregate-status-notification"
+  class="card-pf-aggregate-status-notification"
 >
    
   <a
-    className="add"
+    class="add"
     data-placement="top"
     data-toggle="tooltip"
     href="#"
     title="Add Ipsum!"
   >
     <span
       aria-hidden="true"
-      className="pficon pficon-add-circle-o"
+      class="pficon pficon-add-circle-o"
     />
   </a>
    
@@ -31,7 +31,7 @@ exports[`Aggregate Status Notification is working properly 1`] = `
 
 exports[`Aggregate Status Notifications is working properly 1`] = `
 <p
-  className="card-pf-aggregate-status-notifications"
+  class="card-pf-aggregate-status-notifications"
 >
   Card Content
 </p>

diff --git a/src/components/Cards/Cards.test.js b/src/components/Cards/Cards.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
 import { MenuItem } from '../MenuItem';
 import {
   Card,
@@ -13,55 +13,49 @@ import {
 } from './index';
 
 test('Card is working properly', () => {
-  const component = renderer.create(
+  const component = mount(
     <Card accented aggregatedMini>
       Card Content
     </Card>
   );
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
 
 test('Card Title is working properly', () => {
-  const component = renderer.create(<CardTitle>Card Title</CardTitle>);
+  const component = mount(<CardTitle>Card Title</CardTitle>);
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
 
 test('Card Footer is working properly', () => {
-  const component = renderer.create(
+  const component = mount(
     <CardFooter>This is a Card Footer</CardFooter>
   );
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
 
 test('Card Grid is working properly', () => {
-  const component = renderer.create(<CardGrid>Grid Content</CardGrid>);
+  const component = mount(<CardGrid>Grid Content</CardGrid>);
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
 
 test('Card Header is working properly', () => {
-  const component = renderer.create(<CardHeading>Card Content</CardHeading>);
+  const component = mount(<CardHeading>Card Content</CardHeading>);
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
 
 test('Card Body is working properly', () => {
-  const component = renderer.create(<CardBody>This is a Card Body</CardBody>);
+  const component = mount(<CardBody>This is a Card Body</CardBody>);
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
 
 test('Card Link is working properly', () => {
-  const component = renderer.create(
+  const component = mount(
     <CardLink
       disabled
       href="https://github.com/patternfly/patternfly-react/pull/203"
@@ -70,12 +64,11 @@ test('Card Link is working properly', () => {
     </CardLink>
   );
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
 
 test('Card Drop Down Button is working properly', () => {
-  const component = renderer.create(
+  const component = mount(
     <CardDropdownButton
       id="cardDropdownButton1"
       title="Last 30 Days"
@@ -87,6 +80,5 @@ test('Card Drop Down Button is working properly', () => {
     </CardDropdownButton>
   );
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
diff --git a/src/components/Cards/UtilizationTrendCard/UtilizationCard.test.js b/src/components/Cards/UtilizationTrendCard/UtilizationCard.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
 import {
   UtilizationCard,
   UtilizationCardDetails,
@@ -12,17 +12,16 @@ import {
 import { CardTitle } from '../index';
 
 test('Utilization Card is working properly', () => {
-  const component = renderer.create(
+  const component = mount(
     <UtilizationCard>
       <CardTitle>Card Title</CardTitle>
     </UtilizationCard>
   );
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
 test('Utilization Card Details is working properly', () => {
-  const component = renderer.create(
+  const component = mount(
     <UtilizationCardDetails>
       <UtilizationCardDetailsCount>200</UtilizationCardDetailsCount>
       <UtilizationCardDetailsDesc>
@@ -32,28 +31,25 @@ test('Utilization Card Details is working properly', () => {
     </UtilizationCardDetails>
   );
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
 test('Utilization Card Details Description is working properly', () => {
-  const component = renderer.create(
+  const component = mount(
     <UtilizationCardDetailsDesc>
       <UtilizationCardDetailsLine1>Available</UtilizationCardDetailsLine1>
       <UtilizationCardDetailsLine2>of 1300 Gbps</UtilizationCardDetailsLine2>
     </UtilizationCardDetailsDesc>
   );
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
 test('Utilization Card Details Line1,2 is working properly', () => {
-  const component = renderer.create(
+  const component = mount(
     <div>
       <UtilizationCardDetailsLine1>Available</UtilizationCardDetailsLine1>
       <UtilizationCardDetailsLine2>of 1300 Gbps</UtilizationCardDetailsLine2>
     </div>
   );
 
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(component.render()).toMatchSnapshot();
 });
diff --git a/src/components/Cards/UtilizationTrendCard/__snapshots__/UtilizationCard.test.js.snap b/src/components/Cards/UtilizationTrendCard/__snapshots__/UtilizationCard.test.js.snap
@@ -2,15 +2,15 @@
 
 exports[`Utilization Card Details Description is working properly 1`] = `
 <span
-  className="card-pf-utilization-card-details-description"
+  class="card-pf-utilization-card-details-description"
 >
   <span
-    className="card-pf-utilization-card-details-line-1"
+    class="card-pf-utilization-card-details-line-1"
   >
     Available
   </span>
   <span
-    className="card-pf-utilization-card-details-line-2"
+    class="card-pf-utilization-card-details-line-2"
   >
     of 1300 Gbps
   </span>
@@ -20,12 +20,12 @@ exports[`Utilization Card Details Description is working properly 1`] = `
 exports[`Utilization Card Details Line1,2 is working properly 1`] = `
 <div>
   <span
-    className="card-pf-utilization-card-details-line-1"
+    class="card-pf-utilization-card-details-line-1"
   >
     Available
   </span>
   <span
-    className="card-pf-utilization-card-details-line-2"
+    class="card-pf-utilization-card-details-line-2"
   >
     of 1300 Gbps
   </span>
@@ -34,23 +34,23 @@ exports[`Utilization Card Details Line1,2 is working properly 1`] = `
 
 exports[`Utilization Card Details is working properly 1`] = `
 <p
-  className="card-pf-utilization-details"
+  class="card-pf-utilization-details"
 >
   <span
-    className="card-pf-utilization-card-details-count"
+    class="card-pf-utilization-card-details-count"
   >
     200
   </span>
   <span
-    className="card-pf-utilization-card-details-description"
+    class="card-pf-utilization-card-details-description"
   >
     <span
-      className="card-pf-utilization-card-details-line-1"
+      class="card-pf-utilization-card-details-line-1"
     >
       Available
     </span>
     <span
-      className="card-pf-utilization-card-details-line-2"
+      class="card-pf-utilization-card-details-line-2"
     >
       of 1300 Gbps
     </span>
@@ -60,10 +60,10 @@ exports[`Utilization Card Details is working properly 1`] = `
 
 exports[`Utilization Card is working properly 1`] = `
 <div
-  className="card-pf card-pf-utilization"
+  class="card-pf card-pf-utilization"
 >
   <h2
-    className="card-pf-title"
+    class="card-pf-title"
   >
     Card Title
   </h2>