feat: out-of-bounds screenshots (#64)

This pull request updates the screenshot-capturing logic to allow capturing out-of-bounds views along with their children. The new logic is enabled only when views actually extend out of bounds, as it has a limitation: view flattening must be turned off for it to work correctly. To address this, a new configuration option has been added to disable flattening globally.

Author: V3RON

apps/playground/ios/Podfile.lock

@@ -5,7 +5,7 @@ PODS:
   - FBLazyVector (0.82.1)
   - fmt (11.0.2)
   - glog (0.3.5)
-  - HarnessUI (1.0.0-alpha.20):
+  - HarnessUI (1.0.0-alpha.24):
     - boost
     - DoubleConversion
     - fast_float
@@ -2592,7 +2592,7 @@ SPEC CHECKSUMS:
   FBLazyVector: 0aa6183b9afe3c31fc65b5d1eeef1f3c19b63bfa
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
-  HarnessUI: 2957b94c9c4a7e6e54b636229f4aa5e3809936bf
+  HarnessUI: 9593f42f9c8f68200ccd07a6ed64d02de42637b1
   hermes-engine: 273e30e7fb618279934b0b95ffab60ecedb7acf5
   RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
   RCTDeprecation: f17e2ebc07876ca9ab8eb6e4b0a4e4647497ae3a

apps/playground/rn-harness.config.mjs

@@ -69,4 +69,5 @@ export default {
   resetEnvironmentBetweenTestFiles: true,
   unstable__skipAlreadyIncludedModules: false,
   forwardClientLogs: true,
+  disableViewFlattening: true,
 };

apps/playground/src/__tests__/ui/__image_snapshots__/android/out-of-bounds.png

@@ -0,0 +1,25 @@
+import { describe, test, render, expect } from "react-native-harness";
+import { View } from "react-native";
+import { screen } from "@react-native-harness/ui";
+
+const COLORS = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink', 'brown', 'gray', 'black'];
+
+describe('Out of bounds', () => {
+  	test('should screenshot specific element only', async () => {
+		await render(
+		<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+			<View testID="out-of-bounds" style={{ width: 1000, height: 100, backgroundColor: 'yellow', flexDirection: 'row' }}>
+				{Array.from({ length: 10 }).map((_, index) => (
+					<View key={index} style={{ width: 100, height: 100, backgroundColor: COLORS[index % COLORS.length] }} />
+				))}
+			</View>
+		</View>
+		);
+
+		const element = await screen.findByTestId('out-of-bounds');
+		const screenshot = await screen.screenshot(element);
+		await expect(screenshot).toMatchImageSnapshot({
+			name: 'out-of-bounds',
+		});
+	});
+});

apps/playground/src/__tests__/ui/__image_snapshots__/chromium/out-of-bounds.png

@@ -19,7 +19,8 @@
     "babel-plugin-istanbul": "^7.0.1"
   },
   "peerDependencies": {
-    "@babel/core": "^7.22.0"
+    "@babel/core": "^7.22.0",
+    "@babel/plugin-transform-react-jsx": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.22.0",

apps/playground/src/__tests__/ui/__image_snapshots__/ios/out-of-bounds.png

@@ -21,6 +21,13 @@ export const rnHarnessPlugins = [
   '@babel/plugin-transform-class-static-block',
   resolveWeakPlugin,
   getIstanbulPlugin(),
+  [
+    '@babel/plugin-transform-react-jsx',
+    {
+      runtime: 'automatic',
+      importSource: '@react-native-harness/runtime',
+    },
+  ],
 ].filter((plugin) => plugin !== null);
 
 export const rnHarnessPreset = () => {

apps/playground/src/__tests__/ui/__image_snapshots__/web/out-of-bounds.png

@@ -47,6 +47,15 @@ export const ConfigSchema = z
       .min(100, 'Crash detection interval must be at least 100ms')
       .default(500),
 
+    disableViewFlattening: z
+      .boolean()
+      .optional()
+      .default(false)
+      .describe(
+        'Disable view flattening in React Native. This will set collapsable={true} for all View components ' +
+        'to ensure they are not flattened by the native layout engine.'
+      ),
+
     coverage: z
       .object({
         root: z
@@ -56,7 +65,7 @@ export const ConfigSchema = z
             'Root directory for coverage instrumentation in monorepo setups. ' +
             'Specifies the directory from which coverage data should be collected. ' +
             'Use ".." for create-react-native-library projects where tests run from example/ ' +
-            'but source files are in parent directory. Passed to babel-plugin-istanbul\'s cwd option.'
+            "but source files are in parent directory. Passed to babel-plugin-istanbul's cwd option."
           ),
       })
       .optional(),