added tests and fixed npm build

Author: 0AnshuAditya0

__tests__/e2e/playground-flow.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import Playground from '@/components/playground/index';
+import { executeJavaScript } from '@/lib/playground/javascript-executor';
+
+// Mocks
+jest.mock('@/components/playground/code-editor-wrapper', () => ({
+  CodeEditorWrapper: ({ value, onChange, onRun }: any) => (
+    <div data-testid="code-editor">
+      <textarea 
+        data-testid="mock-editor-textarea"
+        value={value} 
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <button data-testid="editor-run-shortcut" onClick={onRun}>Run Shortcut</button>
+    </div>
+  ),
+}));
+
+jest.mock('@/lib/playground/javascript-executor', () => ({
+  executeJavaScript: jest.fn(),
+}));
+
+jest.mock('@/hooks/use-media-query', () => ({
+  useMediaQuery: () => false,
+}));
+
+// Mock ResizeObserver for react-resizable-panels
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+
+describe('Playground Flow E2E (Simulated)', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (executeJavaScript as jest.Mock).mockResolvedValue({
+      success: true,
+      output: 'Hello Test Flow',
+      executionTime: 50,
+    });
+  });
+
+  it('should run code and display output when Run button is clicked', async () => {
+    render(<Playground />);
+
+    // Check if key elements are present
+    expect(screen.getByText(/Run/i)).toBeInTheDocument();
+    expect(screen.getByTestId('code-editor')).toBeInTheDocument();
+
+    // Find Run button (it might be in nav)
+    // Assuming the button text is "Run" inside PlaygroundNav
+    const runBtn = screen.getByRole('button', { name: /run/i });
+    
+    // Click Run
+    fireEvent.click(runBtn);
+
+    // Verify loading state (optional, might be too fast)
+    
+    // Verify execution was called
+    await waitFor(() => {
+      expect(executeJavaScript).toHaveBeenCalled();
+    });
+
+    // Verify output is displayed
+    // The OutputPanel likely displays the text.
+    await waitFor(() => {
+      expect(screen.getByText('Hello Test Flow')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle runtime errors', async () => {
+    (executeJavaScript as jest.Mock).mockResolvedValue({
+      success: false,
+      error: 'Runtime Error: Boom',
+      executionTime: 10,
+    });
+
+    render(<Playground />);
+    
+    const runBtn = screen.getByRole('button', { name: /run/i });
+    fireEvent.click(runBtn);
+
+    await waitFor(() => {
+        expect(screen.getByText('Runtime Error: Boom')).toBeInTheDocument();
+    });
+  });
+});

__tests__/integration/comments-api.test.ts

@@ -0,0 +1,43 @@
+import { GET } from '@/app/api/comments/route';
+import { NextRequest } from 'next/server';
+
+// Mock dependencies
+jest.mock('@/lib/supabase/server', () => ({
+    createClient: jest.fn(() => ({
+        from: jest.fn(() => ({
+            select: jest.fn(() => ({
+                eq: jest.fn(() => ({
+                    order: jest.fn().mockResolvedValue({
+                        data: [
+                            { id: 1, content: 'Test Comment', profiles: { username: 'testuser' } }
+                        ],
+                        error: null
+                    }),
+                })),
+                single: jest.fn(),
+            })),
+            insert: jest.fn(),
+        })),
+        auth: {
+            getUser: jest.fn(),
+        }
+    })),
+}));
+
+describe('API Route: /api/comments', () => {
+    it('should fetch comments for a post', async () => {
+        const req = new NextRequest('http://localhost:3000/api/comments?post_id=123');
+        const response = await GET(req);
+
+        expect(response.status).toBe(200);
+        const data = await response.json();
+        expect(data.length).toBe(1);
+        expect(data[0].content).toBe('Test Comment');
+    });
+
+    it('should return 400 if post_id is missing', async () => {
+        const req = new NextRequest('http://localhost:3000/api/comments');
+        const response = await GET(req);
+        expect(response.status).toBe(400);
+    });
+});

__tests__/integration/execute-api.test.ts

@@ -0,0 +1,66 @@
+import { POST } from '@/app/api/playground/execute/route';
+import { NextRequest } from 'next/server';
+
+// Mock dependencies
+jest.mock('@/lib/supabase/server', () => ({
+    createClient: jest.fn(() => ({
+        auth: {
+            getUser: jest.fn().mockResolvedValue({ data: { user: null } }),
+        },
+        from: jest.fn(() => ({
+            insert: jest.fn().mockResolvedValue({}),
+        })),
+    })),
+}));
+
+jest.mock('@/lib/playground/piston-executor', () => ({
+    executePiston: jest.fn().mockResolvedValue({
+        success: true,
+        output: 'Hello World',
+        executionTime: 100,
+    }),
+}));
+
+describe('API Route: /api/playground/execute', () => {
+    it('should execute code successfully', async () => {
+        const req = new NextRequest('http://localhost:3000/api/playground/execute', {
+            method: 'POST',
+            body: JSON.stringify({
+                code: 'print("Hello World")',
+                language: 'python',
+            }),
+        });
+
+        const response = await POST(req);
+        expect(response.status).toBe(200);
+
+        const data = await response.json();
+        expect(data.output).toBe('Hello World');
+        expect(data.success).toBe(true);
+    });
+
+    it('should return 400 for invalid language', async () => {
+        const req = new NextRequest('http://localhost:3000/api/playground/execute', {
+            method: 'POST',
+            body: JSON.stringify({
+                code: 'print("Hello")',
+                language: 'invalid-lang',
+            }),
+        });
+
+        const response = await POST(req);
+        expect(response.status).toBe(400);
+    });
+
+    it('should return 400 if code is missing', async () => {
+        const req = new NextRequest('http://localhost:3000/api/playground/execute', {
+            method: 'POST',
+            body: JSON.stringify({
+                language: 'python',
+            }),
+        });
+
+        const response = await POST(req);
+        expect(response.status).toBe(400);
+    });
+});

__tests__/unit/executor.test.ts

@@ -0,0 +1,46 @@
+import { executeJavaScript } from '@/lib/playground/javascript-executor';
+
+// Mock Worker
+class MockWorker {
+    onmessage: ((e: MessageEvent) => void) | null = null;
+    onerror: ((e: ErrorEvent) => void) | null = null;
+
+    postMessage(data: any) {
+        // Simulate successful execution for specific code
+        if (data.code === "console.log('hello')") {
+            setTimeout(() => {
+                this.onmessage?.({ data: { success: true, output: 'hello' } } as MessageEvent);
+            }, 10);
+        }
+        // Simulate error
+        else if (data.code === "throw error") {
+            setTimeout(() => {
+                this.onerror?.({ message: 'Runtime Error' } as ErrorEvent);
+            }, 10);
+        }
+        // Simulate timeout (we just don't reply in time, but the test timeout handles mocking)
+    }
+
+    terminate() { }
+}
+
+// @ts-ignore
+global.Worker = MockWorker;
+
+describe('JavaScript Executor', () => {
+    it('should execute valid code', async () => {
+        const result = await executeJavaScript("console.log('hello')");
+        expect(result.success).toBe(true);
+        expect(result.output).toBe('hello');
+        expect(result.executionTime).toBeGreaterThanOrEqual(0);
+    });
+
+    it('should handle errors', async () => {
+        const result = await executeJavaScript("throw error");
+        expect(result.success).toBe(false);
+        expect(result.error).toBe('Runtime Error');
+    });
+
+    // Note: Testing timeout requires fake timers which interacts complexly with the Promise race
+    // Skipping timeout test for now to keep it simple
+});

__tests__/unit/rate-limiter.test.ts

@@ -0,0 +1,53 @@
+import { checkRateLimit } from '@/lib/playground/rate-limiter';
+
+describe('Rate Limiter', () => {
+    // Mock Date.now to control time
+    const originalDateNow = Date.now;
+
+    beforeEach(() => {
+        // Reset time to 0 for consistent testing
+        Date.now = jest.fn(() => 0);
+    });
+
+    afterAll(() => {
+        Date.now = originalDateNow;
+    });
+
+    it('should allow first request', () => {
+        const result = checkRateLimit('user-1');
+        expect(result.allowed).toBe(true);
+        expect(result.remaining).toBe(9);
+    });
+
+    it('should decrease remaining count on subsequent requests', () => {
+        checkRateLimit('user-2');
+        const result = checkRateLimit('user-2');
+        expect(result.allowed).toBe(true);
+        expect(result.remaining).toBe(8);
+    });
+
+    it('should block requests after limit is reached', () => {
+        const userId = 'user-limit';
+        // Consume 10 requests
+        for (let i = 0; i < 10; i++) {
+            checkRateLimit(userId);
+        }
+
+        const result = checkRateLimit(userId);
+        expect(result.allowed).toBe(false);
+        expect(result.remaining).toBe(0);
+        expect(result.resetIn).toBeGreaterThan(0);
+    });
+
+    it('should reset after window expires', () => {
+        const userId = 'user-reset';
+        checkRateLimit(userId); // 1 request at time 0
+
+        // Advance time by 61 seconds (61000ms)
+        Date.now = jest.fn(() => 61000);
+
+        const result = checkRateLimit(userId);
+        expect(result.allowed).toBe(true);
+        expect(result.remaining).toBe(9); // New window, first request counts as 1
+    });
+});

__tests__/unit/utils.test.ts

@@ -0,0 +1,18 @@
+import { cn } from '@/lib/utils';
+
+describe('cn utility', () => {
+    it('should merge class names correctly', () => {
+        expect(cn('bg-red-500', 'text-white')).toBe('bg-red-500 text-white');
+    });
+
+    it('should handle conditionals', () => {
+        expect(cn('bg-red-500', false && 'text-white')).toBe('bg-red-500');
+        expect(cn('bg-red-500', true && 'text-white')).toBe('bg-red-500 text-white');
+    });
+
+    it('should resolve conflicting tailwind classes', () => {
+        // tailwind-merge should keep the last one
+        expect(cn('bg-red-500', 'bg-blue-500')).toBe('bg-blue-500');
+        expect(cn('p-4', 'p-2')).toBe('p-2');
+    });
+});

build_output.txt

@@ -0,0 +1,21 @@
+import type { Config } from 'jest';
+import nextJest from 'next/jest';
+
+const createJestConfig = nextJest({
+    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+    dir: './',
+});
+
+// Add any custom config to be passed to Jest
+const config: Config = {
+    coverageProvider: 'v8',
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+    moduleNameMapper: {
+        // Handle module aliases (this will be automatically configured for you soon)
+        '^@/(.*)$': '<rootDir>/$1',
+    },
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config);

jest.config.ts

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