Test & Opt: added unit tests and refined README

bu_arts_admin/README.md

@@ -68,16 +68,57 @@ development, ensuring that admins can view the platform statistics and manage ev
 
 4. Run `pnpm run dev` and you should be ready to go.
 
+### How to get Google Map API key
+
+To acquire `VITE_GOOGLE_MAPS_API_KEY`, you can follow the steps in this docs: [Acquire Google Map API key](https://developers.google.com/maps/documentation/embed/get-api-key):
+
+1. You should be able to find `VITE_GOOGLE_MAPS_API_KEY` under API Key Section:
+
+    <img src="./docs/google_map1.png" alt="google_map1" height="400"/>
+
+2. And then you could copy and paste the key in `.env`:
+
+    <img src="./docs/google_map2.png" alt="google_map2" height="400"/>
+
+### How to setup Clerk
+
+To acquire `VITE_CLERK_PUBLISHABLE_KEY`, you can follow the steps in this docs: [Setup Clerk](https://clerk.com/docs/quickstarts/setup-clerk):
+
+1. When creating a new application, be sure you turn Google on and others off:
+
+   <img src="./docs/clerk_instruction1.png" alt="clerk_instruction" height="400"/>
+
+2. Acquire `VITE_CLERK_PUBLISHABLE_KEY` and paste into `.env`:
+
+   <img src="./docs/clerk_instruction2.png" alt="clerk_instruction" height="400"/>
+
+## Testing
+
+To run all the automated tests under the `/test` directory for this project, ensure that you are in the `/bu_arts_admin` directory and execute the following command:
+
+```bash
+pnpm test
+```
+
+To run a specific test file, execute the following command:
+
+```bash
+pnpm test test/file_name_here.tsx
+```
+
 ## File Structure
 
 ```shell
 se-bu-passport-arts/bu_arts_admin
 .
-├── README.md              # Project documentation and information
-├── dist/                   # Compiled output directory
-├── index.html             # Main HTML file for the application
-├── public/                 # Public assets directory
-├── src/                    # Source code directory
+├── README.md                # Project documentation and information
+├── dist/                    # Compiled output directory
+├── index.html               # Main HTML file for the application
+├── public/                  # Public assets directory
+├── structure.drawio         # Diagram source file for project structure
+├── structure.png            # Image file for project structure diagram
+├── src/                     # Source code directory
+└── test/                    # Directory for test files
 ```
 
 ```shell

bu_arts_admin/package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@clerk/clerk-react": "^5.14.0",
@@ -18,6 +19,7 @@
     "@mui/x-charts": "^7.22.2",
     "@tailwindcss/typography": "^0.5.15",
     "@vis.gl/react-google-maps": "^1.4.0",
+    "date-fns": "^4.1.0",
     "firebase": "^11.0.1",
     "luxon": "^3.5.0",
     "react": "^18.3.1",
@@ -29,6 +31,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@types/luxon": "^3.4.2",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
@@ -43,11 +47,13 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.14",
     "typescript": "~5.6.3",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vitest": "^2.1.8"
   }
 }