Wait for images before box-shadow screenshots (#57922)

packages/react-native/Libraries/Lists/__tests__/FlatList-itest.js

@@ -680,6 +680,12 @@ describe('<FlatList>', () => {
 
         timers.advanceTimersByTime(200);
 
+        // The first timer represents an intermediate viewport snapshot and
+        // must not publish after the final visible set supersedes it.
+        expect(onViewableItemsChanged).not.toHaveBeenCalled();
+
+        timers.advanceTimersByTime(200);
+
         expect(onViewableItemsChanged).toHaveBeenCalled();
       } finally {
         timers.uninstall();

packages/react-native/ReactCommon/jsinspector-modern/tests/TracingTest.cpp

@@ -37,7 +37,15 @@ class TracingTest : public TracingTestBase<
 TEST_F(TracingTest, EnablesSamplingProfilerOnlyCategoryIsSpecified) {
   InSequence s;
 
+  const auto runSamplingWorkload = [this]() {
+    eval(R"(
+      const start = Date.now();
+      while (Date.now() - start < 10) {}
+    )");
+  };
+
   startTracing({});
+  runSamplingWorkload();
   auto allTraceEvents = endTracingAndCollectEvents();
 
   EXPECT_THAT(
@@ -47,6 +55,7 @@ TEST_F(TracingTest, EnablesSamplingProfilerOnlyCategoryIsSpecified) {
           AtJsonPtr("/cat", "disabled-by-default-v8.cpu_profiler")))));
 
   startTracing({tracing::Category::JavaScriptSampling});
+  runSamplingWorkload();
   allTraceEvents = endTracingAndCollectEvents();
 
   EXPECT_THAT(

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

@@ -1258,6 +1258,41 @@ exports.category = 'Basic';
 exports.description =
   'Base component for displaying different types of images.';
 
+component BoxShadowExample() {
+  const [loadedImageCount, setLoadedImageCount] = useState(0);
+  const onLoad = () => setLoadedImageCount(count => count + 1);
+
+  return (
+    <View
+      style={styles.horizontal}
+      testID={loadedImageCount >= 3 ? 'box-shadow-example' : undefined}>
+      <Image
+        onLoad={onLoad}
+        style={[styles.base, styles.boxShadow, styles.boxShadowWithBackground]}
+        source={smallImage}
+      />
+      <Image
+        onLoad={onLoad}
+        style={[
+          styles.base,
+          styles.boxShadow,
+          styles.boxShadowMultiOutsetInset,
+        ]}
+        source={smallImage}
+      />
+      <Image
+        onLoad={onLoad}
+        style={[
+          styles.base,
+          styles.boxShadow,
+          styles.boxShadowAsymetricallyRounded,
+        ]}
+        source={fullImage}
+      />
+    </View>
+  );
+}
+
 exports.examples = [
   {
     title: 'Plain Network Image with `source` prop.',
@@ -1488,34 +1523,7 @@ exports.examples = [
     title: 'Box Shadow',
     name: 'box-shadow',
     render: function (): React.Node {
-      return (
-        <View style={styles.horizontal} testID="box-shadow-example">
-          <Image
-            style={[
-              styles.base,
-              styles.boxShadow,
-              styles.boxShadowWithBackground,
-            ]}
-            source={smallImage}
-          />
-          <Image
-            style={[
-              styles.base,
-              styles.boxShadow,
-              styles.boxShadowMultiOutsetInset,
-            ]}
-            source={smallImage}
-          />
-          <Image
-            style={[
-              styles.base,
-              styles.boxShadow,
-              styles.boxShadowAsymetricallyRounded,
-            ]}
-            source={fullImage}
-          />
-        </View>
-      );
+      return <BoxShadowExample />;
     },
   },
   {

packages/virtualized-lists/Lists/ViewabilityHelper.js

@@ -231,6 +231,10 @@ class ViewabilityHelper {
          * comment suppresses an error found when Flow v0.63 was deployed. To
          * see the error delete this comment and run Flow. */
         this._timers.delete(handle);
+        // `onUpdate` replaces the array whenever the visible set changes.
+        if (this._viewableIndices !== viewableIndices) {
+          return;
+        }
         this._onUpdateSync(
           props,
           viewableIndices,

packages/virtualized-lists/Lists/__tests__/ViewabilityHelper-test.js

@@ -342,6 +342,58 @@ describe('onUpdate', function () {
     });
   });
 
+  it('minimumViewTime ignores stale viewability updates', function () {
+    const helper = new ViewabilityHelper({
+      minimumViewTime: 350,
+      viewAreaCoveragePercentThreshold: 0,
+    });
+    rowFrames = {
+      a: {y: 0, height: 200},
+      b: {y: 200, height: 200},
+    };
+    data = [{key: 'a'}, {key: 'b'}];
+    const onViewableItemsChanged = jest.fn();
+    helper.onUpdate(
+      props,
+      0,
+      200,
+      // $FlowFixMe[incompatible-type] - Invalid `ListMetricsAggregator`.
+      {getCellMetrics},
+      createViewToken,
+      onViewableItemsChanged,
+    );
+    helper.onUpdate(
+      props,
+      0,
+      400,
+      // $FlowFixMe[incompatible-type] - Invalid `ListMetricsAggregator`.
+      {getCellMetrics},
+      createViewToken,
+      onViewableItemsChanged,
+    );
+
+    jest.runAllTimers();
+
+    expect(onViewableItemsChanged.mock.calls).toEqual([
+      [
+        {
+          changed: [
+            {isViewable: true, key: 'a'},
+            {isViewable: true, key: 'b'},
+          ],
+          viewabilityConfig: {
+            minimumViewTime: 350,
+            viewAreaCoveragePercentThreshold: 0,
+          },
+          viewableItems: [
+            {isViewable: true, key: 'a'},
+            {isViewable: true, key: 'b'},
+          ],
+        },
+      ],
+    ]);
+  });
+
   it('minimumViewTime skips briefly visible items', function () {
     const helper = new ViewabilityHelper({
       minimumViewTime: 350,