|
11 | 11 | 'use strict'; |
12 | 12 |
|
13 | 13 | import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; |
| 14 | +import type {PlatformTestComponentBaseProps} from '../Experimental/PlatformTest/RNTesterPlatformTestTypes'; |
14 | 15 | import type {ImageProps, LayoutChangeEvent} from 'react-native'; |
15 | 16 |
|
16 | 17 | import RNTesterButton from '../../components/RNTesterButton'; |
17 | 18 | import RNTesterText from '../../components/RNTesterText'; |
| 19 | +import RNTesterPlatformTest from '../Experimental/PlatformTest/RNTesterPlatformTest'; |
18 | 20 | import ImageCapInsetsExample from './ImageCapInsetsExample'; |
19 | 21 | import * as React from 'react'; |
20 | 22 | import {useEffect, useState} from 'react'; |
@@ -673,6 +675,102 @@ const smallImage = { |
673 | 675 | uri: IMAGE1, |
674 | 676 | }; |
675 | 677 |
|
| 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 | + |
676 | 774 | const styles = StyleSheet.create({ |
677 | 775 | base: { |
678 | 776 | width: 64, |
@@ -1564,6 +1662,18 @@ exports.examples = [ |
1564 | 1662 | return <ImageSizeExample source={fullImage} />; |
1565 | 1663 | }, |
1566 | 1664 | }, |
| 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 | + }, |
1567 | 1677 | { |
1568 | 1678 | title: 'MultipleSourcesExample', |
1569 | 1679 | description: |
|
0 commit comments