@@ -2,6 +2,7 @@ let React;
2
2
let ReactTestRenderer ;
3
3
let ReactFeatureFlags ;
4
4
let Scheduler ;
5
+ let SchedulerTracing ;
5
6
let ReactCache ;
6
7
let Suspense ;
7
8
let act ;
@@ -17,10 +18,12 @@ describe('ReactSuspense', () => {
17
18
ReactFeatureFlags = require ( 'shared/ReactFeatureFlags' ) ;
18
19
ReactFeatureFlags . debugRenderPhaseSideEffectsForStrictMode = false ;
19
20
ReactFeatureFlags . replayFailedUnitOfWorkWithInvokeGuardedCallback = false ;
21
+ ReactFeatureFlags . enableSchedulerTracing = true ;
20
22
React = require ( 'react' ) ;
21
23
ReactTestRenderer = require ( 'react-test-renderer' ) ;
22
24
act = ReactTestRenderer . act ;
23
25
Scheduler = require ( 'scheduler' ) ;
26
+ SchedulerTracing = require ( 'scheduler/tracing' ) ;
24
27
ReactCache = require ( 'react-cache' ) ;
25
28
26
29
Suspense = React . Suspense ;
@@ -914,6 +917,78 @@ describe('ReactSuspense', () => {
914
917
] ) ;
915
918
} ) ;
916
919
920
+ it ( 'should call onInteractionScheduledWorkCompleted after suspending' , done => {
921
+ const subscriber = {
922
+ onInteractionScheduledWorkCompleted : jest . fn ( ) ,
923
+ onInteractionTraced : jest . fn ( ) ,
924
+ onWorkCanceled : jest . fn ( ) ,
925
+ onWorkScheduled : jest . fn ( ) ,
926
+ onWorkStarted : jest . fn ( ) ,
927
+ onWorkStopped : jest . fn ( ) ,
928
+ } ;
929
+ SchedulerTracing . unstable_subscribe ( subscriber ) ;
930
+ SchedulerTracing . unstable_trace ( 'test' , performance . now ( ) , ( ) => {
931
+ function App ( ) {
932
+ return (
933
+ < React . Suspense fallback = { < Text text = "Loading..." /> } >
934
+ < AsyncText text = "A" ms = { 1000 } />
935
+ < AsyncText text = "B" ms = { 2000 } />
936
+ < AsyncText text = "C" ms = { 3000 } />
937
+ </ React . Suspense >
938
+ ) ;
939
+ }
940
+
941
+ const root = ReactTestRenderer . create ( null ) ;
942
+ root . update ( < App /> ) ;
943
+
944
+ expect ( Scheduler ) . toHaveYielded ( [
945
+ 'Suspend! [A]' ,
946
+ 'Suspend! [B]' ,
947
+ 'Suspend! [C]' ,
948
+ 'Loading...' ,
949
+ ] ) ;
950
+
951
+ // Resolve A
952
+ jest . advanceTimersByTime ( 1000 ) ;
953
+
954
+ expect ( Scheduler ) . toHaveYielded ( [ 'Promise resolved [A]' ] ) ;
955
+ expect ( Scheduler ) . toFlushExpired ( [
956
+ 'A' ,
957
+ // The promises for B and C have now been thrown twice
958
+ 'Suspend! [B]' ,
959
+ 'Suspend! [C]' ,
960
+ ] ) ;
961
+
962
+ // Resolve B
963
+ jest . advanceTimersByTime ( 1000 ) ;
964
+
965
+ expect ( Scheduler ) . toHaveYielded ( [ 'Promise resolved [B]' ] ) ;
966
+ expect ( Scheduler ) . toFlushExpired ( [
967
+ // Even though the promise for B was thrown twice, we should only
968
+ // re-render once.
969
+ 'B' ,
970
+ // The promise for C has now been thrown three times
971
+ 'Suspend! [C]' ,
972
+ ] ) ;
973
+
974
+ // Resolve C
975
+ jest . advanceTimersByTime ( 1000 ) ;
976
+
977
+ expect ( Scheduler ) . toHaveYielded ( [ 'Promise resolved [C]' ] ) ;
978
+ expect ( Scheduler ) . toFlushExpired ( [
979
+ // Even though the promise for C was thrown three times, we should only
980
+ // re-render once.
981
+ 'C' ,
982
+ ] ) ;
983
+
984
+ done ( ) ;
985
+ } ) ;
986
+
987
+ expect (
988
+ subscriber . onInteractionScheduledWorkCompleted ,
989
+ ) . toHaveBeenCalledTimes ( 1 ) ;
990
+ } ) ;
991
+
917
992
it ( '#14162' , ( ) => {
918
993
const { lazy} = React ;
919
994
0 commit comments