Fix prop mutation and address some lints (#159)

Author: nekevss

src/components/conformance/ResultsDisplay/components/SuiteDataContainer/cards/TestGrid/index.tsx

@@ -17,7 +17,7 @@ type TestsGridProps = {
 };
 
 export default function TestsGrid(props: TestsGridProps): JSX.Element {
-  const [hoverName, setHoverName] = React.useState<undefined | String>()
+  const [hoverName, setHoverName] = React.useState<undefined | string>();
   const cardBodyClass = "card__body " + styles.gridStyle;
 
   const title = hoverName ? "Test: " + hoverName : "Suite: " + props.suite.name;
@@ -33,7 +33,7 @@ export default function TestsGrid(props: TestsGridProps): JSX.Element {
             tests={props.suite.tests}
             esFlag={props.state.ecmaScriptVersion}
             selectTest={props.selectTest}
-            setHoverValue={(name)=>setHoverName(name)}
+            setHoverValue={(name) => setHoverName(name)}
           />
         </div>
       </div>
@@ -102,8 +102,8 @@ function GridItem(props: GridItemProps): JSX.Element {
       <div
         className={testResult}
         onClick={() => props.selectTest(props.test.name + ".js")}
-        onMouseEnter={(_e)=>props.setHoverValue(props.test.name + ".js")}
-        onMouseLeave={(_e)=>props.setHoverValue(undefined)}
+        onMouseEnter={() => props.setHoverValue(props.test.name + ".js")}
+        onMouseLeave={() => props.setHoverValue(undefined)}
         aria-label={props.test.name}
         title={
           props.test.strict

src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx

@@ -22,10 +22,11 @@ export default function SuiteSelector(props: SelectorProps): JSX.Element {
   return (
     <div className={styles.suiteSelector}>
       {props.suites
-        .sort(option[0].callback)
+        .toSorted(option[0].callback)
         .filter((suite) => {
           const stats: TestStats =
-            suite.versionedStats[props.state.ecmaScriptVersion] ?? suite.stats;
+            suite.versionedStats?.[props.state.ecmaScriptVersion] ??
+            suite.stats;
           return stats.total !== 0;
         })
         .map((suite) => {
@@ -59,8 +60,8 @@ function SuiteItem(props: SuiteItemProps): JSX.Element {
       </div>
       <SuiteStatistics
         testResults={
-          props.esFlag && props.suite.versionedStats[props.esFlag]
-            ? props.suite.versionedStats[props.esFlag]
+          props.esFlag
+            ? props.suite.versionedStats?.[props.esFlag] ?? props.suite.stats
             : props.suite.stats
         }
       />

src/components/conformance/ResultsDisplay/index.tsx

@@ -5,7 +5,6 @@ import {
   VersionItem,
   SuiteResult,
   ConformanceState,
-  SortOption,
 } from "@site/src/components/conformance/types";
 import ResultNavigation from "./nav";
 import {
@@ -28,8 +27,16 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
   // Refs
   const activeResults = React.useRef<undefined | ResultInfo>();
 
+  // History handling
   const history = useHistory<ConformanceState>();
 
+  const pushStateToHistory = (state: ConformanceState): void => {
+    history.push({
+      pathname: "/conformance",
+      state,
+    });
+  };
+
   React.useEffect(() => {
     // If the version is correctly synced
     if (props.state.version.tagName !== activeResults.current?.version) {
@@ -60,7 +67,6 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
   const updateActiveResults = async (): Promise<ResultInfo> => {
     const data = await fetchResults(props.state.version);
     return mapToResultInfo(props.state.version.tagName, data);
-    // setCurrentSuite(resultInfo.results);
   };
 
   const findResultsFromPath = (activeResultsInfo: ResultInfo): SuiteResult => {
@@ -84,72 +90,67 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
   // Navigates to a suite by adding the SuiteName to the test path array.
   const navigateToSuite = (newSuiteName: string) => {
     const newPath = [...props.state.testPath, newSuiteName];
-    history.push({
-      pathname: "/conformance",
-      state: createState(
+    pushStateToHistory(
+      createState(
         props.state.version,
         newPath,
         props.state.ecmaScriptVersion,
         props.state.sortOption,
       ),
-    });
+    );
   };
 
   // Removes a value or values from the test path array.
   //
   // Used by breadcrumbs for navigation.
   const sliceNavToIndex = (nonInclusiveIndex: number) => {
     const slicedPath = [...props.state.testPath.slice(0, nonInclusiveIndex)];
-    history.push({
-      pathname: "/conformance",
-      state: createState(
+    pushStateToHistory(
+      createState(
         props.state.version,
         slicedPath,
         props.state.ecmaScriptVersion,
         props.state.sortOption,
       ),
-    });
+    );
   };
 
   // Sets the ECMAScript version flag value.
   const setEcmaScriptFlag = (flag: string) => {
     const nulledFlag = flag ? flag : undefined;
-    history.push({
-      pathname: "/conformance",
-      state: createState(
+    pushStateToHistory(
+      createState(
         props.state.version,
         props.state.testPath,
         nulledFlag,
         props.state.sortOption,
       ),
-    });
+    );
   };
 
   // Sets the sorting option
   const setSortOption = (option: string) => {
-    history.push({
-      pathname: "/conformance",
-      state: createState(
+    pushStateToHistory(
+      createState(
         props.state.version,
         props.state.testPath,
         props.state.ecmaScriptVersion,
         option,
       ),
-    });
+    );
   };
 
   // Sets a selected test.
   const setSelectedTest = (test: string | undefined) => {
-    history.push({
-      pathname: "/conformance",
-      state: createState(
+    pushStateToHistory(
+      createState(
         props.state.version,
         props.state.testPath,
         props.state.ecmaScriptVersion,
         props.state.sortOption,
         test,
       ),
-    });
+    );
   };
 
   // Create the t262 URL from testPath with the results commit

src/components/conformance/ResultsDisplay/nav.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { ConformanceState, SortOption, SpecEdition } from "../types";
+import { ConformanceState, SpecEdition } from "../types";
 
 import styles from "./styles.module.css";
 import Link from "@docusaurus/Link";
+import Heading from "@theme/Heading";
 import { availableSortingOptions } from "../utils";
 
 type ResultsNavProps = {
@@ -109,7 +110,9 @@ function EcmaScriptVersionDropdown(props: DropDownProps): JSX.Element {
 
   return (
     <div className={styles.dropdownContainer}>
-      <h4 style={{ padding: "0.125rem 0.5rem", height: "5" }}>ES Version:</h4>
+      <Heading as="h4" style={{ padding: "0.125rem 0.5rem", height: "5" }}>
+        ES Version:
+      </Heading>
       <select value={dropdownValue} onChange={handleVersionSelection}>
         <option value={""}>All</option>
         {Object.keys(SpecEdition)
@@ -150,7 +153,9 @@ function SortingDropdown(props: SortProps): JSX.Element {
 
   return (
     <div className={styles.dropdownContainer}>
-      <h4 style={{ padding: "0.125rem 0.5rem", height: "5" }}>Sort:</h4>
+      <Heading as="h4" style={{ padding: "0.125rem 0.5rem", height: "5" }}>
+        Sort:
+      </Heading>
       <select value={sortValue} onChange={handleSortSelection}>
         {availableSortingOptions.map((key) => {
           return (

src/components/conformance/utils.ts

@@ -21,6 +21,7 @@ export function createState(
 ): ConformanceState {
   testPath = testPath ? testPath : [version.tagName];
   sortOption = sortOption ? sortOption : availableSortingOptions[0].id;
+  ecmaScriptVersion = ecmaScriptVersion ? ecmaScriptVersion : "";
   return {
     version,
     testPath,

src/pages/conformance/index.tsx

@@ -9,6 +9,11 @@ import React from "react";
 
 import styles from "./styles.module.css";
 
+// Note there are other fields, but only adding the ones that are needed.
+type ReleasesObject = {
+  tag_name: string;
+};
+
 // TODO: Add header file to speed up statisic fetching for initial render?
 export default function Conformance() {
   const location = useLocation<ConformanceState>();
@@ -31,7 +36,10 @@ export default function Conformance() {
         "https://api.github.com/repos/boa-dev/boa/releases",
       );
       const releases = await response.json();
-      return releases
+      const releasesArray: ReleasesObject[] = Array.isArray(releases)
+        ? (releases as Array<ReleasesObject>)
+        : [];
+      return releasesArray
         .filter((potentialRelease) =>
           validateReleaseVersion(potentialRelease.tag_name),
         )

tsconfig.json

@@ -2,6 +2,8 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    // NOTE: @docusaurus/tsconfig defines DOM, we are adding ESNext and ESNext.Array (for array copying methods)
+    "lib": ["ESNext.Array", "DOM", "ESNext"]
   }
 }