Skip to content

Commit

Permalink
disable suspense test
Browse files Browse the repository at this point in the history
  • Loading branch information
@gnoff
gnoff committed Feb 28, 2022
1 parent 752e78f commit 4896187
Showing 1 changed file with 131 additions and 131 deletions.
262 changes: 131 additions & 131 deletions packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@

let React;
let Scheduler;
let ReactCache;
// let ReactCache;
let ReactDOM;
let Suspense;
// let Suspense;
let originalCreateElement;
let TextResource;
let textResourceShouldFail;
// let TextResource;
// let textResourceShouldFail;

let images = [];
let onLoadSpy = null;
Expand Down Expand Up @@ -48,21 +48,21 @@ function Text(props) {
return props.text;
}

function AsyncText(props) {
const text = props.text;
try {
TextResource.read([props.text, props.ms]);
Scheduler.unstable_yieldValue(text);
return text;
} catch (promise) {
if (typeof promise.then === 'function') {
Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
} else {
Scheduler.unstable_yieldValue(`Error! [${text}]`);
}
throw promise;
}
}
// function AsyncText(props) {
// const text = props.text;
// try {
// TextResource.read([props.text, props.ms]);
// Scheduler.unstable_yieldValue(text);
// return text;
// } catch (promise) {
// if (typeof promise.then === 'function') {
// Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
// } else {
// Scheduler.unstable_yieldValue(`Error! [${text}]`);
// }
// throw promise;
// }
// }

function Img({src: maybeSrc, onLoad, useImageLoader, ref}) {
const src = maybeSrc || 'default';
Expand All @@ -82,14 +82,14 @@ function loadImage(element) {
element.dispatchEvent(event);
}

describe.only('ReactDOMImageLoad', () => {
describe('ReactDOMImageLoad', () => {
beforeEach(() => {
jest.resetModules();
React = require('react');
Scheduler = require('scheduler');
ReactCache = require('react-cache');
// ReactCache = require('react-cache');
ReactDOM = require('react-dom');
Suspense = React.Suspense;
// Suspense = React.Suspense;

onLoadSpy = jest.fn(reactEvent => {
const src = reactEvent.target.getAttribute('src');
Expand All @@ -102,54 +102,54 @@ describe.only('ReactDOMImageLoad', () => {
nativeEvent.__originalDispatch = false;
});

TextResource = ReactCache.unstable_createResource(
([text, ms = 0]) => {
let listeners = null;
let status = 'pending';
let value = null;
return {
then(resolve, reject) {
switch (status) {
case 'pending': {
if (listeners === null) {
listeners = [{resolve, reject}];
setTimeout(() => {
if (textResourceShouldFail) {
Scheduler.unstable_yieldValue(
`Promise rejected [${text}]`,
);
status = 'rejected';
value = new Error('Failed to load: ' + text);
listeners.forEach(listener => listener.reject(value));
} else {
Scheduler.unstable_yieldValue(
`Promise resolved [${text}]`,
);
status = 'resolved';
value = text;
listeners.forEach(listener => listener.resolve(value));
}
}, ms);
} else {
listeners.push({resolve, reject});
}
break;
}
case 'resolved': {
resolve(value);
break;
}
case 'rejected': {
reject(value);
break;
}
}
},
};
},
([text, ms]) => text,
);
textResourceShouldFail = false;
// TextResource = ReactCache.unstable_createResource(
// ([text, ms = 0]) => {
// let listeners = null;
// let status = 'pending';
// let value = null;
// return {
// then(resolve, reject) {
// switch (status) {
// case 'pending': {
// if (listeners === null) {
// listeners = [{resolve, reject}];
// setTimeout(() => {
// if (textResourceShouldFail) {
// Scheduler.unstable_yieldValue(
// `Promise rejected [${text}]`,
// );
// status = 'rejected';
// value = new Error('Failed to load: ' + text);
// listeners.forEach(listener => listener.reject(value));
// } else {
// Scheduler.unstable_yieldValue(
// `Promise resolved [${text}]`,
// );
// status = 'resolved';
// value = text;
// listeners.forEach(listener => listener.resolve(value));
// }
// }, ms);
// } else {
// listeners.push({resolve, reject});
// }
// break;
// }
// case 'resolved': {
// resolve(value);
// break;
// }
// case 'rejected': {
// reject(value);
// break;
// }
// }
// },
// };
// },
// ([text, ms]) => text,
// );
// textResourceShouldFail = false;

images = [];

Expand Down Expand Up @@ -442,67 +442,67 @@ describe.only('ReactDOMImageLoad', () => {
expect(onLoadSpy).not.toHaveBeenCalled();
});

fit('captures the load event if it happens in a suspended subtree and replays it between layout and passive effects on resumption', async function() {
function SuspendingWithImage() {
Scheduler.unstable_yieldValue('SuspendingWithImage');
return (
<Suspense fallback={<Text text="Loading..." />}>
<AsyncText text="A" ms={100} />
<PhaseMarkers>
<Img onLoad={onLoadSpy} />
</PhaseMarkers>
</Suspense>
);
}

const container = document.createElement('div');
const root = ReactDOM.createRoot(container);

React.startTransition(() => root.render(<SuspendingWithImage />));

expect(Scheduler).toFlushAndYield([
'SuspendingWithImage',
'Suspend! [A]',
'render start',
'Img default',
'Loading...',
]);
let img = last(images);
loadImage(img);
expect(Scheduler).toHaveYielded(['actualLoadSpy [default]']);
expect(onLoadSpy).not.toHaveBeenCalled();

// Flush some of the time
jest.advanceTimersByTime(50);
// Still nothing...
expect(Scheduler).toFlushWithoutYielding();

// Flush the promise completely
jest.advanceTimersByTime(50);
// Renders successfully
expect(Scheduler).toHaveYielded(['Promise resolved [A]']);

expect(Scheduler).toFlushAndYieldThrough([
'A',
// img was recreated on unsuspended tree causing new load event
'render start',
'Img default',
'last layout',
]);

expect(images.length).toBe(2);
img = last(images);
expect(img.__needsDispatch).toBe(true);
loadImage(img);
expect(Scheduler).toHaveYielded([
'actualLoadSpy [default]',
'onLoadSpy [default]',
]);

expect(Scheduler).toFlushAndYield(['last passive']);

expect(onLoadSpy).toHaveBeenCalledTimes(1);
});
// it('captures the load event if it happens in a suspended subtree and replays it between layout and passive effects on resumption', async function() {
// function SuspendingWithImage() {
// Scheduler.unstable_yieldValue('SuspendingWithImage');
// return (
// <Suspense fallback={<Text text="Loading..." />}>
// <AsyncText text="A" ms={100} />
// <PhaseMarkers>
// <Img onLoad={onLoadSpy} />
// </PhaseMarkers>
// </Suspense>
// );
// }

// const container = document.createElement('div');
// const root = ReactDOM.createRoot(container);

// React.startTransition(() => root.render(<SuspendingWithImage />));

// expect(Scheduler).toFlushAndYield([
// 'SuspendingWithImage',
// 'Suspend! [A]',
// 'render start',
// 'Img default',
// 'Loading...',
// ]);
// let img = last(images);
// loadImage(img);
// expect(Scheduler).toHaveYielded(['actualLoadSpy [default]']);
// expect(onLoadSpy).not.toHaveBeenCalled();

// // Flush some of the time
// jest.advanceTimersByTime(50);
// // Still nothing...
// expect(Scheduler).toFlushWithoutYielding();

// // Flush the promise completely
// jest.advanceTimersByTime(50);
// // Renders successfully
// expect(Scheduler).toHaveYielded(['Promise resolved [A]']);

// expect(Scheduler).toFlushAndYieldThrough([
// 'A',
// // img was recreated on unsuspended tree causing new load event
// 'render start',
// 'Img default',
// 'last layout',
// ]);

// expect(images.length).toBe(2);
// img = last(images);
// expect(img.__needsDispatch).toBe(true);
// loadImage(img);
// expect(Scheduler).toHaveYielded([
// 'actualLoadSpy [default]',
// 'onLoadSpy [default]',
// ]);

// expect(Scheduler).toFlushAndYield(['last passive']);

// expect(onLoadSpy).toHaveBeenCalledTimes(1);
// });

it('correctly replays the last img load even when a yield + update causes the host element to change', async function() {
let externalSetSrc = null;
Expand Down

0 comments on commit 4896187

Please sign in to comment.