Add test for nested avoided boundaries (#15636)
* Add test for nested avoided boundaries * Add test for top level avoided boundaries
Sebastian Markbåge committed
May 14, 2019 at 14:41 UTC
8af90c8972ab4cfc5fdbca8c576c202ce9cadab8
1 file changed
+75
-1
packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
+75
-1
@@ -1507,7 +1507,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1507
);
1508
});
1509
1510
- it('shows the parent boundary if the inner boundary should be avoided', async () => {
1510
+ it('shows the parent fallback if the inner fallback should be avoided', async () => {
1511
function Foo({showC}) {
1512
Scheduler.yieldValue('Foo');
1513
return (
@@ -1572,6 +1572,80 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1572
expect(ReactNoop.getChildren()).toEqual([span('A'), span('C'), span('B')]);
1573
});
1574
1575
+ it('favors showing the inner fallback for nested top level avoided fallback', async () => {
1576
+ function Foo({showB}) {
1577
+ Scheduler.yieldValue('Foo');
1578
+ return (
1579
+ <Suspense
1580
+ unstable_avoidThisFallback={true}
1581
+ fallback={<Text text="Loading A..." />}>
1582
+ <Text text="A" />
1583
+ <Suspense
1584
+ unstable_avoidThisFallback={true}
1585
+ fallback={<Text text="Loading B..." />}>
1586
+ <AsyncText text="B" ms={5000} />
1587
+ </Suspense>
1588
+ </Suspense>
1589
+ );
1590
+ }
1591
+
1592
+ ReactNoop.render(<Foo />);
1593
+ expect(Scheduler).toFlushAndYield([
1594
+ 'Foo',
1595
+ 'A',
1596
+ 'Suspend! [B]',
1597
+ 'Loading B...',
1598
+ ]);
1599
+ // Flush to skip suspended time.
1600
+ Scheduler.advanceTime(600);
1601
+ await advanceTimers(600);
1602
+
1603
+ expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
1604
+ });
1605
+
1606
+ it('keeps showing an avoided parent fallback if it is already showing', async () => {
1607
+ function Foo({showB}) {
1608
+ Scheduler.yieldValue('Foo');
1609
+ return (
1610
+ <Suspense fallback={<Text text="Initial load..." />}>
1611
+ <Suspense
1612
+ unstable_avoidThisFallback={true}
1613
+ fallback={<Text text="Loading A..." />}>
1614
+ <Text text="A" />
1615
+ {showB ? (
1616
+ <Suspense
1617
+ unstable_avoidThisFallback={true}
1618
+ fallback={<Text text="Loading B..." />}>
1619
+ <AsyncText text="B" ms={5000} />
1620
+ </Suspense>
1621
+ ) : null}
1622
+ </Suspense>
1623
+ </Suspense>
1624
+ );
1625
+ }
1626
+
1627
+ ReactNoop.render(<Foo />);
1628
+ expect(Scheduler).toFlushAndYield(['Foo', 'A']);
1629
+ expect(ReactNoop.getChildren()).toEqual([span('A')]);
1630
+
1631
+ ReactNoop.render(<Foo showB={true} />);
1632
+
1633
+ expect(Scheduler).toFlushAndYield([
1634
+ 'Foo',
1635
+ 'A',
1636
+ 'Suspend! [B]',
1637
+ 'Loading B...',
1638
+ ]);
1639
+ // Still suspended.
1640
+ expect(ReactNoop.getChildren()).toEqual([span('A')]);
1641
+
1642
+ // Flush to skip suspended time.
1643
+ Scheduler.advanceTime(600);
1644
+ await advanceTimers(600);
1645
+
1646
+ expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
1647
+ });
1648
+
1649
it('commits a suspended idle pri render within a reasonable time', async () => {
1650
function Foo({something}) {
1651
return (