Display test cases

Author: nicolelim02

backend/question-service/src/controllers/questionController.ts

@@ -3,7 +3,11 @@ import Question, { IQuestion } from "../models/Question.ts";
 import QuestionTemplate, {
   IQuestionTemplate,
 } from "../models/QuestionTemplate.ts";
-import { checkIsExistingQuestion, sortAlphabetically } from "../utils/utils.ts";
+import {
+  checkIsExistingQuestion,
+  getFileContent,
+  sortAlphabetically,
+} from "../utils/utils.ts";
 import {
   DUPLICATE_QUESTION_MESSAGE,
   QN_DESC_EXCEED_CHAR_LIMIT_MESSAGE,
@@ -85,7 +89,10 @@ export const createQuestion = async (
 
     res.status(201).json({
       message: QN_CREATED_MESSAGE,
-      question: formatQuestionIndivResponse(newQuestion, newQuestionTemplate),
+      question: await formatQuestionIndivResponse(
+        newQuestion,
+        newQuestionTemplate,
+      ),
     });
   } catch (error) {
     console.log(error);
@@ -243,7 +250,7 @@ export const updateQuestion = async (
 
     res.status(200).json({
       message: "Question updated successfully",
-      question: formatQuestionIndivResponse(
+      question: await formatQuestionIndivResponse(
         updatedQuestion as IQuestion,
         updatedQuestionTemplate as IQuestionTemplate,
       ),
@@ -352,7 +359,7 @@ export const readQuestionIndiv = async (
 
     res.status(200).json({
       message: QN_RETRIEVED_MESSAGE,
-      question: formatQuestionIndivResponse(
+      question: await formatQuestionIndivResponse(
         questionDetails,
         questionTemplate as IQuestionTemplate,
       ),
@@ -390,7 +397,7 @@ export const readRandomQuestion = async (
 
     res.status(200).json({
       message: QN_RETRIEVED_MESSAGE,
-      question: formatQuestionIndivResponse(
+      question: await formatQuestionIndivResponse(
         chosenQuestion,
         questionTemplate as IQuestionTemplate,
       ),
@@ -433,18 +440,27 @@ const formatQuestionResponse = (question: IQuestion) => {
   };
 };
 
-const formatQuestionIndivResponse = (
+const formatQuestionIndivResponse = async (
   question: IQuestion,
   questionTemplate: IQuestionTemplate,
 ) => {
+  const testcaseDelimiter = "\n";
+  const inputs = (await getFileContent(question.testcaseInputFileUrl)).split(
+    testcaseDelimiter,
+  );
+  const outputs = (await getFileContent(question.testcaseOutputFileUrl)).split(
+    testcaseDelimiter,
+  );
   return {
     id: question._id,
     title: question.title,
     description: question.description,
     complexity: question.complexity,
     categories: question.category,
-    testcaseInputFileUrl: question.testcaseInputFileUrl,
-    testcaseOutputFileUrl: question.testcaseOutputFileUrl,
+    // testcaseInputFileUrl: question.testcaseInputFileUrl,
+    // testcaseOutputFileUrl: question.testcaseOutputFileUrl,
+    inputs,
+    outputs,
     pythonTemplate: questionTemplate ? questionTemplate.pythonTemplate : "",
     javaTemplate: questionTemplate ? questionTemplate.javaTemplate : "",
     cTemplate: questionTemplate ? questionTemplate.cTemplate : "",

backend/question-service/src/utils/utils.ts

@@ -1,8 +1,8 @@
+import axios from "axios";
 import mongoose from "mongoose";
 import { v4 as uuidv4 } from "uuid";
 
 import { bucket } from "../config/firebase";
-
 import Question from "../models/Question";
 
 export const checkIsExistingQuestion = async (
@@ -50,6 +50,16 @@ export const uploadFileToFirebase = async (
   });
 };
 
+export const getFileContent = async (url: string): Promise<string> => {
+  try {
+    const { data } = await axios.get(url);
+    return data;
+  } catch (error) {
+    console.error(error);
+    return "";
+  }
+};
+
 export const sortAlphabetically = (arr: string[]) => {
   return [...arr].sort((a, b) =>
     a.localeCompare(b, undefined, { sensitivity: "base" }),

frontend/src/components/TestCase/index.tsx

@@ -2,9 +2,9 @@ import { Box, styled, Typography } from "@mui/material";
 
 type TestCaseProps = {
   input: string;
-  output: string;
+  output?: string;
   stdout: string;
-  result: string;
+  result?: string;
 };
 
 const StyledBox = styled(Box)(({ theme }) => ({
@@ -30,16 +30,20 @@ const TestCase: React.FC<TestCaseProps> = ({
         <Typography variant="overline">Input</Typography>
         <StyledTypography fontFamily={"monospace"}>{input}</StyledTypography>
       </StyledBox>
+      {output && (
+        <StyledBox>
+          <Typography variant="overline">Output</Typography>
+          <StyledTypography fontFamily={"monospace"}>{output}</StyledTypography>
+        </StyledBox>
+      )}
+      {stdout && (
+        <StyledBox>
+          <Typography variant="overline">Stdout</Typography>
+          <StyledTypography fontFamily={"monospace"}>{stdout}</StyledTypography>
+        </StyledBox>
+      )}
       <StyledBox>
-        <Typography variant="overline">Output</Typography>
-        <StyledTypography fontFamily={"monospace"}>{output}</StyledTypography>
-      </StyledBox>
-      <StyledBox>
-        <Typography variant="overline">Standard output</Typography>
-        <StyledTypography fontFamily={"monospace"}>{stdout}</StyledTypography>
-      </StyledBox>
-      <StyledBox>
-        <Typography variant="overline">Result</Typography>
+        <Typography variant="overline">Expected</Typography>
         <StyledTypography fontFamily={"monospace"}>{result}</StyledTypography>
       </StyledBox>
     </Box>

frontend/src/pages/CollabSandbox/index.tsx

@@ -27,30 +27,6 @@ import Chat from "../../components/Chat";
 import TabPanel from "../../components/TabPanel";
 import TestCase from "../../components/TestCase";
 
-// hardcode for now...
-
-type TestCase = {
-  input: string;
-  output: string;
-  stdout: string;
-  result: string;
-};
-
-const testcases: TestCase[] = [
-  {
-    input: "1 2 3 4",
-    output: "1 2 3 4",
-    stdout: "1\n2\n3\n4",
-    result: "1 2 3 4",
-  },
-  {
-    input: "5 6 7 8",
-    output: "5 6 7 8",
-    stdout: "5\n6\n7\n8",
-    result: "5 6 7 8",
-  },
-];
-
 const CollabSandbox: React.FC = () => {
   const [showErrorScreen, setShowErrorScreen] = useState<boolean>(false);
 
@@ -219,7 +195,7 @@ const CollabSandbox: React.FC = () => {
             </Tabs>
             <TabPanel selected={selectedTab} value="tests">
               <Box sx={(theme) => ({ margin: theme.spacing(2, 0) })}>
-                {[...Array(testcases.length)]
+                {[...Array(selectedQuestion.inputs.length)]
                   .map((_, index) => index + 1)
                   .map((i) => (
                     <Button
@@ -235,11 +211,12 @@ const CollabSandbox: React.FC = () => {
                     </Button>
                   ))}
               </Box>
+              {/* display result of each test case in the output (result) and stdout (any print statements executed) */}
               <TestCase
-                input={testcases[selectedTestcase].input}
-                output={testcases[selectedTestcase].output}
-                stdout={testcases[selectedTestcase].stdout}
-                result={testcases[selectedTestcase].result}
+                input={selectedQuestion.inputs[selectedTestcase]}
+                output={""}
+                stdout={""}
+                result={selectedQuestion.outputs[selectedTestcase]}
               />
             </TabPanel>
             <TabPanel selected={selectedTab} value="chat">

frontend/src/reducers/questionReducer.ts

@@ -18,15 +18,17 @@ type QuestionDetail = {
   description: string;
   complexity: string;
   categories: Array<string>;
+  inputs: Array<string>;
+  outputs: Array<string>;
   pythonTemplate: string;
   javaTemplate: string;
   cTemplate: string;
 };
 
-type QuestionDetailWithUrl = QuestionDetail & {
-  testcaseInputFileUrl: string;
-  testcaseOutputFileUrl: string;
-};
+// type QuestionDetailWithUrl = QuestionDetail & {
+//   testcaseInputFileUrl: string;
+//   testcaseOutputFileUrl: string;
+// };
 
 type QuestionListDetail = {
   id: string;
@@ -56,26 +58,21 @@ enum QuestionActionTypes {
 
 type QuestionActions = {
   type: QuestionActionTypes;
-  payload:
-    | QuestionList
-    | QuestionDetail
-    | QuestionDetailWithUrl
-    | string[]
-    | string;
+  payload: QuestionList | QuestionDetail | QuestionDetail | string[] | string;
 };
 
 type QuestionsState = {
   questionCategories: Array<string>;
   questions: Array<QuestionListDetail>;
   questionCount: number;
-  selectedQuestion: QuestionDetailWithUrl | null;
+  selectedQuestion: QuestionDetail | null;
   questionCategoriesError: string | null;
   questionListError: string | null;
   selectedQuestionError: string | null;
 };
 
 // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-const isQuestion = (question: any): question is QuestionDetailWithUrl => {
+const isQuestion = (question: any): question is QuestionDetail => {
   if (!question || typeof question !== "object") {
     return false;
   }
@@ -272,7 +269,7 @@ export const getQuestionById = (
 
 export const updateQuestionById = async (
   questionId: string,
-  question: Omit<QuestionDetailWithUrl, "id">,
+  question: Omit<QuestionDetail, "id">,
   testcaseFiles: TestcaseFiles,
   dispatch: Dispatch<QuestionActions>
 ): Promise<boolean> => {
@@ -309,8 +306,8 @@ export const updateQuestionById = async (
         description: question.description,
         complexity: question.complexity,
         category: question.categories,
-        testcaseInputFileUrl: question.testcaseInputFileUrl,
-        testcaseOutputFileUrl: question.testcaseOutputFileUrl,
+        // testcaseInputFileUrl: question.testcaseInputFileUrl,
+        // testcaseOutputFileUrl: question.testcaseOutputFileUrl,
         ...urls,
         pythonTemplate: question.pythonTemplate,
         javaTemplate: question.javaTemplate,