Added failing tests for two remaining suspense cases

Author: Brian Vaughn

packages/react/src/__tests__/ReactProfiler-test.internal.js

@@ -1240,6 +1240,7 @@ describe('Profiler', () => {
 
  loadModules({
  enableSchedulerTracking: true,
+ enableSuspense: true,
  });
 
  throwInOnInteractionScheduledWorkCompleted = false;
@@ -2301,5 +2302,159 @@ describe('Profiler', () => {
  onInteractionScheduledWorkCompleted,
  ).toHaveBeenLastNotifiedOfInteraction(interaction);
  });
+
+ it('does not prematurely complete for suspended sync renders', async () => {
+ const SimpleCacheProvider = require('simple-cache-provider');
+ let cache;
+ function invalidateCache() {
+ cache = SimpleCacheProvider.createCache(invalidateCache);
+ }
+ invalidateCache();
+
+ let resourcePromise;
+ const TextResource = SimpleCacheProvider.createResource(
+ ([text, ms = 0]) => {
+ resourcePromise = new Promise((resolve, reject) =>
+ setTimeout(() => resolve(text), ms),
+ );
+ return resourcePromise;
+ },
+ ([text, ms]) => text,
+ );
+
+ function AsyncText({ms, text}) {
+ TextResource.read(cache, [text, ms]);
+ return <span prop={text} />;
+ }
+
+ function Text({text}) {
+ return text;
+ }
+
+ const interaction = {
+ id: 0,
+ name: 'initial render',
+ timestamp: mockNow(),
+ };
+
+ const onRender = jest.fn();
+ let renderer;
+ SchedulerTracking.unstable_track(
+ interaction.name,
+ interaction.timestamp,
+ () => {
+ renderer = ReactTestRenderer.create(
+ <React.unstable_Profiler id="app" onRender={onRender}>
+ <React.Placeholder
+ delayMs={1000}
+ fallback={<Text text="loading" />}>
+ <AsyncText text="loaded" ms={2000} />
+ </React.Placeholder>
+ </React.unstable_Profiler>,
+ );
+ },
+ );
+
+ expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+
+ jest.runAllTimers();
+ await resourcePromise;
+
+ expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+ expect(
+ onInteractionScheduledWorkCompleted,
+ ).toHaveBeenLastNotifiedOfInteraction(interaction);
+ });
+
+ it('does not prematurely complete for suspended renders that have exceeded their deadline', async () => {
+ function awaitableAdvanceTimers(ms) {
+ jest.advanceTimersByTime(ms);
+ // Wait until the end of the current tick
+ return new Promise(resolve => {
+ setImmediate(resolve);
+ });
+ }
+
+ const SimpleCacheProvider = require('simple-cache-provider');
+ let cache;
+ function invalidateCache() {
+ cache = SimpleCacheProvider.createCache(invalidateCache);
+ }
+ invalidateCache();
+
+ const TextResource = SimpleCacheProvider.createResource(
+ ([text, ms = 0]) => {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ ReactTestRenderer.unstable_yield(`Promise resolved [${text}]`);
+ resolve(text);
+ }, ms);
+ });
+ },
+ ([text, ms]) => text,
+ );
+
+ function AsyncText({ms, text}) {
+ try {
+ TextResource.read(cache, [text, ms]);
+ ReactTestRenderer.unstable_yield(`AsyncText [${text}]`);
+ return <span prop={text} />;
+ } catch (promise) {
+ if (typeof promise.then === 'function') {
+ ReactTestRenderer.unstable_yield(`Suspend! [${text}]`);
+ } else {
+ ReactTestRenderer.unstable_yield(`Error! [${text}]`);
+ }
+ throw promise;
+ }
+ }
+
+ function Text({text}) {
+ ReactTestRenderer.unstable_yield(`Text [${text}]`);
+ return text;
+ }
+
+ const interaction = {
+ id: 0,
+ name: 'initial render',
+ timestamp: mockNow(),
+ };
+
+ const onRender = jest.fn();
+ let renderer;
+ SchedulerTracking.unstable_track(
+ interaction.name,
+ interaction.timestamp,
+ () => {
+ renderer = ReactTestRenderer.create(
+ <React.unstable_Profiler id="app" onRender={onRender}>
+ <React.Placeholder
+ delayMs={1000}
+ fallback={<Text text="loading" />}>
+ <AsyncText text="loaded" ms={2000} />
+ </React.Placeholder>
+ </React.unstable_Profiler>,
+ {
+ unstable_isAsync: true,
+ },
+ );
+ },
+ );
+
+ advanceTimeBy(1500);
+ await awaitableAdvanceTimers(1500);
+
+ expect(renderer).toFlushAll(['Suspend! [loaded]', 'Text [loading]']);
+ expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+
+ advanceTimeBy(2500);
+ await awaitableAdvanceTimers(2500);
+
+ expect(renderer).toFlushAll(['AsyncText [loaded]']);
+ expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+ expect(
+ onInteractionScheduledWorkCompleted,
+ ).toHaveBeenLastNotifiedOfInteraction(interaction);
+ });
  });
 });