Skip to content

Commit

Permalink
[Scheduler] Test browser implementation details (#16198)
Browse files Browse the repository at this point in the history 
The Scheduler implementation uses browser APIs like `MessageChannel`,
`requestAnimationFrame`, and `setTimeout` to schedule work on the main
thread. Most of our tests treat these as implementation details;
however, the sequence and timing of these APIs are not precisely
specified, and can vary wildly across browsers.

To prevent regressions, we need the ability to simulate specific edge
cases that we may encounter in various browsers.

This adds a new test suite that mocks all browser methods used in our
implementation. It assumes as little as possible about the order and
timing of events. The only thing it assumes is that
requestAnimationFrame is passed a frame time that is equal to or less
than the time returned by performance.now. Everything else can be
controlled at will.

It also includes Scheduler-specific invariants, e.g. only one rAF
callback can be scheduled at a time.

It overlaps slightly with the existing SchedulerDOM-test suite, which
also mocks the browser APIs, but exposes a higher-level set of testing
primitives. I will consolidate the two suites in a follow-up.
  • Loading branch information
@acdlite
acdlite authored Jul 25, 2019
1 parent 857deb2 commit c0830a0
Show file tree
Hide file tree
Showing 2 changed files with 358 additions and 13 deletions.
350 changes: 350 additions & 0 deletions packages/scheduler/src/__tests__/SchedulerBrowser-test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,350 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @emails react-core
* @jest-environment node
*/

/* eslint-disable no-for-of-loops/no-for-of-loops */

'use strict';

let Scheduler;
let runtime;
let performance;
let scheduleCallback;
let NormalPriority;

// The Scheduler implementation uses browser APIs like `MessageChannel`,
// `requestAnimationFrame`, and `setTimeout` to schedule work on the main
// thread. Most of our tests treat these as implementation details; however, the
// sequence and timing of these APIs are not precisely specified, and can vary
// wildly across browsers.
//
// To prevent regressions, we need the ability to simulate specific edge cases
// that we may encounter in various browsers.
//
// This test suite mocks all browser methods used in our implementation. It
// assumes as little as possible about the order and timing of events. The only
// thing it assumes is that requestAnimationFrame is passed a frame time that is
// equal to or less than the time returned by performance.now. Everything else
// can be controlled at will.
//
// It also includes Scheduler-specific invariants, e.g. only one rAF callback
// can be scheduled at a time.
describe('SchedulerBrowser', () => {
beforeEach(() => {
jest.resetModules();

// Un-mock scheduler
jest.mock('scheduler', () => require.requireActual('scheduler'));
jest.mock('scheduler/src/SchedulerHostConfig', () =>
require.requireActual(
'scheduler/src/forks/SchedulerHostConfig.default.js',
),
);

runtime = installMockBrowserRuntime();
performance = window.performance;
Scheduler = require('scheduler');
scheduleCallback = Scheduler.unstable_scheduleCallback;
NormalPriority = Scheduler.unstable_NormalPriority;
});

afterEach(() => {
if (!runtime.isLogEmpty()) {
throw Error('Test exited without clearing log.');
}
});

function installMockBrowserRuntime() {
let VSYNC_INTERVAL = 33.33;

let hasPendingMessageEvent = false;

let rAFCallbackIDCounter = 0;
let rAFCallback = null;
let isRunningRAFCallback = false;

let rICCallbackIDCounter = 0;
let rICCallback = null;

let timerIDCounter = 0;
// let timerIDs = new Map();

let eventLog = [];

const window = {};
global.window = window;

let currentTime = 0;

window.performance = {
now() {
return currentTime;
},
};
window.requestAnimationFrame = cb => {
if (rAFCallback !== null) {
throw Error('rAF already scheduled');
}
if (isRunningRAFCallback) {
log('Request Animation Frame [Reposted]');
} else {
log('Request Animation Frame');
}
rAFCallback = cb;
return rAFCallbackIDCounter++;
};
window.cancelAnimationFrame = id => {
rAFCallback = null;
};

window.requestIdleCallback = cb => {
if (rICCallback !== null) {
throw Error('rAF already scheduled');
}
log('Request Idle Callback');
rICCallback = cb;
return rICCallbackIDCounter++;
};
window.cancelIdleCallback = id => {
rICCallback = null;
};

window.setTimeout = (cb, delay) => {
const id = timerIDCounter++;
log(`Set Timer`);
// TODO
return id;
};
window.clearTimeout = id => {
// TODO
};

const port1 = {};
const port2 = {
postMessage() {
if (hasPendingMessageEvent) {
throw Error('Message event already scheduled');
}
log('Post Message');
hasPendingMessageEvent = true;
},
};
global.MessageChannel = function MessageChannel() {
this.port1 = port1;
this.port2 = port2;
};

function ensureLogIsEmpty() {
if (eventLog.length !== 0) {
throw Error('Log is not empty. Call assertLog before continuing.');
}
}
function setHardwareFrameRate(fps) {
VSYNC_INTERVAL = 1000 / fps;
}
function advanceTime(ms) {
currentTime += ms;
}
function advanceTimeToNextFrame() {
const targetTime =
Math.ceil(currentTime / VSYNC_INTERVAL) * VSYNC_INTERVAL;
if (targetTime === currentTime) {
currentTime += VSYNC_INTERVAL;
} else {
currentTime = targetTime;
}
}
function getMostRecentFrameNumber() {
return Math.floor(currentTime / VSYNC_INTERVAL);
}
function fireMessageEvent() {
ensureLogIsEmpty();
if (!hasPendingMessageEvent) {
throw Error('No message event was scheduled');
}
hasPendingMessageEvent = false;
const onMessage = port1.onmessage;
log('Message Event');
onMessage();
}
function fireAnimationFrame() {
ensureLogIsEmpty();
if (isRunningRAFCallback) {
throw Error('Cannot fire animation frame from inside another event.');
}
if (rAFCallback === null) {
throw Error('No rAF scheduled.');
}
const mostRecentFrameNumber = getMostRecentFrameNumber();
const rAFTime = mostRecentFrameNumber * VSYNC_INTERVAL;
const cb = rAFCallback;
rAFCallback = null;
log(`Animation Frame [${mostRecentFrameNumber}]`);
isRunningRAFCallback = true;
try {
cb(rAFTime);
} finally {
isRunningRAFCallback = false;
}
}
function fireRIC() {
ensureLogIsEmpty();
if (rICCallback === null) {
throw Error('No rIC scheduled.');
}
const cb = rICCallback;
rICCallback = null;
log('Idle Callback');
cb();
}
function log(val) {
eventLog.push(val);
}
function isLogEmpty() {
return eventLog.length === 0;
}
function assertLog(expected) {
const actual = eventLog;
eventLog = [];
expect(actual).toEqual(expected);
}
return {
setHardwareFrameRate,
advanceTime,
advanceTimeToNextFrame,
getMostRecentFrameNumber,
fireMessageEvent,
fireAnimationFrame,
fireRIC,
log,
isLogEmpty,
assertLog,
};
}

it('callback with continuation', () => {
scheduleCallback(NormalPriority, () => {
runtime.log('Task');
while (!Scheduler.unstable_shouldYield()) {
runtime.advanceTime(1);
}
runtime.log(`Yield at ${performance.now()}ms`);
return () => {
runtime.log('Continuation');
};
});
runtime.assertLog(['Request Animation Frame']);

runtime.fireAnimationFrame();
runtime.assertLog([
'Animation Frame [0]',
'Request Animation Frame [Reposted]',
'Set Timer',
'Post Message',
]);
runtime.fireMessageEvent();
runtime.assertLog(['Message Event', 'Task', 'Yield at 34ms']);

runtime.fireAnimationFrame();
runtime.assertLog([
'Animation Frame [1]',
'Request Animation Frame [Reposted]',
'Set Timer',
'Post Message',
]);

runtime.fireMessageEvent();
runtime.assertLog(['Message Event', 'Continuation']);

runtime.advanceTimeToNextFrame();
runtime.fireAnimationFrame();
runtime.assertLog(['Animation Frame [2]']);
});

it('two rAF calls in the same frame', () => {
scheduleCallback(NormalPriority, () => runtime.log('A'));
runtime.assertLog(['Request Animation Frame']);
runtime.fireAnimationFrame();
runtime.assertLog([
'Animation Frame [0]',
'Request Animation Frame [Reposted]',
'Set Timer',
'Post Message',
]);
runtime.fireMessageEvent();
runtime.assertLog(['Message Event', 'A']);

// The Scheduler queue is now empty. We're still in frame 0.
expect(runtime.getMostRecentFrameNumber()).toBe(0);

// Post a task to Scheduler.
scheduleCallback(NormalPriority, () => runtime.log('B'));

// Did not request another animation frame, since one was already scheduled
// during the previous rAF.
runtime.assertLog([]);

// Fire the animation frame.
runtime.fireAnimationFrame();
runtime.assertLog([
'Animation Frame [0]',
'Request Animation Frame [Reposted]',
'Set Timer',
'Post Message',
]);

runtime.fireMessageEvent();
runtime.assertLog(['Message Event', 'B']);
});

it('adjusts frame rate by measuring inteval between rAF events', () => {
runtime.setHardwareFrameRate(60);

scheduleCallback(NormalPriority, () => runtime.log('Tick'));
runtime.assertLog(['Request Animation Frame']);

// Need to measure two consecutive intervals between frames.
for (let i = 0; i < 2; i++) {
runtime.fireAnimationFrame();
runtime.assertLog([
`Animation Frame [${runtime.getMostRecentFrameNumber()}]`,
'Request Animation Frame [Reposted]',
'Set Timer',
'Post Message',
]);
runtime.fireMessageEvent();
runtime.assertLog(['Message Event', 'Tick']);
scheduleCallback(NormalPriority, () => runtime.log('Tick'));
runtime.advanceTimeToNextFrame();
}

// Scheduler should observe that it's receiving rAFs every 16.6 ms and
// adjust its frame rate accordingly. Test by blocking the thread until
// Scheduler tells us to yield. Then measure how much time has elapsed.
const start = performance.now();
scheduleCallback(NormalPriority, () => {
while (!Scheduler.unstable_shouldYield()) {
runtime.advanceTime(1);
}
});
runtime.fireAnimationFrame();
runtime.assertLog([
`Animation Frame [${runtime.getMostRecentFrameNumber()}]`,
'Request Animation Frame [Reposted]',
'Set Timer',
'Post Message',
]);
runtime.fireMessageEvent();
runtime.assertLog(['Message Event', 'Tick']);
const end = performance.now();

// Check how much time elapsed in the frame.
expect(end - start).toEqual(17);
});
});
21 changes: 8 additions & 13 deletions packages/scheduler/src/forks/SchedulerHostConfig.default.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,22 +229,11 @@ if (
channel.port1.onmessage = performWorkUntilDeadline;

const onAnimationFrame = rAFTime => {
isRAFLoopRunning = false;

if (scheduledHostCallback === null) {
// No scheduled work. Exit.
prevRAFTime = -1;
prevRAFInterval = -1;
return;
}
if (rAFTime - prevRAFTime < 0.1) {
// Defensive coding. Received two rAFs in the same frame. Exit and wait
// for the next frame.
// TODO: This could be an indication that the frame rate is too high. We
// don't currently handle the case where the browser dynamically lowers
// the framerate, e.g. in low power situation (other than the rAF timeout,
// but that's designed for when the tab is backgrounded and doesn't
// optimize for maxiumum CPU utilization).
isRAFLoopRunning = false;
return;
}

Expand All @@ -261,6 +250,7 @@ if (
clearTimeout(rAFTimeoutID);
onAnimationFrame(nextRAFTime);
});

// requestAnimationFrame is throttled when the tab is backgrounded. We
// don't want to stop working entirely. So we'll fallback to a timeout loop.
// TODO: Need a better heuristic for backgrounded work.
Expand All @@ -271,7 +261,12 @@ if (
};
rAFTimeoutID = setTimeout(onTimeout, frameLength * 3);

if (prevRAFTime !== -1) {
if (
prevRAFTime !== -1 &&
// Make sure this rAF time is different from the previous one. This check
// could fail if two rAFs fire in the same frame.
rAFTime - prevRAFTime > 0.1
) {
const rAFInterval = rAFTime - prevRAFTime;
if (!fpsLocked && prevRAFInterval !== -1) {
// We've observed two consecutive frame intervals. We'll use this to
Expand Down

0 comments on commit c0830a0

Please sign in to comment.