diff --git a/example/src/components/TestItem.tsx b/example/src/components/TestItem.tsx index 5c92e7ee..7a85cf23 100644 --- 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 = ({ - 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 ( - - { - onToggle(description); - }} - fillColor={colors.blue} - style={styles.checkbox} - disableBuiltInState={true} - /> + + {isFooter ? ( + ⏱️ + ) : ( + { + onToggle?.(description); + }} + fillColor={colors.blue} + style={styles.checkbox} + disableBuiltInState={true} + /> + )} { - // @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, + }); + } }} > = ({ - {pass || ''} + {isFooter ? pass : pass || ''} - {fail || ''} + {isFooter ? fail : fail || ''} {count} @@ -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 index 0d99a93c..79026ded 100644 --- 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" /> - {results && Object.keys(results).length > 0 && stats && ( - - - - ⏱️ {stats.duration}ms - - {Object.values(results).reduce( - (sum, suite) => - sum + suite.results.filter(r => r.type === 'correct').length, - 0, - )} - - - {Object.values(results).reduce( - (sum, suite) => - sum + - suite.results.filter(r => r.type === 'incorrect').length, - 0, - )} - - - {totalCount} - - - - )} + + 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, + )} + />