10 create unit tests for react components

.github/workflows/integrate.yml

@@ -5,11 +5,23 @@ on:
     branches: [main, dev]
 
 jobs:
-  test_pull_request:
+  test_contract:
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./contract
+    steps:
+      - uses: actions/checkout@v2
+      - run: cargo test
+  test_client:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./client
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
-      - run: npm run contract:test
+          node-version: 16.16.0
+      - run: yarn
+      - run: yarn test

client/package.json

@@ -8,7 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "assert": "^2.0.0",
     "buffer": "^6.0.3",
-    "ipfs-http-client": "^55.0.0",
+    "ipfs-http-client": "^54.0.0",
     "near-api-js": "^0.44.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -17,13 +17,13 @@
     "react-responsive-carousel": "^3.2.22",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
-    "react-toast-notifications": "^2.5.1",
+    "react-toastify": "^9.0.5",
     "web-vitals": "^2.1.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --watchAll=false",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

client/src/App.test.js

@@ -1,8 +1,6 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
 });

client/src/components/Dashboard/components/CreateProject/CreateProject.js

@@ -4,11 +4,10 @@ import { Navigate } from "react-router-dom";
 import WalletContext from "../../../../store/wallet-context";
 import LoadingContext from "../../../../store/loading-context";
 import { create } from "ipfs-http-client";
-import { useToasts } from "react-toast-notifications";
+import { ToastContainer, toast } from "react-toastify";
 import { utils } from "near-api-js";
 
 function CreateProject() {
-  const { addToast } = useToasts();
   const walletContext = useContext(WalletContext);
   const loadingContext = useContext(LoadingContext);
   const [errors, setErrors] = useState({});
@@ -105,10 +104,7 @@ function CreateProject() {
           await ipfs.add(projectImages[i]);
         }
         setCreatedProjectId(parseInt(res, 10));
-        addToast("Successfully created project", {
-          appearance: "success",
-          autoDismiss: true,
-        });
+        toast.success("Successfully created project");
         loadingContext.setLoading(false);
       })
       .catch((err) => {
@@ -431,6 +427,7 @@ function CreateProject() {
           Create Project
         </button>
       </form>
+      <ToastContainer />
     </div>
   );
 }

client/src/components/Dashboard/components/EditProject/EditProject.js

@@ -4,13 +4,12 @@ import { useParams } from "react-router-dom";
 import WalletContext from "../../../../store/wallet-context";
 import { create } from "ipfs-http-client";
 import LoadingContext from "../../../../store/loading-context";
-import { useToasts } from "react-toast-notifications";
+import { ToastContainer, toast } from "react-toastify";
 import QrReader from "react-qr-reader";
 
 function EditProject() {
   const { id } = useParams();
 
-  const { addToast } = useToasts();
   const walletContext = useContext(WalletContext);
   const loadingContext = useContext(LoadingContext);
 
@@ -85,10 +84,7 @@ function EditProject() {
         for (let i = 0; i < newlyAddedImages.length; i++) {
           await ipfs.add(newlyAddedImages[i]);
         }
-        addToast("Successfully updated project", {
-          appearance: "success",
-          autoDismiss: true,
-        });
+        toast.success("Successfully updated project");
         loadingContext.setLoading(false);
       })
       .catch((err) => {
@@ -153,10 +149,7 @@ function EditProject() {
       .cancel_project({ project_id: parseInt(id, 10) })
       .then((res) => {
         console.log(res);
-        addToast("Successfully canceled project", {
-          appearance: "success",
-          autoDismiss: true,
-        });
+        toast.success("Successfully canceled project");
       });
   }
 
@@ -269,15 +262,9 @@ function EditProject() {
         })
         .then((res) => {
           if (res) {
-            addToast(`${result} is a supporter!`, {
-              appearance: "success",
-              autoDismiss: true,
-            });
+            toast.success(`${result} is a supporter!`);
           } else {
-            addToast(`${result} is NOT a supporter!`, {
-              appearance: "error",
-              autoDismiss: true,
-            });
+            toast.success(`${result} is NOT a supporter!`);
           }
           loadingContext.setLoading(false);
         })
@@ -286,10 +273,7 @@ function EditProject() {
           if (!errorMessage) {
             errorMessage = "Failed to verify supporter";
           }
-          addToast(errorMessage, {
-            appearance: "error",
-            autoDismiss: true,
-          });
+          toast.error(errorMessage);
           loadingContext.setLoading(false);
         });
     }
@@ -546,6 +530,7 @@ function EditProject() {
           </div>
         )}
       </div>
+      <ToastContainer />
     </div>
   );
 }

client/src/components/Header/Header.js

@@ -2,12 +2,11 @@ import "./Header.css";
 import { useState, useContext, useEffect } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { getConfig } from "../../config";
-import { useToasts } from "react-toast-notifications";
 import WalletContext from "../../store/wallet-context";
+import { ToastContainer, toast } from "react-toastify";
 
 function Header() {
   const location = useLocation();
-  const { addToast } = useToasts();
   const walletContext = useContext(WalletContext);
 
   const [showDropdown, setShowDropdown] = useState(false);
@@ -31,10 +30,7 @@ function Header() {
   function disconnectWalletHandler() {
     walletContext.wallet.signOut();
     walletContext.setIsSignedIn(false);
-    addToast("Successfully logged out of wallet", {
-      appearance: "success",
-      autoDismiss: true,
-    });
+    toast.success("Successfully logged out of wallet");
   }
 
   function toggleDropdown() {
@@ -47,6 +43,7 @@ function Header() {
 
   return (
     <header className="header">
+      <ToastContainer />
       <nav className="navigation-links">
         <ul>
           <li>

client/src/components/Project/Project.js

@@ -5,12 +5,11 @@ import WalletContext from "../../store/wallet-context";
 import { getConfig } from "../../config";
 import "react-responsive-carousel/lib/styles/carousel.min.css";
 import { Carousel } from "react-responsive-carousel";
-import { useToasts } from "react-toast-notifications";
+import { toast } from "react-toastify";
 
 function Project() {
   const { id } = useParams();
 
-  const { addToast } = useToasts();
   const walletContext = useContext(WalletContext);
   const [project, setProject] = useState(null);
   const [supporterLevel, setSupporterLevel] = useState("Basic");
@@ -42,10 +41,7 @@ function Project() {
         )
         .then((res) => {
           console.log(res);
-          addToast("Successfully became a supporter on project", {
-            appearance: "success",
-            autoDismiss: true,
-          });
+          toast.success("Successfully became a supporter on project");
         });
     }
   }
@@ -65,10 +61,7 @@ function Project() {
       })
       .then((res) => {
         console.log(res);
-        addToast("Successfully removed yourself from project", {
-          appearance: "success",
-          autoDismiss: true,
-        });
+        toast.success("Successfully removed yourself from project");
       });
   }
 

client/src/index.css

@@ -91,6 +91,8 @@ a {
   font-size: 0.8em;
 }
 
+@import "react-toastify/dist/ReactToastify.css";
+
 @media only screen and (max-width: 992px) {
   :root {
     --header-height: 70px;

client/src/index.js

@@ -5,17 +5,14 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { WalletContextProvider } from "./store/wallet-context";
 import { LoadingContextProvider } from "./store/loading-context";
-import { ToastProvider } from "react-toast-notifications";
 import { initWallet } from "./wallet";
 
 initWallet().then((res) => {
   ReactDOM.render(
     <WalletContextProvider wallet={res.wallet} contract={res.contract}>
       <LoadingContextProvider>
         <React.StrictMode>
-          <ToastProvider>
-            <App />
-          </ToastProvider>
+          <App />
         </React.StrictMode>
       </LoadingContextProvider>
     </WalletContextProvider>,

client/src/setupTests.js

@@ -2,4 +2,9 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";
+
+import { TextDecoder, TextEncoder } from "util";
+
+global.TextDecoder = TextDecoder;
+global.TextEncoder = TextEncoder;