refactor: tweaking e2e; pera connect support (#137)

* refactor: tweaking e2e

* refactor: tweaking e2e

* refactor: tweaking e2e

* refactor: testing ci

* refactor: testing ci

* refactor: testing ci

* refactor: testing ci

* refactor: testing ci

* test(new unit tests): adding more unit tests

* test: adding more unit tests

* refactor: adding pera wallet connect support

package.json

@@ -20,7 +20,8 @@
     "format": "prettier --ignore-path .gitignore \"src/**/*.+(ts|js|tsx)\" --write",
     "test": "jest --watch",
     "test:ci": "jest --ci --collectCoverage",
-    "test:e2e:ci": "playwright test",
+    "test:e2e:ci": "playwright test --workers=1",
+    "test:e2e:ci:local": "E2E_TESTS_BASE_URL=http://localhost:3000 playwright test --workers=1",
     "test:e2e:local": "E2E_TESTS_BASE_URL=http://localhost:3000 playwright test --workers=1 --headed",
     "commit": "cz"
   },
@@ -37,15 +38,13 @@
     "@emotion/styled": "11.10.5",
     "@fontsource/roboto": "4.5.8",
     "@hookform/resolvers": "2.9.10",
-    "@json-rpc-tools/utils": "1.7.6",
     "@mui/icons-material": "5.11.0",
     "@mui/lab": "5.0.0-alpha.112",
     "@mui/material": "5.11.0",
     "@mui/x-data-grid": "5.17.16",
+    "@perawallet/connect": "1.0.7",
     "@randlabs/myalgo-connect": "1.4.2",
     "@reduxjs/toolkit": "1.9.1",
-    "@walletconnect/client": "1.8.0",
-    "algorand-walletconnect-qrcode-modal": "1.8.0",
     "algosdk": "1.24.1",
     "axios": "0.27.2",
     "axios-retry": "3.3.1",
@@ -87,6 +86,7 @@
     "eslint-import-resolver-typescript": "3.5.2",
     "eslint-plugin-prettier": "4.2.1",
     "jest": "29.3.1",
+    "jest-canvas-mock": "2.4.0",
     "jest-environment-jsdom": "29.3.1",
     "lint-staged": "13.1.0",
     "postcss": "8.4.20",

playwright.config.ts

@@ -5,6 +5,7 @@ import dotenv from 'dotenv';
 dotenv.config();
 
 const BASE_URL = process.env.E2E_TESTS_BASE_URL ?? `http://localhost:3000`;
+const VERCEL_TOKEN = process.env.VERCEL_TOKEN ?? null;
 const config: PlaywrightTestConfig = {
   projects: [
     {
@@ -22,7 +23,10 @@ const config: PlaywrightTestConfig = {
 
 if (BASE_URL.includes(`localhost:3000`)) {
   config[`webServer`] = {
-    command: `vercel dev`,
+    command:
+      VERCEL_TOKEN === null
+        ? `vercel dev`
+        : `vercel dev --token ${VERCEL_TOKEN} --yes`,
     url: `http://localhost:3000`,
     timeout: 120 * 1000,
     reuseExistingServer: !process.env.CI,

src/components/Backdrops/Backdrop.test.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import LoadingBackdrop from './Backdrop';
+
+describe(`Backdrop`, () => {
+  it(`should render the loading message and progress bar when isLoading is true`, () => {
+    const { getByText, queryByText } = render(
+      <LoadingBackdrop isLoading={true} />,
+    );
+    expect(getByText(`Loading...`)).toBeInTheDocument();
+    expect(queryByText(`Custom message`)).not.toBeInTheDocument();
+    expect(
+      queryByText(`Custom message`, { exact: false }),
+    ).not.toBeInTheDocument();
+  });
+
+  it(`should not render the loading message or progress bar when isLoading is false`, () => {
+    const { queryByText } = render(
+      <LoadingBackdrop isLoading={false} message={``} />,
+    );
+    expect(queryByText(`Loading...`)).not.toBeInTheDocument();
+    expect(queryByText(/linear/i)).not.toBeInTheDocument();
+  });
+
+  it(`should render a custom message if provided`, () => {
+    const { getByText } = render(
+      <LoadingBackdrop isLoading={true} message="Custom message" />,
+    );
+    expect(getByText(`Custom message`)).toBeInTheDocument();
+  });
+});

src/components/Buttons/ViewOnAlgoExplorerButton.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, queryByAttribute } from '@testing-library/react';
+import ViewOnAlgoExplorerButton from './ViewOnAlgoExplorerButton';
+import { ChainType } from '@/models/Chain';
+import { VIEW_ON_EXPLORER_BTN_ID } from './constants';
+
+const getById = queryByAttribute.bind(null, `id`);
+
+describe(`ViewOnAlgoExplorerButton`, () => {
+  it(`renders the button with the correct text and href`, () => {
+    const txId = `abc123`;
+    const chain = ChainType.MainNet;
+    const result = render(
+      <ViewOnAlgoExplorerButton txId={txId} chain={chain} />,
+    );
+
+    const button = getById(
+      result.container,
+      VIEW_ON_EXPLORER_BTN_ID,
+    ) as Element;
+    expect(button).toHaveTextContent(`View on AlgoExplorer`);
+    expect(button).toHaveAttribute(
+      `href`,
+      `https://algoexplorer.io/tx/${txId}`,
+    );
+  });
+});

src/components/Buttons/ViewOnAlgoExplorerButton.tsx

@@ -21,6 +21,7 @@ import { Button } from '@mui/material';
 import { ChainType } from '@/models/Chain';
 import createAlgoExplorerUrl from '@/utils/createAlgoExplorerUrl';
 import AlgoExplorerUrlType from '@/models/AlgoExplorerUrlType';
+import { VIEW_ON_EXPLORER_BTN_ID } from './constants';
 
 type Props = {
   txId: string;
@@ -30,6 +31,8 @@ type Props = {
 const ViewOnAlgoExplorerButton = ({ txId, chain }: Props) => {
   return (
     <Button
+      id={VIEW_ON_EXPLORER_BTN_ID}
+      rel="noopener noreferrer"
       target={`_blank`}
       href={createAlgoExplorerUrl(chain, txId, AlgoExplorerUrlType.Transaction)}
     >

src/components/Buttons/constants.ts

@@ -0,0 +1 @@
+export const VIEW_ON_EXPLORER_BTN_ID = `AWViewOnExplorerButton`;

src/components/Dialogs/AboutDialog.test.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import AboutDialog from './AboutDialog';
+
+describe(`AboutDialog`, () => {
+  it(`renders the correct content and handles the close button correctly`, () => {
+    const changeStateMock = jest.fn();
+    const { getByText } = render(
+      <AboutDialog open={true} changeState={changeStateMock} />,
+    );
+
+    // Check that the dialog renders with the correct title and content
+    expect(
+      getByText(
+        `AlgoWorld Swapper is a free and open-source tool for swapping assets on Algorand blockchain.`,
+        { exact: false },
+      ),
+    ).toBeInTheDocument();
+
+    // Check that clicking the close button calls the changeState function with the correct argument
+    fireEvent.click(getByText(`Close`));
+    expect(changeStateMock).toHaveBeenCalledWith(false);
+  });
+});

src/components/Dialogs/AboutDialog.tsx

@@ -23,7 +23,8 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import pJson from '@/package.json';
+import pJson from '../../../package.json';
+import { ABOUT_DIALOG_ID } from './constants';
 
 type Props = {
   open: boolean;
@@ -44,6 +45,7 @@ export default function AboutDialog({ open, changeState }: Props) {
   return (
     <div>
       <Dialog
+        id={ABOUT_DIALOG_ID}
         open={open}
         scroll={`paper`}
         aria-labelledby="scroll-dialog-title"

src/components/Dialogs/ConfirmDialog.test.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { render, queryByAttribute } from '@testing-library/react';
+import ConfirmDialog from './ConfirmDialog';
+
+describe(`ConfirmDialog`, () => {
+  it(`renders the correct content and handles the buttons correctly`, () => {
+    const setOpenMock = jest.fn();
+    const onConfirmMock = jest.fn();
+    const onSwapVisibilityChangeMock = jest.fn();
+    const { getByText } = render(
+      <ConfirmDialog
+        title="Test Dialog"
+        open={true}
+        setOpen={setOpenMock}
+        onConfirm={onConfirmMock}
+        isPublicSwap={false}
+        onSwapVisibilityChange={onSwapVisibilityChangeMock}
+        transactionsFee={10}
+      >
+        <p>Test content</p>
+      </ConfirmDialog>,
+    );
+
+    // Check that the dialog renders with the correct title and content
+    expect(getByText(`Test Dialog`)).toHaveTextContent(`Test Dialog`);
+    expect(getByText(`Test content`)).toBeInTheDocument();
+    expect(getByText(`Transaction fees: ~10 Algo`)).toBeInTheDocument();
+  });
+});

src/components/Dialogs/constants.ts

@@ -1,5 +1,7 @@
 export const CONNECT_WALLET_DIALOG_ID = `AWConnectWalletDialog`;
 
+export const ABOUT_DIALOG_ID = `AWAboutDialog`;
+
 export const DIALOG_SELECT_BTN_ID = `AWDialogSelectButton`;
 export const DIALOG_CANCEL_BTN_ID = `AWDialogCancelButton`;
 

src/components/Footers/Footer.test.tsx

@@ -0,0 +1,27 @@
+import renderWithProviders from '@/__utils__/renderWithProviders';
+import Footer from './Footer';
+
+describe(`Footer`, () => {
+  it(`should render nav bar items`, () => {
+    const { container } = renderWithProviders(<Footer />);
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveTextContent(`Home`);
+    expect(container).toHaveTextContent(`My Swaps`);
+    expect(container).toHaveTextContent(`About`);
+  });
+
+  it(`should render reference buttons`, () => {
+    const { container } = renderWithProviders(<Footer />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it(`should render copyright text`, () => {
+    const { container } = renderWithProviders(<Footer />);
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveTextContent(
+      `Copyright © AlgoWorld ${new Date().getFullYear()}`,
+    );
+  });
+});

src/components/Headers/NavBar.test.tsx

@@ -5,7 +5,7 @@ import {
   NAV_BAR_CHAIN_SWITCH_ID,
 } from './constants';
 
-jest.mock(`algorand-walletconnect-qrcode-modal`, () => {
+jest.mock(`@perawallet/connect`, () => {
   return jest.fn().mockImplementation(() => {
     return {};
   });

src/components/Misc/ParticlesContainer.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { queryByAttribute, render } from '@testing-library/react';
+import ParticlesContainer from './ParticlesContainer';
+
+const getById = queryByAttribute.bind(null, `id`);
+
+describe(`ParticlesContainer`, () => {
+  it(`renders the particle container correctly`, () => {
+    const { container } = render(<ParticlesContainer />);
+    const tsparticles = getById(container, `tsparticles`);
+    expect(tsparticles).toBeInTheDocument();
+  });
+});

src/pages/swap/[proxy]/[escrow].test.tsx

@@ -2,7 +2,7 @@ import { PERFORM_SWAP_PAGE_HEADER_ID } from '@/common/constants';
 import renderWithProviders from '@/__utils__/renderWithProviders';
 import { queryByAttribute } from '@testing-library/react';
 
-jest.mock(`algorand-walletconnect-qrcode-modal`, () => {
+jest.mock(`@perawallet/connect`, () => {
   return jest.fn();
 });
 
@@ -22,10 +22,10 @@ import PerformSwap from './[escrow].page';
 
 describe(`Perform Swap Page`, () => {
   it(`renders a heading`, () => {
-    const dom = renderWithProviders(<PerformSwap />);
+    const { container } = renderWithProviders(<PerformSwap />);
 
     const getById = queryByAttribute.bind(null, `id`);
-    const headerComponent = getById(dom.container, PERFORM_SWAP_PAGE_HEADER_ID);
+    const headerComponent = getById(container, PERFORM_SWAP_PAGE_HEADER_ID);
 
     expect(headerComponent).toBeInTheDocument();
     expect(headerComponent?.textContent?.toLowerCase()).toContain(

src/pages/swaps/asa-to-asa.test.tsx

@@ -1,6 +1,6 @@
 import { queryByAttribute } from '@testing-library/react';
 
-jest.mock(`algorand-walletconnect-qrcode-modal`, () => {
+jest.mock(`@perawallet/connect`, () => {
   return jest.fn();
 });
 

src/pages/swaps/asas-to-algo.test.tsx

@@ -1,6 +1,6 @@
 import { queryByAttribute } from '@testing-library/react';
 
-jest.mock(`algorand-walletconnect-qrcode-modal`, () => {
+jest.mock(`@perawallet/connect`, () => {
   return jest.fn();
 });
 

src/pages/swaps/my-swaps.test.tsx

@@ -1,6 +1,6 @@
 import { queryByAttribute } from '@testing-library/react';
 
-jest.mock(`algorand-walletconnect-qrcode-modal`, () => {
+jest.mock(`@perawallet/connect`, () => {
   return jest.fn();
 });
 

src/utils/api/transactions/createTransactionToSign.test.ts

@@ -0,0 +1,33 @@
+import createTransactionToSign from './createTransactionToSign';
+import { TransactionToSign, TransactionToSignType } from '@/models/Transaction';
+import { Transaction, LogicSigAccount } from 'algosdk';
+
+describe(`createTransactionToSign`, () => {
+  it(`should create a TransactionToSign object with the correct properties`, () => {
+    const transaction: Transaction = {
+      fee: 10,
+      firstRound: 1000,
+      lastRound: 2000,
+      note: Buffer.from(`note`),
+      genesisID: `test-genesis-id`,
+      genesisHash: `test-genesis-hash`,
+    } as unknown as Transaction;
+    const signer: LogicSigAccount = {
+      address: `test-address`,
+      logicSig: {
+        msig: {
+          subsignatures: [],
+          threshold: 1,
+        },
+      },
+    } as unknown as LogicSigAccount;
+    const type: TransactionToSignType = TransactionToSignType.LsigTransaction;
+
+    const result = createTransactionToSign(transaction, signer, type);
+    expect(result).toEqual({
+      transaction: transaction,
+      signer: signer,
+      type: type,
+    } as TransactionToSign);
+  });
+});