Skip to content

Commit

Permalink
Adding 'schedule' fixture
Browse files Browse the repository at this point in the history 
**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
  • Loading branch information
@flarnie
flarnie committed May 23, 2018
1 parent 3df1574 commit 938f363
Show file tree
Hide file tree
Showing 2 changed files with 245 additions and 10 deletions.
245 changes: 245 additions & 0 deletions fixtures/schedule/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,245 @@
<!DOCTYPE html>
<html style="width: 100%; height: 100%;">
<head>
<meta charset="utf-8">
<title>Schedule Test Page</title>
</head>
<body>
<h1>Schedule Fixture</h1>
<p>
This fixture is for manual testing purposes, and the patterns used in
implementing it should not be used as a model. This is mainly for anyone
working on making changes to the `schedule` module.
</p>
<h2>Tests:</h2>
<ol>
<li>
<button onClick="runTestOne()">Run Test 1</button>
<p>Calls the callback with the frame when not blocked:</p>
<div><b>Expected:</b></div>
<div>
scheduled Cb1
<br />
frame 1 started
<br />
cb1 called with argument of {"didTimeout":false}
<br />
frame 2 started
<br />
frame 3 started... we stop counting now.
</div>
<div> -------------------------------------------------</div>
<div> If you see the same above and below it's correct.
<div> -------------------------------------------------</div>
<div><b>Actual:</b></div>
<div id="test-1"></div>
</li>
<li>
<p>Accepts multiple callbacks and calls within frame when not blocked</p>
<button onClick="runTestTwo()">Run Test 2</button>
<div><b>Expected:</b></div>
<div>
scheduled CbA
<br />
scheduled CbB
<br />
frame 1 started
<br />
cbA called with argument of {"didTimeout":false}
<br />
cbB called with argument of {"didTimeout":false}
<br />
frame 2 started
<br />
frame 3 started... we stop counting now.
</div>
<div> -------------------------------------------------</div>
<div> If you see the same above and below it's correct.
<div> -------------------------------------------------</div>
<div><b>Actual:</b></div>
<div id="test-2"></div>
</li>
<li>
<p>Schedules callbacks in correct order when they use scheduleWork to schedule themselves</p>
<button onClick="runTestThree()">Run Test 3</button>
<div><b>Expected:</b></div>
<div>
scheduled CbA
<br />
scheduled CbB
<br />
frame 1 started
<br />
scheduled CbA again
<br />
cbA0 called with argument of {"didTimeout":false}
<br />
cbB called with argument of {"didTimeout":false}
<br />
cbA1 called with argument of {"didTimeout":false}
<br />
frame 2 started
<br />
frame 3 started... we stop counting now.
</div>
<div> -------------------------------------------------</div>
<div> If you see the same above and below it's correct.
<div> -------------------------------------------------</div>
<div><b>Actual:</b></div>
<div id="test-3"></div>
</li>
<li>
<p>Calls timed out callbacks and then any more pending callbacks, defers others if time runs out</p>
<button onClick="runTestFour()">Run Test 4</button>
<div><b>Expected:</b></div>
<div>
scheduled cbA
<br />
scheduled cbB
<br />
scheduled cbC
<br />
scheduled cbD
<br />
frame 1 started
<br />
cbC called with argument of {"didTimeout":true}
<br />
cbA called with argument of {"didTimeout":false}
<br />
cbA running and taking some time
<br />
frame 2 started
<br />
cbB called with argument of {"didTimeout":false}
<br />
cbD called with argument of {"didTimeout":false}
<br />
frame 3 started... we stop counting now.
</div>
<div> -------------------------------------------------</div>
<div> If you see the same above and below it's correct.
<div> -------------------------------------------------</div>
<div><b>Actual:</b></div>
<div id="test-4"></div>
</li>
</ol>
<script src="../../build/dist/react-scheduler.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel">
const {scheduleWork, cancelWork, now} = ReactScheduler;
function clearTestResult(testNumber) {
const resultNode = document.getElementById('test-' + testNumber);
resultNode.innerHTML = '';
}
function updateTestResult(testNumber, textToAddToResult) {
const resultNode = document.getElementById('test-' + testNumber);
resultNode.innerHTML = resultNode.innerHTML + '<br />' + textToAddToResult;
};
function logWhenFramesStart(testNumber) {
requestAnimationFrame(() => {
updateTestResult(testNumber, 'frame 1 started');
requestAnimationFrame(() => {
updateTestResult(testNumber, 'frame 2 started');
requestAnimationFrame(() => {
updateTestResult(testNumber, 'frame 3 started... we stop counting now.');
});
});
});
}
function runTestOne() {
// Test 1
// Calls the callback with the frame when not blocked
clearTestResult(1);
const test1Log = [];
const cb1Arguments = [];
const cb1 = (x) => {
updateTestResult(1, 'cb1 called with argument of ' + JSON.stringify(x));
}
scheduleWork(cb1);
updateTestResult(1, 'scheduled Cb1');
logWhenFramesStart(1);
};

function runTestTwo() {
// Test 2
// accepts multiple callbacks and calls within frame when not blocked
clearTestResult(2);
const cbA = (x) => {
updateTestResult(2, 'cbA called with argument of ' + JSON.stringify(x));
}
const cbB = (x) => {
updateTestResult(2, 'cbB called with argument of ' + JSON.stringify(x));
}
scheduleWork(cbA);
updateTestResult(2, 'scheduled CbA');
scheduleWork(cbB);
updateTestResult(2, 'scheduled CbB');
logWhenFramesStart(2);
}

function runTestThree() {
// Test 3
// Schedules callbacks in correct order when they use scheduleWork to schedule themselves
clearTestResult(3);
let callbackAIterations = 0;
const cbA = (x) => {
if (callbackAIterations < 1) {
scheduleWork(cbA);
updateTestResult(3, 'scheduled CbA again');
}
updateTestResult(3, 'cbA' + callbackAIterations + ' called with argument of ' + JSON.stringify(x));
callbackAIterations++;
}
const cbB = (x) => {
updateTestResult(3, 'cbB called with argument of ' + JSON.stringify(x));
}
scheduleWork(cbA);
updateTestResult(3, 'scheduled CbA');
scheduleWork(cbB);
updateTestResult(3, 'scheduled CbB');
logWhenFramesStart(3);
}

function waitForTimeToPass(timeInMs) {
const startTime = Date.now();
const endTime = startTime + timeInMs;
while (Date.now() < endTime) {
// wait...
}
}

function runTestFour() {
// Test 4
// Calls timed out callbacks and then any more pending callbacks, defers others if time runs out
clearTestResult(4);
const cbA = (x) => {
updateTestResult(4, 'cbA called with argument of ' + JSON.stringify(x));
updateTestResult(4, 'cbA running and taking some time');
waitForTimeToPass(30);
}
const cbB = (x) => {
updateTestResult(4, 'cbB called with argument of ' + JSON.stringify(x));
}
const cbC = (x) => {
updateTestResult(4, 'cbC called with argument of ' + JSON.stringify(x));
}
const cbD = (x) => {
updateTestResult(4, 'cbD called with argument of ' + JSON.stringify(x));
}
scheduleWork(cbA); // won't time out
updateTestResult(4, 'scheduled cbA');
scheduleWork(cbB, {timeout: 100}); // times out later
updateTestResult(4, 'scheduled cbB');
scheduleWork(cbC, {timeout: 2}); // will time out fast
updateTestResult(4, 'scheduled cbC');
scheduleWork(cbD); // won't time out
updateTestResult(4, 'scheduled cbD');

// should have run in order of C, A, B, D

logWhenFramesStart(4);
}
</script type="text/babel">
</body>
</html>
10 changes: 0 additions & 10 deletions packages/react-scheduler/src/__tests__/test_page.html
View file

This file was deleted.

0 comments on commit 938f363

Please sign in to comment.