diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTest.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTest.js new file mode 100644 index 00000000000..4cff62e3743 --- /dev/null +++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTest.js @@ -0,0 +1,74 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +import type {PlatformTestComponentBaseProps} from './RNTesterPlatformTestTypes'; + +import * as React from 'react'; +import {StyleSheet, View, Text, ScrollView} from 'react-native'; + +import RNTesterPlatformTestInstructions from './RNTesterPlatformTestInstructions'; +import usePlatformTestHarness from './usePlatformTestHarness'; +import RNTesterPlatformTestResultView from './RNTesterPlatformTestResultView'; + +type Props = $ReadOnly<{| + title: string, + description: string, + instructions?: $ReadOnlyArray, + component: React.ComponentType, +|}>; + +export default function RNTesterPlatformTest(props: Props): React.MixedElement { + const { + title, + description, + instructions, + component: UnderTestComponent, + } = props; + + const {harness, reset, results, testKey} = usePlatformTestHarness(); + + return ( + + {title} + {description} + + + + + + + ); +} + +const styles = StyleSheet.create({ + block: { + marginBottom: 8, + }, + description: { + fontSize: 16, + }, + textBlock: { + marginBottom: 8, + }, + root: { + padding: 8, + }, + title: { + fontSize: 32, + fontWeight: '700', + }, +}); diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestInstructions.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestInstructions.js new file mode 100644 index 00000000000..74c7a9ed956 --- /dev/null +++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestInstructions.js @@ -0,0 +1,44 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +import * as React from 'react'; +import {View, Text, StyleSheet} from 'react-native'; + +import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'; + +type Props = $ReadOnly<{| + instructions?: $ReadOnlyArray, + style?: ?ViewStyleProp, +|}>; +export default function RNTesterPlatformTestInstructions({ + instructions, + style, +}: Props): React.MixedElement | null { + if (instructions == null) { + return null; + } + return ( + + {instructions.map((instruction, idx) => { + return ( + + {idx + 1}. {instruction} + + ); + })} + + ); +} + +const styles = StyleSheet.create({ + instructionText: { + fontSize: 16, + }, +}); diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js new file mode 100644 index 00000000000..a4be4d8d666 --- /dev/null +++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js @@ -0,0 +1,184 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +import type { + ViewStyleProp, + TextStyle, +} from 'react-native/Libraries/StyleSheet/StyleSheet'; +import type { + PlatformTestResult, + PlatformTestResultStatus, +} from './RNTesterPlatformTestTypes'; + +import * as React from 'react'; +import {useMemo} from 'react'; +import {Button, View, Text, StyleSheet} from 'react-native'; + +const DISPLAY_STATUS_MAPPING: {[PlatformTestResultStatus]: string} = { + PASS: 'Pass', + FAIL: 'Fail', + ERROR: 'Error', +}; + +type Props = $ReadOnly<{| + reset: () => void, + results: $ReadOnlyArray, + style?: ?ViewStyleProp, +|}>; +export default function RNTesterPlatformTestResultView( + props: Props, +): React.MixedElement { + const {reset, results, style} = props; + + const {numPass, numFail, numError} = useMemo( + () => + results.reduce( + (acc, result) => { + switch (result.status) { + case 'PASS': + return {...acc, numPass: acc.numPass + 1}; + case 'FAIL': + return {...acc, numFail: acc.numFail + 1}; + case 'ERROR': + return {...acc, numError: acc.numError + 1}; + } + }, + { + numPass: 0, + numFail: 0, + numError: 0, + }, + ), + [results], + ); + + return ( + + + Results +