Merge pull request #60 from BU-Spark/Chris-Testing-and-Final-Clean-up

Adding tests and documentation.

.github/workflows/run_jest_tests.yml

@@ -0,0 +1,22 @@
+name: Run Jest Tests
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+      - sp24-dev
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run tests
+        run: npm test

.gitignore

@@ -169,4 +169,5 @@ $RECYCLE.BIN/
 # .nfs files are created when an open file is removed but is still being accessed
 .nfs*
 
-/node_modules
+/node_modules
+code/package-lock.json

README.md

@@ -381,7 +381,13 @@ File Structure:
             - Typeform is also limited to one video per page, which is another reason a custom backend is needed
 
 ### Utils
-
+    * apiUtils.tsx
+        * getYouTubeEmbedUrl
+            - Returns the YouTube embed URL for a given YouTube video either in short form or long form.
+        * extractBetweenResources
+            - Returns the text value between [*resources*] tags that are passed in the description, typically pasted from /resource-link-gen
+        * removeResourcesSection
+            - Returns the text value without [*resources*] tags and the content inside the tags that are passed in the description, typically pasted from /resource-link-gen
     * BodyContentStyle.tsx
         * Common style traits
             - Establishes consistent color schemes and border styles
@@ -425,24 +431,15 @@ File Structure:
 
 ### Tests
 
-Docs Written by @ArkashJ, contact for assistance
+Docs Written by @jacob-stein1, contact for assistance
 DOCUMENTATION
 
----> Nextjs-Tests
--> index.tests.tsx
--> QuestionnareBodyContent.tests.tsx
--> Questionnare.tests.tsx
--> SolutionPages.tests.tsx
-
-All these tests check whether the components have been rendered or not
-
-cd to the Nextjs-Tests file, install the jest dependency and run tests. Detailed explantion in the TestDocs.md file
+We have written test cases to check the rendering of components, the function of contexts, and more. Testing is written using the Jest JavaScript testing framework. See their [documentation](https://jestjs.io/docs/getting-started) for more info.
 
-<img width="285" alt="Screenshot 2023-05-02 at 5 41 41 PM" src="https://user-images.githubusercontent.com/86805856/235793030-dfd1807f-3157-4a73-a605-c2cae6f6e88e.png">
+Tests are contained within a '**tests**' directory within each sub-directory of the project. For example /pages/**tests**/'page'.test.js contains the test cases for each page in the pages directory.
 
-Move the tests to "** test **" folder in pages folder. Then run 'npm run test'. Make sure you have jest installed. For more instructions, navigate to docs in tests folder.
+To run all tests:
 
-Commands to Run:
 $ npm run test
 
 ### Recommended Next Steps
@@ -466,5 +463,6 @@ $ npm run test
 ### Deployment
 
 We deployed the frontend in [vercel](https://se-bch-als-resource-app-zeta.vercel.app/)
+Please note the deployed link does not work on the BU Network for some reason.
 
 You can contact Jacob at [email protected] for information if you need.

code/next.config.js

@@ -1,6 +1,4 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
 
-module.exports = nextConfig
+module.exports = {
+reactStrictMode: true
+};

code/package.json

@@ -24,11 +24,15 @@
     "@mantine/prism": "^6.0.2",
     "@tabler/icons-react": "^2.14.0",
     "@testing-library/dom": "^9.2.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.6",
     "@types/node": "18.15.3",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-fetch-mock": "^3.0.3",
     "next": "^13.2.4",
     "react": "18.2.0",
     "react-aria": "^3.23.1",
@@ -44,13 +48,24 @@
       "<rootDir>/node_modules/"
     ],
     "setupFilesAfterEnv": [
-      "<rootDir>/setupTests.js"
-    ]
+      "<rootDir>/jest.setup.js"
+    ],
+    "moduleNameMapper": {
+      "^@/components/(.*)$": "<rootDir>/src/components/$1",
+      "^@/contexts/(.*)$": "<rootDir>/src/contexts/$1",
+      "^@/types/(.*)$": "<rootDir>/src/types/$1",
+      "^@/utils/(.*)$": "<rootDir>/src/utils/$1",
+      "^@/styles/(.*)$": "<rootDir>/src/styles/$1",
+      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+    },
+    "testEnvironment": "jsdom"
   },
   "devDependencies": {
-    "@jest/globals": "^29.5.0",
-    "@testing-library/react": "^14.0.0",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "jest": "^29.5.0"
+    "babel-jest": "^29.7.0",
+    "identity-obj-proxy": "^3.0.0",
+    "ignore-loader": "^0.1.2",
+    "jest": "^29.7.0",
+    "next-router-mock": "^0.9.13"
   }
 }

code/src/Pages&UtilsDocs.md

@@ -37,6 +37,7 @@ File Structure:
     - Home.module.css
     - ResourceLinkGen.module.css
   - utils/
+    - apiUtils.tsx 
     - BodyContentStyle.tsx
     - GetSolutionPageForChoice.tsx
     - QuestionUtils.tsx
@@ -141,7 +142,13 @@ File Structure:
             - Typeform is also limited to one video per page, which is another reason a custom backend is needed
 
 ### Utils
-
+    * apiUtils.tsx
+        * getYouTubeEmbedUrl
+            - Returns the YouTube embed URL for a given YouTube video either in short form or long form.
+        * extractBetweenResources
+            - Returns the text value between [*resources*] tags that are passed in the description, typically pasted from /resource-link-gen
+        * removeResourcesSection
+            - Returns the text value without [*resources*] tags and the content inside the tags that are passed in the description, typically pasted from /resource-link-gen
     * BodyContentStyle.tsx
         * Common style traits
             - Establishes consistent color schemes and border styles

code/src/constants/globals.tsx

@@ -1,4 +1,4 @@
 //export const API_URL = "http://localhost:1338"
-export const API_URL = "https://se-bch-als-resource-app-production.up.railway.app"
+//export const API_URL = "https://se-bch-als-resource-app-production.up.railway.app"
 export const TYPEFORM_API_URL = "https://api.typeform.com"
 export const COMMUNICATION_FORM_ID = "EJxD8FoP"

code/src/contexts/BookmarkContext.tsx

@@ -25,7 +25,6 @@ const BookmarkContext = createContext<BookmarkContextType | undefined>(
   undefined
 );
 
-
 /**
  * Custom hook to use the bookmark context.
  * @throws Will throw an error if used outside of BookmarkProvider context.
@@ -57,7 +56,6 @@ export const BookmarkProvider: React.FC<BookmarkProviderProps> = ({
   // Effect to load bookmarks from localStorage on component mount
   useEffect(() => {
     const saved = localStorage.getItem("bookmarks");
-    console.log(saved);
     if (saved) {
       setBookmarks(JSON.parse(saved));
     }