From 6a3116a8a95b1a910bb9f3217b981b5cfd5e7c38 Mon Sep 17 00:00:00 2001
From: Pieter De Baets <pieterdb@meta.com>
Date: Thu, 19 Jun 2025 09:50:45 -0700
Subject: [PATCH] Add screenshot tests for LinearGradient (#52128)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52128

Changelog: [Internal]

Reviewed By: andrewdacenko

Differential Revision: D76972006

fbshipit-source-id: 657b78a842578df46f81d2416726665f49655a4f
---
 .../LinearGradient/LinearGradientExample.js   | 38 ++++++++++++-------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js b/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js
index 7f54516ea1e..a3191753e0e 100644
--- a/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js
+++ b/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js
@@ -51,6 +51,7 @@ exports.examples = [
   {
     title: 'Basic Linear Gradient',
     description: 'Linear gradient from top to bottom',
+    name: 'basic',
     render(): React.Node {
       return (
         <GradientBox
@@ -66,6 +67,7 @@ exports.examples = [
   {
     title: 'Linear Gradient with corner angle',
     description: 'Rectangular Linear gradient with corner angle',
+    name: 'corner-angle',
     render(): React.Node {
       return (
         <GradientBox
@@ -74,28 +76,29 @@ exports.examples = [
             height: 300,
             width: 140,
           }}
-          testID="linear-gradient-rectangular-with-corner-angle"
+          testID="linear-gradient-corner-angle"
         />
       );
     },
   },
   {
     title: 'Multiple linear gradients',
+    name: 'multiple',
     render(): React.Node {
       return (
         <GradientBox
-          testID="linear-gradient-multiple"
           style={{
             experimental_backgroundImage: `
-                  linear-gradient(0deg, white, rgba(238, 64, 53, 0.8), rgba(238, 64, 53, 0) 70%), 
-    linear-gradient(45deg, white, rgba(243, 119, 54, 0.8), rgba(243, 119, 54, 0) 70%), 
-    linear-gradient(90deg, white, rgba(253, 244, 152, 0.8), rgba(253, 244, 152, 0) 70%), 
-    linear-gradient(135deg, white, rgba(123, 192, 67, 0.8), rgba(123, 192, 67, 0) 70%), 
+                  linear-gradient(0deg, white, rgba(238, 64, 53, 0.8), rgba(238, 64, 53, 0) 70%),
+    linear-gradient(45deg, white, rgba(243, 119, 54, 0.8), rgba(243, 119, 54, 0) 70%),
+    linear-gradient(90deg, white, rgba(253, 244, 152, 0.8), rgba(253, 244, 152, 0) 70%),
+    linear-gradient(135deg, white, rgba(123, 192, 67, 0.8), rgba(123, 192, 67, 0) 70%),
     linear-gradient(180deg, white, rgba(3, 146, 207, 0.8), rgba(3, 146, 207, 0) 70%);
 
             `,
             borderRadius: 16,
           }}
+          testID="linear-gradient-multiple"
         />
       );
     },
@@ -103,14 +106,15 @@ exports.examples = [
   {
     title: 'Diagonal Gradient',
     description: 'Linear gradient from top-left to bottom-right',
+    name: 'diagonal',
     render(): React.Node {
       return (
         <GradientBox
-          testID="linear-gradient-diagonal"
           style={{
             experimental_backgroundImage:
               'linear-gradient(to bottom right, yellow, green)',
           }}
+          testID="linear-gradient-diagonal"
         />
       );
     },
@@ -118,20 +122,22 @@ exports.examples = [
   {
     title: 'Gradient with angle',
     description: 'Linear gradient with angle',
+    name: 'angle',
     render(): React.Node {
       return (
         <GradientBox
-          testID="linear-gradient-angle"
           style={{
             experimental_backgroundImage:
               'linear-gradient(135deg, gray, brown)',
           }}
+          testID="linear-gradient-angle"
         />
       );
     },
   },
   {
     title: 'Multiple Color Stops',
+    name: 'color-stops',
     render(): React.Node {
       return (
         <GradientBox
@@ -146,6 +152,7 @@ exports.examples = [
   },
   {
     title: 'Linear gradient with object style syntax',
+    name: 'object-style-syntax',
     render(): React.Node {
       return (
         <GradientBox
@@ -168,41 +175,43 @@ exports.examples = [
   },
   {
     title: 'Gradient with uniform border style',
+    name: 'uniform-borders',
     render(): React.Node {
       return (
         <GradientBox
-          testID="linear-gradient-with-uniform-borders"
           style={{
             experimental_backgroundImage:
               'linear-gradient(to bottom right, yellow, green);',
             borderRadius: 16,
           }}
+          testID="linear-gradient-uniform-borders"
         />
       );
     },
   },
   {
     title: 'Gradient with non-uniform border style',
+    name: 'non-uniform-borders',
     render(): React.Node {
       return (
         <GradientBox
-          testID="linear-gradient-with-non-uniform-borders"
           style={{
             experimental_backgroundImage:
               'linear-gradient(to bottom right, yellow, green);',
             borderTopRightRadius: 8,
             borderTopLeftRadius: 80,
           }}
+          testID="linear-gradient-non-uniform-borders"
         />
       );
     },
   },
   {
     title: 'Gradient with Platform colors',
+    name: 'platform-colors',
     render(): React.Node {
       return (
         <GradientBox
-          testID="linear-gradient-with-non-uniform-borders"
           style={{
             experimental_backgroundImage: [
               {
@@ -222,12 +231,14 @@ exports.examples = [
               },
             ],
           }}
+          testID="linear-gradient-platform-colors"
         />
       );
     },
   },
   {
     title: 'Transition hint',
+    name: 'transition-hint',
     render(): React.Node {
       return (
         <GradientBox
@@ -240,7 +251,8 @@ exports.examples = [
     },
   },
   {
-    title: 'with px and % combination',
+    title: 'Gradient with px and % combination',
+    name: 'px-and-percentage',
     render(): React.Node {
       return (
         <GradientBox
@@ -256,7 +268,7 @@ exports.examples = [
               #2e3192 100%
             );`,
           }}
-          testID="linear-gradient-transition-hint"
+          testID="linear-gradient-px-and-percentage"
         />
       );
     },