Skip to content

Commit

Permalink
Add testcase fetching frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
yitong241 committed Nov 5, 2024
1 parent 71d51f3 commit 761f514
Show file tree
Hide file tree
Showing 3 changed files with 418 additions and 162 deletions.
33 changes: 33 additions & 0 deletions frontend/src/components/TestCases/TestCases.scss
Original file line number Diff line number Diff line change
Expand Up @@ -53,15 +53,33 @@

.test-case-field {
display: flex;
align-items: center;
gap: 10px;

.field-label {
font-weight: bold;
width: 150px;
}

.field-value {
flex: 1;
color: #e4e4e4;
}

&.correct {
color: #28a745; // Green
font-weight: bold;
}

&.incorrect {
color: #dc3545; // Red
font-weight: bold;
}

&.not-executed {
color: #6c757d; // Grey
font-weight: bold;
}
}

.test-case-textfield {
Expand All @@ -88,4 +106,19 @@
}
}
}

.correct {
color: #28a745; // Green
font-weight: bold;
}

.incorrect {
color: #dc3545; // Red
font-weight: bold;
}

.not-executed {
color: #6c757d; // Grey
font-weight: bold;
}
}
186 changes: 108 additions & 78 deletions frontend/src/components/TestCases/TestCases.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,37 @@
import React from "react";
import { Typography, Button, TextField, IconButton } from "@mui/material";
import {
Typography,
Button,
TextField,
IconButton,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import "./TestCases.scss";

interface TestCase {
id: string;
number: number;
input: string;
expectedOutput: string;
actualOutput: string;
isDefault: boolean;
isSubmitted?: boolean;
}

interface TestCasesProps {
defaultTestCases: TestCase[];
userTestCases: TestCase[];
testCases: TestCase[];
addTestCase: () => void;
updateTestCase: (index: number, field: "input" | "expectedOutput", value: string) => void;
submitTestCase: (index: number) => void;
deleteTestCase: (index: number) => void;
updateTestCase: (
id: string,
field: "input" | "expectedOutput",
value: string
) => void;
submitTestCase: (id: string) => void;
deleteTestCase: (id: string) => void;
}

const TestCases: React.FC<TestCasesProps> = ({
defaultTestCases,
userTestCases,
testCases,
addTestCase,
updateTestCase,
submitTestCase,
Expand All @@ -34,81 +43,102 @@ const TestCases: React.FC<TestCasesProps> = ({
<Typography variant="h6" className="test-cases-title">
Test Cases
</Typography>
<Button variant="contained" size="small" onClick={addTestCase} disabled={userTestCases.length >= 5}>
Add Test Case
<Button
variant="contained"
size="small"
onClick={addTestCase}
disabled={testCases.length >= 8} // Adjust the limit as needed
>
Add One More Test Case
</Button>
</div>
<div className="test-cases-list">
{[...defaultTestCases, ...userTestCases].map((testCase, index) => {
const isUserTestCase = index >= defaultTestCases.length;
const userTestCaseIndex = index - defaultTestCases.length;

return (
<div key={testCase.number} className="test-case">
{/* Delete button */}
{isUserTestCase && (
<IconButton className="delete-test-case-button" onClick={() => deleteTestCase(userTestCaseIndex)}>
<CloseIcon style={{ color: "#fff" }} />
</IconButton>
)}
<div className="test-case-header">
<Typography variant="subtitle1" className="test-case-number">
Test Case {testCase.number}
</Typography>
</div>
<div className="test-case-content">
{isUserTestCase && !testCase.isSubmitted ? (
<>
<TextField
label="Input"
multiline
rows={2}
variant="outlined"
fullWidth
value={testCase.input}
onChange={(e) => updateTestCase(userTestCaseIndex, "input", e.target.value)}
className="test-case-textfield"
/>
<TextField
label="Expected Output"
multiline
rows={1}
variant="outlined"
fullWidth
value={testCase.expectedOutput}
onChange={(e) => updateTestCase(userTestCaseIndex, "expectedOutput", e.target.value)}
className="test-case-textfield"
/>
<Button
variant="contained"
size="small"
onClick={() => submitTestCase(userTestCaseIndex)}
className="submit-test-case-button"
{testCases.map((testCase) => (
<div key={testCase.id} className="test-case">
{/* Delete button */}
<IconButton
className="delete-test-case-button"
onClick={() => deleteTestCase(testCase.id)}
size="small"
>
<CloseIcon style={{ color: "#fff" }} />
</IconButton>
<div className="test-case-header">
<Typography variant="subtitle1" className="test-case-number">
Test Case {testCase.number}
</Typography>
</div>
<div className="test-case-content">
{testCase.isSubmitted ? (
// Display test case
<>
<div className="test-case-field">
<span className="field-label">Input:</span>
<span className="field-value">{testCase.input}</span>
</div>
<div className="test-case-field">
<span className="field-label">Expected Output:</span>
<span className="field-value">{testCase.expectedOutput}</span>
</div>
<div className="test-case-field">
<span className="field-label">Actual Output:</span>
<span
className={`field-value ${
testCase.actualOutput.trim() === testCase.expectedOutput.trim()
? "correct"
: testCase.actualOutput.trim() === ""
? "not-executed"
: "incorrect"
}`}
>
Add Test Case
</Button>
</>
) : (
// Display test case
<>
<div className="test-case-field">
<span className="field-label">Input:</span>
<span className="field-value">{testCase.input}</span>
</div>
<div className="test-case-field">
<span className="field-label">Expected Output:</span>
<span className="field-value">{testCase.expectedOutput}</span>
</div>
<div className="test-case-field">
<span className="field-label">Actual Output:</span>
<span className="field-value">{testCase.actualOutput}</span>
</div>
</>
)}
</div>
{testCase.actualOutput || "Not executed yet"}
</span>
</div>
</>
) : (
// Editable test case fields
<>
<TextField
label="Input"
multiline
rows={2}
variant="outlined"
fullWidth
value={testCase.input}
onChange={(e) =>
updateTestCase(testCase.id, "input", e.target.value)
}
className="test-case-textfield"
/>
<TextField
label="Expected Output"
multiline
rows={1}
variant="outlined"
fullWidth
value={testCase.expectedOutput}
onChange={(e) =>
updateTestCase(
testCase.id,
"expectedOutput",
e.target.value
)
}
className="test-case-textfield"
/>
<Button
variant="contained"
size="small"
onClick={() => submitTestCase(testCase.id)}
className="submit-test-case-button"
>
Add Test Case
</Button>
</>
)}
</div>
);
})}
</div>
))}
</div>
</div>
);
Expand Down
Loading

0 comments on commit 761f514

Please sign in to comment.