Skip to content

Commit 3abe228

Browse files
Abbondanzometa-codesync[bot]
Abbondanzo
authored and
meta-codesync[bot]
committed
Add Image.getSize device coverage (#56746)
Summary: Pull Request resolved: #56746 Add an RNTester PlatformTest case that calls Image.getSize against a small PNG, a large JPEG, and an EXIF-rotated JPEG, then verifies the dimensions reported by native image metadata. Extend the existing Image Maestro flow to open the new test and wait for the pass result, so the same flow can run against Android and iOS RNTester builds. Changelog: [Internal][Added] - Add RNTester device coverage for Image.getSize dimensions Reviewed By: christophpurrer Differential Revision: D104535939 fbshipit-source-id: 4f181ce7320af679dd4c409a5c813555914e580c
1 parent 2c6cb27 commit 3abe228

5 files changed

Lines changed: 156 additions & 34 deletions

File tree

‎packages/rn-tester/.maestro/image.yml‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,27 @@
11
appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
22
---
3-
- launchApp
4-
- assertVisible: "Components"
5-
- scrollUntilVisible:
6-
element:
7-
id: "Image"
8-
direction: DOWN
9-
speed: 40
3+
- runFlow: ./helpers/launch-app-and-search.yml
4+
- inputText:
5+
text: "Image"
6+
- assertVisible:
7+
id: "Image"
108
- tapOn:
119
id: "Image"
1210
- assertVisible: "Plain Network Image with `source` prop."
11+
- assertVisible:
12+
id: "example_search"
13+
- tapOn:
14+
id: "example_search"
15+
- inputText:
16+
text: "Image.getSize"
17+
- hideKeyboard
18+
- tapOn:
19+
id: "platform-test-results"
20+
- assertVisible: "Results"
21+
- extendedWaitUntil:
22+
visible: "Image.getSize resolves source dimensions"
23+
timeout: 30000
24+
- assertVisible:
25+
id: "platform-test-pass-count-1"
26+
- assertVisible:
27+
id: "platform-test-fail-count-0"

‎packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestMinimizedResultView.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,20 @@ export default function RNTesterPlatformTestMinimizedResultView({
3333
style,
3434
}: Props): React.MixedElement {
3535
return (
36-
<TouchableHighlight onPress={onPress} style={[styles.root, style]}>
36+
<TouchableHighlight
37+
testID="platform-test-results"
38+
onPress={onPress}
39+
style={[styles.root, style]}>
3740
<View style={styles.innerContainer}>
38-
<Text style={styles.statsContainer}>
41+
<View style={styles.statsContainer}>
3942
<RNTesterPlatformTestResultsText
4043
numError={numError}
4144
numFail={numFail}
4245
numPass={numPass}
4346
numPending={numPending}
4447
numSkipped={numSkipped}
4548
/>
46-
</Text>
49+
</View>
4750
<Text style={styles.caret}>⌃</Text>
4851
</View>
4952
</TouchableHighlight>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -275,15 +275,15 @@ export default function RNTesterPlatformTestResultView(
275275
<View style={styles.titleContainer}>
276276
<Text style={styles.title}>Results</Text>
277277
<Text style={styles.filteredText}>{filteredNotice}</Text>
278-
<Text style={styles.summaryContainer}>
278+
<View style={styles.summaryContainer}>
279279
<RNTesterPlatformTestResultsText
280280
numError={numError}
281281
numFail={numFail}
282282
numPass={numPass}
283283
numPending={numPending}
284284
numSkipped={numSkipped}
285285
/>
286-
</Text>
286+
</View>
287287
</View>
288288
<View style={styles.actionsContainer}>
289289
<FilterModalButton

‎packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultsText.js‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -24,36 +24,30 @@ export default function RNTesterPlatformTestResultsText(
2424
const {numPass, numFail, numError, numPending, numSkipped} = props;
2525
return (
2626
<>
27-
<Text>
27+
<Text
28+
testID={`platform-test-pass-count-${numPass}`}
29+
style={styles.statText}>
2830
{numPass} <Text style={styles.passText}>Pass</Text>
2931
</Text>
30-
{' '}
31-
<Text>
32+
<Text
33+
testID={`platform-test-fail-count-${numFail}`}
34+
style={styles.statText}>
3235
{numFail} <Text style={styles.failText}>Fail</Text>
3336
</Text>
3437
{numSkipped > 0 ? (
35-
<>
36-
{' '}
37-
<Text>
38-
{numSkipped} <Text style={styles.skippedText}>Skipped</Text>
39-
</Text>
40-
</>
38+
<Text style={styles.statText}>
39+
{numSkipped} <Text style={styles.skippedText}>Skipped</Text>
40+
</Text>
4141
) : null}
4242
{numError > 0 ? (
43-
<>
44-
{' '}
45-
<Text>
46-
{numError} <Text style={styles.errorText}>Error</Text>
47-
</Text>
48-
</>
43+
<Text style={styles.statText}>
44+
{numError} <Text style={styles.errorText}>Error</Text>
45+
</Text>
4946
) : null}
5047
{numPending > 0 ? (
51-
<>
52-
{' '}
53-
<Text>
54-
{numPending} <Text style={styles.pendingText}>Pending</Text>
55-
</Text>
56-
</>
48+
<Text style={styles.statText}>
49+
{numPending} <Text style={styles.pendingText}>Pending</Text>
50+
</Text>
5751
) : null}
5852
</>
5953
);
@@ -75,4 +69,7 @@ const styles = StyleSheet.create({
7569
skippedText: {
7670
color: 'blue',
7771
},
72+
statText: {
73+
marginEnd: 8,
74+
},
7875
});

‎packages/rn-tester/js/examples/Image/ImageExample.js‎

Lines changed: 108 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@
1111
'use strict';
1212

1313
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
14+
import type {PlatformTestComponentBaseProps} from '../Experimental/PlatformTest/RNTesterPlatformTestTypes';
1415
import type {ImageProps, LayoutChangeEvent} from 'react-native';
1516

1617
import RNTesterButton from '../../components/RNTesterButton';
1718
import RNTesterText from '../../components/RNTesterText';
19+
import RNTesterPlatformTest from '../Experimental/PlatformTest/RNTesterPlatformTest';
1820
import ImageCapInsetsExample from './ImageCapInsetsExample';
1921
import * as React from 'react';
2022
import {useEffect, useState} from 'react';
@@ -567,7 +569,7 @@ class OnPartialLoadExample extends React.Component<
567569
</RNTesterText>
568570
<Image
569571
source={{
570-
uri: `https://images.pexels.com/photos/671557/pexels-photo-671557.jpeg?&buster=${Math.random()}`,
572+
uri: `https://www.facebook.com/assets/react_native_oss_tests/large-image@1x.jpg&buster=${Math.random()}`,
571573
}}
572574
onPartialLoad={this.partialLoadHandler}
573575
style={styles.base}
@@ -673,6 +675,99 @@ const smallImage = {
673675
uri: IMAGE1,
674676
};
675677

678+
const GET_SIZE_TEST_IMAGES: ReadonlyArray<{
679+
expectedHeight: number,
680+
expectedWidth: number,
681+
uri: string,
682+
name: string,
683+
}> = [
684+
{
685+
expectedHeight: 492,
686+
expectedWidth: 960,
687+
uri: IMAGE1,
688+
name: 'large PNG',
689+
},
690+
{
691+
expectedHeight: 3000,
692+
expectedWidth: 4500,
693+
uri: 'https://www.facebook.com/assets/react_native_oss_tests/large-image@1x.jpg',
694+
name: 'large JPEG with density 2',
695+
},
696+
{
697+
expectedHeight: 1200,
698+
expectedWidth: 1800,
699+
// Rotated 90 degrees counter-clockwise
700+
uri: 'https://www.facebook.com/assets/react_native_oss_tests/exif-6@1x.jpg',
701+
name: 'EXIF rotated JPEG',
702+
},
703+
];
704+
705+
function getImageSize(uri: string): Promise<{height: number, width: number}> {
706+
return new Promise((resolve, reject) => {
707+
Image.getSize(uri, (width, height) => resolve({height, width}), reject);
708+
});
709+
}
710+
711+
function ImageGetSizePlatformTest(props: PlatformTestComponentBaseProps) {
712+
const {harness} = props;
713+
const asyncTest = harness.useAsyncTest(
714+
'Image.getSize resolves source dimensions',
715+
30000,
716+
);
717+
718+
useEffect(() => {
719+
let cancelled = false;
720+
721+
Promise.all(
722+
GET_SIZE_TEST_IMAGES.map(image =>
723+
getImageSize(image.uri).then(size => ({image, size})),
724+
),
725+
)
726+
.then(results => {
727+
if (cancelled) {
728+
return;
729+
}
730+
731+
for (const result of results) {
732+
asyncTest.step(({assert_equals}) => {
733+
assert_equals(
734+
result.size.width,
735+
result.image.expectedWidth,
736+
`${result.image.name} width`,
737+
);
738+
assert_equals(
739+
result.size.height,
740+
result.image.expectedHeight,
741+
`${result.image.name} height`,
742+
);
743+
});
744+
}
745+
})
746+
.catch((error: unknown) => {
747+
if (!cancelled) {
748+
asyncTest.step(({assert_true}) => {
749+
assert_true(false, `Image.getSize failed: ${String(error)}`);
750+
});
751+
}
752+
})
753+
.finally(() => {
754+
if (!cancelled) {
755+
asyncTest.done();
756+
}
757+
});
758+
759+
return () => {
760+
cancelled = true;
761+
};
762+
}, [asyncTest]);
763+
764+
return (
765+
<RNTesterText>
766+
Calling Image.getSize for {GET_SIZE_TEST_IMAGES.length} remote images.
767+
</RNTesterText>
768+
);
769+
}
770+
676771
const styles = StyleSheet.create({
677772
base: {
678773
width: 64,
@@ -1564,6 +1659,18 @@ exports.examples = [
15641659
return <ImageSizeExample source={fullImage} />;
15651660
},
15661661
},
1662+
{
1663+
title: 'Image.getSize',
1664+
render: function (): React.Node {
1665+
return (
1666+
<RNTesterPlatformTest
1667+
title="Image.getSize"
1668+
description="Calls Image.getSize and verifies the source dimensions returned by native image metadata."
1669+
component={ImageGetSizePlatformTest}
1670+
/>
1671+
);
1672+
},
1673+
},
15671674
{
15681675
title: 'MultipleSourcesExample',
15691676
description:

0 commit comments

Comments
 (0)