From 6ec6c5b2d923f3fcf169e5e4427b0bba8de01a13 Mon Sep 17 00:00:00 2001
From: Kwon Seo Jin <97675977+B0XERCAT@users.noreply.github.com>
Date: Sun, 6 Oct 2024 09:27:27 +0900
Subject: [PATCH] feat(fe): implement test in code editor (#2093)

* feat(fe): add test button, implement poll request

* feat(fe): implement testcase panel with dummy data

* chore(fe): edit table row style

* feat(fe): store test result

* chore(fe): delete console.log

* feat(fe): show wrong testcase numbers, adjust table style

* feat(fe): implement testcase tabs

* feat(fe): edit tab style

* feat(fe): implement test result detail

* feat(fe): implement delete tab button

* fix(fe): fix testcase tab style

* refactor(fe): componentize TestcaseTab TestSummary TestResultDetail

* feat(fe): add output in testcase result

* chore(fe): specify type statement

Co-authored-by: Eunbi Kang <jenabill@naver.com>

* chore(fe): execute prettier

* chore(fe): add padding bottom to panel, add ellipsis to long input output

* chore(fe): add pre wrap for labeled field

* chore(fe): simplify long styles using truncate

---------

Co-authored-by: Jaehyeon Kim <kjhkk1020@naver.com>
Co-authored-by: Eunbi Kang <jenabill@naver.com>
---
 apps/frontend/components/EditorHeader.tsx     |  98 +++++++-
 apps/frontend/components/EditorLayout.tsx     |   8 +-
 .../components/EditorResizablePanel.tsx       |  61 ++++-
 .../EditorResizablePanelWithContext.tsx       |  31 +++
 apps/frontend/components/TestcasePanel.tsx    | 236 ++++++++++++++++++
 apps/frontend/components/TestcaseTable.tsx    |  78 ++++++
 apps/frontend/stores/editor.ts                |  31 ++-
 apps/frontend/types/type.ts                   |  13 +
 8 files changed, 532 insertions(+), 24 deletions(-)
 create mode 100644 apps/frontend/components/EditorResizablePanelWithContext.tsx
 create mode 100644 apps/frontend/components/TestcasePanel.tsx
 create mode 100644 apps/frontend/components/TestcaseTable.tsx

diff --git a/apps/frontend/components/EditorHeader.tsx b/apps/frontend/components/EditorHeader.tsx
index 46a0061a07..697c85bb2f 100644
--- a/apps/frontend/components/EditorHeader.tsx
+++ b/apps/frontend/components/EditorHeader.tsx
@@ -25,6 +25,7 @@ import { fetcherWithAuth } from '@/lib/utils'
 import submitIcon from '@/public/submit.svg'
 import useAuthModalStore from '@/stores/authModal'
 import {
+  TestResultsContext,
   useLanguageStore,
   getKey,
   setItem,
@@ -35,7 +36,8 @@ import type {
   Language,
   ProblemDetail,
   Submission,
-  Template
+  Template,
+  TestResult
 } from '@/types/type'
 import JSConfetti from 'js-confetti'
 import { Save } from 'lucide-react'
@@ -44,7 +46,7 @@ import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import { useContext, useEffect, useRef, useState } from 'react'
 import { BsTrash3 } from 'react-icons/bs'
-//import { IoPlayCircleOutline } from 'react-icons/io5'
+import { IoPlayCircleOutline } from 'react-icons/io5'
 import { useInterval } from 'react-use'
 import { toast } from 'sonner'
 import { useStore } from 'zustand'
@@ -61,9 +63,12 @@ export default function Editor({
   templateString
 }: ProblemEditorProps) {
   const { language, setLanguage } = useLanguageStore()
-  const store = useContext(CodeContext)
-  if (!store) throw new Error('CodeContext is not provided')
-  const { code, setCode } = useStore(store)
+  const codeStore = useContext(CodeContext)
+  if (!codeStore) throw new Error('CodeContext is not provided')
+  const { code, setCode } = useStore(codeStore)
+  const testResultStore = useContext(TestResultsContext)
+  if (!testResultStore) throw new Error('TestResultsContext is not provided')
+  const { setTestResults } = useStore(testResultStore)
   const [loading, setLoading] = useState(false)
   const [submissionId, setSubmissionId] = useState<number | null>(null)
   const [templateCode, setTemplateCode] = useState<string | null>(null)
@@ -165,6 +170,82 @@ export default function Editor({
     }
   }
 
+  const submitTest = async () => {
+    if (code === '') {
+      toast.error('Please write code before test')
+      return
+    }
+    setLoading(true)
+    const res = await fetcherWithAuth.post('submission/test', {
+      json: {
+        language,
+        code: [
+          {
+            id: 1,
+            text: code,
+            locked: false
+          }
+        ]
+      },
+      searchParams: {
+        problemId: problem.id
+      },
+      next: {
+        revalidate: 0
+      }
+    })
+    if (res.ok) {
+      pollTestResult()
+    } else {
+      setLoading(false)
+      if (res.status === 401) {
+        showSignIn()
+        toast.error('Log in first to test your code')
+      } else toast.error('Please try again later.')
+    }
+  }
+
+  const pollTestResult = async () => {
+    let attempts = 0
+    const maxAttempts = 10
+    const pollingInterval = 2000
+
+    const poll = async () => {
+      const res = await fetcherWithAuth.get('submission/test', {
+        next: {
+          revalidate: 0
+        }
+      })
+
+      if (res.ok) {
+        const resultArray: TestResult[] = await res.json()
+
+        setTestResults(resultArray)
+
+        const allJudged = resultArray.every(
+          (submission: TestResult) => submission.result !== 'Judging'
+        )
+
+        if (!allJudged) {
+          if (attempts < maxAttempts) {
+            attempts += 1
+            setTimeout(poll, pollingInterval)
+          } else {
+            setLoading(false)
+            toast.error('Judging took too long. Please try again later.')
+          }
+        } else {
+          setLoading(false)
+        }
+      } else {
+        setLoading(false)
+        toast.error('Please try again later.')
+      }
+    }
+
+    poll()
+  }
+
   const saveCode = async () => {
     const session = await auth()
     if (!session) {
@@ -242,16 +323,15 @@ export default function Editor({
           <Save className="stroke-1" size={22} />
           Save
         </Button>
-        {/* TODO: Add Test function
-
         <Button
-          variant={'secondary'}
+          variant="secondary"
           className="h-8 shrink-0 gap-1 rounded-[4px] border-none bg-[#D7E5FE] px-2 font-normal text-[#484C4D] hover:bg-[#c6d3ea]"
+          onClick={submitTest}
+          disabled={loading}
         >
           <IoPlayCircleOutline size={22} />
           Test
         </Button>
-        */}
         <Button
           className="h-8 shrink-0 gap-1 rounded-[4px] px-2 font-normal"
           disabled={loading}
diff --git a/apps/frontend/components/EditorLayout.tsx b/apps/frontend/components/EditorLayout.tsx
index afb881883e..afc3b0b86f 100644
--- a/apps/frontend/components/EditorLayout.tsx
+++ b/apps/frontend/components/EditorLayout.tsx
@@ -1,4 +1,3 @@
-import EditorResizablePanel from '@/components/EditorResizablePanel'
 import HeaderAuthPanel from '@/components/auth/HeaderAuthPanel'
 import { auth } from '@/lib/auth'
 import { convertToLetter, fetcher, fetcherWithAuth } from '@/lib/utils'
@@ -9,6 +8,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { FaSortDown } from 'react-icons/fa'
 import ContestStatusTimeDiff from './ContestStatusTimeDiff'
+import EditorResizablePanelWithContext from './EditorResizablePanelWithContext'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -106,13 +106,13 @@ export default async function EditorLayout({
           <HeaderAuthPanel session={session} group={'editor'} />
         </div>
       </header>
-      <EditorResizablePanel
+      <EditorResizablePanelWithContext
+        contest={contest}
         problem={problem}
         contestId={contestId}
-        enableCopyPaste={contest ? contest.enableCopyPaste : true}
       >
         {children}
-      </EditorResizablePanel>
+      </EditorResizablePanelWithContext>
     </div>
   )
 }
diff --git a/apps/frontend/components/EditorResizablePanel.tsx b/apps/frontend/components/EditorResizablePanel.tsx
index 146f3d913e..e7cc7ca537 100644
--- a/apps/frontend/components/EditorResizablePanel.tsx
+++ b/apps/frontend/components/EditorResizablePanel.tsx
@@ -6,9 +6,14 @@ import {
   ResizablePanel,
   ResizablePanelGroup
 } from '@/components/ui/resizable'
-import { ScrollArea } from '@/components/ui/scroll-area'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { CodeContext, createCodeStore, useLanguageStore } from '@/stores/editor'
+import {
+  CodeContext,
+  TestResultsContext,
+  createCodeStore,
+  useLanguageStore
+} from '@/stores/editor'
 import type { Language, ProblemDetail } from '@/types/type'
 import type { Route } from 'next'
 import Link from 'next/link'
@@ -17,6 +22,7 @@ import { Suspense, useContext, useEffect } from 'react'
 import { useStore } from 'zustand'
 import Loading from '../app/problem/[problemId]/loading'
 import EditorHeader from './EditorHeader'
+import TestcasePanel from './TestcasePanel'
 
 interface ProblemEditorProps {
   problem: ProblemDetail
@@ -34,7 +40,21 @@ export default function EditorMainResizablePanel({
   const pathname = usePathname()
   const base = contestId ? `/contest/${contestId}` : ''
   const { language, setLanguage } = useLanguageStore()
-  const store = createCodeStore()
+  const codeStore = createCodeStore()
+  const testResultStore = useContext(TestResultsContext)
+  if (!testResultStore) throw new Error('TestResultsContext is not provided')
+  const { testResults } = useStore(testResultStore)
+  const testcases = problem.problemTestcase
+  const testResultData =
+    testResults.length > 0
+      ? testcases.map((testcase, index) => ({
+          id: testcase.id,
+          input: testcase.input,
+          expectedOutput: testcase.output,
+          output: testResults[index]?.output,
+          result: testResults[index]?.result
+        }))
+      : null
   useEffect(() => {
     if (!problem.languages.includes(language)) {
       setLanguage(problem.languages[0])
@@ -91,16 +111,38 @@ export default function EditorMainResizablePanel({
 
       <ResizablePanel defaultSize={65} className="bg-[#222939]">
         <div className="grid-rows-editor grid h-full">
-          <CodeContext.Provider value={store}>
+          <CodeContext.Provider value={codeStore}>
             <EditorHeader
               problem={problem}
               contestId={contestId}
               templateString={problem.template[0]}
             />
-            <CodeEditorInEditorResizablePanel
-              templateString={problem.template[0]}
-              enableCopyPaste={enableCopyPaste}
-            />
+
+            <ResizablePanelGroup direction="vertical" className="h-32">
+              <ResizablePanel
+                defaultSize={60}
+                className="!overflow-x-auto !overflow-y-auto"
+              >
+                <ScrollArea className="h-full bg-[#121728]">
+                  <CodeEditorInEditorResizablePanel
+                    enableCopyPaste={enableCopyPaste}
+                  />
+                  <ScrollBar orientation="horizontal" />
+                  <ScrollBar orientation="vertical" />
+                </ScrollArea>
+              </ResizablePanel>
+              {testResultData && (
+                <>
+                  <ResizableHandle
+                    withHandle
+                    className="border-[0.5px] border-slate-700"
+                  />
+                  <ResizablePanel defaultSize={40}>
+                    <TestcasePanel testResult={testResultData} />
+                  </ResizablePanel>
+                </>
+              )}
+            </ResizablePanelGroup>
           </CodeContext.Provider>
         </div>
       </ResizablePanel>
@@ -109,7 +151,6 @@ export default function EditorMainResizablePanel({
 }
 
 interface CodeEditorInEditorResizablePanelProps {
-  templateString: string
   enableCopyPaste: boolean
 }
 
@@ -123,7 +164,7 @@ function CodeEditorInEditorResizablePanel({
 
   return (
     <CodeEditor
-      value={code}
+      value={code ?? ''}
       language={language as Language}
       onChange={setCode}
       enableCopyPaste={enableCopyPaste}
diff --git a/apps/frontend/components/EditorResizablePanelWithContext.tsx b/apps/frontend/components/EditorResizablePanelWithContext.tsx
new file mode 100644
index 0000000000..b93e07d71c
--- /dev/null
+++ b/apps/frontend/components/EditorResizablePanelWithContext.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import EditorResizablePanel from '@/components/EditorResizablePanel'
+import { TestResultsContext, createTestResultsStore } from '@/stores/editor'
+import type { Contest, ProblemDetail } from '@/types/type'
+
+export default function EditorResizablePanelWithContext({
+  problem,
+  contestId,
+  contest,
+  children
+}: {
+  problem: ProblemDetail
+  contestId?: number | undefined
+  contest?: Contest | undefined
+  children: React.ReactNode
+}) {
+  const testResultsStore = createTestResultsStore(problem.id, contestId)
+
+  return (
+    <TestResultsContext.Provider value={testResultsStore}>
+      <EditorResizablePanel
+        problem={problem}
+        contestId={contestId}
+        enableCopyPaste={contest ? contest.enableCopyPaste : true}
+      >
+        {children}
+      </EditorResizablePanel>
+    </TestResultsContext.Provider>
+  )
+}
diff --git a/apps/frontend/components/TestcasePanel.tsx b/apps/frontend/components/TestcasePanel.tsx
new file mode 100644
index 0000000000..91330073e3
--- /dev/null
+++ b/apps/frontend/components/TestcasePanel.tsx
@@ -0,0 +1,236 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import type { TestResultDetail } from '@/types/type'
+import { sanitize } from 'isomorphic-dompurify'
+import { useState } from 'react'
+import { IoMdClose } from 'react-icons/io'
+import TestcaseTable from './TestcaseTable'
+import { ScrollArea } from './ui/scroll-area'
+
+interface TestcasePanelProps {
+  testResult: TestResultDetail[]
+}
+
+export default function TestcasePanel({ testResult }: TestcasePanelProps) {
+  const [testcaseTabList, setTestcaseTabList] = useState<TestResultDetail[]>([])
+  const [currentTab, setCurrentTab] = useState<number>(0)
+  const acceptedCount = testResult.filter(
+    (testcase) => testcase.result === 'Accepted'
+  ).length
+  const total = testResult.length
+  const dataWithIndex = testResult.map((testcase, index) => ({
+    ...testcase,
+    id: index + 1
+  }))
+  const notAcceptedIndexes = dataWithIndex
+    .map((testcase, index) => (testcase.result !== 'Accepted' ? index : -1))
+    .filter((index) => index !== -1)
+  const tabLength = testcaseTabList.length
+
+  return dataWithIndex.length !== 0 ? (
+    <>
+      <div className="flex h-12">
+        <div
+          className={cn(
+            'w-44 content-center text-center',
+            currentTab === 0 ? 'bg-[#222939]' : 'bg-[#121728]',
+            tabLength > 0 &&
+              currentTab === testcaseTabList[0].id &&
+              'rounded-br-xl'
+          )}
+          onClick={() => setCurrentTab(0)}
+        >
+          {tabLength < 7 ? 'Testcase Result' : 'TC Res'}
+        </div>
+        {testcaseTabList.map((testcase, index) => {
+          return (
+            <TestcaseTab
+              testcaseTabList={testcaseTabList}
+              setTestcaseTabList={setTestcaseTabList}
+              currentTab={currentTab}
+              setCurrentTab={setCurrentTab}
+              testcase={testcase}
+              index={index}
+              key={testcase.id}
+            />
+          )
+        })}
+        <div
+          className={cn(
+            'flex-grow border-l border-[#222939] bg-[#121728]',
+            currentTab === testcaseTabList[testcaseTabList.length - 1]?.id &&
+              'rounded-bl-xl',
+            currentTab === 0 && tabLength === 0 && 'rounded-bl-xl'
+          )}
+        />
+      </div>
+      <ScrollArea className="h-full">
+        {currentTab === 0 ? (
+          <div className="flex flex-col gap-6 p-5 pb-14">
+            <TestSummary
+              acceptedCount={acceptedCount}
+              total={total}
+              notAcceptedIndexes={notAcceptedIndexes}
+            />
+            <TestcaseTable
+              data={dataWithIndex}
+              testcaseTabList={testcaseTabList}
+              setTestcaseTabList={setTestcaseTabList}
+              setCurrentTab={setCurrentTab}
+            />
+          </div>
+        ) : (
+          <TestResultDetail
+            dataWithIndex={dataWithIndex}
+            currentTab={currentTab}
+          />
+        )}
+      </ScrollArea>
+    </>
+  ) : null
+}
+
+function TestcaseTab({
+  testcaseTabList,
+  setTestcaseTabList,
+  currentTab,
+  setCurrentTab,
+  testcase,
+  index
+}: {
+  testcaseTabList: TestResultDetail[]
+  setTestcaseTabList: (data: TestResultDetail[]) => void
+  currentTab: number
+  setCurrentTab: (data: number) => void
+  testcase: TestResultDetail
+  index: number
+}) {
+  function handleDelete(testcase: TestResultDetail) {
+    const updatedList = testcaseTabList.filter(
+      (item) => item.id !== testcase.id
+    )
+    setTestcaseTabList(updatedList)
+    if (currentTab === testcase.id) {
+      setCurrentTab(0)
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative w-44 border-l border-[#222939] bg-[#121728]',
+        currentTab === 0 && index == 0 && 'rounded-bl-xl',
+        currentTab === testcaseTabList[index - 1]?.id && 'rounded-bl-xl',
+        currentTab === testcaseTabList[index + 1]?.id && 'rounded-br-xl'
+      )}
+    >
+      <IoMdClose
+        className="absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer text-gray-300"
+        size={18}
+        onClick={() => handleDelete(testcase)}
+      />
+      <div
+        key={testcase.id}
+        className={cn(
+          'h-full content-center pr-6 text-center',
+          currentTab === testcase.id && 'bg-[#222939]'
+        )}
+        onClick={() => setCurrentTab(testcase.id)}
+      >
+        {testcaseTabList.length < 7 ? 'Samples' : 'S'} #{testcase.id}
+      </div>
+    </div>
+  )
+}
+
+function LabeledField({ label, text }: { label: string; text: string }) {
+  return (
+    <div className="flex min-w-96 flex-col gap-4 p-4">
+      <p className="text-slate-400">{label}</p>
+      <hr className="border-[#303333]/50" />
+      <pre
+        className="prose prose-invert overflow-auto whitespace-pre-wrap break-words text-sm leading-relaxed text-slate-300"
+        dangerouslySetInnerHTML={{
+          __html: sanitize(text)
+        }}
+      />
+    </div>
+  )
+}
+
+function TestSummary({
+  acceptedCount,
+  total,
+  notAcceptedIndexes
+}: {
+  acceptedCount: number
+  total: number
+  notAcceptedIndexes: number[]
+}) {
+  return (
+    <table className="min-w-full">
+      <tbody>
+        <tr>
+          <td className="py-1 text-slate-400">Correct Testcase</td>
+          <td className="py-1 text-white">
+            {acceptedCount}/{total}
+          </td>
+        </tr>
+        {notAcceptedIndexes.length > 0 && (
+          <tr>
+            <td className="min-w-52 py-1 align-top text-slate-400">
+              Wrong Testcase Number
+            </td>
+            <td className="py-1 text-white">
+              {notAcceptedIndexes
+                .map((index) => `Sample #${index + 1}`)
+                .join(', ')}
+            </td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  )
+}
+
+function TestResultDetail({
+  dataWithIndex,
+  currentTab
+}: {
+  dataWithIndex: TestResultDetail[]
+  currentTab: number
+}) {
+  return (
+    <div className="px-8 pt-5">
+      <div className="flex w-full gap-4 rounded-md bg-[#121728] px-6 py-3 font-light text-neutral-400">
+        Result
+        <span
+          className={cn(
+            dataWithIndex[currentTab - 1].result === 'Accepted'
+              ? 'text-green-500'
+              : dataWithIndex[currentTab - 1].result === 'Judging'
+                ? 'text-neutral-400'
+                : 'text-red-500'
+          )}
+        >
+          {dataWithIndex[currentTab - 1].result}
+        </span>
+      </div>
+      <div className="flex gap-4">
+        <LabeledField
+          label="Input"
+          text={dataWithIndex[currentTab - 1].input}
+        />
+        <LabeledField
+          label="Expected Output"
+          text={dataWithIndex[currentTab - 1].expectedOutput}
+        />
+        <LabeledField
+          label="Output"
+          text={dataWithIndex[currentTab - 1].output}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/frontend/components/TestcaseTable.tsx b/apps/frontend/components/TestcaseTable.tsx
new file mode 100644
index 0000000000..70a0c8e6d7
--- /dev/null
+++ b/apps/frontend/components/TestcaseTable.tsx
@@ -0,0 +1,78 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table'
+import { cn } from '@/lib/utils'
+import type { TestResultDetail } from '@/types/type'
+
+export default function TestcaseTable({
+  data,
+  testcaseTabList,
+  setTestcaseTabList,
+  setCurrentTab
+}: {
+  data: TestResultDetail[]
+  testcaseTabList: TestResultDetail[]
+  setTestcaseTabList: (data: TestResultDetail[]) => void
+  setCurrentTab: (data: number) => void
+}) {
+  function handleRowClick(index: number) {
+    setCurrentTab(index + 1)
+    const updatedList = [...testcaseTabList, data[index]]
+    const uniqueList = updatedList.filter(
+      (item, index, self) => index === self.findIndex((t) => t.id === item.id)
+    )
+    setTestcaseTabList(uniqueList)
+  }
+
+  return (
+    <Table className="rounded-t-md">
+      <TableHeader className="bg-[#121728] [&_tr]:border-b-slate-600">
+        <TableRow className="text-base hover:bg-slate-900/60">
+          <TableHead className="w-[10%] text-left">No</TableHead>
+          <TableHead className="w-[39%] text-left">Input</TableHead>
+          <TableHead className="w-[39%] text-left">Output</TableHead>
+          <TableHead className="w-[16%] text-left">Result</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((testResult, index) => (
+          <TableRow
+            key={testResult.id}
+            className="border-b border-b-slate-600 text-left hover:bg-slate-700"
+            onClick={() => {
+              handleRowClick(index)
+            }}
+          >
+            <TableCell className="p-3 text-left md:p-3">
+              Sample #{testResult.id}
+            </TableCell>
+            <TableCell className="max-w-96 truncate p-3 md:p-3">
+              {testResult.input}
+            </TableCell>
+            <TableCell className="max-w-96 truncate p-3 md:p-3">
+              {testResult.expectedOutput}
+            </TableCell>
+
+            <TableCell
+              className={cn(
+                'p-3 text-left md:p-3',
+                testResult.result === 'Accepted'
+                  ? 'text-green-500'
+                  : testResult.result === 'Judging'
+                    ? 'text-gray-300'
+                    : 'text-red-500'
+              )}
+            >
+              {testResult.result}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/frontend/stores/editor.ts b/apps/frontend/stores/editor.ts
index fc5a0e576f..743d54f248 100644
--- a/apps/frontend/stores/editor.ts
+++ b/apps/frontend/stores/editor.ts
@@ -1,4 +1,4 @@
-import type { Language } from '@/types/type'
+import type { Language, TestResult } from '@/types/type'
 import { createContext } from 'react'
 import { create, createStore } from 'zustand'
 import { persist } from 'zustand/middleware'
@@ -60,3 +60,32 @@ export const setItem = (name: string, value: string) => {
 export const removeItem = (name: string) => localStorage.removeItem(name)
 
 export const CodeContext = createContext<CodeStore | null>(null)
+
+interface TestResultsState {
+  testResults: TestResult[]
+  setTestResults: (results: TestResult[]) => void
+}
+
+type TestResultsStore = ReturnType<typeof createTestResultsStore>
+
+export const createTestResultsStore = (
+  problemId: number,
+  contestId?: number
+) => {
+  const problemKey = `${problemId}${contestId ? `_${contestId}` : ''}_test_results`
+  return createStore<TestResultsState>()(
+    persist<TestResultsState>(
+      (set) => ({
+        testResults: [],
+        setTestResults: (results) => {
+          set({ testResults: results })
+        }
+      }),
+      {
+        name: problemKey
+      }
+    )
+  )
+}
+
+export const TestResultsContext = createContext<TestResultsStore | null>(null)
diff --git a/apps/frontend/types/type.ts b/apps/frontend/types/type.ts
index 2b30fe3c21..0ba713a335 100644
--- a/apps/frontend/types/type.ts
+++ b/apps/frontend/types/type.ts
@@ -170,6 +170,19 @@ export interface SubmissionDetail {
   }[]
 }
 
+// Test type definition
+
+export interface TestResult {
+  id: number
+  output: string
+  result: string
+}
+
+export interface TestResultDetail extends TestResult {
+  input: string
+  expectedOutput: string
+}
+
 export interface SettingsFormat {
   currentPassword: string
   newPassword: string