Add a filter option to conformance page

nekevss · nekevss · commit f5173c958a1a · 2025-07-05T12:43:22.000-05:00
diff --git a/src/components/conformance/ResultsDisplay/components/SuiteDataContainer/cards/TestGrid/index.tsx b/src/components/conformance/ResultsDisplay/components/SuiteDataContainer/cards/TestGrid/index.tsx
@@ -5,6 +5,7 @@ import {
   TestResult,
   SuiteResult,
   ConformanceState,
+  FilterOption,
 } from "@site/src/components/conformance/types";
 import Heading from "@theme/Heading";
 import styles from "./styles.module.css";
@@ -32,6 +33,7 @@ export default function TestsGrid(props: TestsGridProps): JSX.Element {
           <Grid
             tests={props.suite.tests}
             esFlag={props.state.ecmaScriptVersion}
+            filterOption={props.state.filterOption}
             selectTest={props.selectTest}
             setHoverValue={(name) => setHoverName(name)}
           />
@@ -44,16 +46,31 @@ export default function TestsGrid(props: TestsGridProps): JSX.Element {
 type GridProps = {
   tests: TestResult[];
   esFlag: string | null;
+  filterOption: FilterOption;
   selectTest: (test: string) => void;
   setHoverValue: (test: string | undefined) => void;
 };
 
+function applyFilter(filter: FilterOption, outcome: TestOutcome): boolean {
+  switch (filter) {
+    case FilterOption.Passed:
+      return outcome == TestOutcome.Passed;
+    case FilterOption.Ignored:
+      return outcome == TestOutcome.Ignored;
+    case FilterOption.Failed:
+      return outcome == TestOutcome.Failed || outcome == TestOutcome.Panic;
+    default:
+      return true;
+  }
+}
+
 function Grid(props: GridProps): JSX.Element {
   return (
     <>
       {props.esFlag
         ? props.tests
             .filter((test) => test.edition <= SpecEdition[props.esFlag])
+            .filter((test) => applyFilter(props.filterOption, test.result))
             .map((test) => {
               return (
                 <GridItem
@@ -64,16 +81,18 @@ function Grid(props: GridProps): JSX.Element {
                 />
               );
             })
-        : props.tests.map((test) => {
-            return (
-              <GridItem
-                key={test.strict ? test.name + "-strict" : test.name}
-                test={test}
-                selectTest={props.selectTest}
-                setHoverValue={props.setHoverValue}
-              />
-            );
-          })}
+        : props.tests
+            .filter((test) => applyFilter(props.filterOption, test.result))
+            .map((test) => {
+              return (
+                <GridItem
+                  key={test.strict ? test.name + "-strict" : test.name}
+                  test={test}
+                  selectTest={props.selectTest}
+                  setHoverValue={props.setHoverValue}
+                />
+              );
+            })}
     </>
   );
 }
diff --git a/src/components/conformance/ResultsDisplay/components/SuiteDataContainer/index.tsx b/src/components/conformance/ResultsDisplay/components/SuiteDataContainer/index.tsx
@@ -15,7 +15,9 @@ type SuiteDataProps = {
   setSelectedTest: (string) => void;
 };
 
-export default function SuiteDataContainer(props: SuiteDataProps): JSX.Element {
+export default function SuiteDataContainer(
+  props: SuiteDataProps,
+): JSX.Element {
   // Set the user's selected test to be displayed in the ViewPort.
   const selectTest = (testName: string) => {
     props.setSelectedTest(testName);
diff --git a/src/components/conformance/ResultsDisplay/components/SuiteDisplay/index.tsx b/src/components/conformance/ResultsDisplay/components/SuiteDisplay/index.tsx
@@ -16,7 +16,9 @@ type SuiteDisplayProps = {
   setSelectedTest: (string) => void;
 };
 
-export default function SuiteDisplay(props: SuiteDisplayProps): JSX.Element {
+export default function SuiteDisplay(
+  props: SuiteDisplayProps,
+): JSX.Element {
   return (
     <div className={styles.suiteDisplay}>
       {props.currentSuite.suites ? (
diff --git a/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx b/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import {
   ConformanceState,
+  FilterOption,
   SortOption,
   SuiteResult,
   TestStats,
@@ -35,6 +36,7 @@ export default function SuiteSelector(props: SelectorProps): JSX.Element {
               key={suite.name}
               suite={suite}
               esFlag={props.state.ecmaScriptVersion}
+              filterOption={props.state.filterOption ?? FilterOption.None}
               navigateToSuite={props.navigateToSuite}
             />
           );
@@ -46,6 +48,7 @@ export default function SuiteSelector(props: SelectorProps): JSX.Element {
 type SuiteItemProps = {
   suite: SuiteResult;
   esFlag: string | null;
+  filterOption: FilterOption;
   navigateToSuite: (string) => void;
 };
 
@@ -64,26 +67,48 @@ function SuiteItem(props: SuiteItemProps): JSX.Element {
             ? (props.suite.versionedStats?.[props.esFlag] ?? props.suite.stats)
             : props.suite.stats
         }
+        filterOption={props.filterOption}
       />
     </div>
   );
 }
 
-function SuiteStatistics(props): JSX.Element {
+type StatProps = {
+  testResults: TestStats;
+  filterOption: FilterOption;
+};
+
+function SuiteStatistics({
+  testResults,
+  filterOption,
+}: StatProps): JSX.Element {
+  const [filter, setFilter] = React.useState(filterOption);
+
+  React.useEffect(() => {
+    setFilter(filterOption);
+  }, [filterOption]);
+
+  let passed =
+    filter == FilterOption.None || filter == FilterOption.Passed
+      ? testResults.passed
+      : 0;
+
+  let ignored =
+    filter == FilterOption.None || filter == FilterOption.Ignored
+      ? testResults.ignored
+      : 0;
+
+  let failed =
+    filter == FilterOption.None || filter == FilterOption.Failed
+      ? `${testResults.total - testResults.passed - testResults.ignored} (${testResults.panic}\u26A0)`
+      : 0;
+
   return (
     <div className={styles.suiteCardResults}>
       <p>
-        <span style={{ color: "var(--ifm-color-success)" }}>
-          {props.testResults.passed}{" "}
-        </span>
-        /{" "}
-        <span style={{ color: "var(--ifm-color-warning)" }}>
-          {props.testResults.ignored}{" "}
-        </span>
-        /{" "}
-        <span
-          style={{ color: "var(--ifm-color-danger)" }}
-        >{`${props.testResults.total - props.testResults.passed - props.testResults.ignored} (${props.testResults.panic}\u26A0)`}</span>
+        <span style={{ color: "var(--ifm-color-success)" }}>{passed} </span>/{" "}
+        <span style={{ color: "var(--ifm-color-warning)" }}>{ignored} </span>/{" "}
+        <span style={{ color: "var(--ifm-color-danger)" }}>{failed}</span>
       </p>
     </div>
   );
diff --git a/src/components/conformance/ResultsDisplay/index.tsx b/src/components/conformance/ResultsDisplay/index.tsx
@@ -5,6 +5,7 @@ import {
   VersionItem,
   SuiteResult,
   ConformanceState,
+  FilterOption,
 } from "@site/src/components/conformance/types";
 import ResultNavigation from "./nav";
 import {
@@ -27,7 +28,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
   );
 
   // Refs
-  const activeResults = React.useRef<undefined | ResultInfo>();
+  const activeResults = React.useRef<undefined | ResultInfo>(undefined);
 
   // History handling
   const history = useHistory<ConformanceState>();
@@ -103,6 +104,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         newPath,
         props.state.ecmaScriptVersion,
         props.state.sortOption,
+        props.state.filterOption,
       ),
     );
   };
@@ -119,6 +121,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         slicedPath,
         props.state.ecmaScriptVersion,
         props.state.sortOption,
+        props.state.filterOption,
       ),
     );
   };
@@ -137,6 +140,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         props.state.testPath,
         nulledFlag,
         props.state.sortOption,
+        props.state.filterOption,
       ),
     );
   };
@@ -158,6 +162,21 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
     );
   };
 
+  // Sets the filter option.
+  //
+  // This filters the tests shown in the selection cards and tests grid
+  const setFilterOption = (option: string) => {
+    pushStateToHistory(
+      createState(
+        props.state.version,
+        props.state.testPath,
+        props.state.ecmaScriptVersion,
+        props.state.sortOption,
+        option as FilterOption,
+      ),
+    );
+  };
+
   // Sets a selected test.
   const setSelectedTest = (test: string | undefined) => {
     pushStateToHistory(
@@ -167,6 +186,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         props.state.testPath,
         props.state.ecmaScriptVersion,
         props.state.sortOption,
+        props.state.filterOption,
         test,
       ),
     );
@@ -189,6 +209,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         sliceNavToIndex={sliceNavToIndex}
         setEcmaScriptFlag={setEcmaScriptFlag}
         setSortOption={setSortOption}
+        setFilterOption={setFilterOption}
       />
       {currentSuite ? (
         <SuiteDisplay
diff --git a/src/components/conformance/ResultsDisplay/nav.tsx b/src/components/conformance/ResultsDisplay/nav.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ConformanceState, SpecEdition } from "../types";
+import { ConformanceState, FilterOption, SpecEdition } from "../types";
 
 import styles from "./styles.module.css";
 import Link from "@docusaurus/Link";
@@ -11,9 +11,12 @@ type ResultsNavProps = {
   sliceNavToIndex: (number) => void;
   setEcmaScriptFlag: (string) => void;
   setSortOption: (string) => void;
+  setFilterOption: (string) => void;
 };
 
-export default function ResultNavigation(props: ResultsNavProps): JSX.Element {
+export default function ResultNavigation(
+  props: ResultsNavProps,
+): JSX.Element {
   return (
     <div className={styles.resultsNav}>
       <div className={styles.navSection}>
@@ -25,6 +28,10 @@ export default function ResultNavigation(props: ResultsNavProps): JSX.Element {
           sortValue={props.state.sortOption}
           setSortOption={props.setSortOption}
         />
+        <FilterDropdown
+          filterOption={props.state.filterOption}
+          setFilterOption={props.setFilterOption}
+        />
       </div>
       <div className={styles.navSection}>
         <NavBreadCrumbs
@@ -168,3 +175,40 @@ function SortingDropdown(props: SortProps): JSX.Element {
     </div>
   );
 }
+
+type FilterProps = {
+  filterOption: FilterOption;
+  setFilterOption: (string) => void;
+};
+
+function FilterDropdown(props: FilterProps): JSX.Element {
+  const [filterValue, setFilterValue] = React.useState<string>(
+    props.filterOption ?? FilterOption.None,
+  );
+
+  React.useEffect(() => {
+    setFilterValue(props.filterOption);
+  }, [props.filterOption]);
+
+  const handlefilterSelection = (e) => {
+    setFilterValue(e.target.value);
+    props.setFilterOption(e.target.value);
+  };
+
+  return (
+    <div className={styles.dropdownContainer}>
+      <Heading as="h4" style={{ padding: "0.125rem 0.5rem", height: "5" }}>
+        Filter:
+      </Heading>
+      <select value={filterValue} onChange={handlefilterSelection}>
+        {Object.values(FilterOption).map((key) => {
+          return (
+            <option key={key} value={key}>
+              {key}
+            </option>
+          );
+        })}
+      </select>
+    </div>
+  );
+}
diff --git a/src/components/conformance/types.ts b/src/components/conformance/types.ts
@@ -7,6 +7,7 @@ export type ConformanceState = {
   testPath: string[];
   ecmaScriptVersion: string | undefined;
   sortOption: string;
+  filterOption: FilterOption;
   selectedTest: string | undefined;
 };
 
@@ -27,6 +28,13 @@ export type SortOption = {
   callback: (a: SuiteResult, b: SuiteResult) => number;
 };
 
+export enum FilterOption {
+  None = "none",
+  Passed = "passed",
+  Failed = "failed",
+  Ignored = "ignored",
+}
+
 // The below types are specific to test result types.
 
 export type ResultInfo = {
diff --git a/src/components/conformance/utils.ts b/src/components/conformance/utils.ts
@@ -1,5 +1,6 @@
 import {
   ConformanceState,
+  FilterOption,
   ResultInfo,
   SortOption,
   SpecEdition,
@@ -69,6 +70,7 @@ export function createState(
   testPath?: string[],
   ecmaScriptVersion?: string,
   sortOption?: string,
+  filterOption?: FilterOption,
   selectedTest?: string,
 ): ConformanceState {
   testPath = testPath ? testPath : [version.tagName];
@@ -79,6 +81,7 @@ export function createState(
     testPath,
     ecmaScriptVersion,
     sortOption,
+    filterOption,
     selectedTest,
   };
 }
