[Transition Tracing] Add Offscreen Test (#25035)
Add a test to make sure offscreen trees don't stop transitions from completing.
Luna Ruan committed
Aug 3, 2022 at 13:24 UTC
e193be87e683fd7c1a03f09505013c67a454040f
1 file changed
+72
packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+72
@@ -16,6 +16,7 @@ let act;
16
let getCacheForType;
17
let useState;
18
let Suspense;
19
+let Offscreen;
20
let startTransition;
21
22
let caches;
@@ -34,6 +35,7 @@ describe('ReactInteractionTracing', () => {
35
useState = React.useState;
36
startTransition = React.startTransition;
37
Suspense = React.Suspense;
38
+ Offscreen = React.unstable_Offscreen;
39
40
getCacheForType = React.unstable_getCacheForType;
41
@@ -1362,4 +1364,74 @@ describe('ReactInteractionTracing', () => {
1364
]);
1365
});
1366
});
1367
+
1368
+ // @gate enableTransitionTracing
1369
+ it('offscreen trees should not stop transition from completing', async () => {
1370
+ const transitionCallbacks = {
1371
+ onTransitionStart: (name, startTime) => {
1372
+ Scheduler.unstable_yieldValue(
1373
+ `onTransitionStart(${name}, ${startTime})`,
1374
+ );
1375
+ },
1376
+ onTransitionComplete: (name, startTime, endTime) => {
1377
+ Scheduler.unstable_yieldValue(
1378
+ `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
1379
+ );
1380
+ },
1381
+ onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
1382
+ Scheduler.unstable_yieldValue(
1383
+ `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
1384
+ );
1385
+ },
1386
+ };
1387
+
1388
+ function App() {
1389
+ return (
1390
+ <React.unstable_TracingMarker name="marker">
1391
+ <Suspense fallback={<Text text="Loading..." />}>
1392
+ <AsyncText text="Text" />
1393
+ </Suspense>
1394
+ <Offscreen mode="hidden">
1395
+ <Suspense fallback={<Text text="Hidden Loading..." />}>
1396
+ <AsyncText text="Hidden Text" />
1397
+ </Suspense>
1398
+ </Offscreen>
1399
+ </React.unstable_TracingMarker>
1400
+ );
1401
+ }
1402
+
1403
+ const root = ReactNoop.createRoot({
1404
+ unstable_transitionCallbacks: transitionCallbacks,
1405
+ });
1406
+ await act(() => {
1407
+ startTransition(() => root.render(<App />), {name: 'transition'});
1408
+ ReactNoop.expire(1000);
1409
+ advanceTimers(1000);
1410
+ });
1411
+ expect(Scheduler).toHaveYielded([
1412
+ 'Suspend [Text]',
1413
+ 'Loading...',
1414
+ 'Suspend [Hidden Text]',
1415
+ 'Hidden Loading...',
1416
+ 'onTransitionStart(transition, 0)',
1417
+ ]);
1418
+
1419
+ await act(() => {
1420
+ resolveText('Text');
1421
+ ReactNoop.expire(1000);
1422
+ advanceTimers(1000);
1423
+ });
1424
+ expect(Scheduler).toHaveYielded([
1425
+ 'Text',
1426
+ 'onMarkerComplete(transition, marker, 0, 2000)',
1427
+ 'onTransitionComplete(transition, 0, 2000)',
1428
+ ]);
1429
+
1430
+ await act(() => {
1431
+ resolveText('Hidden Text');
1432
+ ReactNoop.expire(1000);
1433
+ advanceTimers(1000);
1434
+ });
1435
+ expect(Scheduler).toHaveYielded(['Hidden Text']);
1436
+ });
1437
});