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

161
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,55 +934,106 @@ 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>
<div
className="console-content"
onClick={() => {
if (waitingForInput && terminalInputRef.current) {
terminalInputRef.current.focus();
}
}}
style={{ cursor: waitingForInput ? 'text' : 'default' }}
>
{terminalOutput.length === 0 ? (
<div className="console-placeholder">
Console output will appear here...
</div>
) : (
<>
{terminalOutput.map((line, index) => (
<div
key={index}
className={`console-line ${line.type}`}
>
{line.content}
</div>
))}
{waitingForInput && (
<div className="console-line console-input-line">
<form onSubmit={handleTerminalInput} className="console-input-form">
<span className="console-cursor">{'> '}</span>
<input
ref={terminalInputRef}
type="text"
value={terminalInput}
onChange={(e) => setTerminalInput(e.target.value)}
className="console-input"
autoFocus
/>
</form>
</div>
)}
</>
)}
</div>
{/* Console Tab Content */}
{activeTab === 'console' && (
<div
className="console-content"
onClick={() => {
if (waitingForInput && terminalInputRef.current) {
terminalInputRef.current.focus();
}
}}
style={{ cursor: waitingForInput ? 'text' : 'default' }}
>
{terminalOutput.length === 0 ? (
<div className="console-placeholder">
Console output will appear here...
</div>
) : (
<>
{terminalOutput.map((line, index) => (
<div
key={index}
className={`console-line ${line.type}`}
>
{line.content}
</div>
))}
{waitingForInput && (
<div className="console-line console-input-line">
<form onSubmit={handleTerminalInput} className="console-input-form">
<span className="console-cursor">{'> '}</span>
<input
ref={terminalInputRef}
type="text"
value={terminalInput}
onChange={(e) => setTerminalInput(e.target.value)}
className="console-input"
autoFocus
/>
</form>
</div>
)}
</>
)}
</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>