Add e2e test for Image resize method (facebook#46982)

Summary: Pull Request resolved: facebook#46982 E2E test setup for each of the `resizeMethod` methods for Image on Android Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D64136839 fbshipit-source-id: 876939a50243836030401c6456410f119abe01b5
dream-sports-labs · Oct 14, 2024 · 6e120b3 · 6e120b3
1 parent e08c7eb
commit 6e120b3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 24 deletions.
diff --git a/packages/rn-tester/js/components/RNTesterModuleContainer.js b/packages/rn-tester/js/components/RNTesterModuleContainer.js
@@ -17,7 +17,7 @@ import {type RNTesterTheme, RNTesterThemeContext} from './RNTesterTheme';
 import RNTPressableRow from './RNTPressableRow';
 import RNTTestDetails from './RNTTestDetails';
 import * as React from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
+import {Platform, ScrollView, StyleSheet, Text, View} from 'react-native';
 
 const RNTesterBlock = require('./RNTesterBlock');
 const RNTesterExampleFilter = require('./RNTesterExampleFilter');
@@ -62,18 +62,6 @@ export default function RNTesterModuleContainer(props: Props): React.Node {
     );
   };
 
-  // TODO remove this case
-  if (module.examples.length === 1) {
-    const description = module.examples[0].description ?? module.description;
-    const ModuleSingleExample = module.examples[0].render;
-    return (
-      <>
-        <Header description={description} theme={theme} />
-        <ModuleSingleExample />
-      </>
-    );
-  }
-
   const filter = ({example: e, filterRegex}: $FlowFixMe) =>
     filterRegex.test(e.title);
 
@@ -87,17 +75,26 @@ export default function RNTesterModuleContainer(props: Props): React.Node {
     },
   ];
 
-  return example != null ? (
+  const singleModule =
+    example ?? (module.examples.length === 1 ? module.examples[0] : null);
+
+  return singleModule != null ? (
     <>
       <RNTTestDetails
-        title={example.title}
-        description={example.description}
-        expect={example.expect}
+        title={singleModule.title}
+        description={singleModule.description}
+        expect={singleModule.expect}
         theme={theme}
       />
-      <View style={styles.examplesContainer} testID="example-container">
-        <example.render />
-      </View>
+      {singleModule.scrollable === true ? (
+        <ScrollView style={styles.examplesContainer} testID="example-container">
+          <singleModule.render />
+        </ScrollView>
+      ) : (
+        <View style={styles.examplesContainer} testID="example-container">
+          <singleModule.render />
+        </View>
+      )}
     </>
   ) : (
     <>

diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js
@@ -1651,10 +1651,17 @@ exports.examples = [
   },
   {
     title: 'Large image with different resize methods',
+    name: 'resize-method',
     description:
       'Demonstrating the effects of loading a large image with different resize methods',
+    scrollable: true,
     render: function (): React.Node {
-      const methods = ['auto', 'resize', 'scale', 'none'];
+      const methods: Array<ImageProps['resizeMethod']> = [
+        'auto',
+        'resize',
+        'scale',
+        'none',
+      ];
       // Four copies of the same image so we don't serve cached copies of the same image
       const images = [
         require('../../assets/large-image-1.png'),
@@ -1663,10 +1670,13 @@ exports.examples = [
         require('../../assets/large-image-4.png'),
       ];
       return (
-        <View>
+        <View testID="resize-method-example">
           {methods.map((method, index) => (
-            <View key={method} style={{display: 'flex', overflow: 'hidden'}}>
-              <RNTesterText>`{method}`</RNTesterText>
+            <View
+              key={method}
+              style={{display: 'flex', overflow: 'hidden'}}
+              testID={`resize-method-example-${method ?? ''}`}>
+              <RNTesterText>{method}</RNTesterText>
               <Image
                 resizeMethod={method}
                 source={images[index]}

diff --git a/packages/rn-tester/js/types/RNTesterTypes.js b/packages/rn-tester/js/types/RNTesterTypes.js
@@ -17,6 +17,7 @@ export type RNTesterModuleExample = $ReadOnly<{|
   description?: string,
   expect?: string,
   hidden?: boolean,
+  scrollable?: boolean,
   render: ({testID?: ?string}) => React.Node,
 |}>;