add Snapshot tests for walletconnect

Author: ArcAnya

__tests__/WalletConnect/ConnectModal.test.js

@@ -3,93 +3,14 @@
  * @jest-environment jsdom
  */
 import React from 'react';
-import { render, screen } from '../../test-utils';
-import nextRouter from 'next/router';
 import ConnectModal from '../../components/WalletConnect/ConnectModal';
-// Test cases for full balances, empty balances, and undefined balances.
-const subgraphBounty = {
-  __typename: 'Bounty',
-  bountyAddress: '0x13f7816057de7256daf5028eaf8e79775d3a27a3',
-  bountyId: 'I_kwDOGWnnz85I9Ahl',
-  bountyMintTime: '1654041044',
-  bountyClosedTime: null,
-  status: 'OPEN',
-  claimedTransactionHash: null,
-  deposits: [
-    {
-      __typename: 'Deposit',
-      id: '0xd024e550ba670d71f23f336c63ed0aacda946c6836f416028ffa0888b1a4b691',
-      refunded: false,
-      refundTime: null,
-      expiration: '2592000',
-      tokenAddress: '0x5fbdb2315678afecb367f032d93f642f64180aa3',
-      volume: '12000000000000000000',
-      sender: {
-        __typename: 'User',
-        id: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266',
-      },
-      receiveTime: '1642021044',
-    },
-  ],
-  issuer: {
-    __typename: 'User',
-    id: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266',
-  },
-  bountyTokenBalances: [
-    {
-      __typename: 'BountyFundedTokenBalance',
-      volume: '12000000000000000000',
-      tokenAddress: '0x5fbdb2315678afecb367f032d93f642f64180aa3',
-    },
-  ],
-};
-
-describe('WatchButton', () => {
-  // Test cases for
-
-  const push = jest.fn(() => {
-    return { catch: jest.fn };
-  });
-  const closeModal = jest.fn();
-
-  beforeEach(() => {
-    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 render watch button', async () => {
-    // ARRANGE
-    render(<ConnectModal bounty={subgraphBounty} closeModal={closeModal} watchingState={false} />);
-
-    // ASSERT
-    const nullish = [...screen.queryAllByRole(/null/), ...screen.queryAllByRole(/undefined/)];
-    expect(nullish).toHaveLength(0);
-  });
-
-  it('should open modal and display link to profile.', async () => {
-    // ARRANGE
-    render(<ConnectModal closeModal={closeModal} />);
-
-    const heading = screen.getByText(/Connect Wallet/i);
-    const metamaskButton = screen.getByRole('button', { name: /Metamask/i });
-    const walletConnect = screen.getByRole('button', { name: /WalletConnect/i });
-
-    // ASSERT
-    expect(heading).toBeInTheDocument();
-    expect(metamaskButton).toBeInTheDocument();
-    expect(walletConnect).toBeInTheDocument();
+import ShallowRenderer from 'react-test-renderer/shallow';
+
+describe('ConnectModal', () => {
+  it('should render match DOM Snapshot', () => {
+    const shallow = new ShallowRenderer();
+    shallow.render(<ConnectModal />);
+    const tree = shallow.getRenderOutput();
+    expect(tree).toMatchSnapshot();
   });
 });

__tests__/WalletConnect/__snapshots__/ConnectModal.test.js.snap

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConnectModal should render match DOM Snapshot 1`] = `
+<ModalLarge
+  footerRight={
+    <button
+      className="btn-default w-full"
+    >
+      Close
+    </button>
+  }
+  isWalletConnect={true}
+  title="Connect Wallet"
+>
+  <div
+    className="p-4"
+  >
+    <p
+      className="text-xl pt-2"
+    >
+      Connect your wallet to continue with OpenQ. By connecting your wallet you agree with OpenQ
+      '
+      s
+       
+      <a
+        className="hover:underline text-blue-400"
+        href="https://www.openq.dev/terms-of-service"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        terms of service
+      </a>
+      .
+    </p>
+    <button
+      className="flex py-4 pl-4 my-8 w-full gap-8 btn-default"
+      onClick={[Function]}
+    >
+      <Image
+        alt="metamask logo"
+        height={40}
+        src="/wallet-logos/metamask.png"
+        width={40}
+      />
+      <div
+        className="text-lg leading-loose"
+      >
+        Metamask
+      </div>
+    </button>
+    <button
+      className="flex py-4 pl-4 mb-8 w-full gap-8 btn-default"
+      onClick={[Function]}
+    >
+      <Image
+        alt="wallet connect logo"
+        className="rounded-full"
+        height={40}
+        src="/wallet-logos/wallet-connect.jpg"
+        width={40}
+      />
+      <div
+        className="leading-loose text-lg"
+      >
+        WalletConnect
+      </div>
+    </button>
+    <p
+      className="text-sm text-muted pb-4"
+    >
+      Are you using Gnosis Safe? For the best experience use OpenQ as a Safe App. For more information on safe apps, check out
+       
+      <a
+        className="underline"
+        href="https://help.gnosis-safe.io/en/articles/4022030-add-a-custom-safe-app"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Add a Custom Safe App
+      </a>
+      .
+    </p>
+  </div>
+</ModalLarge>
+`;