feat(270): Connect frontend to test runners

cherman23 · cherman23 · commit 3dd0118b01b3 · 2026-04-09T23:01:52.000-04:00
diff --git a/src/app/(web)/crm/task-templates/[id]/edit/page.tsx b/src/app/(web)/crm/task-templates/[id]/edit/page.tsx
@@ -10,6 +10,8 @@ import { Button } from '@/lib/components/ui/Button';
 import TaskEditorSidebar from '@/lib/components/core/TaskEditorSidebar';
 import Breadcrumbs from '@/lib/components/core/Breadcrumbs';
 import useTestRunner from '@/lib/hooks/useTestRunner';
+import { type TestCaseDTO } from '@/lib/schemas/task-template.schema';
+import { type ProgrammingLanguage } from '@/generated/prisma';
 
 export default function TaskTemplateEditPage({ params }: { params: Promise<{ id: string }> }) {
     const { id } = use(params);
@@ -46,10 +48,14 @@ export default function TaskTemplateEditPage({ params }: { params: Promise<{ id:
         generateStubsForLanguages,
         getEditorContent,
     } = useTaskTemplateEditPage(id);
-    const { runEditPageTests } = useTestRunner(
-        getEditorContent(),
-        languages ? languages[selectedLanguage].language : 'python' // UHHHH
-    );
+    const { runEditPageTests } = useTestRunner();
+
+    const handleRunTests = (tests: TestCaseDTO[]) => {
+        const code = getEditorContent();
+        const language = languages?.[selectedLanguage]?.language;
+        if (!language) return;
+        runEditPageTests(tests, code, language as ProgrammingLanguage);
+    };
 
     if (isLoading) {
         return (
@@ -139,7 +145,7 @@ export default function TaskTemplateEditPage({ params }: { params: Promise<{ id:
                             setPublicTestCases={setPublicTestCases}
                             privateTestCases={privateTestCases}
                             setPrivateTestCases={setPrivateTestCases}
-                            runTests={runEditPageTests}
+                            runTests={handleRunTests}
                             isSaving={isSaving}
                         />
                     </div>
diff --git a/src/app/api/runner/[taskTemplateId]/route.ts b/src/app/api/runner/[taskTemplateId]/route.ts
@@ -1,12 +1,12 @@
+import { type NextRequest } from 'next/server';
 import judge0Connector, {
+    formatJudgeResult,
     type JudgeSubmissionRequestBody,
 } from '@/lib/connectors/judge0.connector';
 import { SubmissionSchema } from '@/lib/schemas/submission.schema';
 import TaskTemplateService from '@/lib/services/task-template.service';
-// import { getSession } from '@/lib/utils/auth.utils';
 import { handleError } from '@/lib/utils/errors.utils';
 import { mapLanguageToJudge } from '@/lib/utils/language.utils';
-import { type NextRequest } from 'next/server';
 
 export async function POST(
     request: NextRequest,
@@ -19,9 +19,9 @@ export async function POST(
         const languageId = mapLanguageToJudge(parsed.language);
         const taskTemplate = await TaskTemplateService.getTaskTemplate(
             taskTemplateId,
-            'TODO: REPLACE THIS LATER LAITH WITH COOKIE'
+            'org_nextlab_001' // lmk if we want this to stay as the TODO
         );
-        const tests = [...taskTemplate.privateTestCases, ...taskTemplate.publicTestCases];
+        const tests = [...taskTemplate.publicTestCases, ...taskTemplate.privateTestCases];
         const formatted: JudgeSubmissionRequestBody[] = tests.map((test) => ({
             source_code: parsed.code,
             language_id: languageId,
@@ -30,9 +30,11 @@ export async function POST(
         }));
 
         const result = await judge0Connector.executeSubmissions(formatted);
+        const formattedResults = result.map(formatJudgeResult);
+
         return Response.json({
-            data: result,
-            status: 200,
+            data: formattedResults,
+            status: 201,
         });
     } catch (err) {
         return handleError(err);
diff --git a/src/app/api/runner/route.ts b/src/app/api/runner/route.ts
@@ -2,6 +2,7 @@ import { handleError } from '@/lib/utils/errors.utils';
 import { assertRecruiterOrAbove } from '@/lib/utils/permissions.utils';
 import { type NextRequest } from 'next/server';
 import judge0Connector, {
+    formatJudgeResult,
     type JudgeSubmissionRequestBody,
 } from '@/lib/connectors/judge0.connector';
 import { TestSubmissionSchema } from '@/lib/schemas/submission.schema';
@@ -21,10 +22,11 @@ export async function POST(request: NextRequest) {
         }));
 
         const result = await judge0Connector.executeSubmissions(formatted);
+        const formattedResults = result.map(formatJudgeResult);
 
         return Response.json({
-            data: result,
-            status: 200,
+            data: formattedResults,
+            status: 201,
         });
     } catch (err) {
         return handleError(err);
diff --git a/src/lib/api/runner.ts b/src/lib/api/runner.ts
@@ -2,11 +2,11 @@ import {
     type SubmissionSchemaDTO,
     type TestSubmissionSchemaDTO,
 } from '@/lib/schemas/submission.schema';
-import { type JudgeResultRequestBody } from '@/lib/connectors/judge0.connector';
+import type { CandidateTestResult } from '@/lib/types/candidate-assessment.types';
 
 export async function runEditorSubmission(
     submission: TestSubmissionSchemaDTO
-): Promise<JudgeResultRequestBody> {
+): Promise<CandidateTestResult[]> {
     const result = await fetch(`/api/runner`, {
         method: 'POST',
         headers: {
@@ -27,7 +27,7 @@ export async function runEditorSubmission(
 export async function runAssessmentSubmission(
     taskTemplateId: string,
     submission: SubmissionSchemaDTO
-): Promise<JudgeResultRequestBody> {
+): Promise<CandidateTestResult[]> {
     const result = await fetch(`/api/runner/${taskTemplateId}`, {
         method: 'POST',
         headers: {
diff --git a/src/lib/connectors/judge0.connector.ts b/src/lib/connectors/judge0.connector.ts
@@ -1,5 +1,6 @@
 import { BadRequestException, InternalServerException } from '@/lib/utils/errors.utils';
 import { sleep } from '@/lib/utils/utils';
+import type { CandidateTestResult } from '@/lib/types/candidate-assessment.types';
 
 export interface JudgeSubmissionRequestBody {
     source_code: string;
@@ -19,6 +20,15 @@ export interface JudgeResultRequestBody {
     token: string;
 }
 
+export function formatJudgeResult(result: JudgeResultRequestBody): CandidateTestResult {
+    return {
+        stdout: result.stdout,
+        stderr: result.stderr,
+        description: result.status?.description,
+        statusId: result.status?.id,
+    };
+}
+
 class Judge0Connector {
     private headers: HeadersInit;
     private fields: string[];
@@ -193,6 +203,13 @@ class Judge0Connector {
     ): Promise<JudgeResultRequestBody[]> {
         const tokens = await this.registerSubmissions(submissions);
         const { allResults } = await this.waitForSubmissions(tokens, totalTimeout);
+        const tokenIndexMap = new Map(tokens.map((token, index) => [token, index]));
+
+        // Sort results by their original submission order (this assumes judge0 returns the tokens in the right order)\
+        // in my practice this is true but I am unsure
+        allResults.sort(
+            (a, b) => (tokenIndexMap.get(a.token) ?? 0) - (tokenIndexMap.get(b.token) ?? 0)
+        );
         return allResults;
     }
 }
diff --git a/src/lib/hooks/useAssessment.ts b/src/lib/hooks/useAssessment.ts
@@ -6,14 +6,17 @@ import { type Monaco } from '@monaco-editor/react';
 import { toast } from 'sonner';
 import { getCandidateAssessment, submitCandidateAssessment } from '@/lib/api/candidate-assessment';
 import { useAssessmentTimer } from '@/lib/hooks/useAssessmentTimer';
+import useTestRunner from '@/lib/hooks/useTestRunner';
 import type {
     AssessmentPhase,
     AssessmentQuestion,
     CandidateAssessment,
     OutroReason,
     SectionState,
+    TestCaseResultStatus,
 } from '@/lib/types/candidate-assessment.types';
 import { createToken } from '@/lib/api/token';
+import { type ProgrammingLanguage } from '@/generated/prisma';
 
 function buildInitialSections(questions: AssessmentQuestion[]): SectionState[] {
     return questions.map((q, i) => {
@@ -52,6 +55,71 @@ export default function useAssessment(assessmentId: string) {
         currentSectionIndexRef.current = currentSectionIndex;
     }, [currentSectionIndex]);
 
+    const {
+        error: testError,
+        loading: testLoading,
+        output: testOutput,
+        runAssessmentTests,
+        reset: resetTests,
+    } = useTestRunner();
+
+    useEffect(() => {
+        if (testLoading) {
+            setSections((prev) =>
+                prev.map((section) => ({
+                    ...section,
+                    testCaseResults: section.testCaseResults.map((test) => ({
+                        ...test,
+                        status: 'loading',
+                    })),
+                }))
+            );
+        } else if (testError) {
+            setSections((prev) =>
+                prev.map((section) => ({
+                    ...section,
+                    testCaseResults: section.testCaseResults.map((test) => ({
+                        ...test,
+                        status: 'runtime_error',
+                        actualOutput: 'An error occurred while running tests.',
+                    })),
+                }))
+            );
+        } else if (testOutput) {
+            setSections((prev) =>
+                prev.map((section) => {
+                    return {
+                        ...section,
+                        testCaseResults: section.testCaseResults.map((test, i) => ({
+                            ...test,
+                            status: resolveStatusId(testOutput[i]?.statusId ?? 0),
+                            actualOutput: testOutput[i]?.stdout ?? testOutput[i]?.stderr ?? '',
+                        })),
+                    };
+                })
+            );
+        }
+    }, [testLoading, testError, testOutput, currentSectionIndex]);
+
+    function resolveStatusId(statusId: number): TestCaseResultStatus {
+        switch (statusId) {
+            case 3:
+                return 'passed';
+            case 5:
+            case 7:
+            case 8:
+            case 9:
+            case 10:
+            case 11:
+            case 12:
+                return 'runtime_error';
+            case 4:
+                return 'failed';
+            default:
+                return 'failed';
+        }
+    }
+
     // the timer is in seconds however our model is in minutes
     const totalEstimatedMinutes = sections.reduce(
         (sum, s) => sum + (s.taskTemplate.estimatedTime ?? 0),
@@ -122,6 +190,7 @@ export default function useAssessment(assessmentId: string) {
             handleSubmitAssessment('submitted');
         } else {
             setIsTransitioning(true);
+            resetTests();
             setTimeout(() => {
                 setSections((prev) =>
                     prev.map((s, i) => {
@@ -137,10 +206,19 @@ export default function useAssessment(assessmentId: string) {
         }
     }
 
-    function updateCode(code: string) {
-        setSections((prev) =>
-            prev.map((s, i) => (i === currentSectionIndexRef.current ? { ...s, code } : s))
-        );
+    function updateCode() {
+        const code = editorRef.current?.getValue() ?? '';
+        setSections((prev) => prev.map((s, i) => (i === currentSectionIndex ? { ...s, code } : s)));
+
+        return code;
+    }
+
+    function runTests() {
+        const code = updateCode() || '';
+        const section = sections[currentSectionIndex];
+        if (!section) return;
+
+        runAssessmentTests(section.taskTemplateId, code, section.language as ProgrammingLanguage);
     }
 
     function changeLanguage(language: string) {
@@ -162,58 +240,12 @@ export default function useAssessment(assessmentId: string) {
         }
     }
 
-    // TODO: Replace with Judge0 execution
-    function runTests() {
-        const section = sections[currentSectionIndex];
-        if (!section) return;
-        if (section.testCaseResults.some((r) => r.status === 'loading')) return;
-
-        const MOCK_STATUSES = ['passed', 'failed', 'runtime_error'] as const;
-
-        setSections((prev) =>
-            prev.map((s, i) =>
-                i === currentSectionIndex
-                    ? {
-                          ...s,
-                          testCaseResults: s.testCaseResults.map(() => ({
-                              status: 'loading' as const,
-                          })),
-                      }
-                    : s
-            )
-        );
-
-        setTimeout(() => {
-            setSections((prev) =>
-                prev.map((s, i) => {
-                    if (i !== currentSectionIndex) return s;
-                    return {
-                        ...s,
-                        testCaseResults: s.testCaseResults.map((_, idx) => {
-                            const status =
-                                MOCK_STATUSES[Math.floor(Math.random() * MOCK_STATUSES.length)];
-                            const tc = section.taskTemplate.publicTestCases[idx];
-                            if (status === 'passed')
-                                return { status, actualOutput: tc?.output ?? '' };
-                            if (status === 'runtime_error')
-                                return {
-                                    status,
-                                    actualOutput: 'Timeout Error: Execution Time Exceeded',
-                                };
-                            return { status, actualOutput: 'wrong_answer' };
-                        }),
-                    };
-                })
-            );
-        }, 1500);
-    }
-
     function handleEditorMount(editorInstance: editor.IStandaloneCodeEditor, monaco: Monaco) {
         editorRef.current = editorInstance;
         monacoRef.current = monaco;
 
         editorInstance.onDidChangeModelContent(() => {
-            updateCode(editorInstance.getValue());
+            updateCode();
         });
     }
 
@@ -234,6 +266,7 @@ export default function useAssessment(assessmentId: string) {
         isSubmitting,
         isTransitioning,
         error,
+        testError,
         startAssessment,
         submitAndContinue,
         updateCode,
diff --git a/src/lib/hooks/useTestRunner.ts b/src/lib/hooks/useTestRunner.ts
diff --git a/src/lib/types/candidate-assessment.types.ts b/src/lib/types/candidate-assessment.types.ts
