diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js index 3c0011a9cb885..3036f7ee0a1d2 100644 --- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js +++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js @@ -1338,194 +1338,4 @@ describe('ReactInteractionTracing', () => { ]); }); }); - - // @gate enableTransitionTracing - it.skip('marker interaction cancelled when name changes', async () => { - const transitionCallbacks = { - onTransitionStart: (name, startTime) => { - Scheduler.unstable_yieldValue( - `onTransitionStart(${name}, ${startTime})`, - ); - }, - onTransitionComplete: (name, startTime, endTime) => { - Scheduler.unstable_yieldValue( - `onTransitionComplete(${name}, ${startTime}, ${endTime})`, - ); - }, - onMarkerProgress: ( - transitioName, - markerName, - startTime, - currentTime, - pending, - ) => { - const suspenseNames = pending.map(p => p.name || '').join(', '); - Scheduler.unstable_yieldValue( - `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`, - ); - }, - onMarkerComplete: (transitioName, markerName, startTime, endTime) => { - Scheduler.unstable_yieldValue( - `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`, - ); - }, - }; - - let navigateToPageTwo; - let setMarkerNameFn; - function App() { - const [navigate, setNavigate] = useState(false); - navigateToPageTwo = () => { - setNavigate(true); - }; - - const [markerName, setMarkerName] = useState('old marker'); - setMarkerNameFn = () => setMarkerName('new marker'); - - return ( -
- {navigate ? ( - - }> - - - - ) : ( - - )} -
- ); - } - - const root = ReactNoop.createRoot({transitionCallbacks}); - await act(async () => { - root.render(); - ReactNoop.expire(1000); - await advanceTimers(1000); - - expect(Scheduler).toFlushAndYield(['Page One']); - - startTransition(() => navigateToPageTwo(), {name: 'page transition'}); - expect(Scheduler).toFlushAndYield([ - 'Suspend [Page Two]', - 'Loading...', - 'onTransitionStart(page transition, 1000)', - 'onMarkerProgress(page transition, old marker, 1000, 1000, [])', - ]); - - ReactNoop.expire(1000); - await advanceTimers(1000); - setMarkerNameFn(); - - expect(Scheduler).toFlushAndYield(['Suspend [Page Two]', 'Loading...']); - ReactNoop.expire(1000); - await advanceTimers(1000); - resolveText('Page Two'); - - // Marker complete is not called because the marker name changed - expect(Scheduler).toFlushAndYield([ - 'Page Two', - 'onTransitionComplete(page transition, 1000, 3000)', - ]); - }); - }); - - // @gate enableTransitionTracing - it.skip('marker changes to new interaction when name changes', async () => { - const transitionCallbacks = { - onTransitionStart: (name, startTime) => { - Scheduler.unstable_yieldValue( - `onTransitionStart(${name}, ${startTime})`, - ); - }, - onTransitionComplete: (name, startTime, endTime) => { - Scheduler.unstable_yieldValue( - `onTransitionComplete(${name}, ${startTime}, ${endTime})`, - ); - }, - onMarkerProgress: ( - transitioName, - markerName, - startTime, - currentTime, - pending, - ) => { - const suspenseNames = pending.map(p => p.name || '').join(', '); - Scheduler.unstable_yieldValue( - `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`, - ); - }, - onMarkerComplete: (transitioName, markerName, startTime, endTime) => { - Scheduler.unstable_yieldValue( - `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`, - ); - }, - }; - - let navigateToPageTwo; - let setMarkerNameFn; - function App() { - const [navigate, setNavigate] = useState(false); - navigateToPageTwo = () => { - setNavigate(true); - }; - - const [markerName, setMarkerName] = useState('old marker'); - setMarkerNameFn = () => setMarkerName('new marker'); - - return ( -
- {navigate ? ( - - }> - - - - ) : ( - - )} -
- ); - } - - const root = ReactNoop.createRoot({transitionCallbacks}); - await act(async () => { - root.render(); - ReactNoop.expire(1000); - await advanceTimers(1000); - - expect(Scheduler).toFlushAndYield(['Page One']); - - startTransition(() => navigateToPageTwo(), {name: 'page transition'}); - expect(Scheduler).toFlushAndYield([ - 'Suspend [Page Two]', - 'Loading...', - 'onTransitionStart(page transition, 1000)', - 'onMarkerProgress(page transition, old marker, 1000, 2000, [])', - ]); - - ReactNoop.expire(1000); - await advanceTimers(1000); - startTransition(() => setMarkerNameFn(), {name: 'marker transition'}); - - expect(Scheduler).toFlushAndYield([ - 'Suspend [Page Two]', - 'Loading...', - 'onTransitionStart(marker transition, 2000)', - 'onMarkerProgress(marker transition, new marker, 2000, 3000, [])', - 'onMarkerComplete(marker transition, new marker, 2000, 3000)', - 'onTransitionComplete(marker transition, 2000, 3000)', - ]); - ReactNoop.expire(1000); - await advanceTimers(1000); - resolveText('Page Two'); - - // Marker complete is not called because the marker name changed - expect(Scheduler).toFlushAndYield([ - 'Page Two', - 'onMarkerComplete(new marker, 2000, 3000)', - 'onTransitionComplete(page transition, 1000, 3000)', - ]); - }); - }); });