test(config): setup testing configuration and add first test

.github/workflows/ci.yml

@@ -26,3 +26,5 @@ jobs:
         run: npm ci
       - name: Build
         run: npx turbo format:check lint:check test build
+      - name: Test
+        run: npx turbo run test

.gitignore

@@ -29,3 +29,5 @@ node_modules
 .DS_Store
 *.tmp
 .eslintcache
+
+**/coverage/*

server/apps/backend/package.json

@@ -8,10 +8,10 @@
     "build": "tsc && tsup src/main.ts",
     "start": "tscnode dist/main.js",
     "test": "vitest --run",
-    "format:check": "biome format src",
-    "format:fix": "biome format --write src",
-    "lint:check": "biome lint src",
-    "lint:fix": "biome lint --write src"
+    "format:check": "npx biome format src",
+    "format:fix": "npx biome format --write src",
+    "lint:check": "npx biome lint src",
+    "lint:fix": "npx biome lint --write src"
   },
   "dependencies": {
     "@types/big.js": "6.2.2",

server/apps/frontend/package.json

@@ -18,11 +18,14 @@
   "scripts": {
     "build": "tsc && vite build",
     "clean": "rimraf dist",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest --coverage",
     "dev": "vite build --watch",
-    "format:check": "biome format src",
-    "format:fix": "biome format --write src",
-    "lint:check": "biome lint src",
-    "lint:fix": "biome lint --write src"
+    "format:check": "npx biome format src",
+    "format:fix": "npx biome format --write src",
+    "lint:check": "npx biome lint src",
+    "lint:fix": "npx biome lint --write src"
   },
   "browserslist": {
     "production": [
@@ -37,10 +40,15 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.2.0",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "@vitejs/plugin-react": "4.3.4",
+    "@vitest/coverage-v8": "3.0.2",
+    "jsdom": "26.0.0",
     "typescript": "5.7.3",
-    "vite": "6.0.11"
+    "vite": "6.0.11",
+    "vitest": "3.0.2"
   }
 }

server/apps/frontend/src/Seller/SellerForm/SellerForm.spec.tsx

@@ -0,0 +1,108 @@
+import { createRef } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import type { ErrorFormType } from './SellerFrom.hook';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { SellerForm } from './SellerForm';
+
+const handleSubmitMock = vi.fn();
+const nameRef = createRef<HTMLInputElement>();
+const passwordRef = createRef<HTMLInputElement>();
+const urlRef = createRef<HTMLInputElement>();
+
+describe('SellerForm', () => {
+  it('should render the form correctly', () => {
+    render(
+      <SellerForm
+        handleSubmit={handleSubmitMock}
+        nameRef={nameRef}
+        passwordRef={passwordRef}
+        urlRef={urlRef}
+        errorForm={{ hasError: false, message: '' }}
+      />,
+    );
+
+    expect(screen.getByPlaceholderText('your name')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('your password')).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText('http://192.168.1.1:3000'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /register/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('should call handleSubmit on form submission', async () => {
+    render(
+      <SellerForm
+        handleSubmit={handleSubmitMock}
+        nameRef={nameRef}
+        passwordRef={passwordRef}
+        urlRef={urlRef}
+        errorForm={{ hasError: false, message: '' }}
+      />,
+    );
+
+    fireEvent.change(screen.getByPlaceholderText('your name'), {
+      target: { value: 'John' },
+    });
+    fireEvent.change(screen.getByPlaceholderText('your password'), {
+      target: { value: 'password123' },
+    });
+    fireEvent.change(screen.getByPlaceholderText('http://192.168.1.1:3000'), {
+      target: { value: 'http://localhost:3000' },
+    });
+
+    fireEvent.submit(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(handleSubmitMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should display error message when errorForm hasError is true', () => {
+    const errorForm: ErrorFormType = {
+      hasError: true,
+      message: 'Invalid form submission',
+    };
+
+    render(
+      <SellerForm
+        handleSubmit={handleSubmitMock}
+        nameRef={nameRef}
+        passwordRef={passwordRef}
+        urlRef={urlRef}
+        errorForm={errorForm}
+      />,
+    );
+
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      'Invalid form submission',
+    );
+  });
+
+  it('should pass correct values to refs when form is filled', () => {
+    render(
+      <SellerForm
+        handleSubmit={handleSubmitMock}
+        nameRef={nameRef}
+        passwordRef={passwordRef}
+        urlRef={urlRef}
+        errorForm={{ hasError: false, message: '' }}
+      />,
+    );
+
+    fireEvent.change(screen.getByPlaceholderText('your name'), {
+      target: { value: 'John' },
+    });
+    fireEvent.change(screen.getByPlaceholderText('your password'), {
+      target: { value: 'password123' },
+    });
+    fireEvent.change(screen.getByPlaceholderText('http://192.168.1.1:3000'), {
+      target: { value: 'http://localhost:3000' },
+    });
+
+    expect(nameRef.current?.value).toBe('John');
+    expect(passwordRef.current?.value).toBe('password123');
+    expect(urlRef.current?.value).toBe('http://localhost:3000');
+  });
+});

server/apps/frontend/tsconfig.json

@@ -15,7 +15,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
   },
 
   "include": ["src", "./.eslintrc.json"],

server/apps/frontend/vite.config.ts

@@ -1,7 +1,12 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  test: {
+    environment: 'jsdom',
+    globals: true, 
+    setupFiles: ['./vitest.setup.ts'],
+  },
+});

server/apps/frontend/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';