Arnab-Afk/monaco
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement test cases tab with styling and functionality for displaying test cases

Browse Source
This commit is contained in:
Arnab-Afk
2025-11-08 22:52:51 +05:30
parent 1d3b1c74e1
commit b075e5b3d3
2 changed files with 180 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
Frontend/src/components/CodeChallenge.jsx
View File

@@ -18,6 +18,7 @@ const CodeChallenge = () => {
const [timeRemaining, setTimeRemaining] = useState(null);
const [terminalInput, setTerminalInput] = useState('');
const [waitingForInput, setWaitingForInput] = useState(false);
const [activeTab, setActiveTab] = useState('console'); // 'console' or 'testcases'
const socketRef = useRef(null);
const terminalInputRef = useRef(null);
const { token } = useAuth();
@@ -729,27 +730,6 @@ const CodeChallenge = () => {
{currentQuestion.constraints && <p><strong>Constraints:</strong> {currentQuestion.constraints}</p>}
{currentQuestion.marks && <p><strong>Points:</strong> {currentQuestion.marks}</p>}
</div>
{currentQuestion.test_cases && currentQuestion.test_cases.length > 0 && (
<div className="test-cases-section">
<h3>Example Test Cases:</h3>
{currentQuestion.test_cases.slice(0, 2).map((testCase, idx) => (
<div key={idx} className="test-case-card">
<div className="test-case-label">Example {idx + 1}</div>
<div className="test-case-content">
<div className="test-case-item">
<span className="test-label">Input:</span>
<code className="test-value">{testCase.input}</code>
</div>
<div className="test-case-item">
<span className="test-label">Expected Output:</span>
<code className="test-value">{testCase.expected_output}</code>
</div>
</div>
</div>
))}
</div>
)}
</div>
);
}
@@ -954,14 +934,23 @@ const CodeChallenge = () => {
<div className="console-section">
<div className="console-header">
<div className="console-tabs">
<button className="console-tab console-tab-active">
<button
className={`console-tab ${activeTab === 'console' ? 'console-tab-active' : ''}`}
onClick={() => setActiveTab('console')}
>
<span>Console</span>
</button>
<button className="console-tab">
<span>Testcases</span>
<button
className={`console-tab ${activeTab === 'testcases' ? 'console-tab-active' : ''}`}
onClick={() => setActiveTab('testcases')}
>
<span>Test Cases</span>
</button>
</div>
</div>
{/* Console Tab Content */}
{activeTab === 'console' && (
<div
className="console-content"
onClick={() => {
@@ -1003,6 +992,48 @@ const CodeChallenge = () => {
</>
)}
</div>
)}
{/* Test Cases Tab Content */}
{activeTab === 'testcases' && (
<div className="console-content testcases-tab-content">
{(() => {
const currentQuestion = getCurrentQuestion();
if (currentQuestion?.test_cases && currentQuestion.test_cases.length > 0) {
return (
<div className="testcases-container">
{currentQuestion.test_cases.map((testCase, idx) => (
<div key={testCase.id || idx} className="testcase-item">
<div className="testcase-header">
<span className="testcase-title">Test Case {idx + 1}</span>
{testCase.is_sample && (
<span className="testcase-badge">Sample</span>
)}
</div>
<div className="testcase-body">
<div className="testcase-field">
<div className="testcase-field-label">Input:</div>
<pre className="testcase-field-value">{testCase.input}</pre>
</div>
<div className="testcase-field">
<div className="testcase-field-label">Expected Output:</div>
<pre className="testcase-field-value">{testCase.expected_output}</pre>
</div>
</div>
</div>
))}
</div>
);
} else {
return (
<div className="console-placeholder">
No test cases available for this question.
</div>
);
}
})()}
</div>
)}
</div>
</div>

84
Frontend/src/index.css
View File

@@ -1735,6 +1735,90 @@ body {
caret-color: #212529;
}
/* Test Cases Tab Styles */
.testcases-tab-content {
overflow-y: auto;
padding: 0;
}
.testcases-container {
padding: 12px;
}
.testcase-item {
background-color: #ffffff;
border: 1px solid #dee2e6;
border-radius: 4px;
margin-bottom: 12px;
overflow: hidden;
}
.testcase-item:last-child {
margin-bottom: 0;
}
.testcase-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
.testcase-title {
font-size: 12px;
font-weight: 600;
color: #212529;
}
.testcase-badge {
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
background-color: #e7f3ff;
color: #0066cc;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.testcase-body {
padding: 12px;
}
.testcase-field {
margin-bottom: 12px;
}
.testcase-field:last-child {
margin-bottom: 0;
}
.testcase-field-label {
font-size: 11px;
font-weight: 600;
color: #6c757d;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.testcase-field-value {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 3px;
padding: 8px 10px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 12px;
line-height: 1.5;
color: #212529;
margin: 0;
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
}
/* Action Bar */
.action-bar {
position: absolute;