{"commit":{"authoredAt":"2022-08-03T13:24:41-04:00","subject":"[Transition Tracing] Add Offscreen Test (#25035)","authorEmail":"lunaris.ruan@gmail.com","shortRevision":"e193be87e6","authorName":"Luna Ruan","revision":"e193be87e683fd7c1a03f09505013c67a454040f"},"body":"Add a test to make sure offscreen trees don't stop transitions from completing.","parents":["9fcaf88d58cfd942e2fdd303ae8291dbf4828969"],"patch":"diff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactTransitionTracing-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactTransitionTracing-test.js\nindex fe2d4e008f..ae4812afa8 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactTransitionTracing-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactTransitionTracing-test.js\n@@ -16,6 +16,7 @@ let act;\n let getCacheForType;\n let useState;\n let Suspense;\n+let Offscreen;\n let startTransition;\n \n let caches;\n@@ -34,6 +35,7 @@ describe('ReactInteractionTracing', () => {\n useState = React.useState;\n startTransition = React.startTransition;\n Suspense = React.Suspense;\n+ Offscreen = React.unstable_Offscreen;\n \n getCacheForType = React.unstable_getCacheForType;\n \n@@ -1362,4 +1364,74 @@ describe('ReactInteractionTracing', () => {\n ]);\n });\n });\n+\n+ \/\/ @gate enableTransitionTracing\n+ it('offscreen trees should not stop transition from completing', async () => {\n+ const transitionCallbacks = {\n+ onTransitionStart: (name, startTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onTransitionStart(${name}, ${startTime})`,\n+ );\n+ },\n+ onTransitionComplete: (name, startTime, endTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onTransitionComplete(${name}, ${startTime}, ${endTime})`,\n+ );\n+ },\n+ onMarkerComplete: (transitioName, markerName, startTime, endTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,\n+ );\n+ },\n+ };\n+\n+ function App() {\n+ return (\n+ \n+ }>\n+ \n+ <\/Suspense>\n+ \n+ }>\n+ \n+ <\/Suspense>\n+ <\/Offscreen>\n+ <\/React.unstable_TracingMarker>\n+ );\n+ }\n+\n+ const root = ReactNoop.createRoot({\n+ unstable_transitionCallbacks: transitionCallbacks,\n+ });\n+ await act(() => {\n+ startTransition(() => root.render(), {name: 'transition'});\n+ ReactNoop.expire(1000);\n+ advanceTimers(1000);\n+ });\n+ expect(Scheduler).toHaveYielded([\n+ 'Suspend [Text]',\n+ 'Loading...',\n+ 'Suspend [Hidden Text]',\n+ 'Hidden Loading...',\n+ 'onTransitionStart(transition, 0)',\n+ ]);\n+\n+ await act(() => {\n+ resolveText('Text');\n+ ReactNoop.expire(1000);\n+ advanceTimers(1000);\n+ });\n+ expect(Scheduler).toHaveYielded([\n+ 'Text',\n+ 'onMarkerComplete(transition, marker, 0, 2000)',\n+ 'onTransitionComplete(transition, 0, 2000)',\n+ ]);\n+\n+ await act(() => {\n+ resolveText('Hidden Text');\n+ ReactNoop.expire(1000);\n+ advanceTimers(1000);\n+ });\n+ expect(Scheduler).toHaveYielded(['Hidden Text']);\n+ });\n });\n","files":[{"path":"packages\/react-reconciler\/src\/__tests__\/ReactTransitionTracing-test.js","status":"M"}]}

dillon1000/react

Files changed