add Snapshot tests for remaining Utils components

Author: ArcAnya

__tests__/Utils/TooltipNew.test.js

@@ -2,65 +2,29 @@
  * @jest-environment jsdom
  */
 import React from 'react';
-import { render, screen } from '../../test-utils';
 import ToolTipNew from '../../components/Utils/ToolTipNew';
-import nextRouter from 'next/router';
+import renderer from 'react-test-renderer';
 // Test cases for full balances, empty balances, and undefined balances.
 const Child = () => {
   return <div></div>;
 };
 
-describe('AccountModal', () => {
-  // Test cases for
-  let push;
-  beforeEach(() => {
-    push = jest.fn(() => {
-      return { catch: jest.fn };
-    });
-    process.env.BASE_URL = 'http://localhost:3000';
-    const observe = jest.fn();
-    const disconnect = jest.fn();
-    window.IntersectionObserver = jest.fn(() => ({
-      observe,
-      disconnect,
-    }));
-
-    nextRouter.useRouter = jest.fn();
-    nextRouter.useRouter.mockImplementation(() => ({
-      query: { type: null },
-      prefetch: jest.fn(() => {
-        return { catch: jest.fn };
-      }),
-      push,
-    }));
-  });
-
-  it('should display tooltip', async () => {
-    // ARRANGE
-    render(<ToolTipNew toolTipText='sample text' />);
-    // ASSERT
-    expect(screen.getByText(/sample text/)).toBeInTheDocument();
-  });
-
-  it('should hide tooltip', async () => {
-    // ARRANGE
-    render(
-      <ToolTipNew hideToolTip={true} toolTipText='sample text'>
+describe('ToolTipNew', () => {
+  it('should match DOM Snapshot & display tooltip with styles', () => {
+    const tree = renderer.create(
+      <ToolTipNew toolTipText='sample text' outerStyles={'outerStyles'} innerStyles={'innerStyles'} hideToolTip={false}>
         <Child />
       </ToolTipNew>
     );
-    // ASSERT
-    expect(screen.queryByText(/sample text/)).not.toBeInTheDocument();
+    expect(tree.toJSON()).toMatchSnapshot();
   });
-  it('should show tooltip styles', async () => {
-    // ARRANGE
-    render(
-      <ToolTipNew toolTipText='sample text' outerStyles={'outerStyles'} innerStyles={'innerStyles'} hideToolTip={false}>
+
+  it('should match DOM Snapshot & hide tooltip', () => {
+    const tree = renderer.create(
+      <ToolTipNew hideToolTip={true} toolTipText='sample text'>
         <Child />
       </ToolTipNew>
     );
-    // ASSERT
-    expect(document.querySelector('.innerStyles')).toBeInTheDocument();
-    expect(document.querySelector('.outerStyles')).toBeInTheDocument();
+    expect(tree.toJSON()).toMatchSnapshot();
   });
 });

__tests__/Utils/TweetAbout.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import TweetAbout from '../../components/Utils/TweetAbout';
+import renderer from 'react-test-renderer';
+import Constants from '../../test-utils/constant';
+
+describe('TweetAbout', () => {
+  const bounty = Constants.bounty;
+  const tweetText = 'Please tweet me!';
+  it('should match DOM Snapshot', () => {
+    const tree = renderer.create(<TweetAbout tweetText={tweetText} bounty={bounty} />);
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+});

__tests__/Utils/__snapshots__/TooltipNew.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToolTipNew should match DOM Snapshot & display tooltip with styles 1`] = `
+<div
+  className="group undefined"
+>
+  <div />
+  <div
+    className="justify-center w-full relative hidden z-50 group-hover:block  outerStyles "
+  >
+    <div
+      className="flex flex-col items-center"
+    >
+      <div
+        className="flex mt-0.5 md:mt-1 tooltip-triangle absolute undefined"
+      />
+      <div
+        className="flex tooltip absolute undefined"
+      >
+        <div
+          className="innerStyles"
+        >
+          sample text
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ToolTipNew should match DOM Snapshot & hide tooltip 1`] = `<div />`;

__tests__/Utils/__snapshots__/TweetAbout.test.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TweetAbout should match DOM Snapshot 1`] = `
+<div
+  className="flex justify-center items-center btn-primary"
+  onClick={[Function]}
+  onMouseEnter={[Function]}
+  onTouchStart={[Function]}
+>
+  <div
+    className="flex justify-center items-center gap-2"
+  >
+    <div
+      className=""
+      data-testid="link"
+    >
+      Tweet about it
+    </div>
+    <svg
+      className="w-4 inline"
+      height="24"
+      viewBox="0 0 128 128"
+      width="24"
+    >
+      <path
+        d="M40.254 127.637c48.305 0 74.719-48.957 74.719-91.403 0-1.39 0-2.777-.075-4.156 5.141-4.547 9.579-10.18 13.102-16.633-4.79 2.602-9.871 4.305-15.078 5.063 5.48-4.02 9.582-10.336 11.539-17.774-5.156 3.743-10.797 6.38-16.68 7.801-8.136-10.586-21.07-13.18-31.547-6.32-10.472 6.86-15.882 21.46-13.199 35.617C41.922 38.539 22.246 26.336 8.915 6.27 1.933 20.94 5.487 39.723 17.022 49.16c-4.148-.172-8.207-1.555-11.832-4.031v.41c0 15.273 8.786 28.438 21.02 31.492a21.596 21.596 0 01-11.863.543c3.437 13.094 13.297 22.07 24.535 22.328-9.305 8.918-20.793 13.75-32.617 13.72-2.094 0-4.188-.15-6.266-.446 12.008 9.433 25.98 14.441 40.254 14.422"
+        fill="#ffffff"
+      />
+    </svg>
+  </div>
+</div>
+`;