Expand the test fixture
Dan Abramov committed
Apr 5, 2019 at 14:57 UTC
d6257d382d6f9910fb36ad1b4707bfa23ac965d2
1 file changed
+88
-17
shells/dev/app/SuspenseTree/index.js
+88
-17
@@ -6,7 +6,66 @@ function SuspenseTree() {
6
return (
7
<>
8
<h1>Suspense</h1>
9
- <Suspense fallback={<Fallback>Loading outer</Fallback>}>
9
+ <PrimaryFallbackTest />
10
+ <NestedSuspenseTest />
11
+ </>
12
+ );
13
+}
14
+
15
+function PrimaryFallbackTest() {
16
+ const [suspend, setSuspend] = useState(false);
17
+ const fallbackStep = useTestSequence('fallback', Fallback1, Fallback2);
18
+ const primaryStep = useTestSequence('primary', Primary1, Primary2);
19
+ return (
20
+ <>
21
+ <h3>Suspense Primary / Fallback</h3>
22
+ <label>
23
+ <input
24
+ checked={suspend}
25
+ onChange={e => setSuspend(e.target.checked)}
26
+ type="checkbox"
27
+ />
28
+ Suspend
29
+ </label>
30
+ <br />
31
+ <Suspense fallback={fallbackStep}>
32
+ {suspend ? <Never /> : primaryStep}
33
+ </Suspense>
34
+ </>
35
+ );
36
+}
37
+
38
+function useTestSequence(label, T1, T2) {
39
+ let [step, setStep] = useState(0);
40
+ let next = (
41
+ <button onClick={() => setStep(s => (s + 1) % allSteps.length)}>
42
+ next {label} content
43
+ </button>
44
+ );
45
+ let allSteps = [
46
+ <>{next}</>,
47
+ <>
48
+ {next} <T1 prop={step}>mount</T1>
49
+ </>,
50
+ <>
51
+ {next} <T1 prop={step}>update</T1>
52
+ </>,
53
+ <>
54
+ {next} <T2 prop={step}>several</T2> <T1 prop={step}>different</T1>{' '}
55
+ <T2 prop={step}>children</T2>
56
+ </>,
57
+ <>
58
+ {next} <T2 prop={step}>goodbye</T2>
59
+ </>,
60
+ ];
61
+ return allSteps[step];
62
+}
63
+
64
+function NestedSuspenseTest() {
65
+ return (
66
+ <>
67
+ <h3>Nested Suspense</h3>
68
+ <Suspense fallback={<Fallback1>Loading outer</Fallback1>}>
69
<Parent />
70
</Suspense>
71
</>
@@ -16,16 +75,20 @@ function SuspenseTree() {
75
function Parent() {
76
return (
77
<div>
19
- <Suspense fallback={<Fallback>Loading inner 1</Fallback>}>
20
- <Child>Hello</Child>
21
- </Suspense>
22
- <Suspense fallback={<Fallback>Loading inner 2</Fallback>}>
23
- <Child>World</Child>
78
+ <Suspense fallback={<Fallback1>Loading inner 1</Fallback1>}>
79
+ <Primary1>Hello</Primary1>
80
+ </Suspense>{' '}
81
+ <Suspense fallback={<Fallback2>Loading inner 2</Fallback2>}>
82
+ <Primary2>World</Primary2>
83
</Suspense>
25
- <Suspense fallback={<Fallback>This will never load</Fallback>}>
84
+ <br />
85
+ <Suspense fallback={<Fallback1>This will never load</Fallback1>}>
86
<Never />
87
</Suspense>
28
- <LoadLater />
88
+ <br />
89
+ <b>
90
+ <LoadLater />
91
+ </b>
92
</div>
93
);
94
}
@@ -35,13 +98,13 @@ function LoadLater() {
98
return (
99
<Suspense
100
fallback={
38
- <Fallback onClick={() => setLoadChild(true)}>Click to load</Fallback>
101
+ <Fallback1 onClick={() => setLoadChild(true)}>Click to load</Fallback1>
102
}
103
>
104
{loadChild ? (
42
- <Child onClick={() => setLoadChild(false)}>
105
+ <Primary1 onClick={() => setLoadChild(false)}>
106
Loaded! Click to suspend again.
44
- </Child>
107
+ </Primary1>
108
) : (
109
<Never />
110
)}
@@ -49,16 +112,24 @@ function LoadLater() {
112
);
113
}
114
52
-function Child(props) {
53
- return <p {...props} />;
115
+function Never() {
116
+ throw new Promise(resolve => {});
117
+}
118
+
119
+function Fallback1({ prop, ...rest }) {
120
+ return <span {...rest} />;
121
}
122
56
-function Fallback(props) {
57
- return <h3 {...props}>{props.children}</h3>;
123
+function Fallback2({ prop, ...rest }) {
124
+ return <span {...rest} />;
125
}
126
60
-function Never() {
61
- throw new Promise(resolve => {});
127
+function Primary1({ prop, ...rest }) {
128
+ return <span {...rest} />;
129
+}
130
+
131
+function Primary2({ prop, ...rest }) {
132
+ return <span {...rest} />;
133
}
134
135
export default SuspenseTree;