Setup Vitest

calm-visualizer/package.json

@@ -8,7 +8,8 @@
         "build": "tsc -b && vite build",
         "lint": "eslint .",
         "format": "prettier --write .",
-        "preview": "vite preview"
+        "preview": "vite preview",
+        "test": "vitest"
     },
     "dependencies": {
         "cytoscape": "^3.30.3",
@@ -26,7 +27,11 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.14.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.1.0",
+        "@testing-library/user-event": "^14.5.2",
         "@types/cytoscape": "^3.21.8",
+        "@types/cytoscape-fcose": "^2.2.4",
         "@types/file-saver": "^2.0.7",
         "@types/react": "^18.3.10",
         "@types/react-dom": "^18.3.0",
@@ -38,11 +43,13 @@
         "eslint-plugin-react-hooks": "^5.1.0-rc.0",
         "eslint-plugin-react-refresh": "^0.4.12",
         "globals": "^15.12.0",
+        "jsdom": "^25.0.1",
         "postcss": "^8.4.49",
         "prettier": "^3.3.3",
         "tailwindcss": "^3.4.14",
         "typescript": "^5.5.3",
         "typescript-eslint": "^8.14.0",
-        "vite": "^5.4.8"
+        "vite": "^5.4.8",
+        "vitest": "^2.1.8"
     }
 }

calm-visualizer/src/tests/Drawer.test.tsx

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Drawer from '../components/drawer/Drawer';
+
+describe('Drawer', () => {
+    it('should render Drawer', () => {
+        render(
+            <Drawer
+                calmInstance={undefined}
+                title={undefined}
+                isConDescActive={true}
+                isNodeDescActive={true}
+            />
+        );
+        expect(screen.getByText('No file selected')).toBeInTheDocument();
+    });
+
+    it('should render Drawer', () => {
+        render(
+            <Drawer
+                calmInstance={undefined}
+                title={undefined}
+                isConDescActive={false}
+                isNodeDescActive={false}
+            />
+        );
+        expect(screen.getByText('No file selected')).toBeInTheDocument();
+        expect(screen.getByRole('checkbox', { name: 'drawer-toggle' })).not.toBeChecked();
+    });
+});

calm-visualizer/src/tests/Navbar.test.tsx

@@ -0,0 +1,56 @@
+import { describe, expect, it, vi } from 'vitest';
+import Navbar from '../components/navbar/Navbar';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('Navbar', () => {
+    const handleUploadMock = vi.fn();
+    const toggleConnectionDescMock = vi.fn();
+    const toggleNodeDescMock = vi.fn();
+
+    const setup = () => {
+        return render(
+            <Navbar
+                handleUpload={handleUploadMock}
+                toggleConnectionDesc={toggleConnectionDescMock}
+                toggleNodeDesc={toggleNodeDescMock}
+                isGraphRendered={true}
+            />
+        );
+    };
+
+    it('should render Navbar', async () => {
+        setup();
+        expect(screen.getByRole('checkbox', { name: 'connection-description' })).not.toBeChecked();
+    });
+
+    it('should call toggleConnectionDesc on checkbox click', async () => {
+        const user = userEvent.setup();
+        setup();
+        const checkbox = screen.getByRole('checkbox', { name: 'connection-description' });
+        await user.click(checkbox);
+        await waitFor(() => {
+            expect(toggleConnectionDescMock).toHaveBeenCalledTimes(1);
+        });
+    });
+    it('should call toggleNodeDesc on checkbox click', async () => {
+        const user = userEvent.setup();
+        setup();
+        const checkbox = screen.getByRole('checkbox', { name: 'node-description' });
+        await user.click(checkbox);
+        await waitFor(() => {
+            expect(toggleNodeDescMock).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    it('should call handleUpload on file input change', async () => {
+        const user = userEvent.setup();
+        setup();
+        const file = new File(['example content'], 'example.txt', { type: 'text/plain' });
+        const input = screen.getByLabelText('Architecture');
+        await user.upload(input, file);
+        await waitFor(() => {
+            expect(handleUploadMock).toHaveBeenCalledWith(file);
+        });
+    });
+});

calm-visualizer/src/tests/Sidebar.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import Sidebar from '../components/sidebar/Sidebar';
+import { Node, Edge } from '../components/cytoscape-renderer/CytoscapeRenderer';
+
+describe('Sidebar Component', () => {
+    const mockCloseSidebar = vi.fn();
+
+    const mockNodeData: Node['data'] = {
+        id: 'node-1',
+        label: 'Node 1',
+        type: 'type-1',
+        description: 'Mock Node',
+    };
+
+    const mockEdgeData: Edge['data'] = {
+        id: 'edge-1',
+        label: 'Edge 1',
+        source: 'node-1',
+        target: 'node-2',
+    };
+
+    it('should render node details correctly', () => {
+        render(<Sidebar selectedData={mockNodeData} closeSidebar={mockCloseSidebar} />);
+
+        expect(screen.getByText('Node Details')).toBeInTheDocument();
+        expect(screen.getByText('unique-id: node-1')).toBeInTheDocument();
+        expect(screen.getByText('name: Node 1')).toBeInTheDocument();
+        expect(screen.getByText('node-type: type-1')).toBeInTheDocument();
+        expect(screen.getByText('description: Mock Node')).toBeInTheDocument();
+    });
+
+    it('should render edge details correctly', () => {
+        render(<Sidebar selectedData={mockEdgeData} closeSidebar={mockCloseSidebar} />);
+
+        expect(screen.getByText('Edge Details')).toBeInTheDocument();
+        expect(screen.getByText('unique-id: edge-1')).toBeInTheDocument();
+        expect(screen.getByText('description: Edge 1')).toBeInTheDocument();
+        expect(screen.getByText('source: node-1')).toBeInTheDocument();
+        expect(screen.getByText('target: node-2')).toBeInTheDocument();
+    });
+
+    it('should call closeSidebar when close button is clicked', () => {
+        render(<Sidebar selectedData={mockNodeData} closeSidebar={mockCloseSidebar} />);
+
+        fireEvent.click(screen.getByRole('button', { name: 'close-sidebar' }));
+        expect(mockCloseSidebar).toHaveBeenCalled();
+    });
+});

calm-visualizer/src/tests/vitest.setup.ts

@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom/vitest';
+import { afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+// runs a clean after each test case (e.g. clearing jsdom)
+afterEach(() => {
+    cleanup();
+});

calm-visualizer/vite.config.ts

@@ -1,7 +1,14 @@
+/// <reference types="vitest" />
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [react()],
+    test: {
+        globals: true,
+        environment: 'jsdom',
+        environmentMatchGlobs: [['./src/**/*.tsx', 'jsdom']],
+        setupFiles: ['./src/tests/vitest.setup.ts'],
+    },
 });