feat: Display passing test cases for valid schemas (#179)

Updates the output view to show passing test cases. Also applies automated formatting and lint fixes to the entire codebase.

Author: tanay-nagde

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",
           });

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!}
       />

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

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",

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,