Merge pull request #275 from Rishab87/frontend-tests

added frontend tests

Author: Pranav0-0Aggarwal

README.md

@@ -264,6 +264,24 @@ You can control the number of workers by setting the `WORKERS` environment varia
 - For setting up the frontend, follow the instructions in the [Frontend Setup Guide](./docs/frontend/docker-setup.md).
   </br>
 - For setting up the backend, follow the instructions in the [Backend Setup Guide](./docs/backend/docker-setup.md).
+  
+### Testing
+#### Frontend
+```bash
+cd frontend
+npm test
+```
+#### Backend'
+- FastAPI
+    ```bash
+    cd backend
+    pytest
+    ```
+- Tauri
+    ```bash
+    cd frontend/src-tauri/
+    cargo test
+    ```
 
 ## Additional Resources
 

frontend/babel.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-typescript",
+    ["@babel/preset-react", { runtime: "automatic" }],
+  ],
+}

frontend/jest.config.ts

@@ -0,0 +1,17 @@
+import type { Config } from '@jest/types';
+
+const config: Config.InitialOptions = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+  },
+  transformIgnorePatterns: ['/node_modules/(?!(ldrs)/)'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+};
+
+export default config;

frontend/jest.setup.ts

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

frontend/package.json

@@ -6,6 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "preview": "vite preview",
     "tauri": "tauri",
     "setup:linux": "cd scripts &&  ./setup_env.sh",
@@ -40,22 +42,37 @@
     "react-image-crop": "^11.0.7",
     "react-router-dom": "^6.24.1",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "ts-node": "^10.9.2",
+    "vite-plugin-environment": "^1.1.3"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.26.7",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@jest/types": "^29.6.3",
     "@tauri-apps/cli": "^2.0.0-beta.21",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
     "@types/node": "^20.17.16",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.20",
+    "babel-jest": "^29.7.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^3.4.17",
+    "ts-jest": "^29.2.5",
     "typescript": "5.1.x",
     "vite": "^5.0.0",
     "vite-plugin-eslint": "^1.8.1"

frontend/src/Config/Backend.ts

@@ -1,2 +1,2 @@
 export const BACKED_URL =
-  import.meta.env.BACKEND_URL || 'http://localhost:8000';
+  process.env.BACKEND_URL || 'http://localhost:8000';

frontend/src/pages/__tests__/allPages.test.tsx

@@ -0,0 +1,40 @@
+import { render } from '@testing-library/react';
+import AITagging from '../AITagging/AITaging';
+import Album from '../Album/Album';
+import Dashboard from '../Dashboard/Dashboard';
+import Memories from '../Memories/Memories';
+import SecureFolder from '../SecureFolderPage/SecureFolder';
+import Settings from '../SettingsPage/Settings';
+import { InitialPage } from '../Setupscreen/Setup';
+import Videos from '../VideosPage/Videos';
+import { ROUTES } from '@/constants/routes';
+import QueryClientProviders from '@/Config/QueryClientProvider';
+import { BrowserRouter } from 'react-router-dom';
+import { ThemeProvider } from '@/contexts/ThemeContext';
+
+const pages = [
+  { path: ROUTES.LAYOUT.HOME, Component: Dashboard },
+  { path: ROUTES.LAYOUT.VIDEOS, Component: Videos },
+  { path: ROUTES.LAYOUT.SETTINGS, Component: Settings },
+  { path: ROUTES.LAYOUT.AI, Component: AITagging },
+  { path: ROUTES.LAYOUT.ALBUM, Component: Album },
+  { path: ROUTES.LAYOUT.SECURE_FOLDER, Component: SecureFolder },
+  { path: ROUTES.LAYOUT.MEMORIES, Component: Memories },
+  { path: ROUTES.INITIAL, Component: InitialPage },
+];
+
+describe('Page rendering tests', () => {
+  pages.forEach(({ path, Component }) => {
+    test(`renders ${path} without crashing`, () => {
+      render(
+        <ThemeProvider>
+          <QueryClientProviders>
+            <BrowserRouter>
+              <Component />
+            </BrowserRouter>
+          </QueryClientProviders>
+        </ThemeProvider>,
+      );
+    });
+  });
+});

frontend/tsconfig.json

@@ -5,6 +5,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "esModuleInterop": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
@@ -26,6 +27,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src"],
+  "include": ["src", "jest.setup.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

frontend/vite.config.ts

@@ -2,10 +2,11 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import eslint from 'vite-plugin-eslint';
+import EnivromentPlugin from 'vite-plugin-environment';
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
-  plugins: [react(), eslint()],
+  plugins: [react(), eslint(), EnivromentPlugin('all')],
 
   resolve: {
     alias: {

package.json

@@ -10,7 +10,8 @@
     "lint:check": "cd frontend && eslint --max-warnings 0 --config .eslintrc.json .",
     "lint:fix": "cd frontend && eslint --max-warnings 0 --config .eslintrc.json . --fix",
     "format:fix": "cd frontend && prettier --write \"**/*.{ts,tsx,json}\"",
-    "format:check": "cd frontend && prettier --check \"**/*.{ts,tsx,json}\""
+    "format:check": "cd frontend && prettier --check \"**/*.{ts,tsx,json}\"",
+    "cargo:check": "cd backend && cargo check"
   },
   "devDependencies": {
     "husky": "^9.1.7"