fix(friends): Display issue for users with unfetchable test amount; Fixes #8189 (@brentspine)

frontend/src/ts/components/pages/connections/FriendsList.tsx

@@ -179,17 +179,26 @@ function getColumns({
     defineColumn("completedTests", {
       enableSorting: true,
       header: "tests",
-      cell: (info) => `${info.getValue()}/${info.row.original.startedTests}`,
+      cell: (info) => {
+        const completedTests = info.getValue<number | undefined>();
+        const startedTests = info.row.original.startedTests;
+
+        return completedTests === undefined || startedTests === undefined
+          ? "-"
+          : `${completedTests}/${startedTests}`;
+      },
       meta: {
         breakpoint: "lg",
         cellMeta: ({ row }) => {
           const testStats = formatTypingStatsRatio(row);
 
+          if (testStats.completedPercentage === "") {
+            return {};
+          }
+
           return {
             "data-balloon-pos": "up",
-            "aria-label": `${testStats.completedPercentage}% (${
-              testStats.restartRatio
-            } restarts per completed test)`,
+            "aria-label": `${testStats.completedPercentage}% (${testStats.restartRatio} restarts per completed test)`,
           };
         },
       },

frontend/src/ts/utils/misc.ts

@@ -726,10 +726,13 @@ export function formatTypingStatsRatio(stats: {
     completedPercentage: Math.floor(
       (stats.completedTests / stats.startedTests) * 100,
     ).toString(),
-    restartRatio: (
-      (stats.startedTests - stats.completedTests) /
-      stats.completedTests
-    ).toFixed(1),
+    restartRatio:
+      stats.completedTests === 0
+        ? "-"
+        : (
+            (stats.startedTests - stats.completedTests) /
+            stats.completedTests
+          ).toFixed(1),
   };
 }