Test Results screen changes

boorad · Jan 26, 2024 · 674977b · 674977b
1 parent 66e7046
commit 674977b
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 57 deletions.
diff --git a/example/src/components/TestItem.tsx b/example/src/components/TestItem.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import Checkbox from '@react-native-community/checkbox';
 import type { TestResult } from '../types/TestResults';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import type { RootStackParamList } from '../navigators/RootProps';
 
 type TestItemProps = {
   description: string;
@@ -18,6 +21,9 @@ export const TestItem: React.FC<TestItemProps> = ({
   results,
   onToggle,
 }: TestItemProps) => {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList, 'Entry'>>();
+
   // get pass/fail stats from results
   let pass = 0;
   let fail = 0;
@@ -34,18 +40,28 @@ export const TestItem: React.FC<TestItemProps> = ({
           onToggle(description);
         }}
       />
-      <Text style={styles.label} numberOfLines={1}>
-        {description}
-      </Text>
-      <Text style={[styles.pass, styles.count]} numberOfLines={1}>
-        {pass || ''}
-      </Text>
-      <Text style={[styles.fail, styles.count]} numberOfLines={1}>
-        {fail || ''}
-      </Text>
-      <Text style={styles.count} numberOfLines={1}>
-        {count}
-      </Text>
+      <TouchableOpacity
+        style={styles.touchable}
+        onPress={() => {
+          navigation.navigate('TestingScreen', {
+            results,
+            suiteName: description,
+          });
+        }}
+      >
+        <Text style={styles.label} numberOfLines={1}>
+          {description}
+        </Text>
+        <Text style={[styles.pass, styles.count]} numberOfLines={1}>
+          {pass || ''}
+        </Text>
+        <Text style={[styles.fail, styles.count]} numberOfLines={1}>
+          {fail || ''}
+        </Text>
+        <Text style={styles.count} numberOfLines={1}>
+          {count}
+        </Text>
+      </TouchableOpacity>
     </View>
   );
 };
@@ -66,6 +82,10 @@ const styles = StyleSheet.create({
     fontSize: 12,
     flex: 8,
   },
+  touchable: {
+    flex: 1,
+    flexDirection: 'row',
+  },
   pass: {
     color: 'green',
   },

diff --git a/example/src/navigators/Root.tsx b/example/src/navigators/Root.tsx
@@ -29,7 +29,7 @@ export const Root: React.FC = () => {
         <Stack.Screen
           name="TestingScreen"
           options={{
-            title: 'Testing Screen',
+            title: 'Tests',
           }}
           getComponent={() => {
             const {

diff --git a/example/src/navigators/children/Entry/Entry.tsx b/example/src/navigators/children/Entry/Entry.tsx
@@ -25,11 +25,11 @@ export const Entry: React.FC<EntryProps> = ({}: EntryProps) => {
     <SafeAreaView style={styles.mainContainer}>
       <View style={styles.testList}>
         <ScrollView style={styles.scrollView}>
-          {Object.entries(tests).map(([suiteName, suite]) => {
+          {Object.entries(tests).map(([suiteName, suite], index) => {
             totalCount += suite.count;
             return (
               <TestItem
-                key={suiteName}
+                key={index.toString()}
                 description={suiteName}
                 value={suite.value}
                 count={suite.count}

diff --git a/example/src/navigators/children/TestingScreen/TestingScreen.tsx b/example/src/navigators/children/TestingScreen/TestingScreen.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { RootStackParamList } from '../../RootProps';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
-import { View, ScrollView, StyleSheet } from 'react-native';
-import { Indentator } from '../../../components/Indentator';
+import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
+import Checkbox from '@react-native-community/checkbox';
 import { CorrectResultItem } from '../../../components/CorrectResultItem';
 import { IncorrectResultItem } from '../../../components/IncorrectResultItem';
 import { Suite } from '../../../components/Suite';
@@ -15,54 +15,88 @@ type TestingScreenProps = NativeStackScreenProps<
 export const TestingScreen: React.FC<TestingScreenProps> = ({
   route,
 }: TestingScreenProps) => {
-  const { results } = route.params;
+  const { results, suiteName } = route.params;
+  const [showFailed, setShowFailed] = useState<boolean>(true);
+  const [showPassed, setShowPassed] = useState<boolean>(true);
 
   return (
-    <ScrollView
-      style={styles.scroll}
-      contentContainerStyle={styles.scrollContent}
-    >
-      {results.map((it) => {
-        let InnerElement = <View />;
-        if (it.type === 'correct') {
-          InnerElement = <CorrectResultItem description={it.description} />;
-        }
-        if (it.type === 'incorrect') {
-          const errorMsg = it.errorMsg || ''; // Trick TS - How to do it as it should be? :)
-          InnerElement = (
-            <IncorrectResultItem
-              description={it.description}
-              errorMsg={errorMsg}
-            />
-          );
-        }
-        if (it.type === 'grouping') {
-          InnerElement = <Suite description={it.description} />;
-        }
-        return (
-          <Indentator key={it.description} indentation={it.indentation}>
-            {InnerElement}
-          </Indentator>
-        );
-      })}
-    </ScrollView>
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Text style={styles.title}>Test Results for '{suiteName}' Suite</Text>
+      </View>
+      <View style={styles.showMenu}>
+        <View style={styles.showMenuItem}>
+          <Checkbox
+            value={showFailed}
+            onValueChange={() => setShowFailed(!showFailed)}
+          />
+          <Text style={styles.showMenuLabel}>Show Failed</Text>
+        </View>
+        <View style={styles.showMenuItem}>
+          <Checkbox
+            value={showPassed}
+            onValueChange={() => setShowPassed(!showPassed)}
+          />
+          <Text style={styles.showMenuLabel}>Show Passed</Text>
+        </View>
+      </View>
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {results.map((it, index) => {
+          let InnerElement = <View />;
+          if (showPassed && it.type === 'correct') {
+            InnerElement = (
+              <CorrectResultItem key={index} description={it.description} />
+            );
+          }
+          if (showFailed && it.type === 'incorrect') {
+            const errorMsg = it.errorMsg || ''; // Trick TS - How to do it as it should be? :)
+            InnerElement = (
+              <IncorrectResultItem
+                key={index}
+                description={it.description}
+                errorMsg={errorMsg}
+              />
+            );
+          }
+          if (it.type === 'grouping') {
+            InnerElement = <Suite description={it.description} />;
+          }
+          return InnerElement;
+        })}
+      </ScrollView>
+    </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
-  testList: {
-    flex: 9,
-  },
-  menu: {
+  container: {
     flex: 1,
+    paddingBottom: 30,
+  },
+  title: {
+    textAlign: 'center',
+    paddingVertical: 5,
+  },
+  showMenu: {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-evenly',
+    paddingBottom: 5,
+  },
+  showMenuItem: {
+    flexDirection: 'row',
     alignItems: 'center',
-    alignContent: 'center',
-    justifyContent: 'center',
+  },
+  showMenuLabel: {
+    paddingLeft: 5,
   },
   scroll: {
     width: '100%',
   },
   scrollContent: {
-    padding: 5,
+    paddingHorizontal: 5,
   },
 });
diff --git a/example/src/navigators/children/TestingScreen/TestingScreenProps.ts b/example/src/navigators/children/TestingScreen/TestingScreenProps.ts
@@ -1,5 +1,6 @@
 import type { TestResult } from '../../../types/TestResults';
 
 export type TestingScreenProps = {
-  results: Array<TestResult>;
+  results: TestResult[];
+  suiteName: string;
 };
diff --git a/example/src/testing/Tests/HmacTests/HmacTests.ts b/example/src/testing/Tests/HmacTests/HmacTests.ts
@@ -27,7 +27,10 @@ describe('hmac', () => {
     data: string | string[] | Buffer,
     expected: any
   ) {
-    it(`testHmac ${algo} ${key} ${data}`, () => {
+    const nameKey = key.toString().replace(/\s/g, '');
+    const nameData = data.toString().replace(/\s/g, '');
+
+    it(`testHmac ${algo} ${nameKey} ${nameData}`, () => {
       if (!Array.isArray(data)) data = [data] as any;
 
       // If the key is a Buffer, test Hmac with a key object as well.