From 8ba4456935e44f146c44a74de1df6ae61e683af0 Mon Sep 17 00:00:00 2001
From: tanay-nagde <tanaynagde@gmail.com>
Date: Mon, 21 Jul 2025 15:04:05 +0530
Subject: [PATCH] feat: Display passing test cases for valid schemas

Updates the output view to show passing test cases. Also applies automated formatting and lint fixes to the entire codebase.
---
 app/components/NavBarMenus/NavBarMenus.tsx    |  1 -
 app/components/Output/Output.tsx              | 22 ++++++++++++-------
 .../TestCaseWindow/TestCaseWindow.tsx         | 14 +++++++-----
 lib/client-functions.ts                       | 11 +++++++++-
 lib/reducers.ts                               |  7 +++++-
 5 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/app/components/NavBarMenus/NavBarMenus.tsx b/app/components/NavBarMenus/NavBarMenus.tsx
index 002306e..fb8c575 100644
--- a/app/components/NavBarMenus/NavBarMenus.tsx
+++ b/app/components/NavBarMenus/NavBarMenus.tsx
@@ -38,7 +38,6 @@ export default function NavBarMenu() {
         className={navBarStyles.menuButton}
         onBlur={() => setIsOpen(false)}
         onClick={() => {
-          
           sendGAEvent("event", "buttonClicked", {
             value: "Settings",
           });
diff --git a/app/components/Output/Output.tsx b/app/components/Output/Output.tsx
index 682c5e9..5a5d395 100644
--- a/app/components/Output/Output.tsx
+++ b/app/components/Output/Output.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import styles from "./Output.module.css";
 import classnames from "classnames";
 import { OutputResult } from "@/lib/types";
-import FailedTestCasesWindow from "../TestCaseWindow/TestCaseWindow";
+import TestCasesWindow from "../TestCaseWindow/TestCaseWindow";
 import MyBtn from "../MyBtn";
 import { InvalidSchemaError } from "@hyperjump/json-schema/draft-2020-12";
 import { schemaUrl } from "@/lib/validators";
@@ -101,12 +101,18 @@ function Output({
     );
   } else if (outputResult.validityStatus == "valid") {
     outputBodyContent = (
-      <div className={styles.valid}>
-        <b className={styles.validMessage}>Valid Schema!</b>
-        <span className={styles.validSmallMessage}>
-          Let&apos;s move on to the next step
-        </span>
-      </div>
+      <>
+        <div className={styles.valid}>
+          <b className={styles.validMessage}>Valid Schema!</b>
+          <span className={styles.validSmallMessage}>
+            Let&apos;s move on to the next step
+          </span>
+        </div>
+        <TestCasesWindow
+          testCaseResult={outputResult.testCaseResults!}
+          totalTestCases={outputResult.totalTestCases!}
+        />
+      </>
     );
   } else if (outputResult.validityStatus == "syntaxError") {
     outputBodyContent = (
@@ -128,7 +134,7 @@ function Output({
     );
   } else {
     outputBodyContent = (
-      <FailedTestCasesWindow
+      <TestCasesWindow
         testCaseResult={outputResult.testCaseResults!}
         totalTestCases={outputResult.totalTestCases!}
       />
diff --git a/app/components/TestCaseWindow/TestCaseWindow.tsx b/app/components/TestCaseWindow/TestCaseWindow.tsx
index 4d93f1a..41dff68 100644
--- a/app/components/TestCaseWindow/TestCaseWindow.tsx
+++ b/app/components/TestCaseWindow/TestCaseWindow.tsx
@@ -110,12 +110,14 @@ export default function TestCasesWindow({
 
   return (
     <div className={styles.TestCasesWindow}>
-      <div className={styles.TestCasesHeaderWrapper}>
-        <span className={styles.TestCasesHeader}>Invalid Schema!</span>
-        <span className={styles.TestCasesSubtitle}>
-          {numberOfFailedTestCases} out of {totalTestCases} test cases failed
-        </span>
-      </div>
+      {numberOfFailedTestCases > 0 && (
+        <div className={styles.TestCasesHeaderWrapper}>
+          <span className={styles.TestCasesHeader}>Invalid Schema!</span>
+          <span className={styles.TestCasesSubtitle}>
+            {numberOfFailedTestCases} out of {totalTestCases} test cases failed
+          </span>
+        </div>
+      )}
       <Flex dir="row" gap={2}>
         {!areBothDisabled && (
           <button
diff --git a/lib/client-functions.ts b/lib/client-functions.ts
index 9f06900..b018af4 100644
--- a/lib/client-functions.ts
+++ b/lib/client-functions.ts
@@ -58,7 +58,16 @@ export async function validateCode(
     }
 
     if (validationStatus === "valid") {
-      dispatchOutput({ type: "valid", payload: {} });
+      const sortedResults = testCaseResults.sort((a, b) => {
+        if (a.passed === b.passed) {
+          return 0; // If both are the same, their order doesn't change
+        }
+        return a.passed ? 1 : -1; // If a.passed is true, put a after b; if false, put a before b
+      });
+      dispatchOutput({
+        type: "valid",
+        payload: { testCaseResults: sortedResults, totalTestCases },
+      });
       completeStep(chapterIndex, stepIndex);
       sendGAEvent("event", "validation", {
         validation_result: "passed",
diff --git a/lib/reducers.ts b/lib/reducers.ts
index 4169347..57a508f 100644
--- a/lib/reducers.ts
+++ b/lib/reducers.ts
@@ -16,7 +16,12 @@ export function outputReducer(
 ): OutputResult {
   switch (action.type) {
     case "valid":
-      return { ...state, validityStatus: "valid" };
+      return {
+        ...state,
+        validityStatus: "valid",
+        testCaseResults: action.payload.testCaseResults,
+        totalTestCases: action.payload.totalTestCases,
+      };
     case "syntaxError":
       return {
         ...state,