Added TestCase[] prop

src/components/mario-comps/MarioCode.tsx

@@ -10,6 +10,7 @@ import Blue from '../shared/Blue';
 import MarioDropdown from '../shared/Dropdown';
 import Gold from '../shared/Gold';
 import Tab from '../shared/Tab';
+import { TestCase } from '../shared/TestCase';
 
 function MarioCode(): JSX.Element {
   const [selectedanswer, setselectedanswer] = useState({
@@ -570,6 +571,11 @@ function MarioCode(): JSX.Element {
       given_function={() => recurSum(5)}
       answer_key={answerKey}
       name="mario"
+      testCases={[
+        new TestCase('1', '1'),
+        new TestCase('2', '2'),
+        new TestCase('3', '3'),
+      ]}
     >
       <div className="left-align">
         <Blue>def</Blue>

src/components/shared/FinishCode.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import ConfettiExplosion from 'react-confetti-explosion';
 import { useLocalStorage } from '../useLocalStorage';
 import '../../styles/Checkmark.scss';
+import { TestCase } from './TestCase';
 
 interface FinishCodeCardProps {
   children?: JSX.Element;
@@ -13,6 +14,8 @@ interface FinishCodeCardProps {
   given_function: any;
   answer_key: Record<PropertyKey, string>;
   name: string;
+  //Test Case Functionality
+  testCases?: TestCase[];
 }
 
 interface ConfettiProps
@@ -46,6 +49,7 @@ function FinishCodeCard(props: FinishCodeCardProps): JSX.Element {
   const [showAnswer, setShowAnswer] = useState(false);
   const [givenAnswer, setGivenAnswer] = useState(props.given_function());
   const [chosenAnswer, setChosenAnswer] = useState(0);
+  const [testCases, setTestCases] = useState<TestCase[]>(props.testCases || []);
   let showAnswerResponse = '';
   const someArray = Object.entries(props.answer_key);
 
@@ -125,6 +129,11 @@ function FinishCodeCard(props: FinishCodeCardProps): JSX.Element {
       <div className="finish-content">
         <div>{props.children}</div>
         <div className="code-output">
+          {/* MARK: Test Cases Test*/}
+          <div>
+            <p>Input: {testCases[0].data}</p>
+            <p>Expected Output: {testCases[0].answer}</p>
+          </div>
           {expand &&
             !showAnswer &&
             tries != 0 &&

src/components/shared/TestCase.tsx

@@ -0,0 +1,9 @@
+export class TestCase {
+  data: string;
+  answer: string;
+
+  constructor(data: string, answer: string) {
+    this.data = data;
+    this.answer = answer;
+  }
+}