diff --git a/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js index ebc48625a9495..bc7316349196a 100644 --- a/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js @@ -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; @@ -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'; @@ -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'); @@ -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 = []; @@ -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 ( - }> - - - - - - ); - } - - const container = document.createElement('div'); - const root = ReactDOM.createRoot(container); - - React.startTransition(() => root.render()); - - 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 ( + // }> + // + // + // + // + // + // ); + // } + + // const container = document.createElement('div'); + // const root = ReactDOM.createRoot(container); + + // React.startTransition(() => root.render()); + + // 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;