From d46ce46b933da01a71d59f8c1e7fe471ac63b248 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Sun, 24 Mar 2019 21:31:59 -0400
Subject: [PATCH] Updating FormActions to use react-testing-library

---
 .../FormActions/__snapshots__/test.js.snap    | 330 ++++++++++--------
 src/components/FormActions/test.js            |  62 ++--
 2 files changed, 212 insertions(+), 180 deletions(-)

diff --git a/src/components/FormActions/__snapshots__/test.js.snap b/src/components/FormActions/__snapshots__/test.js.snap
index e16f41c..b4bbe71 100644
--- a/src/components/FormActions/__snapshots__/test.js.snap
+++ b/src/components/FormActions/__snapshots__/test.js.snap
@@ -1,172 +1,196 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FormActions rendering 1`] = `
-<ul
-  className="actions"
-/>
+<DocumentFragment>
+  <ul
+    class="actions"
+  />
+</DocumentFragment>
 `;
 
 exports[`FormActions rendering download links 1`] = `
-<ul
-  className="actions"
->
-  <li>
-    <a
-      download="image.png"
-      href="http://example.com/image.png"
-      type="image/png"
-    >
-      <Download
-        color="currentColor"
-        size="24"
-      />
-      TRANSLATE(Example PNG Link)
-    </a>
-  </li>
-  <li>
-    <a
-      download="image.svg"
-      href="http://example.com/image.svg"
-      type="image/svg+xml"
-    >
-      <Download
-        color="currentColor"
-        size="24"
-      />
-      TRANSLATE(Example SVG Link)
-    </a>
-  </li>
-</ul>
+<DocumentFragment>
+  <ul
+    class="actions"
+  >
+    <li>
+      <a
+        download="image.png"
+        href="http://example.com/image.png"
+        type="image/png"
+      >
+        <span
+          data-component="Download"
+          data-props="{}"
+        />
+        TRANSLATE(Example PNG Link)
+      </a>
+    </li>
+    <li>
+      <a
+        download="image.svg"
+        href="http://example.com/image.svg"
+        type="image/svg+xml"
+      >
+        <span
+          data-component="Download"
+          data-props="{}"
+        />
+        TRANSLATE(Example SVG Link)
+      </a>
+    </li>
+  </ul>
+</DocumentFragment>
 `;
 
 exports[`FormActions rendering download links with data after mounting 1`] = `
-<ul
-  className="actions"
->
-  <li>
-    <a
-      href="http://example.com"
-    >
-      <Link
-        color="currentColor"
-        size="24"
-      />
-      <Trans>
-        Permalink
-      </Trans>
-    </a>
-  </li>
-</ul>
+<DocumentFragment>
+  <ul
+    class="actions"
+  >
+    <li>
+      <a
+        href="http://example.com"
+      >
+        <span
+          data-component="Link"
+          data-props="{}"
+        />
+        <span
+          data-component="Trans"
+          data-props="{}"
+        >
+          Permalink
+        </span>
+      </a>
+    </li>
+  </ul>
+</DocumentFragment>
 `;
 
 exports[`FormActions rendering download links with data after mounting 2`] = `
-<ul
-  className="actions"
->
-  <li>
-    <a
-      download="image.png"
-      href="http://example.com/image.png"
-      type="image/png"
-    >
-      <Download
-        color="currentColor"
-        size="24"
-      />
-      TRANSLATE(Example PNG Link)
-    </a>
-  </li>
-  <li>
-    <a
-      download="image.svg"
-      href="http://example.com/image.svg"
-      type="image/svg+xml"
-    >
-      <Download
-        color="currentColor"
-        size="24"
-      />
-      TRANSLATE(Example SVG Link)
-    </a>
-  </li>
-  <li>
-    <a
-      href="http://example.com"
-    >
-      <Link
-        color="currentColor"
-        size="24"
-      />
-      <Trans>
-        Permalink
-      </Trans>
-    </a>
-  </li>
-</ul>
+<DocumentFragment>
+  <ul
+    class="actions"
+  >
+    <li>
+      <a
+        download="image.png"
+        href="http://example.com/image.png"
+        type="image/png"
+      >
+        <span
+          data-component="Download"
+          data-props="{}"
+        />
+        TRANSLATE(Example PNG Link)
+      </a>
+    </li>
+    <li>
+      <a
+        download="image.svg"
+        href="http://example.com/image.svg"
+        type="image/svg+xml"
+      >
+        <span
+          data-component="Download"
+          data-props="{}"
+        />
+        TRANSLATE(Example SVG Link)
+      </a>
+    </li>
+    <li>
+      <a
+        href="http://example.com"
+      >
+        <span
+          data-component="Link"
+          data-props="{}"
+        />
+        <span
+          data-component="Trans"
+          data-props="{}"
+        >
+          Permalink
+        </span>
+      </a>
+    </li>
+  </ul>
+</DocumentFragment>
 `;
 
 exports[`FormActions rendering download links with data after mounting 3`] = `
-<ul
-  className="actions"
->
-  <li>
-    <a
-      download="image.png"
-      href="http://example.com/image.png"
-      type="image/png"
-    >
-      <Download
-        color="currentColor"
-        size="24"
-      />
-      TRANSLATE(Example PNG Link)
-    </a>
-  </li>
-  <li>
-    <a
-      download="image.svg"
-      href="http://example.com/image.svg"
-      type="image/svg+xml"
-    >
-      <Download
-        color="currentColor"
-        size="24"
-      />
-      TRANSLATE(Example SVG Link)
-    </a>
-  </li>
-  <li>
-    <a
-      href="http://example.com"
-    >
-      <Link
-        color="currentColor"
-        size="24"
-      />
-      <Trans>
-        Permalink
-      </Trans>
-    </a>
-  </li>
-</ul>
+<DocumentFragment>
+  <ul
+    class="actions"
+  >
+    <li>
+      <a
+        download="image.png"
+        href="http://example.com/image.png"
+        type="image/png"
+      >
+        <span
+          data-component="Download"
+          data-props="{}"
+        />
+        TRANSLATE(Example PNG Link)
+      </a>
+    </li>
+    <li>
+      <a
+        download="image.svg"
+        href="http://example.com/image.svg"
+        type="image/svg+xml"
+      >
+        <span
+          data-component="Download"
+          data-props="{}"
+        />
+        TRANSLATE(Example SVG Link)
+      </a>
+    </li>
+    <li>
+      <a
+        href="http://example.com"
+      >
+        <span
+          data-component="Link"
+          data-props="{}"
+        />
+        <span
+          data-component="Trans"
+          data-props="{}"
+        >
+          Permalink
+        </span>
+      </a>
+    </li>
+  </ul>
+</DocumentFragment>
 `;
 
 exports[`FormActions rendering with a permalink 1`] = `
-<ul
-  className="actions"
->
-  <li>
-    <a
-      href="http://example.com"
-    >
-      <Link
-        color="currentColor"
-        size="24"
-      />
-      <Trans>
-        Permalink
-      </Trans>
-    </a>
-  </li>
-</ul>
+<DocumentFragment>
+  <ul
+    class="actions"
+  >
+    <li>
+      <a
+        href="http://example.com"
+      >
+        <span
+          data-component="Link"
+          data-props="{}"
+        />
+        <span
+          data-component="Trans"
+          data-props="{}"
+        >
+          Permalink
+        </span>
+      </a>
+    </li>
+  </ul>
+</DocumentFragment>
 `;
diff --git a/src/components/FormActions/test.js b/src/components/FormActions/test.js
index cb53f46..bb986b7 100644
--- a/src/components/FormActions/test.js
+++ b/src/components/FormActions/test.js
@@ -1,4 +1,10 @@
 jest.mock('./links');
+jest.mock('react-feather/dist/icons/download', () =>
+  require('__mocks__/component-mock')(
+    'react-feather/dist/icons/download'));
+jest.mock('react-feather/dist/icons/link', () =>
+  require('__mocks__/component-mock')(
+    'react-feather/dist/icons/link'));
 
 import React from 'react';
 import { render } from 'react-testing-library';
@@ -21,68 +27,70 @@ createSvgLink.mockResolvedValue({
 });
 
 describe('FormActions', () => {
-  test.skip('rendering', () => {
-    const component = shallow(
+  test('rendering', () => {
+    const { asFragment } = render(
       <FormActions t={ mockT } />
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
-  test.skip('rendering with a permalink', () => {
-    const component = shallow(
+  test('rendering with a permalink', () => {
+    const { asFragment } = render(
       <FormActions permalinkUrl="http://example.com" t={ mockT } />
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
-  test.skip('rendering download links', async () => {
+  test('rendering download links', async () => {
     const imageDetails = {
       svg: 'test image',
       width: 10,
       height: 20
     };
 
-    const component = shallow(
+    const { asFragment } = render(
       <FormActions imageDetails={ imageDetails } t={ mockT } />
     );
 
     // Give a beat for mocked promises to resolve
     await new Promise(resolve => setTimeout(resolve));
 
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
-  test.skip('rendering download links with data after mounting', async () => {
-    const component = shallow(
+  test('rendering download links with data after mounting', async () => {
+    const { asFragment, rerender } = render(
       <FormActions t={ mockT } />
     );
 
-    component.setProps({ permalinkUrl: 'http://example.com' });
+    rerender(
+      <FormActions permalinkUrl="http://example.com" t={ mockT } />
+    );
 
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
 
-    component.setProps({
-      imageDetails: {
-        svg: 'test image'
-      }
-    });
+    rerender(
+      <FormActions
+        permalinkUrl="http://example.com"
+        imageDetails={ { svg: 'test-image' } }
+        t={ mockT } />
+    );
 
     // Give a beat for mocked promises to resolve
     await new Promise(resolve => setTimeout(resolve));
 
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
 
-    component.setProps({
-      imageDetails: {
-        svg: 'test image',
-        width: 10,
-        height: 20
-      }
-    });
+    rerender(
+      <FormActions
+        permalinkUrl="http://example.com"
+        imageDetails={ { svg: 'test-image', width: 10, height: 20 } }
+        t={ mockT } />
+    );
 
     // Give a beat for mocked promises to resolve
     await new Promise(resolve => setTimeout(resolve));
 
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });