[scheduler] 2/n Adding 'schedule' fixture (#12884)
* Adding 'schedule' fixture **what is the change?:** We need to test the `schedule` module against real live browser APIs. As a quick solution we're writing a fixture for using in manual testing. Later we plan on adding automated browser testing, using this or a similar fixture as the test page. **why make this change?:** To further solidify test coverage for `schedule` before making further improvements/refactors to the module. **test plan:** `open fixtures/schedule/index.html` and inspect the results. It should be clear that things pass. We also temporarily broke the scheduler and verified that this fixture demonstrates the problems. **issue:** Internal task T29442940 * Made fixture tests display red or green border depending on pass/fail **what is the change?:** Added red/green solid/dashed border for test results when using the schedule fixture. We also tweaked the timing of the last test because it was on the line in terms of whether it passed or failed. **why make this change?:** To make it faster to use the fixture - it takes more time to read through the results line by line and check that they match what is expected. **test plan:** Looked at the fixture, and also tried modifying a test to show what it looks like when something fails.
Flarnie Marchan committed
May 24, 2018 at 14:11 UTC
76e07071a11cd6e4796ad846bc835a18c8f49647
2 files changed
+293
-10
fixtures/schedule/index.html
new
+293
@@ -0,0 +1,293 @@
1
+<!DOCTYPE html>
2
+<html style="width: 100%; height: 100%;">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Schedule Test Page</title>
6
+ <style>
7
+ .correct {
8
+ border: solid green 2px;
9
+ }
10
+ .incorrect {
11
+ border: dashed red 2px;
12
+ }
13
+ </style>
14
+ </head>
15
+ <body>
16
+ <h1>Schedule Fixture</h1>
17
+ <p>
18
+ This fixture is for manual testing purposes, and the patterns used in
19
+ implementing it should not be used as a model. This is mainly for anyone
20
+ working on making changes to the `schedule` module.
21
+ </p>
22
+ <h2>Tests:</h2>
23
+ <ol>
24
+ <li>
25
+ <button onClick="runTestOne()">Run Test 1</button>
26
+ <p>Calls the callback with the frame when not blocked:</p>
27
+ <div><b>Expected:</b></div>
28
+ <div id="test-1-expected">
29
+ </div>
30
+ <div> -------------------------------------------------</div>
31
+ <div> If you see the same above and below it's correct.
32
+ <div> -------------------------------------------------</div>
33
+ <div><b>Actual:</b></div>
34
+ <div id="test-1"></div>
35
+ </li>
36
+ <li>
37
+ <p>Accepts multiple callbacks and calls within frame when not blocked</p>
38
+ <button onClick="runTestTwo()">Run Test 2</button>
39
+ <div><b>Expected:</b></div>
40
+ <div id="test-2-expected">
41
+ </div>
42
+ <div> -------------------------------------------------</div>
43
+ <div> If you see the same above and below it's correct.
44
+ <div> -------------------------------------------------</div>
45
+ <div><b>Actual:</b></div>
46
+ <div id="test-2"></div>
47
+ </li>
48
+ <li>
49
+ <p>Schedules callbacks in correct order when they use scheduleWork to schedule themselves</p>
50
+ <button onClick="runTestThree()">Run Test 3</button>
51
+ <div><b>Expected:</b></div>
52
+ <div id="test-3-expected">
53
+ </div>
54
+ <div> -------------------------------------------------</div>
55
+ <div> If you see the same above and below it's correct.
56
+ <div> -------------------------------------------------</div>
57
+ <div><b>Actual:</b></div>
58
+ <div id="test-3"></div>
59
+ </li>
60
+ <li>
61
+ <p>Calls timed out callbacks and then any more pending callbacks, defers others if time runs out</p>
62
+ <button onClick="runTestFour()">Run Test 4</button>
63
+ <div><b>Expected:</b></div>
64
+ <div id="test-4-expected">
65
+ </div>
66
+ <div> -------------------------------------------------</div>
67
+ <div> If you see the same above and below it's correct.
68
+ <div> -------------------------------------------------</div>
69
+ <div><b>Actual:</b></div>
70
+ <div id="test-4"></div>
71
+ </li>
72
+ </ol>
73
+ <script src="../../build/dist/react-scheduler.development.js"></script>
74
+ <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
75
+ <script type="text/babel">
76
+const {scheduleWork, cancelWork, now} = ReactScheduler;
77
+function displayTestResult(testNumber) {
78
+ const expectationNode = document.getElementById('test-' + testNumber + '-expected');
79
+ const resultNode = document.getElementById('test-' + testNumber);
80
+ resultNode.innerHTML = latestResults[testNumber - 1].join('<br />');
81
+ expectationNode.innerHTML = expectedResults[testNumber - 1].join('<br />');
82
+}
83
+function clearTestResult(testNumber) {
84
+ const resultNode = document.getElementById('test-' + testNumber);
85
+ resultNode.innerHTML = '';
86
+ latestResults[testNumber - 1] = [];
87
+}
88
+function updateTestResult(testNumber, textToAddToResult) {
89
+ latestResults[testNumber - 1].push(textToAddToResult);
90
+};
91
+function checkTestResult(testNumber) {
92
+
93
+ let correct = true;
94
+ const expected = expectedResults[testNumber - 1]; // zero indexing
95
+ const result = latestResults[testNumber - 1]; // zero indexing
96
+ if (expected.length !== result.length) {
97
+ correct = false;
98
+ } else {
99
+ for (let i = 0, len = expected.length; i < len; i++) {
100
+ if (expected[i] !== result[i]) {
101
+ correct = false;
102
+ break;
103
+ }
104
+ }
105
+ }
106
+ const currentClass = correct ? 'correct' : 'incorrect';
107
+ const previousClass = correct ? 'incorrect' : 'correct';
108
+ document.getElementById('test-' + testNumber).classList.remove(previousClass);
109
+ document.getElementById('test-' + testNumber).classList.add(currentClass);
110
+}
111
+function logWhenFramesStart(testNumber, cb) {
112
+ requestAnimationFrame(() => {
113
+ updateTestResult(testNumber, 'frame 1 started');
114
+ requestAnimationFrame(() => {
115
+ updateTestResult(testNumber, 'frame 2 started');
116
+ requestAnimationFrame(() => {
117
+ updateTestResult(testNumber, 'frame 3 started... we stop counting now.');
118
+ cb();
119
+ });
120
+ });
121
+ });
122
+}
123
+// push in results when we run the test
124
+const latestResults = [
125
+ // test 1
126
+ [
127
+ ],
128
+ // test 2
129
+ [
130
+ ],
131
+ // test 3
132
+ [
133
+ ],
134
+ // test 4
135
+ [
136
+ ],
137
+];
138
+
139
+const expectedResults = [
140
+ // test 1
141
+ [
142
+ 'scheduled Cb1',
143
+ 'frame 1 started',
144
+ 'cb1 called with argument of {"didTimeout":false}',
145
+ 'frame 2 started',
146
+ 'frame 3 started... we stop counting now.',
147
+ ],
148
+ // test 2
149
+ [
150
+ 'scheduled CbA',
151
+ 'scheduled CbB',
152
+ 'frame 1 started',
153
+ 'cbA called with argument of {"didTimeout":false}',
154
+ 'cbB called with argument of {"didTimeout":false}',
155
+ 'frame 2 started',
156
+ 'frame 3 started... we stop counting now.',
157
+ ],
158
+ // test 3
159
+ [
160
+ 'scheduled CbA',
161
+ 'scheduled CbB',
162
+ 'frame 1 started',
163
+ 'scheduled CbA again',
164
+ 'cbA0 called with argument of {"didTimeout":false}',
165
+ 'cbB called with argument of {"didTimeout":false}',
166
+ 'cbA1 called with argument of {"didTimeout":false}',
167
+ 'frame 2 started',
168
+ 'frame 3 started... we stop counting now.',
169
+ ],
170
+ // test 4
171
+ [
172
+ 'scheduled cbA',
173
+ 'scheduled cbB',
174
+ 'scheduled cbC',
175
+ 'scheduled cbD',
176
+ 'frame 1 started',
177
+ 'cbC called with argument of {"didTimeout":true}',
178
+ 'cbA called with argument of {"didTimeout":false}',
179
+ 'cbA running and taking some time',
180
+ 'frame 2 started',
181
+ 'cbB called with argument of {"didTimeout":false}',
182
+ 'cbD called with argument of {"didTimeout":false}',
183
+ 'frame 3 started... we stop counting now.',
184
+ ],
185
+];
186
+function runTestOne() {
187
+ // Test 1
188
+ // Calls the callback with the frame when not blocked
189
+ clearTestResult(1);
190
+ const test1Log = [];
191
+ const cb1Arguments = [];
192
+ const cb1 = (x) => {
193
+ updateTestResult(1, 'cb1 called with argument of ' + JSON.stringify(x));
194
+ }
195
+ scheduleWork(cb1);
196
+ updateTestResult(1, 'scheduled Cb1');
197
+ logWhenFramesStart(1, () => {
198
+ displayTestResult(1);
199
+ checkTestResult(1);
200
+ });
201
+};
202
+
203
+function runTestTwo() {
204
+ // Test 2
205
+ // accepts multiple callbacks and calls within frame when not blocked
206
+ clearTestResult(2);
207
+ const cbA = (x) => {
208
+ updateTestResult(2, 'cbA called with argument of ' + JSON.stringify(x));
209
+ }
210
+ const cbB = (x) => {
211
+ updateTestResult(2, 'cbB called with argument of ' + JSON.stringify(x));
212
+ }
213
+ scheduleWork(cbA);
214
+ updateTestResult(2, 'scheduled CbA');
215
+ scheduleWork(cbB);
216
+ updateTestResult(2, 'scheduled CbB');
217
+ logWhenFramesStart(2, () => {
218
+ displayTestResult(2);
219
+ checkTestResult(2);
220
+ });
221
+}
222
+
223
+function runTestThree() {
224
+ // Test 3
225
+ // Schedules callbacks in correct order when they use scheduleWork to schedule themselves
226
+ clearTestResult(3);
227
+ let callbackAIterations = 0;
228
+ const cbA = (x) => {
229
+ if (callbackAIterations < 1) {
230
+ scheduleWork(cbA);
231
+ updateTestResult(3, 'scheduled CbA again');
232
+ }
233
+ updateTestResult(3, 'cbA' + callbackAIterations + ' called with argument of ' + JSON.stringify(x));
234
+ callbackAIterations++;
235
+ }
236
+ const cbB = (x) => {
237
+ updateTestResult(3, 'cbB called with argument of ' + JSON.stringify(x));
238
+ }
239
+ scheduleWork(cbA);
240
+ updateTestResult(3, 'scheduled CbA');
241
+ scheduleWork(cbB);
242
+ updateTestResult(3, 'scheduled CbB');
243
+ logWhenFramesStart(3, () => {
244
+ displayTestResult(3);
245
+ checkTestResult(3);
246
+ });
247
+}
248
+
249
+function waitForTimeToPass(timeInMs) {
250
+ const startTime = Date.now();
251
+ const endTime = startTime + timeInMs;
252
+ while (Date.now() < endTime) {
253
+ // wait...
254
+ }
255
+}
256
+
257
+function runTestFour() {
258
+ // Test 4
259
+ // Calls timed out callbacks and then any more pending callbacks, defers others if time runs out
260
+ clearTestResult(4);
261
+ const cbA = (x) => {
262
+ updateTestResult(4, 'cbA called with argument of ' + JSON.stringify(x));
263
+ updateTestResult(4, 'cbA running and taking some time');
264
+ waitForTimeToPass(35);
265
+ }
266
+ const cbB = (x) => {
267
+ updateTestResult(4, 'cbB called with argument of ' + JSON.stringify(x));
268
+ }
269
+ const cbC = (x) => {
270
+ updateTestResult(4, 'cbC called with argument of ' + JSON.stringify(x));
271
+ }
272
+ const cbD = (x) => {
273
+ updateTestResult(4, 'cbD called with argument of ' + JSON.stringify(x));
274
+ }
275
+ scheduleWork(cbA); // won't time out
276
+ updateTestResult(4, 'scheduled cbA');
277
+ scheduleWork(cbB, {timeout: 100}); // times out later
278
+ updateTestResult(4, 'scheduled cbB');
279
+ scheduleWork(cbC, {timeout: 2}); // will time out fast
280
+ updateTestResult(4, 'scheduled cbC');
281
+ scheduleWork(cbD); // won't time out
282
+ updateTestResult(4, 'scheduled cbD');
283
+
284
+ // should have run in order of C, A, B, D
285
+
286
+ logWhenFramesStart(4, () => {
287
+ displayTestResult(4);
288
+ checkTestResult(4);
289
+ });
290
+}
291
+ </script type="text/babel">
292
+ </body>
293
+</html>
packages/react-scheduler/src/__tests__/test_page.html
deleted
-10
@@ -1,10 +0,0 @@
1
-<!DOCTYPE html>
2
-<html style="width: 100%; height: 100%; overflow: hidden">
3
- <head>
4
- <meta charset="utf-8">
5
- <title>React Scheduler test page</title>
6
- </head>
7
- <body>
8
- <h1>Hello World</h1>
9
- </body>
10
-</html>