Skip to content

Commit 3edcde1

Browse files
Abbondanzometa-codesync[bot]
authored andcommitted
Add Image.getSize device coverage
Summary: 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 Differential Revision: D104535939
1 parent fe6b355 commit 3edcde1

2 files changed

Lines changed: 120 additions & 0 deletions

File tree

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,13 @@ appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebo
1010
- tapOn:
1111
id: "Image"
1212
- assertVisible: "Plain Network Image with `source` prop."
13+
- scrollUntilVisible:
14+
element:
15+
text: "Image.getSize"
16+
direction: DOWN
17+
speed: 40
18+
- tapOn: "Image.getSize"
19+
- assertVisible: "Calling Image.getSize for 3 remote images."
20+
- extendedWaitUntil:
21+
visible: "1 Pass"
22+
timeout: 30000

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

Lines changed: 110 additions & 0 deletions
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';
@@ -673,6 +675,102 @@ const smallImage = {
673675
uri: IMAGE1,
674676
};
675677

678+
const GET_SIZE_TEST_IMAGES: ReadonlyArray<{
679+
expectedHeight: number,
680+
expectedWidth: number,
681+
name: string,
682+
uri: string,
683+
}> = [
684+
{
685+
expectedHeight: 64,
686+
expectedWidth: 64,
687+
name: 'small PNG',
688+
uri: 'https://reactnative.dev/img/tiny_logo.png',
689+
},
690+
{
691+
expectedHeight: 1500,
692+
expectedWidth: 2250,
693+
name: 'large JPEG',
694+
uri: 'https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
695+
},
696+
{
697+
expectedHeight: 1200,
698+
expectedWidth: 1800,
699+
name: 'EXIF rotated JPEG',
700+
uri: 'https://raw.githubusercontent.com/recurser/exif-orientation-examples/master/Landscape_6.jpg',
701+
},
702+
];
703+
704+
function getImageSize(uri: string): Promise<{height: number, width: number}> {
705+
return new Promise((resolve, reject) => {
706+
Image.getSize(uri, (width, height) => resolve({height, width}), reject);
707+
});
708+
}
709+
710+
function ImageGetSizePlatformTest(props: PlatformTestComponentBaseProps) {
711+
const {harness} = props;
712+
const asyncTest = harness.useAsyncTest(
713+
'Image.getSize resolves source dimensions',
714+
30000,
715+
);
716+
717+
useEffect(() => {
718+
let cancelled = false;
719+
720+
async function runTest() {
721+
try {
722+
const results = await Promise.all(
723+
GET_SIZE_TEST_IMAGES.map(async image => ({
724+
...image,
725+
...(await getImageSize(image.uri)),
726+
})),
727+
);
728+
729+
if (cancelled) {
730+
return;
731+
}
732+
733+
for (const result of results) {
734+
asyncTest.step(({assert_equals}) => {
735+
assert_equals(
736+
result.width,
737+
result.expectedWidth,
738+
`${result.name} width`,
739+
);
740+
assert_equals(
741+
result.height,
742+
result.expectedHeight,
743+
`${result.name} height`,
744+
);
745+
});
746+
}
747+
} catch (error: unknown) {
748+
if (!cancelled) {
749+
asyncTest.step(({assert_true}) => {
750+
assert_true(false, `Image.getSize failed: ${String(error)}`);
751+
});
752+
}
753+
} finally {
754+
if (!cancelled) {
755+
asyncTest.done();
756+
}
757+
}
758+
}
759+
760+
void runTest();
761+
762+
return () => {
763+
cancelled = true;
764+
};
765+
}, [asyncTest]);
766+
767+
return (
768+
<RNTesterText>
769+
Calling Image.getSize for {GET_SIZE_TEST_IMAGES.length} remote images.
770+
</RNTesterText>
771+
);
772+
}
773+
676774
const styles = StyleSheet.create({
677775
base: {
678776
width: 64,
@@ -1564,6 +1662,18 @@ exports.examples = [
15641662
return <ImageSizeExample source={fullImage} />;
15651663
},
15661664
},
1665+
{
1666+
title: 'Image.getSize',
1667+
render: function (): React.Node {
1668+
return (
1669+
<RNTesterPlatformTest
1670+
title="Image.getSize"
1671+
description="Calls Image.getSize and verifies the source dimensions returned by native image metadata."
1672+
component={ImageGetSizePlatformTest}
1673+
/>
1674+
);
1675+
},
1676+
},
15671677
{
15681678
title: 'MultipleSourcesExample',
15691679
description:

0 commit comments

Comments
 (0)