From a1281543e29a35d922fd16477edaf6b6e27fb55d Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Sun, 24 Mar 2019 14:09:05 -0400
Subject: [PATCH] Updating Messasge to use react-testing-library

---
 .../Message/__snapshots__/test.js.snap        | 152 +++++++++---------
 src/components/Message/test.js                |  31 ++--
 2 files changed, 101 insertions(+), 82 deletions(-)

diff --git a/src/components/Message/__snapshots__/test.js.snap b/src/components/Message/__snapshots__/test.js.snap
index 123c105..7fb8652 100644
--- a/src/components/Message/__snapshots__/test.js.snap
+++ b/src/components/Message/__snapshots__/test.js.snap
@@ -1,99 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Message rendering 1`] = `
-<div
-  className="message"
->
+<DocumentFragment>
   <div
-    className="header"
+    class="message"
   >
-    <h2>
-      Testing
-    </h2>
+    <div
+      class="header"
+    >
+      <h2>
+        Testing
+      </h2>
+    </div>
+    <div
+      class="content"
+    >
+      <p>
+        Message content
+      </p>
+    </div>
   </div>
-  <div
-    className="content"
-  >
-    <p>
-      Message content
-    </p>
-  </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Message rendering with a close button 1`] = `
-<div
-  className="message"
->
+<DocumentFragment>
   <div
-    className="header"
+    class="message"
   >
-    <h2>
-      Testing
-    </h2>
-    <button
-      onClick={[MockFunction]}
+    <div
+      class="header"
     >
-      <XSquare
-        color="currentColor"
-        size="24"
-      />
-       Close
-    </button>
+      <h2>
+        Testing
+      </h2>
+      <button>
+        <span
+          data-component="XSquare"
+          data-props="{}"
+        />
+         Close
+      </button>
+    </div>
+    <div
+      class="content"
+    >
+      <p>
+        Message content
+      </p>
+    </div>
   </div>
-  <div
-    className="content"
-  >
-    <p>
-      Message content
-    </p>
-  </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Message rendering with icon 1`] = `
-<div
-  className="message"
->
+<DocumentFragment>
   <div
-    className="header"
+    class="message"
   >
-    <Icon />
-    <h2>
-      Testing
-    </h2>
+    <div
+      class="header"
+    >
+      Sample icon SVG
+      <h2>
+        Testing
+      </h2>
+    </div>
+    <div
+      class="content"
+    >
+      <p>
+        Message content
+      </p>
+    </div>
   </div>
-  <div
-    className="content"
-  >
-    <p>
-      Message content
-    </p>
-  </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Message rendering with type 1`] = `
-<div
-  className="message error"
->
+<DocumentFragment>
   <div
-    className="header"
+    class="message error"
   >
-    <AlertOctagon
-      color="currentColor"
-      size="24"
-    />
-    <h2>
-      Testing
-    </h2>
+    <div
+      class="header"
+    >
+      <span
+        data-component="AlertOctagon"
+        data-props="{}"
+      />
+      <h2>
+        Testing
+      </h2>
+    </div>
+    <div
+      class="content"
+    >
+      <p>
+        Message content
+      </p>
+    </div>
   </div>
-  <div
-    className="content"
-  >
-    <p>
-      Message content
-    </p>
-  </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/src/components/Message/test.js b/src/components/Message/test.js
index 348eae6..d77019b 100644
--- a/src/components/Message/test.js
+++ b/src/components/Message/test.js
@@ -1,43 +1,56 @@
+jest.mock('react-feather/dist/icons/info', () =>
+  require('__mocks__/component-mock')('react-feather/dist/icons/info'));
+jest.mock('react-feather/dist/icons/alert-octagon', () =>
+  require('__mocks__/component-mock')(
+    'react-feather/dist/icons/alert-octagon'
+  ));
+jest.mock('react-feather/dist/icons/alert-triangle', () =>
+  require('__mocks__/component-mock')(
+    'react-feather/dist/icons/alert-triangle'
+  ));
+jest.mock('react-feather/dist/icons/x-square', () =>
+  require('__mocks__/component-mock')('react-feather/dist/icons/x-square'));
+
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'react-testing-library';
 
 import Message from 'components/Message';
 
 describe('Message', () => {
   test('rendering', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <Message heading="Testing">
         <p>Message content</p>
       </Message>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('rendering with icon', () => {
     const Icon = () => 'Sample icon SVG';
-    const component = shallow(
+    const { asFragment } = render(
       <Message heading="Testing" icon={ Icon }>
         <p>Message content</p>
       </Message>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('rendering with type', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <Message heading="Testing" type="error">
         <p>Message content</p>
       </Message>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('rendering with a close button', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <Message heading="Testing" onClose={ jest.fn() }>
         <p>Message content</p>
       </Message>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });