From a85b7cf6717c25f18ed292bac42ff10f53cda9dd Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Thu, 26 Sep 2024 20:13:04 +0800
Subject: [PATCH 1/6] Install vitest and test date utilities and validation
 functions

- Installed **Vitest** for `unit testing` framework.
- Created test cases for the `formatDate` utility function to ensure correct formatting of valid date strings.
- Added validation tests for `username`, `email`, `password`, and `confirm password` fields to verify proper validation logic.
- Updated the testing configuration to support the new tests and ensure they run successfully.
---
 client/package-lock.json                      | 830 +++++++++++++++++-
 client/package.json                           |   7 +-
 client/src/lib/utils/date.test.ts             |  30 +
 client/src/lib/utils/date.ts                  |   4 +-
 client/src/lib/utils/validations.test.ts      | 141 +++
 .../pages/root/_components/content/index.tsx  |   2 +-
 client/vite.config.ts                         |   6 +-
 7 files changed, 1013 insertions(+), 7 deletions(-)
 create mode 100644 client/src/lib/utils/date.test.ts
 create mode 100644 client/src/lib/utils/validations.test.ts

diff --git a/client/package-lock.json b/client/package-lock.json
index f559693..4e06308 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -30,11 +30,13 @@
         "eslint-plugin-react-hooks": "^5.1.0-rc.0",
         "eslint-plugin-react-refresh": "^0.4.9",
         "globals": "^15.9.0",
+        "jsdom": "^25.0.1",
         "postcss": "^8.4.45",
         "tailwindcss": "^3.4.11",
         "typescript": "^5.6.2",
         "typescript-eslint": "^8.5.0",
-        "vite": "^5.4.1"
+        "vite": "^5.4.1",
+        "vitest": "^2.1.1"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1556,6 +1558,120 @@
         "vite": "^4 || ^5"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.1.tgz",
+      "integrity": "sha512-YeueunS0HiHiQxk+KEOnq/QMzlUuOzbU1Go+PgAsHvvv3tUkJPm9xWt+6ITNTlzsMXUjmgm5T+U7KBPK2qQV6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "2.1.1",
+        "@vitest/utils": "2.1.1",
+        "chai": "^5.1.1",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.1.tgz",
+      "integrity": "sha512-LNN5VwOEdJqCmJ/2XJBywB11DLlkbY0ooDJW3uRX5cZyYCrc4PI/ePX0iQhE3BiEGiQmK4GE7Q/PqCkkaiPnrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "^2.1.0-beta.1",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.11"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@vitest/spy": "2.1.1",
+        "msw": "^2.3.5",
+        "vite": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.1.tgz",
+      "integrity": "sha512-SjxPFOtuINDUW8/UkElJYQSFtnWX7tMksSGW0vfjxMneFqxVr8YJ979QpMbDW7g+BIiq88RAGDjf7en6rvLPPQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.1.tgz",
+      "integrity": "sha512-uTPuY6PWOYitIkLPidaY5L3t0JJITdGTSwBtwMjKzo5O6RCOEncz9PUN+0pDidX8kTHYjO0EwUIvhlGpnGpxmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "2.1.1",
+        "pathe": "^1.1.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.1.tgz",
+      "integrity": "sha512-BnSku1WFy7r4mm96ha2FzN99AZJgpZOWrAhtQfoxjUU5YMRpq1zmHRq7a5K9/NjqonebO7iVDla+VvZS8BOWMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "2.1.1",
+        "magic-string": "^0.30.11",
+        "pathe": "^1.1.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.1.tgz",
+      "integrity": "sha512-ZM39BnZ9t/xZ/nF4UwRH5il0Sw93QnZXd9NAZGRpIgj0yvVwPpLd702s/Cx955rGaMlyBQkZJ2Ir7qyY48VZ+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.1.tgz",
+      "integrity": "sha512-Y6Q9TsI+qJ2CC0ZKj6VBb+T8UPz593N113nnUykqwANqhgf3QkZeHFlusgKLTqrnVHbj/XDKZcDHol+dxVT+rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "2.1.1",
+        "loupe": "^3.1.1",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -1579,6 +1695,19 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -1657,6 +1786,23 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -1772,6 +1918,16 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1813,6 +1969,23 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chai": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz",
+      "integrity": "sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1830,6 +2003,16 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/check-error": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
+      "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -1894,6 +2077,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1952,6 +2148,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssstyle": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
+      "integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "rrweb-cssom": "^0.7.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1959,6 +2168,20 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -1977,6 +2200,23 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -1984,6 +2224,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -2028,6 +2278,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -2260,6 +2523,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -2412,6 +2685,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -2451,6 +2739,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-func-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/glob": {
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -2554,6 +2852,60 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+      "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2673,6 +3025,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2725,6 +3084,47 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsdom": {
+      "version": "25.0.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-25.0.1.tgz",
+      "integrity": "sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssstyle": "^4.1.0",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.4.3",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.5",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.12",
+        "parse5": "^7.1.2",
+        "rrweb-cssom": "^0.7.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^5.0.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^2.11.2"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -2834,6 +3234,16 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/loupe": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.1.tgz",
+      "integrity": "sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-func-name": "^2.0.1"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -2850,6 +3260,16 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2874,6 +3294,29 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2969,6 +3412,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nwsapi": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.12.tgz",
+      "integrity": "sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3059,6 +3509,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse5": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3103,6 +3566,23 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathval": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
+      "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
@@ -3523,6 +4003,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/rrweb-cssom": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+      "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -3547,6 +4034,26 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -3592,6 +4099,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -3625,6 +4139,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
+      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -3784,6 +4312,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.13",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
@@ -3852,6 +4387,70 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.0.tgz",
+      "integrity": "sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinypool": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.1.tgz",
+      "integrity": "sha512-URZYihUbRPcGv95En+sz6MfghfIc2OJ1sv/RmhWZLouPY0/8Vo80viwPvg3dlaS9fuq7fQMEfgRRK7BBZThBEA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-1.2.0.tgz",
+      "integrity": "sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
+      "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "6.1.47",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.47.tgz",
+      "integrity": "sha512-R/K2tZ5MiY+mVrnSkNJkwqYT2vUv1lcT6wJvd2emGaMJ7PHUGRY4e3tUsdFCXgqxi2QgbHjL3yJgXCo40v9Hxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^6.1.47"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.47",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.47.tgz",
+      "integrity": "sha512-6SWyFMnlst1fEt7GQVAAu16EGgFK0cLouH/2Mk6Ftlwhv3Ol40L0dlpGMcnnNiiOMyD2EV/aF3S+U2nKvvLvrA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3865,6 +4464,32 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz",
+      "integrity": "sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+      "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -4069,6 +4694,153 @@
         }
       }
     },
+    "node_modules/vite-node": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.1.tgz",
+      "integrity": "sha512-N/mGckI1suG/5wQI35XeR9rsMsPqKXzq1CdUndzVstBj/HvyxxGctwnK6WX43NGt5L3Z5tcRf83g4TITKJhPrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.3.6",
+        "pathe": "^1.1.2",
+        "vite": "^5.0.0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vitest": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.1.tgz",
+      "integrity": "sha512-97We7/VC0e9X5zBVkvt7SGQMGrRtn3KtySFQG5fpaMlS+l62eeXRQO633AYhSTC3z7IMebnPPNjGXVGNRFlxBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "2.1.1",
+        "@vitest/mocker": "2.1.1",
+        "@vitest/pretty-format": "^2.1.1",
+        "@vitest/runner": "2.1.1",
+        "@vitest/snapshot": "2.1.1",
+        "@vitest/spy": "2.1.1",
+        "@vitest/utils": "2.1.1",
+        "chai": "^5.1.1",
+        "debug": "^4.3.6",
+        "magic-string": "^0.30.11",
+        "pathe": "^1.1.2",
+        "std-env": "^3.7.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.0",
+        "tinypool": "^1.0.0",
+        "tinyrainbow": "^1.2.0",
+        "vite": "^5.0.0",
+        "vite-node": "2.1.1",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "@vitest/browser": "2.1.1",
+        "@vitest/ui": "2.1.1",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+      "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -4085,6 +4857,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -4196,6 +4985,45 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/yaml": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
diff --git a/client/package.json b/client/package.json
index 39bd94f..23f9fe8 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,7 +12,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.56.1",
@@ -36,10 +37,12 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.45",
     "tailwindcss": "^3.4.11",
     "typescript": "^5.6.2",
     "typescript-eslint": "^8.5.0",
-    "vite": "^5.4.1"
+    "vite": "^5.4.1",
+    "vitest": "^2.1.1"
   }
 }
diff --git a/client/src/lib/utils/date.test.ts b/client/src/lib/utils/date.test.ts
new file mode 100644
index 0000000..b22d633
--- /dev/null
+++ b/client/src/lib/utils/date.test.ts
@@ -0,0 +1,30 @@
+import { describe, it, expect } from "vitest";
+
+import { formatDate } from "./date";
+
+const format: Partial<Intl.DateTimeFormatOptions> = {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "2-digit",
+  minute: "2-digit",
+  hour12: true,
+};
+
+describe("formatDate", () => {
+  it("should format a valid date string correctly", () => {
+    const now = new Date();
+    const result = formatDate(now.toISOString());
+    expect(result).toBe(now.toLocaleDateString("en-US", format));
+  });
+
+  it('should return "Invalid Date" for an invalid date string', () => {
+    const result = formatDate("test");
+    expect(result).toBe("Invalid Date");
+  });
+
+  it("should handle empty string input", () => {
+    const result = formatDate("");
+    expect(result).toBe("Invalid Date");
+  });
+});
diff --git a/client/src/lib/utils/date.ts b/client/src/lib/utils/date.ts
index 971cb0c..a92e03e 100644
--- a/client/src/lib/utils/date.ts
+++ b/client/src/lib/utils/date.ts
@@ -1,11 +1,11 @@
 export const formatDate = (dateString: string) => {
   const date = new Date(dateString);
 
-  if (isNaN(date.getTime())) {
+  if (isNaN(date.getDate())) {
     return "Invalid Date";
   }
 
-  return date.toLocaleString("en-US", {
+  return date.toLocaleDateString("en-US", {
     year: "numeric",
     month: "short",
     day: "numeric",
diff --git a/client/src/lib/utils/validations.test.ts b/client/src/lib/utils/validations.test.ts
new file mode 100644
index 0000000..72c2d62
--- /dev/null
+++ b/client/src/lib/utils/validations.test.ts
@@ -0,0 +1,141 @@
+import { describe, it, expect, test } from "vitest";
+
+import {
+  ValidateConfirmPassword,
+  ValidateEmail,
+  ValidatePassword,
+  ValidateUsername,
+} from "./validations";
+
+describe("ValidateUsername", () => {
+  it("should be valid since length is between 3 to 20 characters", () => {
+    const username = "Test User";
+    const isValid = ValidateUsername(username);
+    expect(isValid).toBeTruthy();
+  });
+
+  test("must be invalid since length is less than 3 characters", () => {
+    const username = "abc";
+    const isInvalid = ValidateUsername(username);
+    expect(isInvalid).toBeFalsy();
+  });
+
+  test("must be invalid since length is greater than 20 characters", () => {
+    const username = "abcdefghijklmnopqrstuvwxyzABCDEFGH";
+    const isInvalid = ValidateUsername(username);
+    expect(isInvalid).toBeFalsy();
+  });
+});
+
+describe("ValidateEmail", () => {
+  const validEmail = "test@example.com";
+  const invalidEmail = "abc123,./blabla";
+
+  const missingAt = "john.doeexample.com";
+  const missingDomain = "john.doe@";
+  const invalidTLD = "john.doe@example.c";
+  const withSpace = "john doe@example.com";
+  const withSpecial = "john.doe!@example.com";
+
+  test(`${validEmail} is valid`, () => {
+    const isValid = ValidateEmail(validEmail);
+    expect(isValid).toBeTruthy();
+  });
+
+  test(`${invalidEmail} is invalid`, () => {
+    const isInvalid = ValidateEmail(invalidEmail);
+    expect(isInvalid).toBeFalsy();
+  });
+
+  test(`${missingAt} is invalid`, () => {
+    const isInvalid = ValidateEmail(missingAt);
+    expect(isInvalid).toBeFalsy();
+  });
+
+  test(`${missingDomain} is invalid`, () => {
+    const isInvalid = ValidateEmail(missingDomain);
+    expect(isInvalid).toBeFalsy();
+  });
+
+  test(`${invalidTLD} is invalid`, () => {
+    const isInvalid = ValidateEmail(invalidTLD);
+    expect(isInvalid).toBeFalsy();
+  });
+
+  test(`${withSpace} is invalid`, () => {
+    const isInvalid = ValidateEmail(withSpace);
+    expect(isInvalid).toBeFalsy();
+  });
+
+  test(`${withSpecial} is invalid`, () => {
+    const isInvalid = ValidateEmail(withSpecial);
+    expect(isInvalid).toBeFalsy();
+  });
+});
+
+describe("ValidatePassword", () => {
+  const strongPass = "9Gf!v@7xR3#u$Pq4";
+  const weakPass = "abc123";
+
+  const lowecaseOnly = "abc";
+  const uppercaseOnly = "ABC";
+  const digitOnly = "123";
+  const specialOnly = "!@#$$%^&*()_+";
+  const lessThan6 = "Abc_1";
+
+  test(`${strongPass} is valid`, () => {
+    const isValid = ValidatePassword(strongPass);
+    expect(isValid).toBeTruthy();
+  });
+
+  test(`${weakPass} is invalid`, () => {
+    const isInvalid = ValidatePassword(weakPass);
+    expect(isInvalid).toBeFalsy();
+  });
+
+  test(`${lowecaseOnly} is invalid`, () => {
+    const isInvalid = ValidatePassword(lowecaseOnly);
+    expect(isInvalid).toBeFalsy();
+  });
+
+  test(`${uppercaseOnly} is invalid`, () => {
+    const isInvalid = ValidatePassword(uppercaseOnly);
+    expect(isInvalid).toBeFalsy();
+  });
+
+  test(`${digitOnly} is invalid`, () => {
+    const isInvalid = ValidatePassword(digitOnly);
+    expect(isInvalid).toBeFalsy();
+  });
+
+  test(`${specialOnly} is invalid`, () => {
+    const isInvalid = ValidatePassword(specialOnly);
+    expect(isInvalid).toBeFalsy();
+  });
+
+  test(`${lessThan6} is invalid`, () => {
+    const isInvalid = ValidatePassword(lessThan6);
+    expect(isInvalid).toBeFalsy();
+  });
+});
+
+describe("ValidateConfirmPassword", () => {
+  const password = "9Gf!v@7xR3#u$Pq4";
+  const otherPassword = "9Gf@2asd1s!Pq4";
+
+  test(`${password} and ${password} are the same`, () => {
+    const isValid = ValidateConfirmPassword({
+      pass1: password,
+      pass2: password,
+    });
+    expect(isValid).toBeTruthy();
+  });
+
+  test(`${password} and ${otherPassword} are NOT the same`, () => {
+    const isInvalid = ValidateConfirmPassword({
+      pass1: password,
+      pass2: otherPassword,
+    });
+    expect(isInvalid).toBeFalsy();
+  });
+});
diff --git a/client/src/pages/root/_components/content/index.tsx b/client/src/pages/root/_components/content/index.tsx
index 77dfd39..2bbb77c 100644
--- a/client/src/pages/root/_components/content/index.tsx
+++ b/client/src/pages/root/_components/content/index.tsx
@@ -17,7 +17,7 @@ const Content = () => {
           <InfoPair label="Email" value={user?.email_address} />
           <InfoPair
             label="Last Visit"
-            value={formatDate(new Date(user!.last_signed_in).toDateString())}
+            value={formatDate(new Date(user!.last_signed_in).toISOString())}
           />
           <InfoPair
             label="Joined"
diff --git a/client/vite.config.ts b/client/vite.config.ts
index f89b54d..d6ec937 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -1,5 +1,5 @@
 import react from "@vitejs/plugin-react-swc";
-import { defineConfig } from "vite";
+import { defineConfig } from "vitest/config";
 import path from "path";
 
 // https://vitejs.dev/config/
@@ -10,4 +10,8 @@ export default defineConfig({
       "@": path.resolve(__dirname, "src"),
     },
   },
+  test: {
+    globals: true,
+    environment: "jsdom",
+  },
 });

From 9250bc9deb5872c1a61c5c4af48346f1711ce711 Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Thu, 26 Sep 2024 22:22:58 +0800
Subject: [PATCH 2/6] Add unit test for hooks

- Implemented tests for the `useResize` hook to verify behavior across different screen sizes.
- Added tests for the `useTheme` hook to check the default theme and verify that it updates to light or dark when changed.
---
 client/package-lock.json                | 285 ++++++++++++++++++++++++
 client/package.json                     |   1 +
 client/src/lib/hooks/use-resize.test.ts |  90 ++++++++
 client/src/lib/hooks/use-theme.test.ts  |  48 ++++
 4 files changed, 424 insertions(+)
 create mode 100644 client/src/lib/hooks/use-resize.test.ts
 create mode 100644 client/src/lib/hooks/use-theme.test.ts

diff --git a/client/package-lock.json b/client/package-lock.json
index 4e06308..68e7594 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -21,6 +21,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.9.0",
+        "@testing-library/react": "^16.0.1",
         "@types/node": "^22.5.4",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
@@ -52,6 +53,147 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
+      "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/highlight": "^7.24.7",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
+      "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz",
+      "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -1264,6 +1406,63 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.1.tgz",
+      "integrity": "sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1786,6 +1985,17 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -2243,6 +2453,17 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2257,6 +2478,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -3260,6 +3489,17 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.11",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
@@ -3796,6 +4036,36 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3852,6 +4122,14 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/react-router": {
       "version": "6.26.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
@@ -3921,6 +4199,13 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
diff --git a/client/package.json b/client/package.json
index 23f9fe8..b82de69 100644
--- a/client/package.json
+++ b/client/package.json
@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@testing-library/react": "^16.0.1",
     "@types/node": "^22.5.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
diff --git a/client/src/lib/hooks/use-resize.test.ts b/client/src/lib/hooks/use-resize.test.ts
new file mode 100644
index 0000000..b2a952a
--- /dev/null
+++ b/client/src/lib/hooks/use-resize.test.ts
@@ -0,0 +1,90 @@
+import { describe, it, expect, beforeAll } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+
+import { useResize } from "./use-resize";
+
+describe("useResize", () => {
+  const sm = 640;
+  const md = 768;
+  const lg = 1024;
+  const xl = 1280;
+  const xl2 = 1536;
+
+  beforeAll(() => {
+    window.innerWidth = 800;
+    window.innerHeight = 600;
+  });
+
+  it("should initialize with the correct window size", () => {
+    const { result } = renderHook(() => useResize());
+    expect(result.current).toEqual({ width: 800, height: 600 });
+  });
+
+  it("should update size on window resize", () => {
+    const { result } = renderHook(() => useResize());
+    expect(result.current).toEqual({ width: 800, height: 600 });
+
+    act(() => {
+      window.innerWidth = 1024;
+      window.innerHeight = 768;
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    expect(result.current).toEqual({ width: 1024, height: 768 });
+  });
+
+  it("should be small screen", () => {
+    const { result } = renderHook(() => useResize());
+
+    act(() => {
+      window.innerWidth = sm;
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    expect(result.current.width).toEqual(sm);
+  });
+
+  it("should be medium screen", () => {
+    const { result } = renderHook(() => useResize());
+
+    act(() => {
+      window.innerWidth = md;
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    expect(result.current.width).toEqual(md);
+  });
+
+  it("should be large screen", () => {
+    const { result } = renderHook(() => useResize());
+
+    act(() => {
+      window.innerWidth = lg;
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    expect(result.current.width).toEqual(lg);
+  });
+
+  it("should be extra large screen", () => {
+    const { result } = renderHook(() => useResize());
+
+    act(() => {
+      window.innerWidth = xl;
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    expect(result.current.width).toEqual(xl);
+  });
+
+  it("should be 2x extra large screen", () => {
+    const { result } = renderHook(() => useResize());
+
+    act(() => {
+      window.innerWidth = xl2;
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    expect(result.current.width).toEqual(xl2);
+  });
+});
diff --git a/client/src/lib/hooks/use-theme.test.ts b/client/src/lib/hooks/use-theme.test.ts
new file mode 100644
index 0000000..c4ee12b
--- /dev/null
+++ b/client/src/lib/hooks/use-theme.test.ts
@@ -0,0 +1,48 @@
+import { renderHook, act } from "@testing-library/react";
+import { describe, it, expect, beforeAll } from "vitest";
+
+import { ThemeProvider } from "@/lib/providers/theme-provider";
+
+import { Theme, useTheme } from "./use-theme";
+
+describe("useTheme", () => {
+  beforeAll(() => {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        dispatchEvent: () => {},
+      }),
+    });
+  });
+
+  it("should return default system theme", () => {
+    const { result } = renderHook(() => useTheme());
+
+    expect(result.current.theme).toBe(Theme.System);
+  });
+
+  it("should return light theme", () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: ThemeProvider });
+
+    act(() => {
+      result.current.setTheme(Theme.Light);
+    });
+
+    expect(result.current.theme).toBe(Theme.Light);
+  });
+
+  it("should return dark theme", () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: ThemeProvider });
+
+    act(() => {
+      result.current.setTheme(Theme.Dark);
+    });
+
+    expect(result.current.theme).toBe(Theme.Dark);
+  });
+});

From 046a0326c8597b88aa3b9a802ea977ead00010e0 Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Sat, 28 Sep 2024 01:05:47 +0800
Subject: [PATCH 3/6] Add unit test for providers

- Added a test to ensure the `ThemeProvider` correctly applies the selected `theme`
  to the document's `root` element.
- Mocked `localStorage` to return a predefined `theme` value for testing.
- Verified that the appropriate `class` is applied to `document.documentElement`
  based on the `theme`.
---
 client/package-lock.json                      | 113 +++++++++++++++++-
 client/package.json                           |   1 +
 .../src/lib/providers/query-provider.test.tsx |  95 +++++++++++++++
 .../src/lib/providers/theme-provider.test.tsx |  71 +++++++++++
 .../src/lib/providers/toast-provider.test.tsx | 100 ++++++++++++++++
 5 files changed, 378 insertions(+), 2 deletions(-)
 create mode 100644 client/src/lib/providers/query-provider.test.tsx
 create mode 100644 client/src/lib/providers/theme-provider.test.tsx
 create mode 100644 client/src/lib/providers/toast-provider.test.tsx

diff --git a/client/package-lock.json b/client/package-lock.json
index 68e7594..c22c50e 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -21,6 +21,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.9.0",
+        "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.1",
         "@types/node": "^22.5.4",
         "@types/react": "^18.3.3",
@@ -40,6 +41,13 @@
         "vitest": "^2.1.1"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz",
+      "integrity": "sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -1427,6 +1435,48 @@
         "node": ">=18"
       }
     },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz",
+      "integrity": "sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "lodash": "^4.17.21",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@testing-library/react": {
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.1.tgz",
@@ -1991,7 +2041,6 @@
       "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
@@ -2345,6 +2394,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2459,7 +2515,6 @@
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -3172,6 +3227,16 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -3444,6 +3509,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3557,6 +3629,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4199,6 +4281,20 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -4535,6 +4631,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
diff --git a/client/package.json b/client/package.json
index b82de69..e7bbdfb 100644
--- a/client/package.json
+++ b/client/package.json
@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@types/node": "^22.5.4",
     "@types/react": "^18.3.3",
diff --git a/client/src/lib/providers/query-provider.test.tsx b/client/src/lib/providers/query-provider.test.tsx
new file mode 100644
index 0000000..937599c
--- /dev/null
+++ b/client/src/lib/providers/query-provider.test.tsx
@@ -0,0 +1,95 @@
+import { fireEvent, render, act } from "@testing-library/react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { describe, it, expect, vi } from "vitest";
+import "@testing-library/jest-dom";
+
+import QueryProvider from "./query-provider";
+
+const DefaultMockComponent = () => {
+  const { data } = useQuery({
+    queryKey: ["testQuery"],
+    queryFn: async () => await Promise.resolve("Fetched data"),
+  });
+
+  return <p>{data}</p>;
+};
+
+const SuccessMockComponent = () => {
+  const { mutate } = useMutation({
+    mutationKey: ["testQuery"],
+    mutationFn: async () => await Promise.resolve("Success"),
+    onSuccess: (data) => console.log(data),
+  });
+
+  return <button onClick={() => mutate()} />;
+};
+
+const ErrorMockComponent = () => {
+  const { mutate } = useMutation({
+    mutationKey: ["testQuery"],
+    mutationFn: async () => await Promise.reject(new Error("Error")),
+    onError: ({ message }) => console.log(message),
+  });
+
+  return <button onClick={() => mutate()} />;
+};
+
+describe("Query Provider", () => {
+  it("renders without crashing", () => {
+    const label = "Hello world!";
+
+    const { getByText } = render(
+      <QueryProvider>
+        <p>{label}</p>
+      </QueryProvider>
+    );
+
+    expect(getByText(label)).toBeInTheDocument();
+  });
+
+  it("should render fetched data", async () => {
+    const { findByText } = render(
+      <QueryProvider>
+        <DefaultMockComponent />
+      </QueryProvider>
+    );
+
+    expect(await findByText("Fetched data")).toBeInTheDocument();
+  });
+
+  it("should logs 'Success' on mutation call", async () => {
+    const consoleLogSpy = vi.spyOn(console, "log");
+
+    const { getByRole } = render(
+      <QueryProvider>
+        <SuccessMockComponent />
+      </QueryProvider>
+    );
+
+    const button = getByRole("button");
+
+    await act(async () => {
+      fireEvent.click(button);
+    });
+
+    expect(consoleLogSpy).toHaveBeenCalledWith("Success");
+  });
+
+  it("should logs 'Error' on mutation call", async () => {
+    const consoleLogSpy = vi.spyOn(console, "log");
+
+    const { getByRole } = render(
+      <QueryProvider>
+        <ErrorMockComponent />
+      </QueryProvider>
+    );
+
+    const button = getByRole("button");
+
+    await act(async () => {
+      fireEvent.click(button);
+    });
+
+    expect(consoleLogSpy).toHaveBeenCalledWith("Error");
+  });
+});
diff --git a/client/src/lib/providers/theme-provider.test.tsx b/client/src/lib/providers/theme-provider.test.tsx
new file mode 100644
index 0000000..7989fc3
--- /dev/null
+++ b/client/src/lib/providers/theme-provider.test.tsx
@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeAll } from "vitest";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { ThemeProvider, ThemeProviderContext } from "./theme-provider";
+
+describe("Theme Provider", () => {
+  beforeAll(() => {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        dispatchEvent: () => {},
+      }),
+    });
+  });
+
+  it("should render without any issues", () => {
+    const label = "Hello world!";
+
+    const { getByText } = render(
+      <ThemeProvider>
+        <p>{label}</p>
+      </ThemeProvider>
+    );
+
+    expect(getByText(label)).toBeInTheDocument();
+  });
+
+  it("sets the initial theme from localStorage", () => {
+    const localStorageMock = {
+      getItem: vi.fn().mockReturnValue("light"),
+      setItem: vi.fn(),
+    };
+
+    Object.defineProperty(window, "localStorage", { value: localStorageMock });
+
+    const { getByTestId } = render(
+      <ThemeProvider>
+        <ThemeProviderContext.Consumer>
+          {({ theme }) => <p data-testid="theme">{theme}</p>}
+        </ThemeProviderContext.Consumer>
+      </ThemeProvider>
+    );
+
+    expect(getByTestId("theme")).toHaveTextContent("light");
+  });
+
+  it("applies the theme to the document root", () => {
+    const localStorageMock = {
+      getItem: vi.fn().mockReturnValue("dark"),
+      setItem: vi.fn(),
+    };
+
+    Object.defineProperty(window, "localStorage", { value: localStorageMock });
+
+    render(
+      <ThemeProvider>
+        <p>Test</p>
+      </ThemeProvider>
+    );
+
+    const root = window.document.documentElement;
+
+    expect(root.classList.contains("dark")).toBeTruthy();
+  });
+});
diff --git a/client/src/lib/providers/toast-provider.test.tsx b/client/src/lib/providers/toast-provider.test.tsx
new file mode 100644
index 0000000..3cf7a0b
--- /dev/null
+++ b/client/src/lib/providers/toast-provider.test.tsx
@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, beforeAll, Mock } from "vitest";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { toast } from "sonner";
+
+import { useTheme } from "@/lib/hooks/use-theme";
+
+import ToastProvider from "./toast-provider";
+
+vi.mock("../hooks/use-theme.tsx", () => ({
+  useTheme: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+    warning: vi.fn(),
+  },
+  Toaster: () => null,
+}));
+
+const SuccessMockComponent = () => {
+  toast.success("Success!");
+  return null;
+};
+
+const ErrorMockComponent = () => {
+  toast.error("Error!");
+  return null;
+};
+
+const InfoMockComponent = () => {
+  toast.info("Info!");
+  return null;
+};
+
+const WarningMockComponent = () => {
+  toast.warning("Warning!");
+  return null;
+};
+
+describe("Toast Provider", () => {
+  beforeAll(() => {
+    (useTheme as Mock).mockReturnValue({ theme: "light" });
+  });
+
+  it("should render without issues", () => {
+    const label = "Hello world!";
+
+    const { getByText } = render(
+      <ToastProvider>
+        <p>{label}</p>
+      </ToastProvider>
+    );
+
+    expect(getByText(label)).toBeInTheDocument();
+  });
+
+  it("should render a success toast", () => {
+    render(
+      <ToastProvider>
+        <SuccessMockComponent />
+      </ToastProvider>
+    );
+
+    expect(toast.success).toHaveBeenCalledWith("Success!");
+  });
+
+  it("should render a error toast", () => {
+    render(
+      <ToastProvider>
+        <ErrorMockComponent />
+      </ToastProvider>
+    );
+
+    expect(toast.error).toHaveBeenCalledWith("Error!");
+  });
+
+  it("should render a info toast", () => {
+    render(
+      <ToastProvider>
+        <InfoMockComponent />
+      </ToastProvider>
+    );
+
+    expect(toast.info).toHaveBeenCalledWith("Info!");
+  });
+
+  it("should render a warning toast", () => {
+    render(
+      <ToastProvider>
+        <WarningMockComponent />
+      </ToastProvider>
+    );
+
+    expect(toast.warning).toHaveBeenCalledWith("Warning!");
+  });
+});

From e0b05f3fd99d26c4f76b1d3b2723ecf85763b60a Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Sat, 28 Sep 2024 15:11:43 +0800
Subject: [PATCH 4/6] Add unit test for zustand stores

- Implemented tests for `userStore` to verify user state
  and persistence in session storage.
- Created tests for `authStore` to ensure authentication
  logic and state management function correctly.
---
 client/src/lib/stores/auth-store.test.ts | 111 +++++++++++++++++++++++
 client/src/lib/stores/user-store.test.ts |  85 +++++++++++++++++
 2 files changed, 196 insertions(+)
 create mode 100644 client/src/lib/stores/auth-store.test.ts
 create mode 100644 client/src/lib/stores/user-store.test.ts

diff --git a/client/src/lib/stores/auth-store.test.ts b/client/src/lib/stores/auth-store.test.ts
new file mode 100644
index 0000000..c81b442
--- /dev/null
+++ b/client/src/lib/stores/auth-store.test.ts
@@ -0,0 +1,111 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+
+import { useAuthStore } from "./auth-store";
+
+const auth = {
+  email: "test@example.com",
+  authorized: true,
+  loading: true,
+};
+
+describe("authStore", () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+  });
+
+  it("should have initial state", () => {
+    const { result } = renderHook(() => useAuthStore());
+
+    expect(result.current.email).toBe("");
+    expect(result.current.authorized).toBeFalsy();
+    expect(result.current.loading).toBeFalsy();
+  });
+
+  it("should set email correctly", () => {
+    const { result } = renderHook(() => useAuthStore());
+
+    act(() => {
+      result.current.setEmail(auth.email);
+    });
+
+    expect(result.current.email).toEqual(auth.email);
+  });
+
+  it("should set authorized correctly", () => {
+    const { result } = renderHook(() => useAuthStore());
+
+    act(() => {
+      result.current.setAuthorized(true);
+    });
+
+    expect(result.current.authorized).toEqual(auth.authorized);
+  });
+
+  it("should set loading correctly", () => {
+    const { result } = renderHook(() => useAuthStore());
+
+    act(() => {
+      result.current.setLoading(true);
+    });
+
+    expect(result.current.loading).toEqual(auth.loading);
+  });
+
+  it("should persist data in session storage", () => {
+    const { result } = renderHook(() => useAuthStore());
+
+    act(() => {
+      result.current.setEmail(auth.email);
+      result.current.setAuthorized(true);
+      result.current.setLoading(true);
+    });
+
+    const storedData = sessionStorage.getItem("go-react-auth");
+    expect(storedData).toBeTruthy();
+  });
+
+  it("should persist email and authorized only and it should be the same", () => {
+    const { result } = renderHook(() => useAuthStore());
+
+    act(() => {
+      result.current.setEmail(auth.email);
+      result.current.setAuthorized(true);
+      result.current.setLoading(true);
+    });
+
+    const storedData = sessionStorage.getItem("go-react-auth");
+    const parsedData = storedData ? JSON.parse(storedData) : "";
+    const email = parsedData.state.email;
+    const authorized = parsedData.state.authorized;
+    const loading = parsedData.state.loading;
+
+    expect(email).toEqual(auth.email);
+    expect(authorized).toEqual(auth.authorized);
+    expect(loading).toBeUndefined();
+  });
+
+  it("should reset", () => {
+    const { result } = renderHook(() => useAuthStore());
+
+    act(() => {
+      result.current.setEmail(auth.email);
+      result.current.setAuthorized(true);
+      result.current.setLoading(true);
+    });
+
+    expect(result.current.email).toEqual(auth.email);
+    expect(result.current.authorized).toBeTruthy();
+    expect(result.current.loading).toBeTruthy();
+
+    act(() => {
+      result.current.setEmail("");
+      result.current.setAuthorized(false);
+      result.current.setLoading(false);
+    });
+
+    expect(result.current.email).toEqual("");
+    expect(result.current.authorized).toBeFalsy();
+    expect(result.current.loading).toBeFalsy();
+  });
+});
diff --git a/client/src/lib/stores/user-store.test.ts b/client/src/lib/stores/user-store.test.ts
new file mode 100644
index 0000000..223128d
--- /dev/null
+++ b/client/src/lib/stores/user-store.test.ts
@@ -0,0 +1,85 @@
+import { beforeEach, describe, expect, it, test } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+
+import { UserDTO } from "@/lib/DTO/user-dto";
+
+import { useUserStore } from "./user-store";
+
+const user: UserDTO = {
+  id: "abc123",
+  username: "Test",
+  email_address: "test@example.com",
+  last_signed_in: new Date(),
+  is_verified: false,
+  created_at: new Date(),
+  updated_at: new Date(),
+};
+
+describe("userStore", () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+  });
+
+  it("should have initial state", () => {
+    const { result } = renderHook(() => useUserStore());
+    expect(result.current.user).toBeUndefined();
+  });
+
+  it("should set user correctly", () => {
+    const { result } = renderHook(() => useUserStore());
+
+    act(() => {
+      result.current.setUser(user);
+    });
+
+    expect(result.current.user).toEqual(user);
+  });
+
+  it("should persist user in session storage", () => {
+    const { result } = renderHook(() => useUserStore());
+
+    act(() => {
+      result.current.setUser(user);
+    });
+
+    const storedData = sessionStorage.getItem("go-react-user");
+    expect(storedData).toBeTruthy();
+  });
+
+  test("stored user should be the same", () => {
+    const { result } = renderHook(() => useUserStore());
+
+    act(() => {
+      result.current.setUser(user);
+    });
+
+    const storedData = sessionStorage.getItem("go-react-user");
+    const parseData = storedData ? JSON.parse(storedData) : "";
+    const storedUser = parseData.state.user;
+
+    const parsedUser = {
+      ...storedUser,
+      last_signed_in: new Date(storedUser.last_signed_in),
+      created_at: new Date(storedUser.created_at),
+      updated_at: new Date(storedUser.updated_at),
+    };
+
+    expect(parsedUser).toEqual(user);
+  });
+
+  it("should reset", () => {
+    const { result } = renderHook(() => useUserStore());
+
+    act(() => {
+      result.current.setUser(user);
+    });
+
+    expect(result.current.user).toEqual(user);
+
+    act(() => {
+      result.current.setUser(undefined);
+    });
+
+    expect(result.current.user).toBeUndefined();
+  });
+});

From 02cd424a893af4e35c3c42d0722b629486ebec0f Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Sat, 28 Sep 2024 18:48:15 +0800
Subject: [PATCH 5/6] Add tests for authService methods

Implemented tests for the following **AuthService** methods:

- `signIn`: Verified successful sign-in and error handling.
- `signUp`: Tested user registration process and error responses.
- `signOut`: Checked the sign-out functionality.
- `verifyEmail`: Confirmed email verification process.
- `resendVerify`: Ensured resend verification logic works as expected.
- `verifyToken`: Tested token verification and error handling.
- `forgotPassword`: Validated forgot password request handling.
- `resetPassword`: Checked password reset process.
- `changePassword`: Tested password change functionality.
---
 .../src/lib/classes/error-response-class.ts   |   5 +-
 .../src/lib/classes/generic-response-class.ts |   5 +-
 client/src/lib/classes/user-response-class.ts |   5 +-
 client/src/lib/services/auth-service.ts       |  19 ++-
 .../src/lib/services/change-password.test.ts  |  90 +++++++++++++
 .../src/lib/services/forgot-password.test.ts  |  86 ++++++++++++
 client/src/lib/services/resend-verify.test.ts |  86 ++++++++++++
 .../src/lib/services/reset-password.test.ts   | 112 +++++++++++++++
 client/src/lib/services/sign-in.test.ts       | 127 ++++++++++++++++++
 client/src/lib/services/sign-out.test.ts      |  71 ++++++++++
 client/src/lib/services/sign-up.test.ts       | 103 ++++++++++++++
 client/src/lib/services/verify-email.test.ts  |  97 +++++++++++++
 client/src/lib/services/verify-token.test.ts  |  67 +++++++++
 13 files changed, 869 insertions(+), 4 deletions(-)
 create mode 100644 client/src/lib/services/change-password.test.ts
 create mode 100644 client/src/lib/services/forgot-password.test.ts
 create mode 100644 client/src/lib/services/resend-verify.test.ts
 create mode 100644 client/src/lib/services/reset-password.test.ts
 create mode 100644 client/src/lib/services/sign-in.test.ts
 create mode 100644 client/src/lib/services/sign-out.test.ts
 create mode 100644 client/src/lib/services/sign-up.test.ts
 create mode 100644 client/src/lib/services/verify-email.test.ts
 create mode 100644 client/src/lib/services/verify-token.test.ts

diff --git a/client/src/lib/classes/error-response-class.ts b/client/src/lib/classes/error-response-class.ts
index fcd65fb..ee4d014 100644
--- a/client/src/lib/classes/error-response-class.ts
+++ b/client/src/lib/classes/error-response-class.ts
@@ -1,15 +1,18 @@
 type ErrorResponseType = {
   status: number;
   message: string;
+  response: Response;
 };
 
 export class ErrorResponse extends Error {
   public status: number;
   public message: string;
+  public response: Response;
 
-  constructor({ status, message }: ErrorResponseType) {
+  constructor({ status, message, response }: ErrorResponseType) {
     super(message);
     this.status = status;
     this.message = message;
+    this.response = response;
   }
 }
diff --git a/client/src/lib/classes/generic-response-class.ts b/client/src/lib/classes/generic-response-class.ts
index 5aff4a3..e5b2239 100644
--- a/client/src/lib/classes/generic-response-class.ts
+++ b/client/src/lib/classes/generic-response-class.ts
@@ -1,11 +1,14 @@
 type GenericResponseType = {
   message: string;
+  response: Response;
 };
 
 export class GenericResponse {
   public message: string;
+  public response: Response;
 
-  constructor({ message }: GenericResponseType) {
+  constructor({ message, response }: GenericResponseType) {
     this.message = message;
+    this.response = response;
   }
 }
diff --git a/client/src/lib/classes/user-response-class.ts b/client/src/lib/classes/user-response-class.ts
index b1ca91a..2252d6a 100644
--- a/client/src/lib/classes/user-response-class.ts
+++ b/client/src/lib/classes/user-response-class.ts
@@ -3,14 +3,17 @@ import { UserDTO } from "@/lib/DTO/user-dto";
 type UserResponseType = {
   message: string;
   user: UserDTO;
+  response: Response;
 };
 
 export class UserResponse {
   public message: string;
   public user: UserDTO;
+  public response: Response;
 
-  constructor({ message, user }: UserResponseType) {
+  constructor({ message, user, response }: UserResponseType) {
     this.message = message;
     this.user = user;
+    this.response = response;
   }
 }
diff --git a/client/src/lib/services/auth-service.ts b/client/src/lib/services/auth-service.ts
index 76c2ff0..02c490b 100644
--- a/client/src/lib/services/auth-service.ts
+++ b/client/src/lib/services/auth-service.ts
@@ -26,11 +26,13 @@ export const AuthService = {
       throw new ErrorResponse({
         status: res.status,
         message: data.error,
+        response: res,
       });
     }
 
     return new GenericResponse({
       message: data.message,
+      response: res,
     });
   },
   signIn: async (signIn: SignInDTO) => {
@@ -49,12 +51,14 @@ export const AuthService = {
       throw new ErrorResponse({
         status: res.status,
         message: data.error,
+        response: res,
       });
     }
 
     return new UserResponse({
       message: data.message,
       user: data.user,
+      response: res,
     });
   },
   signOut: async () => {
@@ -71,6 +75,7 @@ export const AuthService = {
 
     return new GenericResponse({
       message: data.message,
+      response: res,
     });
   },
   verifyEmail: async (token: string) => {
@@ -90,11 +95,13 @@ export const AuthService = {
       throw new ErrorResponse({
         status: res.status,
         message: data.error,
+        response: res,
       });
     }
 
     return new GenericResponse({
       message: data.message,
+      response: res,
     });
   },
   resendVerify: async (email: string) => {
@@ -110,14 +117,16 @@ export const AuthService = {
 
     const data = await res.json();
     if (!res.ok) {
-      return new ErrorResponse({
+      throw new ErrorResponse({
         status: res.status,
         message: data.error,
+        response: res,
       });
     }
 
     return new GenericResponse({
       message: data.message,
+      response: res,
     });
   },
   verifyToken: async () => {
@@ -132,12 +141,14 @@ export const AuthService = {
       throw new ErrorResponse({
         status: res.status,
         message: data.error,
+        response: res,
       });
     }
 
     return new UserResponse({
       message: data.message,
       user: data.user,
+      response: res,
     });
   },
   forgotPassword: async (email: string) => {
@@ -157,11 +168,13 @@ export const AuthService = {
       throw new ErrorResponse({
         status: res.status,
         message: data.error,
+        response: res,
       });
     }
 
     return new GenericResponse({
       message: data.message,
+      response: res,
     });
   },
   resetPassword: async (reset: ResetDTO) => {
@@ -185,11 +198,13 @@ export const AuthService = {
       throw new ErrorResponse({
         status: res.status,
         message: data.error,
+        response: res,
       });
     }
 
     return new GenericResponse({
       message: data.message,
+      response: res,
     });
   },
   changePassword: async (change: ChangeDTO) => {
@@ -207,11 +222,13 @@ export const AuthService = {
       throw new ErrorResponse({
         status: res.status,
         message: data.error,
+        response: res,
       });
     }
 
     return new GenericResponse({
       message: data.message,
+      response: res,
     });
   },
 };
diff --git a/client/src/lib/services/change-password.test.ts b/client/src/lib/services/change-password.test.ts
new file mode 100644
index 0000000..28b8423
--- /dev/null
+++ b/client/src/lib/services/change-password.test.ts
@@ -0,0 +1,90 @@
+import { describe, it, expect, vi, Mock } from "vitest";
+
+import { ChangeDTO } from "@/lib/DTO/change-dto";
+
+import { AuthService } from "./auth-service";
+
+global.fetch = vi.fn();
+
+const params: ChangeDTO = {
+  email: "test@example.com",
+  old_password: "Old_Password123",
+  new_password: "New_Password123",
+};
+
+describe("changePassword", () => {
+  it("should return a GenericResponse on successful change-password", async () => {
+    const message = "Change password success";
+    const mockResponse = { message };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    const res = await AuthService.changePassword(params);
+    expect(res.message).toEqual(message);
+  });
+
+  it("should throw an ErrorResponse on failed change-password", async () => {
+    const error = "Change password failed";
+    const mockResponse = { error };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: false,
+      status: 400,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    await expect(AuthService.changePassword(params)).rejects.toThrow(
+      expect.objectContaining({ status: 400, message: error })
+    );
+  });
+
+  it("should have content-type", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.changePassword(params);
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        headers: { "Content-Type": "application/json" },
+      })
+    );
+  });
+
+  it("should have JSON stringified in body", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.changePassword(params);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        body: JSON.stringify(params),
+      })
+    );
+  });
+
+  it("should have called with POST method", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.changePassword(params);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        method: "POST",
+      })
+    );
+  });
+});
diff --git a/client/src/lib/services/forgot-password.test.ts b/client/src/lib/services/forgot-password.test.ts
new file mode 100644
index 0000000..2a78a73
--- /dev/null
+++ b/client/src/lib/services/forgot-password.test.ts
@@ -0,0 +1,86 @@
+import { describe, it, expect, vi, Mock } from "vitest";
+
+import { AuthService } from "./auth-service";
+
+global.fetch = vi.fn();
+
+const email = "test@example.com";
+
+describe("forgotPassword", () => {
+  it("should return a GenericResponse on successful forgot-password", async () => {
+    const message = "Forgot password success";
+    const mockResponse = { message };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    const res = await AuthService.forgotPassword(email);
+    expect(res.message).toEqual(message);
+  });
+
+  it("should throw an ErrorResponse on failed forgot-password", async () => {
+    const error = "Forgot password failed";
+    const mockResponse = { error };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: false,
+      status: 400,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    await expect(AuthService.forgotPassword(email)).rejects.toThrow(
+      expect.objectContaining({ status: 400, message: error })
+    );
+  });
+
+  it("should have content-type", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.forgotPassword(email);
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        headers: { "Content-Type": "application/json" },
+      })
+    );
+  });
+
+  it("should have JSON stringified in body", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.forgotPassword(email);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        body: JSON.stringify({
+          email: email,
+        }),
+      })
+    );
+  });
+
+  it("should have called with POST method", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.forgotPassword(email);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        method: "POST",
+      })
+    );
+  });
+});
diff --git a/client/src/lib/services/resend-verify.test.ts b/client/src/lib/services/resend-verify.test.ts
new file mode 100644
index 0000000..597e777
--- /dev/null
+++ b/client/src/lib/services/resend-verify.test.ts
@@ -0,0 +1,86 @@
+import { describe, it, expect, vi, Mock } from "vitest";
+
+import { AuthService } from "./auth-service";
+
+global.fetch = vi.fn();
+
+const email = "test@example.com";
+
+describe("resendVerify", () => {
+  it("should return a GenericResponse on successful resend-verify", async () => {
+    const message = "Resend verify success";
+    const mockResponse = { message };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    const res = await AuthService.resendVerify(email);
+    expect(res.message).toEqual(message);
+  });
+
+  it("should throw an ErrorResponse on failed resend-verify", async () => {
+    const error = "Resend verify failed";
+    const mockResponse = { error };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: false,
+      status: 400,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    await expect(AuthService.resendVerify(email)).rejects.toThrow(
+      expect.objectContaining({ status: 400, message: error })
+    );
+  });
+
+  it("should have content-type", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.resendVerify(email);
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        headers: { "Content-Type": "application/json" },
+      })
+    );
+  });
+
+  it("should have JSON stringified in body", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.resendVerify(email);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        body: JSON.stringify({
+          email: email,
+        }),
+      })
+    );
+  });
+
+  it("should have called with POST method", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.resendVerify(email);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        method: "POST",
+      })
+    );
+  });
+});
diff --git a/client/src/lib/services/reset-password.test.ts b/client/src/lib/services/reset-password.test.ts
new file mode 100644
index 0000000..4cc6f45
--- /dev/null
+++ b/client/src/lib/services/reset-password.test.ts
@@ -0,0 +1,112 @@
+import { describe, it, expect, vi, Mock } from "vitest";
+
+import { ResetDTO } from "@/lib/DTO/reset-dto";
+
+import { AuthService } from "./auth-service";
+import { AppRoutes } from "@/constants/routes";
+
+global.fetch = vi.fn();
+
+const params: ResetDTO = {
+  old_password: "Old_Password123",
+  new_password: "New_Password123",
+  token: "token",
+};
+
+describe("resetPassword", () => {
+  it("should return a GenericResponse on successful reset-password", async () => {
+    const message = "Reset password success";
+    const mockResponse = { message };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    const res = await AuthService.resetPassword(params);
+    expect(res.message).toEqual(message);
+  });
+
+  it("should throw an ErrorResponse on failed reset-password", async () => {
+    const error = "Reset password failed";
+    const mockResponse = { error };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: false,
+      status: 400,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    await expect(AuthService.resetPassword(params)).rejects.toThrow(
+      expect.objectContaining({ status: 400, message: error })
+    );
+  });
+
+  it("should have content-type", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.resetPassword(params);
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        headers: { "Content-Type": "application/json" },
+      })
+    );
+  });
+
+  it("should have JSON stringified in body", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.resetPassword(params);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        body: JSON.stringify({
+          old_password: params.old_password,
+          new_password: params.new_password,
+        }),
+      })
+    );
+  });
+
+  it("should fetch with URL including the token", async () => {
+    const baseURL =
+      import.meta.env.VITE_ENV === "development"
+        ? `${import.meta.env.VITE_BASE_URL}/api/auth`
+        : "/api/auth";
+
+    const expectedURL = `${baseURL}${AppRoutes.ResetPassword}/${params.token}`;
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.resetPassword(params);
+
+    expect(fetch).toHaveBeenCalledWith(expectedURL, expect.any(Object));
+  });
+
+  it("should have called with POST method", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.resetPassword(params);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        method: "POST",
+      })
+    );
+  });
+});
diff --git a/client/src/lib/services/sign-in.test.ts b/client/src/lib/services/sign-in.test.ts
new file mode 100644
index 0000000..7308d0d
--- /dev/null
+++ b/client/src/lib/services/sign-in.test.ts
@@ -0,0 +1,127 @@
+import { describe, it, expect, vi, Mock } from "vitest";
+
+import { SignInDTO } from "@/lib/DTO/sign-in-dto";
+import { UserDTO } from "@/lib/DTO/user-dto";
+
+import { AuthService } from "./auth-service";
+
+global.fetch = vi.fn();
+
+const params: SignInDTO = {
+  email: "test@example.com",
+  password: "Password_123",
+};
+
+const user: UserDTO = {
+  id: "abc123",
+  username: "Test",
+  email_address: "test@example.com",
+  last_signed_in: new Date(),
+  is_verified: false,
+  created_at: new Date(),
+  updated_at: new Date(),
+};
+
+describe("signIn", () => {
+  it("should return a GenericResponse on successful sign-in", async () => {
+    const message = "Sign in success";
+
+    const mockResponse = { message, user };
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    const res = await AuthService.signIn(params);
+    expect(res.message).toEqual("Sign in success");
+    expect(res.user).toEqual(user);
+  });
+
+  it("should throw an ErrorResponse on failed sign-in", async () => {
+    const error = "Sign in failed";
+    const mockResponse = { error };
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: false,
+      status: 400,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    await expect(AuthService.signIn(params)).rejects.toThrow(
+      expect.objectContaining({ status: 400, message: error })
+    );
+  });
+
+  it("should have response status 200", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    const res = await AuthService.signIn(params);
+    expect(res.response.status).toEqual(200);
+  });
+
+  it("should have content-type", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.signIn(params);
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        headers: { "Content-Type": "application/json" },
+      })
+    );
+  });
+
+  it("should have JSON stringified in body", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.signIn(params);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        body: JSON.stringify(params),
+      })
+    );
+  });
+
+  it("should have called with POST method", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.signIn(params);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        method: "POST",
+      })
+    );
+  });
+
+  it("should include credentials", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.signIn(params);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        credentials: "include",
+      })
+    );
+  });
+});
diff --git a/client/src/lib/services/sign-out.test.ts b/client/src/lib/services/sign-out.test.ts
new file mode 100644
index 0000000..30791f3
--- /dev/null
+++ b/client/src/lib/services/sign-out.test.ts
@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, Mock } from "vitest";
+
+import { AuthService } from "./auth-service";
+
+global.fetch = vi.fn();
+
+describe("signOut", () => {
+  it("should return a GenericResponse on successful sign-out", async () => {
+    const message = "Sign out success";
+    const mockResponse = { message };
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    const res = await AuthService.signOut();
+    expect(res.message).toEqual(message);
+  });
+
+  it("should throw an ErrorResponse on failed sign-out", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: false,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await expect(AuthService.signOut()).rejects.toThrow("Unable to sign out");
+  });
+
+  it("should have response status 200", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    const res = await AuthService.signOut();
+    expect(res.response.status).toEqual(200);
+  });
+
+  it("should have called with POST method", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.signOut();
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        method: "POST",
+      })
+    );
+  });
+
+  it("should include credentials", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.signOut();
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        credentials: "include",
+      })
+    );
+  });
+});
diff --git a/client/src/lib/services/sign-up.test.ts b/client/src/lib/services/sign-up.test.ts
new file mode 100644
index 0000000..3ab0741
--- /dev/null
+++ b/client/src/lib/services/sign-up.test.ts
@@ -0,0 +1,103 @@
+import { describe, it, expect, vi, Mock } from "vitest";
+
+import { SignUpDTO } from "@/lib/DTO/sign-up-dto";
+
+import { AuthService } from "./auth-service";
+
+global.fetch = vi.fn();
+
+const params: SignUpDTO = {
+  username: "Test",
+  email: "test@example.com",
+  password: "Password_123",
+};
+
+describe("signUp", () => {
+  it("should return a GenericResponse on successful sign-up", async () => {
+    const message = "Sign up success";
+    const mockResponse = { message };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    const res = await AuthService.signUp(params);
+    expect(res.message).toEqual(message);
+  });
+
+  it("should throw an ErrorResponse on failed sign-up", async () => {
+    const error = "Sign up failed";
+    const mockResponse = { error };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: false,
+      status: 400,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    await expect(AuthService.signUp(params)).rejects.toThrow(
+      expect.objectContaining({ status: 400, message: error })
+    );
+  });
+
+  it("should have response status 200", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    const res = await AuthService.signUp(params);
+    expect(res.response.status).toEqual(200);
+  });
+
+  it("should have content-type", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.signUp(params);
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        headers: { "Content-Type": "application/json" },
+      })
+    );
+  });
+
+  it("should have JSON stringified in body", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.signUp(params);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        body: JSON.stringify(params),
+      })
+    );
+  });
+
+  it("should have called with POST method", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.signUp(params);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        method: "POST",
+      })
+    );
+  });
+});
diff --git a/client/src/lib/services/verify-email.test.ts b/client/src/lib/services/verify-email.test.ts
new file mode 100644
index 0000000..54fc4cc
--- /dev/null
+++ b/client/src/lib/services/verify-email.test.ts
@@ -0,0 +1,97 @@
+import { describe, it, expect, vi, Mock } from "vitest";
+
+import { AuthService } from "./auth-service";
+
+global.fetch = vi.fn();
+
+const token = "token";
+
+describe("verifyEmail", () => {
+  it("should return a GenericResponse on successful verify-email", async () => {
+    const message = "Verify email success";
+    const mockResponse = { message };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    const res = await AuthService.verifyEmail(token);
+    expect(res.message).toEqual(message);
+  });
+
+  it("should throw an ErrorResponse on failed sign-up", async () => {
+    const error = "Verify email failed";
+    const mockResponse = { error };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: false,
+      status: 400,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    await expect(AuthService.verifyEmail(token)).rejects.toThrow(
+      expect.objectContaining({ status: 400, message: error })
+    );
+  });
+
+  it("should have response status 200", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    const res = await AuthService.verifyEmail(token);
+    expect(res.response.status).toEqual(200);
+  });
+
+  it("should have content-type", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.verifyEmail(token);
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        headers: { "Content-Type": "application/json" },
+      })
+    );
+  });
+
+  it("should have JSON stringified in body", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.verifyEmail(token);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        body: JSON.stringify({
+          token: token,
+        }),
+      })
+    );
+  });
+
+  it("should have called with POST method", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.verifyEmail(token);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        method: "POST",
+      })
+    );
+  });
+});
diff --git a/client/src/lib/services/verify-token.test.ts b/client/src/lib/services/verify-token.test.ts
new file mode 100644
index 0000000..489d1d8
--- /dev/null
+++ b/client/src/lib/services/verify-token.test.ts
@@ -0,0 +1,67 @@
+import { describe, it, expect, vi, Mock } from "vitest";
+
+import { AuthService } from "./auth-service";
+
+global.fetch = vi.fn();
+
+describe("verifyToken", () => {
+  it("should return a GenericResponse on successful verify-token", async () => {
+    const message = "Verify token success";
+    const mockResponse = { message };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    const res = await AuthService.verifyToken();
+    expect(res.message).toEqual(message);
+  });
+
+  it("should throw an ErrorResponse on failed verify-token", async () => {
+    const error = "Verify token failed";
+    const mockResponse = { error };
+
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: false,
+      status: 400,
+      json: vi.fn().mockResolvedValueOnce(mockResponse),
+    });
+
+    await expect(AuthService.verifyToken()).rejects.toThrow(
+      expect.objectContaining({ status: 400, message: error })
+    );
+  });
+
+  it("should have called with GET method", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.verifyToken();
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        method: "GET",
+      })
+    );
+  });
+
+  it("should include credentials", async () => {
+    (fetch as Mock).mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValueOnce({}),
+    });
+
+    await AuthService.verifyToken();
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        credentials: "include",
+      })
+    );
+  });
+});

From c140ffca86aa5c8dedf6083c7e3bd6e7da742625 Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Sun, 29 Sep 2024 02:28:32 +0800
Subject: [PATCH 6/6] Add tests for guard components

- Created unit tests for `AuthGuard` and `PrivateGuard`
  components to ensure proper functionality.
- Verified that guards correctly redirect unauthorized users
  and allow access for authorized users.
---
 client/src/guards/auth-guard.test.tsx    |  62 ++++++++++++
 client/src/guards/private-guard.test.tsx | 122 +++++++++++++++++++++++
 2 files changed, 184 insertions(+)
 create mode 100644 client/src/guards/auth-guard.test.tsx
 create mode 100644 client/src/guards/private-guard.test.tsx

diff --git a/client/src/guards/auth-guard.test.tsx b/client/src/guards/auth-guard.test.tsx
new file mode 100644
index 0000000..09c4f4a
--- /dev/null
+++ b/client/src/guards/auth-guard.test.tsx
@@ -0,0 +1,62 @@
+import {
+  createMemoryRouter,
+  RouteObject,
+  RouterProvider,
+} from "react-router-dom";
+import { describe, it, expect, vi, Mock, beforeAll } from "vitest";
+import { render } from "@testing-library/react";
+
+import { useAuthStore } from "@/lib/stores/auth-store";
+import { AppRoutes } from "@/constants/routes";
+
+import AuthGuard from "./auth-guard";
+
+vi.mock("../lib/stores/auth-store.ts", () => ({
+  useAuthStore: vi.fn(),
+}));
+
+const routes: RouteObject[] = [
+  {
+    path: AppRoutes.Root,
+    element: <div>Root</div>,
+  },
+  {
+    element: <AuthGuard />,
+    children: [
+      {
+        path: AppRoutes.SignIn,
+        element: <div>Sign In</div>,
+      },
+    ],
+  },
+];
+
+describe("Auth Guard", () => {
+  let router: ReturnType<typeof createMemoryRouter>;
+
+  beforeAll(() => {
+    (useAuthStore as unknown as Mock).mockReturnValueOnce({
+      authorized: true,
+    });
+
+    router = createMemoryRouter(routes, {
+      initialEntries: [AppRoutes.SignIn],
+    });
+
+    render(<RouterProvider router={router} />);
+  });
+
+  it("redirects to the root page when authorized", () => {
+    expect(router.state.location.pathname).toBe(AppRoutes.Root);
+  });
+
+  it("renders the outlet when not authorized", () => {
+    (useAuthStore as unknown as Mock).mockReturnValueOnce({
+      authorized: false,
+    });
+
+    render(<RouterProvider router={router} />);
+
+    expect(router);
+  });
+});
diff --git a/client/src/guards/private-guard.test.tsx b/client/src/guards/private-guard.test.tsx
new file mode 100644
index 0000000..d95e121
--- /dev/null
+++ b/client/src/guards/private-guard.test.tsx
@@ -0,0 +1,122 @@
+import {
+  createMemoryRouter,
+  RouteObject,
+  RouterProvider,
+} from "react-router-dom";
+import { describe, it, expect, vi, Mock } from "vitest";
+import { useQuery } from "@tanstack/react-query";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { useAuthStore } from "@/lib/stores/auth-store";
+import { AppRoutes } from "@/constants/routes";
+
+import PrivateGuard from "./private-guard";
+
+vi.mock("@/lib/stores/auth-store", () => ({
+  useAuthStore: vi.fn().mockReturnValueOnce({
+    authorized: false,
+    setAuthorized: vi.fn(),
+  }),
+}));
+
+vi.mock("@tanstack/react-query", () => ({
+  useQuery: vi.fn().mockReturnValueOnce({
+    isLoading: false,
+    isError: false,
+    isSuccess: false,
+  }),
+}));
+
+const routes: RouteObject[] = [
+  {
+    path: AppRoutes.SignIn,
+    element: <div>Sign In</div>,
+  },
+  {
+    element: <PrivateGuard />,
+    children: [
+      {
+        path: AppRoutes.Root,
+        element: <div>Root</div>,
+      },
+    ],
+  },
+];
+
+describe("Private Guard", () => {
+  it("redirects to sign-in page when not authorized", () => {
+    const router = createMemoryRouter(routes, {
+      initialEntries: [AppRoutes.Root],
+    });
+
+    render(<RouterProvider router={router} />);
+
+    expect(router.state.location.pathname).toEqual(AppRoutes.SignIn);
+  });
+
+  it("redirects to sign in page when an error occurs", () => {
+    const router = createMemoryRouter(routes, {
+      initialEntries: [AppRoutes.Root],
+    });
+
+    (useAuthStore as unknown as Mock).mockReturnValueOnce({
+      authenticated: true,
+      setAuthorized: vi.fn(),
+    });
+
+    (useQuery as Mock).mockReturnValueOnce({
+      isError: true,
+      isLoading: false,
+      isSuccess: false,
+    });
+
+    render(<RouterProvider router={router} />);
+
+    expect(router.state.location.pathname).toEqual(AppRoutes.SignIn);
+  });
+
+  it("allows access to root page when authorized", () => {
+    const router = createMemoryRouter(routes, {
+      initialEntries: [AppRoutes.Root],
+    });
+
+    (useAuthStore as unknown as Mock).mockReturnValueOnce({
+      authorized: true,
+      setAuthorized: vi.fn(),
+    });
+
+    (useQuery as Mock).mockReturnValueOnce({
+      isError: false,
+      isLoading: false,
+      isSuccess: true,
+    });
+
+    render(<RouterProvider router={router} />);
+
+    expect(router.state.location.pathname).toEqual(AppRoutes.Root);
+  });
+
+  it("renders loading component when query is loading", () => {
+    const router = createMemoryRouter(routes, {
+      initialEntries: [AppRoutes.Root],
+    });
+
+    (useAuthStore as unknown as Mock).mockReturnValueOnce({
+      authorized: true,
+      setAuthorized: vi.fn(),
+    });
+
+    (useQuery as Mock).mockReturnValueOnce({
+      isError: false,
+      isLoading: true,
+      isSuccess: false,
+    });
+
+    const { container } = render(<RouterProvider router={router} />);
+
+    const loader = container.querySelector("svg");
+
+    expect(loader).toBeInTheDocument();
+  });
+});