Add new tracing+suspense test harness fixture

facebook · Sep 25, 2018 · 2923bf5 · 2923bf5
1 parent 14c37f4
commit 2923bf5
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 0 deletions.
diff --git a/fixtures/tracing/test.html b/fixtures/tracing/test.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html style="width: 100%; height: 100%;">
+  <head>
+    <meta charset="utf-8">
+    <title>Test tracing UMD</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- Load the tracing API before react to test that it's lazily evaluated -->
+    <script src="../../build/node_modules/scheduler/umd/scheduler.development.js"></script>
+    <script src="../../build/node_modules/scheduler/umd/scheduler-tracing.development.js"></script>
+    <script src="../../build/node_modules/react/umd/react.development.js"></script>
+    <script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
+    <script src="./test.js"></script>
+  </body>
+</html>
diff --git a/fixtures/tracing/test.js b/fixtures/tracing/test.js
@@ -0,0 +1,103 @@
+const {createElement, Component, Placeholder} = React;
+const {unstable_createRoot: createRoot} = ReactDOM;
+const {
+  unstable_subscribe: subscribe,
+  unstable_trace: trace,
+  unstable_wrap: wrap,
+} = SchedulerTracing;
+
+const createLogger = (backgroundColor, color, enabled) => (
+  message,
+  ...args
+) => {
+  if (enabled === false) return;
+  console.groupCollapsed(
+    `%c${message}`,
+    `background-color: ${backgroundColor}; color: ${color}; padding: 2px 4px;`,
+    ...args
+  );
+  console.log(
+    new Error('stack').stack
+      .split('\n')
+      .slice(2)
+      .join('\n')
+  );
+  console.groupEnd();
+};
+
+window.log = {
+  app: createLogger('#37474f', '#fff'),
+  interaction: createLogger('#6a1b9a', '#fff'),
+  react: createLogger('#ff5722', '#fff'),
+  tracing: createLogger('#2962ff', '#fff'),
+  work: createLogger('#e1bee7', '#000'),
+};
+
+// Fake suspense
+const resolvedValues = {};
+const read = key => {
+  if (!resolvedValues[key]) {
+    log.app(`Suspending for "${key}" ...`);
+    throw new Promise(
+      wrap(resolve => {
+        setTimeout(
+          wrap(() => {
+            log.app(`Loaded "${key}" ...`);
+            resolvedValues[key] = true;
+            resolve(key);
+          }),
+          1000
+        );
+      })
+    );
+  }
+  return key;
+};
+
+const TestApp = () =>
+  createElement(
+    Placeholder,
+    {delayMs: 100, fallback: createElement(PlaceholderText)},
+    createElement(SuspendingChild, {text: 'foo'}),
+    createElement(SuspendingChild, {text: 'bar'}),
+    createElement(SuspendingChild, {text: 'baz'})
+  );
+
+const PlaceholderText = () => 'Loading ...';
+
+const SuspendingChild = ({text}) => {
+  const resolvedValue = read(text);
+  return resolvedValue;
+};
+
+subscribe({
+  onInteractionScheduledWorkCompleted: interaction =>
+    log.interaction(
+      'onInteractionScheduledWorkCompleted',
+      JSON.stringify(interaction)
+    ),
+  onInteractionTraced: interaction =>
+    log.interaction('onInteractionTraced', JSON.stringify(interaction)),
+  onWorkCanceled: interactions =>
+    log.work('onWorkCanceled', JSON.stringify(Array.from(interactions))),
+  onWorkScheduled: interactions =>
+    log.work('onWorkScheduled', JSON.stringify(Array.from(interactions))),
+  onWorkStarted: interactions =>
+    log.work('onWorkStarted', JSON.stringify(Array.from(interactions))),
+  onWorkStopped: interactions =>
+    log.work('onWorkStopped', JSON.stringify(Array.from(interactions))),
+});
+
+const element = document.getElementById('root');
+trace('initial_render', performance.now(), () => {
+  const root = createRoot(element);
+  const batch = root.createBatch();
+  log.app('batch.render()');
+  batch.render(createElement(TestApp));
+  batch.then(
+    wrap(() => {
+      log.app('batch.commit()');
+      batch.commit();
+    })
+  );
+});