Add option to only see failed tests

Summary: Changelog: [Internal] - Add an option to only see failed tests for PointerEvents web platform tests

Reviewed By: mdvacca

Differential Revision: D40281369

fbshipit-source-id: 638879b39ca66c11e722e6140c631dacfc98ee34

packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js

@@ -25,6 +25,7 @@ import * as React from 'react';
 import {useMemo, useState, useCallback} from 'react';
 import {
   Button,
+  Switch,
   View,
   Text,
   StyleSheet,
@@ -47,9 +48,11 @@ const DISPLAY_STATUS_MAPPING: {[PlatformTestResultStatus]: string} = {
 type FilterModalProps = $ReadOnly<{
   filterText: string,
   setFilterText: (newFilterText: string) => void,
+  filterFail: boolean,
+  setFilterFail: (newFilterFail: boolean) => void,
 }>;
 function FilterModalButton(props: FilterModalProps) {
-  const {filterText, setFilterText} = props;
+  const {filterText, setFilterText, filterFail, setFilterFail} = props;
 
   const [modalVisible, setModalVisible] = useState(false);
   const [pendingFilterText, setPendingFilterText] = useState(filterText);
@@ -68,6 +71,13 @@ function FilterModalButton(props: FilterModalProps) {
     setModalVisible(false);
   }, []);
 
+  const onFilterFailStatus = useCallback(
+    value => {
+      setFilterFail(value);
+    },
+    [setFilterFail],
+  );
+
   const onPendingTextChange = useCallback((newText: string) => {
     setPendingFilterText(newText);
   }, []);
@@ -100,6 +110,15 @@ function FilterModalButton(props: FilterModalProps) {
                   onChangeText={onPendingTextChange}
                   onSubmitEditing={onFilterSubmit}
                 />
+                <View style={styles.filterFail}>
+                  <Text>
+                    {filterFail ? 'Filter All Status' : 'Filter Only Failed'}
+                  </Text>
+                  <Switch
+                    value={filterFail}
+                    onValueChange={onFilterFailStatus}
+                  />
+                </View>
               </View>
               <View style={styles.filterModalActionsContainer}>
                 <Button title="Cancel" onPress={onFilterCancel} />
@@ -175,15 +194,20 @@ export default function RNTesterPlatformTestResultView(
   const {numPending, reset, results, style} = props;
 
   const [filterText, setFilterText] = useState('');
+  const [filterFailStatus, setFilterFailStatus] = useState(false);
 
   const filteredResults = useMemo(() => {
+    const statusFiltered = filterFailStatus
+      ? results.filter(result => result.status === 'FAIL')
+      : results;
+
     if (filterText === '') {
-      return results;
+      return statusFiltered;
     }
-    return results.filter(result =>
+    return statusFiltered.filter(result =>
       result.name.toLowerCase().includes(filterText.toLowerCase()),
     );
-  }, [filterText, results]);
+  }, [filterFailStatus, filterText, results]);
 
   const {numPass, numFail, numError, numSkipped} = useMemo(
     () =>
@@ -213,6 +237,7 @@ export default function RNTesterPlatformTestResultView(
   const [resultsExpanded, setResultsExpanded] = useState(false);
 
   const handleReset = useCallback(() => {
+    setFilterFailStatus(false);
     setFilterText('');
     reset();
     setResultsExpanded(false);
@@ -226,6 +251,11 @@ export default function RNTesterPlatformTestResultView(
     setResultsExpanded(false);
   }, []);
 
+  const filteredNotice = `Filtered${filterFailStatus ? ' (Failed)' : ''}${
+    filterText !== '' ? `: ${filterText}` : ''
+  }
+  `;
+
   return (
     <>
       <RNTesterPlatformTestMinimizedResultView
@@ -250,11 +280,7 @@ export default function RNTesterPlatformTestResultView(
           <View style={styles.resultsHeader}>
             <View style={styles.titleContainer}>
               <Text style={styles.title}>Results</Text>
-              {filterText !== '' ? (
-                <Text style={styles.filteredText}>
-                  (Filtered: '{filterText}')
-                </Text>
-              ) : null}
+              <Text style={styles.filteredText}>{filteredNotice}</Text>
               <Text style={styles.summaryContainer}>
                 <RNTesterPlatformTestResultsText
                   numError={numError}
@@ -269,6 +295,8 @@ export default function RNTesterPlatformTestResultView(
               <FilterModalButton
                 filterText={filterText}
                 setFilterText={setFilterText}
+                filterFail={filterFailStatus}
+                setFilterFail={setFilterFailStatus}
               />
               <View style={styles.buttonSpacer} />
               <Button title="Reset" onPress={handleReset} />
@@ -378,6 +406,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  filterFail: {
+    alignItems: 'center',
+    padding: 10,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
   passText: {
     color: 'green',
   },