ci: add pre-push hook for lint and test checks

.github/workflows/ci.yml

@@ -59,6 +59,10 @@ jobs:
           NODE_ENV: test
           JWT_SECRET: testsecret12345678901234567890123
 
+      - name: Run frontend coverage
+        run: npm run coverage
+        working-directory: FRONTEND
+
   e2e-tests:
     name: Playwright E2E Tests
     runs-on: ubuntu-latest

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+coverage/

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+
+echo "Running frontend tests..."
+npm run test --prefix FRONTEND -- --run || exit 1

FRONTEND/package.json

@@ -8,7 +8,8 @@
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.0.17",

FRONTEND/src/components/ui/QuickViewModal.jsx

@@ -17,7 +17,7 @@ import { Link } from "react-router-dom";
 import { useCartStore } from "../../store/cart";
 import { useCurrencyStore } from "../../store/currency";
 import { formatPrice } from "../../utils/currency";
-
+import React from "react";
 const QuickViewModal = ({ isOpen, onClose, product }) => {
   const { addToCart } = useCartStore();
   const { currency, rates } = useCurrencyStore();
@@ -51,7 +51,9 @@ const QuickViewModal = ({ isOpen, onClose, product }) => {
               {formatPrice(product.price, currency, rates)}
             </Text>
 
-            {product.category && <Badge colorScheme="blue">{product.category}</Badge>}
+            {product.category && (
+              <Badge colorScheme="blue">{product.category}</Badge>
+            )}
 
             {product.brand && (
               <Text>

FRONTEND/src/components/ui/ScrollToTop.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { IconButton, useColorModeValue } from "@chakra-ui/react";
 import { LuArrowUp } from "react-icons/lu";
 

FRONTEND/src/components/ui/tests/ProductCard.test.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi } from "vitest";
@@ -34,8 +35,7 @@ vi.mock("../../../store/cart", () => ({
 }));
 
 vi.mock("../QuickAddModal", () => ({
-  default: ({ isOpen }) =>
-    isOpen ? <div>Quick Add Modal</div> : null,
+  default: ({ isOpen }) => (isOpen ? <div>Quick Add Modal</div> : null),
 }));
 
 vi.mock("@chakra-ui/react", async () => {
@@ -86,22 +86,18 @@ describe("ProductCard", () => {
     expect(screen.getByText("Quick Add Modal")).toBeInTheDocument();
   });
 
-    it("disables Add to Cart button when product is out of stock", () => {
-      render(
-        <ProductCard
-          product={{
-            ...mockProduct,
-            stock: 0,
-          }}
-        />
-      );
-
-      const addToCartButton = screen.getByRole("button", {
-        name: `Add ${mockProduct.name} to cart`,
-      });
-
-      expect(addToCartButton).toBeDisabled();
-      expect(addToCartButton).toHaveTextContent("Out of Stock");
+  it("disables Add to Cart button when product is out of stock", () => {
+    render(
+      <ProductCard
+        product={{
+          ...mockProduct,
+          stock: 0,
+        }}
+      />
+    );
+
+    const addToCartButton = screen.getByRole("button", {
+      name: `Add ${mockProduct.name} to cart`,
     });
 
     it("applies correct layout properties and transition styles to the card container", () => {
@@ -114,3 +110,4 @@ describe("ProductCard", () => {
       expect(computedStyle.transition).toBe("all 0.2s ease-in-out");
     });
   });
+});

FRONTEND/vitest.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: "./src/setupTests.js",
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "html"],
+    },
+  },
+});

package.json

@@ -6,7 +6,8 @@
     "build": "npm install && npm install --prefix FRONTEND && npm run build --prefix FRONTEND",
     "start": "cross-env NODE_ENV=production node BACKEND/server.js",
     "test:e2e": "npx playwright test",
-    "test:e2e:ui": "npx playwright test --ui"
+    "test:e2e:ui": "npx playwright test --ui",
+    "prepare": "husky"
   },
   "type": "module",
   "keywords": [],