Add unit tests (#278)

Author: mustaphaturhan

package-lock.json

@@ -43,50 +43,52 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailwindcss/vite": "^4.1.17",
-    "@tanstack/react-query": "^5.90.12",
-    "@tanstack/react-router": "^1.139.14",
-    "@tanstack/zod-adapter": "^1.139.14",
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-query": "^5.90.13",
+    "@tanstack/react-router": "^1.144.0",
+    "@tanstack/zod-adapter": "^1.144.0",
     "@turf/turf": "^7.3.1",
-    "@watergis/maplibre-gl-terradraw": "^1.9.6",
+    "@watergis/maplibre-gl-terradraw": "^1.9.8",
     "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "d3": "^7.9.0",
     "date-fns": "^4.1.0",
-    "lucide-react": "^0.556.0",
-    "maplibre-gl": "^5.14.0",
+    "lucide-react": "^0.562.0",
+    "maplibre-gl": "^5.15.0",
     "next-themes": "^0.4.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-map-gl": "^8.1.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.17",
+    "tailwindcss": "^4.1.18",
     "throttle-debounce": "^5.0.2",
     "zod": "^3.25.76",
     "zustand": "^5.0.9"
   },
   "devDependencies": {
     "@playwright/test": "^1.57.0",
     "@tanstack/eslint-plugin-query": "^5.91.2",
-    "@tanstack/eslint-plugin-router": "^1.139.0",
-    "@tanstack/react-devtools": "^0.8.2",
+    "@tanstack/eslint-plugin-router": "^1.141.0",
+    "@tanstack/react-devtools": "^0.8.6",
     "@tanstack/react-query-devtools": "^5.91.1",
-    "@tanstack/react-router-devtools": "^1.139.15",
+    "@tanstack/react-router-devtools": "^1.144.0",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/d3": "^7.4.3",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.10.4",
     "@types/react-dom": "^18.3.7",
     "@types/throttle-debounce": "^5.0.2",
     "@types/turf": "^3.5.32",
-    "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/coverage-v8": "^4.0.15",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/coverage-v8": "^4.0.16",
     "dotenv": "^17.2.3",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-check-file": "^3.3.1",
@@ -97,15 +99,15 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "gh-pages": "^6.3.0",
     "husky": "^9.1.7",
-    "jsdom": "^27.2.0",
+    "jsdom": "^27.4.0",
     "lint-staged": "^16.2.7",
     "prettier": "^3.7.4",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.1",
-    "vite": "^7.2.6",
+    "typescript-eslint": "^8.50.1",
+    "vite": "^7.3.0",
     "vite-plugin-svgr": "^4.5.0",
-    "vitest": "^4.0.15"
+    "vitest": "^4.0.16"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --fix",

package.json

@@ -0,0 +1,76 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { App } from './app';
+
+vi.mock('react-map-gl/maplibre', () => ({
+  MapProvider: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="map-provider">{children}</div>
+  ),
+}));
+
+vi.mock('./components/map', () => ({
+  MapComponent: () => <div data-testid="map-component">MapComponent</div>,
+}));
+
+vi.mock('./components/route-planner', () => ({
+  RoutePlanner: () => <div data-testid="route-planner">RoutePlanner</div>,
+}));
+
+vi.mock('./components/settings-panel/settings-panel', () => ({
+  SettingsPanel: () => <div data-testid="settings-panel">SettingsPanel</div>,
+}));
+
+vi.mock('@/components/ui/sonner', () => ({
+  Toaster: ({ position, duration }: { position: string; duration: number }) => (
+    <div
+      data-testid="toaster"
+      data-position={position}
+      data-duration={duration}
+    >
+      Toaster
+    </div>
+  ),
+}));
+
+describe('App', () => {
+  it('should render without crashing', () => {
+    expect(() => render(<App />)).not.toThrow();
+  });
+
+  it('should render MapProvider as wrapper', () => {
+    render(<App />);
+    expect(screen.getByTestId('map-provider')).toBeInTheDocument();
+  });
+
+  it('should render MapComponent', () => {
+    render(<App />);
+    expect(screen.getByTestId('map-component')).toBeInTheDocument();
+  });
+
+  it('should render RoutePlanner', () => {
+    render(<App />);
+    expect(screen.getByTestId('route-planner')).toBeInTheDocument();
+  });
+
+  it('should render SettingsPanel', () => {
+    render(<App />);
+    expect(screen.getByTestId('settings-panel')).toBeInTheDocument();
+  });
+
+  it('should render Toaster with correct props', () => {
+    render(<App />);
+    const toaster = screen.getByTestId('toaster');
+    expect(toaster).toBeInTheDocument();
+    expect(toaster).toHaveAttribute('data-position', 'bottom-center');
+    expect(toaster).toHaveAttribute('data-duration', '5000');
+  });
+
+  it('should render all components inside MapProvider', () => {
+    render(<App />);
+    const mapProvider = screen.getByTestId('map-provider');
+    expect(mapProvider).toContainElement(screen.getByTestId('map-component'));
+    expect(mapProvider).toContainElement(screen.getByTestId('route-planner'));
+    expect(mapProvider).toContainElement(screen.getByTestId('settings-panel'));
+    expect(mapProvider).toContainElement(screen.getByTestId('toaster'));
+  });
+});