feat: more test formatting (#866)

boorad · web-flow · commit 50324ef288f8 · 2025-12-14T14:29:39.000-05:00
diff --git a/example/src/components/TestItem.tsx b/example/src/components/TestItem.tsx
@@ -6,58 +6,70 @@ import { useNavigation } from '@react-navigation/native';
 import { colors } from '../styles/colors';
 
 type TestItemProps = {
-  suiteIndex: number;
+  suiteIndex?: number;
   description: string;
-  value: boolean;
+  value?: boolean;
   count: number;
-  results: TestResult[];
-  onToggle: (description: string) => void;
+  results?: TestResult[];
+  onToggle?: (description: string) => void;
+  isFooter?: boolean;
+  passCount?: number;
+  failCount?: number;
 };
 
 export const TestItem: React.FC<TestItemProps> = ({
-  suiteIndex,
+  suiteIndex = 0,
   description,
-  value,
+  value = false,
   count,
-  results,
+  results = [],
   onToggle,
+  isFooter = false,
+  passCount,
+  failCount,
 }: TestItemProps) => {
   const navigation = useNavigation();
 
   // get pass/fail stats from results
-  let pass = 0;
-  let fail = 0;
-  results.map(r => {
-    if (r.type === 'correct') {
-      pass++;
-    }
-    if (r.type === 'incorrect') {
-      fail++;
-    }
-  });
+  let pass = passCount ?? 0;
+  let fail = failCount ?? 0;
+
+  if (!isFooter) {
+    results.map(r => {
+      if (r.type === 'correct') {
+        pass++;
+      }
+      if (r.type === 'incorrect') {
+        fail++;
+      }
+    });
+  }
 
   return (
-    <View
-      style={styles.container}
-      testID={`test-suite-${description.replace(/\s+/g, '-').toLowerCase()}`}
-    >
-      <BouncyCheckbox
-        isChecked={value}
-        onPress={() => {
-          onToggle(description);
-        }}
-        fillColor={colors.blue}
-        style={styles.checkbox}
-        disableBuiltInState={true}
-      />
+    <View style={styles.container}>
+      {isFooter ? (
+        <Text style={styles.timer}>⏱️</Text>
+      ) : (
+        <BouncyCheckbox
+          isChecked={value}
+          onPress={() => {
+            onToggle?.(description);
+          }}
+          fillColor={colors.blue}
+          style={styles.checkbox}
+          disableBuiltInState={true}
+        />
+      )}
       <TouchableOpacity
         style={styles.touchable}
         onPress={() => {
-          // @ts-expect-error - not dealing with navigation types rn
-          navigation.navigate('TestDetailsScreen', {
-            results,
-            suiteName: description,
-          });
+          if (!isFooter) {
+            // @ts-expect-error - not dealing with navigation types rn
+            navigation.navigate('TestDetailsScreen', {
+              results,
+              suiteName: description,
+            });
+          }
         }}
       >
         <Text
@@ -70,21 +82,33 @@ export const TestItem: React.FC<TestItemProps> = ({
         <Text
           style={[styles.pass, styles.count]}
           numberOfLines={1}
-          testID={`test-suite-${suiteIndex}-pass-count`}
+          testID={
+            isFooter
+              ? 'completion-stats'
+              : `test-suite-${suiteIndex}-pass-count`
+          }
         >
-          {pass || ''}
+          {isFooter ? pass : pass || ''}
         </Text>
         <Text
           style={[styles.fail, styles.count]}
           numberOfLines={1}
-          testID={`test-suite-${suiteIndex}-fail-count`}
+          testID={
+            isFooter
+              ? 'total-fail-count'
+              : `test-suite-${suiteIndex}-fail-count`
+          }
         >
-          {fail || ''}
+          {isFooter ? fail : fail || ''}
         </Text>
         <Text
           style={styles.count}
           numberOfLines={1}
-          testID={`test-suite-${suiteIndex}-total-count`}
+          testID={
+            isFooter
+              ? 'total-test-count'
+              : `test-suite-${suiteIndex}-total-count`
+          }
         >
           {count}
         </Text>
@@ -104,12 +128,13 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: colors.gray,
     paddingHorizontal: 10,
+    marginVertical: -1,
   },
   checkbox: {
-    transform: [{ scaleX: 0.7 }, { scaleY: 0.7 }],
+    transform: [{ scaleX: 0.6 }, { scaleY: 0.6 }],
   },
   label: {
-    fontSize: 12,
+    fontSize: 11,
     flex: 8,
   },
   touchable: {
@@ -126,5 +151,11 @@ const styles = StyleSheet.create({
     fontSize: 11,
     flex: 1,
     textAlign: 'right',
+    paddingHorizontal: 1,
+  },
+  timer: {
+    fontSize: 14,
+    paddingHorizontal: 6,
+    paddingVertical: 4,
   },
 });
diff --git a/example/src/navigators/children/TestSuitesScreen.tsx b/example/src/navigators/children/TestSuitesScreen.tsx
@@ -1,11 +1,5 @@
 import React, { useMemo } from 'react';
-import {
-  Text,
-  View,
-  FlatList,
-  StyleSheet,
-  TouchableOpacity,
-} from 'react-native';
+import { View, FlatList, StyleSheet } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Button } from '../../components/Button';
 import { TestItem } from '../../components/TestItem';
@@ -57,38 +51,22 @@ export const TestSuitesScreen = () => {
           testID="test-suites-list"
         />
       </View>
-      {results && Object.keys(results).length > 0 && stats && (
-        <View style={styles.footerItem}>
-          <View style={styles.footerCheckbox} />
-          <TouchableOpacity style={styles.footerContent} activeOpacity={1}>
-            <Text style={styles.footerLabel}>⏱️ {stats.duration}ms</Text>
-            <Text
-              style={[styles.pass, styles.footerCount]}
-              testID="completion-stats"
-            >
-              {Object.values(results).reduce(
-                (sum, suite) =>
-                  sum + suite.results.filter(r => r.type === 'correct').length,
-                0,
-              )}
-            </Text>
-            <Text
-              style={[styles.fail, styles.footerCount]}
-              testID="total-fail-count"
-            >
-              {Object.values(results).reduce(
-                (sum, suite) =>
-                  sum +
-                  suite.results.filter(r => r.type === 'incorrect').length,
-                0,
-              )}
-            </Text>
-            <Text style={styles.footerCount} testID="total-test-count">
-              {totalCount}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      )}
+      <TestItem
+        suiteIndex={-1}
+        isFooter
+        description={stats ? `${stats?.duration}ms` : ''}
+        count={totalCount}
+        passCount={Object.values(results).reduce(
+          (sum, suite) =>
+            sum + suite.results.filter(r => r.type === 'correct').length,
+          0,
+        )}
+        failCount={Object.values(results).reduce(
+          (sum, suite) =>
+            sum + suite.results.filter(r => r.type === 'incorrect').length,
+          0,
+        )}
+      />
       <View style={styles.menu}>
         <Button
           title="Check All"
@@ -119,46 +97,16 @@ const styles = StyleSheet.create({
   },
   testList: {
     flex: 9,
+    borderTopWidth: 1,
+    borderTopColor: colors.gray,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.gray,
   },
   menu: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    alignContent: 'space-around',
     justifyContent: 'space-around',
-  },
-  footerItem: {
-    width: '100%',
-    flexDirection: 'row',
-    alignContent: 'center',
-    alignItems: 'center',
-    gap: 10,
-    borderTopWidth: 1,
-    borderTopColor: colors.gray,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-  },
-  footerCheckbox: {
-    width: 24,
-  },
-  footerContent: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  footerLabel: {
-    fontSize: 11,
-    fontWeight: 'bold',
-    flex: 8,
-  },
-  footerCount: {
-    fontSize: 11,
-    flex: 1,
-    textAlign: 'right',
-  },
-  pass: {
-    color: colors.green,
-  },
-  fail: {
-    color: colors.red,
+    marginVertical: -5,
   },
 });
diff --git a/example/test/e2e/test-suites-flow.yml b/example/test/e2e/test-suites-flow.yml
@@ -13,13 +13,6 @@ jsEngine: graaljs
 - assertVisible: 'Check All'
 - assertVisible: 'Clear All'
 
-# Clear any previous test results
-- tapOn: 'Clear All'
-
-# Wait for clear to complete
-- waitForAnimationToEnd:
-    timeout: 2000
-
 # Select all tests by tapping "Check All"
 - tapOn: 'Check All'
 
