diff --git a/packages/rn-tester/.maestro/image.yml b/packages/rn-tester/.maestro/image.yml index f963352f4b51..c344b84ab7eb 100644 --- a/packages/rn-tester/.maestro/image.yml +++ b/packages/rn-tester/.maestro/image.yml @@ -1,12 +1,27 @@ appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp --- -- launchApp -- assertVisible: "Components" -- scrollUntilVisible: - element: - id: "Image" - direction: DOWN - speed: 40 +- runFlow: ./helpers/launch-app-and-search.yml +- inputText: + text: "Image" +- assertVisible: + id: "Image" - tapOn: id: "Image" - assertVisible: "Plain Network Image with `source` prop." +- assertVisible: + id: "example_search" +- tapOn: + id: "example_search" +- inputText: + text: "Image.getSize" +- hideKeyboard +- tapOn: + id: "platform-test-results" +- assertVisible: "Results" +- extendedWaitUntil: + visible: "Image.getSize resolves source dimensions" + timeout: 30000 +- assertVisible: + id: "platform-test-pass-count-1" +- assertVisible: + id: "platform-test-fail-count-0" diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestMinimizedResultView.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestMinimizedResultView.js index e09b24d33e8b..d4cf0f50e115 100644 --- a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestMinimizedResultView.js +++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestMinimizedResultView.js @@ -33,9 +33,12 @@ export default function RNTesterPlatformTestMinimizedResultView({ style, }: Props): React.MixedElement { return ( - + - + - + diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js index 0b814621eb69..b71ce8beb50e 100644 --- a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js +++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js @@ -275,7 +275,7 @@ export default function RNTesterPlatformTestResultView( Results {filteredNotice} - + - + - + {numPass} Pass - {' '} - + {numFail} Fail {numSkipped > 0 ? ( - <> - {' '} - - {numSkipped} Skipped - - + + {numSkipped} Skipped + ) : null} {numError > 0 ? ( - <> - {' '} - - {numError} Error - - + + {numError} Error + ) : null} {numPending > 0 ? ( - <> - {' '} - - {numPending} Pending - - + + {numPending} Pending + ) : null} ); @@ -75,4 +69,7 @@ const styles = StyleSheet.create({ skippedText: { color: 'blue', }, + statText: { + marginEnd: 8, + }, }); diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index 1147e6bf7d1c..a628ed492c22 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -11,10 +11,12 @@ 'use strict'; import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; +import type {PlatformTestComponentBaseProps} from '../Experimental/PlatformTest/RNTesterPlatformTestTypes'; import type {ImageProps, LayoutChangeEvent} from 'react-native'; import RNTesterButton from '../../components/RNTesterButton'; import RNTesterText from '../../components/RNTesterText'; +import RNTesterPlatformTest from '../Experimental/PlatformTest/RNTesterPlatformTest'; import ImageCapInsetsExample from './ImageCapInsetsExample'; import * as React from 'react'; import {useEffect, useState} from 'react'; @@ -567,7 +569,7 @@ class OnPartialLoadExample extends React.Component< = [ + { + expectedHeight: 492, + expectedWidth: 960, + uri: IMAGE1, + name: 'large PNG', + }, + { + expectedHeight: 3000, + expectedWidth: 4500, + uri: 'https://www.facebook.com/assets/react_native_oss_tests/large-image@1x.jpg', + name: 'large JPEG with density 2', + }, + { + expectedHeight: 1200, + expectedWidth: 1800, + // Rotated 90 degrees counter-clockwise + uri: 'https://www.facebook.com/assets/react_native_oss_tests/exif-6@1x.jpg', + name: 'EXIF rotated JPEG', + }, +]; + +function getImageSize(uri: string): Promise<{height: number, width: number}> { + return new Promise((resolve, reject) => { + Image.getSize(uri, (width, height) => resolve({height, width}), reject); + }); +} + +function ImageGetSizePlatformTest(props: PlatformTestComponentBaseProps) { + const {harness} = props; + const asyncTest = harness.useAsyncTest( + 'Image.getSize resolves source dimensions', + 30000, + ); + + useEffect(() => { + let cancelled = false; + + Promise.all( + GET_SIZE_TEST_IMAGES.map(image => + getImageSize(image.uri).then(size => ({image, size})), + ), + ) + .then(results => { + if (cancelled) { + return; + } + + for (const result of results) { + asyncTest.step(({assert_equals}) => { + assert_equals( + result.size.width, + result.image.expectedWidth, + `${result.image.name} width`, + ); + assert_equals( + result.size.height, + result.image.expectedHeight, + `${result.image.name} height`, + ); + }); + } + }) + .catch((error: unknown) => { + if (!cancelled) { + asyncTest.step(({assert_true}) => { + assert_true(false, `Image.getSize failed: ${String(error)}`); + }); + } + }) + .finally(() => { + if (!cancelled) { + asyncTest.done(); + } + }); + + return () => { + cancelled = true; + }; + }, [asyncTest]); + + return ( + + Calling Image.getSize for {GET_SIZE_TEST_IMAGES.length} remote images. + + ); +} + const styles = StyleSheet.create({ base: { width: 64, @@ -1564,6 +1659,18 @@ exports.examples = [ return ; }, }, + { + title: 'Image.getSize', + render: function (): React.Node { + return ( + + ); + }, + }, { title: 'MultipleSourcesExample', description: