@@ -24,6 +24,10 @@ let images = [];
24
24
let onLoadSpy = null ;
25
25
let actualLoadSpy = null ;
26
26
27
+ let waitForAll ;
28
+ let waitFor ;
29
+ let assertLog ;
30
+
27
31
function PhaseMarkers ( { children} ) {
28
32
Scheduler . unstable_yieldValue ( 'render start' ) ;
29
33
React . useLayoutEffect ( ( ) => {
@@ -94,6 +98,11 @@ describe('ReactDOMImageLoad', () => {
94
98
ReactDOMClient = require ( 'react-dom/client' ) ;
95
99
// Suspense = React.Suspense;
96
100
101
+ const InternalTestUtils = require ( 'internal-test-utils' ) ;
102
+ waitForAll = InternalTestUtils . waitForAll ;
103
+ waitFor = InternalTestUtils . waitFor ;
104
+ assertLog = InternalTestUtils . assertLog ;
105
+
97
106
onLoadSpy = jest . fn ( reactEvent => {
98
107
const src = reactEvent . target . getAttribute ( 'src' ) ;
99
108
Scheduler . unstable_yieldValue ( 'onLoadSpy [' + src + ']' ) ;
@@ -206,26 +215,17 @@ describe('ReactDOMImageLoad', () => {
206
215
) ,
207
216
) ;
208
217
209
- expect ( Scheduler ) . toFlushAndYieldThrough ( [
210
- 'render start' ,
211
- 'Img default' ,
212
- 'Yield' ,
213
- ] ) ;
218
+ await waitFor ( [ 'render start' , 'Img default' , 'Yield' ] ) ;
214
219
const img = last ( images ) ;
215
220
loadImage ( img ) ;
216
- expect ( Scheduler ) . toHaveYielded ( [
221
+ assertLog ( [
217
222
'actualLoadSpy [default]' ,
218
223
// no onLoadSpy since we have not completed render
219
224
] ) ;
220
- expect ( Scheduler ) . toFlushAndYield ( [
221
- 'a' ,
222
- 'load triggered' ,
223
- 'last layout' ,
224
- 'last passive' ,
225
- ] ) ;
225
+ await waitForAll ( [ 'a' , 'load triggered' , 'last layout' , 'last passive' ] ) ;
226
226
expect ( img . __needsDispatch ) . toBe ( true ) ;
227
227
loadImage ( img ) ;
228
- expect ( Scheduler ) . toHaveYielded ( [
228
+ assertLog ( [
229
229
'actualLoadSpy [default]' , // the browser reloading of the image causes this to yield again
230
230
'onLoadSpy [default]' ,
231
231
] ) ;
@@ -244,7 +244,7 @@ describe('ReactDOMImageLoad', () => {
244
244
) ,
245
245
) ;
246
246
247
- expect ( Scheduler ) . toFlushAndYieldThrough ( [
247
+ await waitFor ( [
248
248
'render start' ,
249
249
'Img default' ,
250
250
'load triggered' ,
@@ -253,11 +253,8 @@ describe('ReactDOMImageLoad', () => {
253
253
Scheduler . unstable_requestPaint ( ) ;
254
254
const img = last ( images ) ;
255
255
loadImage ( img ) ;
256
- expect ( Scheduler ) . toHaveYielded ( [
257
- 'actualLoadSpy [default]' ,
258
- 'onLoadSpy [default]' ,
259
- ] ) ;
260
- expect ( Scheduler ) . toFlushAndYield ( [ 'last passive' ] ) ;
256
+ assertLog ( [ 'actualLoadSpy [default]' , 'onLoadSpy [default]' ] ) ;
257
+ await waitForAll ( [ 'last passive' ] ) ;
261
258
expect ( img . __needsDispatch ) . toBe ( false ) ;
262
259
expect ( onLoadSpy ) . toHaveBeenCalledTimes ( 1 ) ;
263
260
} ) ;
@@ -286,16 +283,12 @@ describe('ReactDOMImageLoad', () => {
286
283
287
284
React . startTransition ( ( ) => root . render ( < Base /> ) ) ;
288
285
289
- expect ( Scheduler ) . toFlushAndYieldThrough ( [
290
- 'render start' ,
291
- 'Img a' ,
292
- 'Yield' ,
293
- ] ) ;
286
+ await waitFor ( [ 'render start' , 'Img a' , 'Yield' ] ) ;
294
287
const img = last ( images ) ;
295
288
loadImage ( img ) ;
296
- expect ( Scheduler ) . toHaveYielded ( [ 'actualLoadSpy [a]' ] ) ;
289
+ assertLog ( [ 'actualLoadSpy [a]' ] ) ;
297
290
298
- expect ( Scheduler ) . toFlushAndYieldThrough ( [
291
+ await waitFor ( [
299
292
'load triggered' ,
300
293
'last layout' ,
301
294
// the update in layout causes a passive effects flush before a sync render
@@ -309,7 +302,7 @@ describe('ReactDOMImageLoad', () => {
309
302
] ) ;
310
303
expect ( images . length ) . toBe ( 1 ) ;
311
304
loadImage ( img ) ;
312
- expect ( Scheduler ) . toHaveYielded ( [ 'actualLoadSpy [b]' , 'onLoadSpy [b]' ] ) ;
305
+ assertLog ( [ 'actualLoadSpy [b]' , 'onLoadSpy [b]' ] ) ;
313
306
expect ( onLoadSpy ) . toHaveBeenCalledTimes ( 1 ) ;
314
307
} ) ;
315
308
@@ -323,7 +316,7 @@ describe('ReactDOMImageLoad', () => {
323
316
</ PhaseMarkers > ,
324
317
) ;
325
318
326
- expect ( Scheduler ) . toFlushAndYield ( [
319
+ await waitForAll ( [
327
320
'render start' ,
328
321
'Img default' ,
329
322
'load triggered' ,
@@ -332,10 +325,7 @@ describe('ReactDOMImageLoad', () => {
332
325
] ) ;
333
326
const img = last ( images ) ;
334
327
loadImage ( img ) ;
335
- expect ( Scheduler ) . toHaveYielded ( [
336
- 'actualLoadSpy [default]' ,
337
- 'onLoadSpy [default]' ,
338
- ] ) ;
328
+ assertLog ( [ 'actualLoadSpy [default]' , 'onLoadSpy [default]' ] ) ;
339
329
expect ( onLoadSpy ) . toHaveBeenCalledTimes ( 1 ) ;
340
330
} ) ;
341
331
@@ -365,26 +355,17 @@ describe('ReactDOMImageLoad', () => {
365
355
) ,
366
356
) ;
367
357
368
- expect ( Scheduler ) . toFlushAndYieldThrough ( [
369
- 'render start' ,
370
- 'Img default' ,
371
- 'Yield' ,
372
- ] ) ;
358
+ await waitFor ( [ 'render start' , 'Img default' , 'Yield' ] ) ;
373
359
const img = last ( images ) ;
374
360
loadImage ( img ) ;
375
- expect ( Scheduler ) . toHaveYielded ( [ 'actualLoadSpy [default]' ] ) ;
376
- expect ( Scheduler ) . toFlushAndYield ( [
377
- 'a' ,
378
- 'load triggered' ,
379
- 'last layout' ,
380
- 'last passive' ,
381
- ] ) ;
361
+ assertLog ( [ 'actualLoadSpy [default]' ] ) ;
362
+ await waitForAll ( [ 'a' , 'load triggered' , 'last layout' , 'last passive' ] ) ;
382
363
expect ( img . __needsDispatch ) . toBe ( true ) ;
383
364
loadImage ( img ) ;
384
365
// we expect the browser to load the image again but since we are no longer rendering
385
366
// the img there will be no onLoad called
386
- expect ( Scheduler ) . toHaveYielded ( [ 'actualLoadSpy [default]' ] ) ;
387
- expect ( Scheduler ) . toFlushWithoutYielding ( ) ;
367
+ assertLog ( [ 'actualLoadSpy [default]' ] ) ;
368
+ await waitForAll ( [ ] ) ;
388
369
expect ( onLoadSpy ) . not . toHaveBeenCalled ( ) ;
389
370
} ) ;
390
371
@@ -426,16 +407,16 @@ describe('ReactDOMImageLoad', () => {
426
407
) ,
427
408
) ;
428
409
429
- expect ( Scheduler ) . toFlushAndYieldThrough ( [
410
+ await waitFor ( [
430
411
// initial render
431
412
'render start' ,
432
413
'Img default' ,
433
414
'Yield' ,
434
415
] ) ;
435
416
const img = last ( images ) ;
436
417
loadImage ( img ) ;
437
- expect ( Scheduler ) . toHaveYielded ( [ 'actualLoadSpy [default]' ] ) ;
438
- expect ( Scheduler ) . toFlushAndYield ( [
418
+ assertLog ( [ 'actualLoadSpy [default]' ] ) ;
419
+ await waitForAll ( [
439
420
'a' ,
440
421
'load triggered' ,
441
422
// img is present at first
@@ -450,8 +431,8 @@ describe('ReactDOMImageLoad', () => {
450
431
loadImage ( img ) ;
451
432
// we expect the browser to load the image again but since we are no longer rendering
452
433
// the img there will be no onLoad called
453
- expect ( Scheduler ) . toHaveYielded ( [ 'actualLoadSpy [default]' ] ) ;
454
- expect ( Scheduler ) . toFlushWithoutYielding ( ) ;
434
+ assertLog ( [ 'actualLoadSpy [default]' ] ) ;
435
+ await waitForAll ( [ ] ) ;
455
436
expect ( onLoadSpy ) . not . toHaveBeenCalled ( ) ;
456
437
} ) ;
457
438
@@ -548,22 +529,18 @@ describe('ReactDOMImageLoad', () => {
548
529
549
530
root . render ( < Base /> ) ;
550
531
551
- expect ( Scheduler ) . toFlushWithoutYielding ( ) ;
532
+ await waitForAll ( [ ] ) ;
552
533
553
534
React . startTransition ( ( ) => externalSetSrc ( 'a' ) ) ;
554
535
555
- expect ( Scheduler ) . toFlushAndYieldThrough ( [
556
- 'YieldingWithImage' ,
557
- 'Img a' ,
558
- 'Yield' ,
559
- ] ) ;
536
+ await waitFor ( [ 'YieldingWithImage' , 'Img a' , 'Yield' ] ) ;
560
537
let img = last ( images ) ;
561
538
loadImage ( img ) ;
562
- expect ( Scheduler ) . toHaveYielded ( [ 'actualLoadSpy [a]' ] ) ;
539
+ assertLog ( [ 'actualLoadSpy [a]' ] ) ;
563
540
564
541
ReactDOM . flushSync ( ( ) => externalSetSrcAlt ( 'b' ) ) ;
565
542
566
- expect ( Scheduler ) . toHaveYielded ( [
543
+ assertLog ( [
567
544
'YieldingWithImage' ,
568
545
'Img b' ,
569
546
'Yield' ,
@@ -576,18 +553,12 @@ describe('ReactDOMImageLoad', () => {
576
553
expect ( img . __needsDispatch ) . toBe ( true ) ;
577
554
loadImage ( img ) ;
578
555
579
- expect ( Scheduler ) . toHaveYielded ( [ 'actualLoadSpy [b]' , 'onLoadSpy [b]' ] ) ;
556
+ assertLog ( [ 'actualLoadSpy [b]' , 'onLoadSpy [b]' ] ) ;
580
557
// why is there another update here?
581
- expect ( Scheduler ) . toFlushAndYield ( [
582
- 'YieldingWithImage' ,
583
- 'Img b' ,
584
- 'Yield' ,
585
- 'b' ,
586
- 'Committed' ,
587
- ] ) ;
558
+ await waitForAll ( [ 'YieldingWithImage' , 'Img b' , 'Yield' , 'b' , 'Committed' ] ) ;
588
559
} ) ;
589
560
590
- it ( 'preserves the src property / attribute when triggering a potential new load event' , ( ) => {
561
+ it ( 'preserves the src property / attribute when triggering a potential new load event' , async ( ) => {
591
562
// this test covers a regression identified in https://github.com/mui/material-ui/pull/31263
592
563
// where the resetting of the src property caused the property to change from relative to fully qualified
593
564
@@ -612,17 +583,13 @@ describe('ReactDOMImageLoad', () => {
612
583
) ;
613
584
614
585
// render to yield to capture state of img src attribute and property before commit
615
- expect ( Scheduler ) . toFlushAndYieldThrough ( [
616
- 'render start' ,
617
- 'Img default' ,
618
- 'Yield' ,
619
- ] ) ;
586
+ await waitFor ( [ 'render start' , 'Img default' , 'Yield' ] ) ;
620
587
const img = last ( images ) ;
621
588
const renderSrcProperty = img . src ;
622
589
const renderSrcAttr = img . getAttribute ( 'src' ) ;
623
590
624
591
// finish render and commit causing the src property to be rewritten
625
- expect ( Scheduler ) . toFlushAndYield ( [ 'a' , 'last layout' , 'last passive' ] ) ;
592
+ await waitForAll ( [ 'a' , 'last layout' , 'last passive' ] ) ;
626
593
const commitSrcProperty = img . src ;
627
594
const commitSrcAttr = img . getAttribute ( 'src' ) ;
628
595
0 commit comments