From b075e5b3d39982def7a099bf0ddc73c8604c0981 Mon Sep 17 00:00:00 2001
From: Arnab-Afk <arnabbhowmik019@gmail.com>
Date: Sat, 8 Nov 2025 22:52:51 +0530
Subject: [PATCH] feat: implement test cases tab with styling and functionality
 for displaying test cases

---
 Frontend/src/components/CodeChallenge.jsx | 161 +++++++++++++---------
 Frontend/src/index.css                    |  84 +++++++++++
 2 files changed, 180 insertions(+), 65 deletions(-)

diff --git a/Frontend/src/components/CodeChallenge.jsx b/Frontend/src/components/CodeChallenge.jsx
index b4bf573..177f527 100644
--- a/Frontend/src/components/CodeChallenge.jsx
+++ b/Frontend/src/components/CodeChallenge.jsx
@@ -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>
           
diff --git a/Frontend/src/index.css b/Frontend/src/index.css
index ef125c8..22321fb 100644
--- a/Frontend/src/index.css
+++ b/Frontend/src/index.css
@@ -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;