Add Test Coverage and UI

.gitignore

@@ -7,6 +7,10 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+# Test Results
+tests/coverage
+tests/reports
+
 node_modules
 dist
 dist-ssr

package.json

@@ -6,6 +6,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "test": "vitest",
+    "test:ui": "vitest --ui --coverage.enabled=true",
+    "coverage": "vitest run --coverage",
     "format": "prettier --write .",
     "lint": "eslint .",
     "preview": "vite preview",
@@ -29,7 +31,9 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.8",
     "@vitest/eslint-plugin": "^1.1.18",
+    "@vitest/ui": "^2.1.8",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",

src/components/UI/FormInput.test.tsx

@@ -10,7 +10,7 @@ test("should render with the correct label", () => {
 });
 
 test("should apply shrink classes when input has value", () => {
-  render(<FormInput label="Username" value="test" />);
+  render(<FormInput label="Username" value="test" onChange={vi.fn()} />);
   const labelElement = screen.getByText("Username");
   expect(labelElement).toHaveClass("-top-5 text-xs text-black");
 });