@@ -1338,194 +1338,4 @@ describe('ReactInteractionTracing', () => {
1338
1338
] ) ;
1339
1339
} ) ;
1340
1340
} ) ;
1341
-
1342
- // @gate enableTransitionTracing
1343
- it . skip ( 'marker interaction cancelled when name changes' , async ( ) => {
1344
- const transitionCallbacks = {
1345
- onTransitionStart : ( name , startTime ) => {
1346
- Scheduler . unstable_yieldValue (
1347
- `onTransitionStart(${ name } , ${ startTime } )` ,
1348
- ) ;
1349
- } ,
1350
- onTransitionComplete : ( name , startTime , endTime ) => {
1351
- Scheduler . unstable_yieldValue (
1352
- `onTransitionComplete(${ name } , ${ startTime } , ${ endTime } )` ,
1353
- ) ;
1354
- } ,
1355
- onMarkerProgress : (
1356
- transitioName ,
1357
- markerName ,
1358
- startTime ,
1359
- currentTime ,
1360
- pending ,
1361
- ) => {
1362
- const suspenseNames = pending . map ( p => p . name || '<null>' ) . join ( ', ' ) ;
1363
- Scheduler . unstable_yieldValue (
1364
- `onMarkerProgress(${ transitioName } , ${ markerName } , ${ startTime } , ${ currentTime } , [${ suspenseNames } ])` ,
1365
- ) ;
1366
- } ,
1367
- onMarkerComplete : ( transitioName , markerName , startTime , endTime ) => {
1368
- Scheduler . unstable_yieldValue (
1369
- `onMarkerComplete(${ transitioName } , ${ markerName } , ${ startTime } , ${ endTime } )` ,
1370
- ) ;
1371
- } ,
1372
- } ;
1373
-
1374
- let navigateToPageTwo ;
1375
- let setMarkerNameFn ;
1376
- function App ( ) {
1377
- const [ navigate , setNavigate ] = useState ( false ) ;
1378
- navigateToPageTwo = ( ) => {
1379
- setNavigate ( true ) ;
1380
- } ;
1381
-
1382
- const [ markerName , setMarkerName ] = useState ( 'old marker' ) ;
1383
- setMarkerNameFn = ( ) => setMarkerName ( 'new marker' ) ;
1384
-
1385
- return (
1386
- < div >
1387
- { navigate ? (
1388
- < React . unstable_TracingMarker name = { markerName } >
1389
- < Suspense fallback = { < Text text = "Loading..." /> } >
1390
- < AsyncText text = "Page Two" />
1391
- </ Suspense >
1392
- </ React . unstable_TracingMarker >
1393
- ) : (
1394
- < Text text = "Page One" />
1395
- ) }
1396
- </ div >
1397
- ) ;
1398
- }
1399
-
1400
- const root = ReactNoop . createRoot ( { transitionCallbacks} ) ;
1401
- await act ( async ( ) => {
1402
- root . render ( < App /> ) ;
1403
- ReactNoop . expire ( 1000 ) ;
1404
- await advanceTimers ( 1000 ) ;
1405
-
1406
- expect ( Scheduler ) . toFlushAndYield ( [ 'Page One' ] ) ;
1407
-
1408
- startTransition ( ( ) => navigateToPageTwo ( ) , { name : 'page transition' } ) ;
1409
- expect ( Scheduler ) . toFlushAndYield ( [
1410
- 'Suspend [Page Two]' ,
1411
- 'Loading...' ,
1412
- 'onTransitionStart(page transition, 1000)' ,
1413
- 'onMarkerProgress(page transition, old marker, 1000, 1000, [<null>])' ,
1414
- ] ) ;
1415
-
1416
- ReactNoop . expire ( 1000 ) ;
1417
- await advanceTimers ( 1000 ) ;
1418
- setMarkerNameFn ( ) ;
1419
-
1420
- expect ( Scheduler ) . toFlushAndYield ( [ 'Suspend [Page Two]' , 'Loading...' ] ) ;
1421
- ReactNoop . expire ( 1000 ) ;
1422
- await advanceTimers ( 1000 ) ;
1423
- resolveText ( 'Page Two' ) ;
1424
-
1425
- // Marker complete is not called because the marker name changed
1426
- expect ( Scheduler ) . toFlushAndYield ( [
1427
- 'Page Two' ,
1428
- 'onTransitionComplete(page transition, 1000, 3000)' ,
1429
- ] ) ;
1430
- } ) ;
1431
- } ) ;
1432
-
1433
- // @gate enableTransitionTracing
1434
- it . skip ( 'marker changes to new interaction when name changes' , async ( ) => {
1435
- const transitionCallbacks = {
1436
- onTransitionStart : ( name , startTime ) => {
1437
- Scheduler . unstable_yieldValue (
1438
- `onTransitionStart(${ name } , ${ startTime } )` ,
1439
- ) ;
1440
- } ,
1441
- onTransitionComplete : ( name , startTime , endTime ) => {
1442
- Scheduler . unstable_yieldValue (
1443
- `onTransitionComplete(${ name } , ${ startTime } , ${ endTime } )` ,
1444
- ) ;
1445
- } ,
1446
- onMarkerProgress : (
1447
- transitioName ,
1448
- markerName ,
1449
- startTime ,
1450
- currentTime ,
1451
- pending ,
1452
- ) => {
1453
- const suspenseNames = pending . map ( p => p . name || '<null>' ) . join ( ', ' ) ;
1454
- Scheduler . unstable_yieldValue (
1455
- `onMarkerProgress(${ transitioName } , ${ markerName } , ${ startTime } , ${ currentTime } , [${ suspenseNames } ])` ,
1456
- ) ;
1457
- } ,
1458
- onMarkerComplete : ( transitioName , markerName , startTime , endTime ) => {
1459
- Scheduler . unstable_yieldValue (
1460
- `onMarkerComplete(${ transitioName } , ${ markerName } , ${ startTime } , ${ endTime } )` ,
1461
- ) ;
1462
- } ,
1463
- } ;
1464
-
1465
- let navigateToPageTwo ;
1466
- let setMarkerNameFn ;
1467
- function App ( ) {
1468
- const [ navigate , setNavigate ] = useState ( false ) ;
1469
- navigateToPageTwo = ( ) => {
1470
- setNavigate ( true ) ;
1471
- } ;
1472
-
1473
- const [ markerName , setMarkerName ] = useState ( 'old marker' ) ;
1474
- setMarkerNameFn = ( ) => setMarkerName ( 'new marker' ) ;
1475
-
1476
- return (
1477
- < div >
1478
- { navigate ? (
1479
- < React . unstable_TracingMarker name = { markerName } >
1480
- < Suspense fallback = { < Text text = "Loading..." /> } >
1481
- < AsyncText text = "Page Two" />
1482
- </ Suspense >
1483
- </ React . unstable_TracingMarker >
1484
- ) : (
1485
- < Text text = "Page One" />
1486
- ) }
1487
- </ div >
1488
- ) ;
1489
- }
1490
-
1491
- const root = ReactNoop . createRoot ( { transitionCallbacks} ) ;
1492
- await act ( async ( ) => {
1493
- root . render ( < App /> ) ;
1494
- ReactNoop . expire ( 1000 ) ;
1495
- await advanceTimers ( 1000 ) ;
1496
-
1497
- expect ( Scheduler ) . toFlushAndYield ( [ 'Page One' ] ) ;
1498
-
1499
- startTransition ( ( ) => navigateToPageTwo ( ) , { name : 'page transition' } ) ;
1500
- expect ( Scheduler ) . toFlushAndYield ( [
1501
- 'Suspend [Page Two]' ,
1502
- 'Loading...' ,
1503
- 'onTransitionStart(page transition, 1000)' ,
1504
- 'onMarkerProgress(page transition, old marker, 1000, 2000, [<null>])' ,
1505
- ] ) ;
1506
-
1507
- ReactNoop . expire ( 1000 ) ;
1508
- await advanceTimers ( 1000 ) ;
1509
- startTransition ( ( ) => setMarkerNameFn ( ) , { name : 'marker transition' } ) ;
1510
-
1511
- expect ( Scheduler ) . toFlushAndYield ( [
1512
- 'Suspend [Page Two]' ,
1513
- 'Loading...' ,
1514
- 'onTransitionStart(marker transition, 2000)' ,
1515
- 'onMarkerProgress(marker transition, new marker, 2000, 3000, [])' ,
1516
- 'onMarkerComplete(marker transition, new marker, 2000, 3000)' ,
1517
- 'onTransitionComplete(marker transition, 2000, 3000)' ,
1518
- ] ) ;
1519
- ReactNoop . expire ( 1000 ) ;
1520
- await advanceTimers ( 1000 ) ;
1521
- resolveText ( 'Page Two' ) ;
1522
-
1523
- // Marker complete is not called because the marker name changed
1524
- expect ( Scheduler ) . toFlushAndYield ( [
1525
- 'Page Two' ,
1526
- 'onMarkerComplete(new marker, 2000, 3000)' ,
1527
- 'onTransitionComplete(page transition, 1000, 3000)' ,
1528
- ] ) ;
1529
- } ) ;
1530
- } ) ;
1531
1341
} ) ;
0 commit comments