From 3b6e1c6f7fa40219ce4cda88e2457ab052542d2b Mon Sep 17 00:00:00 2001 From: zhuyi01 Date: Mon, 17 Jan 2022 23:24:12 +0800 Subject: [PATCH 1/3] add failing test for renderToPipeableStream --- .../__tests__/ReactDOMFizzServerNode-test.js | 120 ++++++++++++++++++ 1 file changed, 120 insertions(+) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js index bd0ca112a27..bfca663795a 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js @@ -338,4 +338,124 @@ describe('ReactDOMFizzServer', () => { expect(output.result).toContain('Loading'); expect(isCompleteCalls).toBe(1); }); + + // @gate experimental + it('should be able to get context value when promise resloved.', async () => { + + class DelayClient { + get() { + if (this.resolved) return this.resolved; + if (this.pending) return this.pending; + return this.pending = new Promise(resolve => { + setTimeout(() => { + delete this.pending; + this.resolved = "OK"; + resolve(); + }, 500); + }); + } + } + + const DelayContext = React.createContext(undefined); + const Component = () => { + const client = React.useContext(DelayContext); + if (!client) { + return "context not found."; + } + const result = client.get(); + if (typeof result === "string") { + return result; + } + throw result; + } + + const client = new DelayClient(); + const {writable, output, completed } = getTestWritable(); + ReactDOMFizzServer.renderToPipeableStream( + + + + + + ).pipe(writable); + + jest.runAllTimers(); + + expect(output.error).toBe(undefined); + expect(output.result).toContain('loading'); + + await completed; + + expect(output.error).toBe(undefined); + expect(output.result).not.toContain('context never found'); + expect(output.result).toContain('OK'); + }); + + // @gate experimental + it('should be able to get context value when calls renderToPipeableStream twice at the same time', async () => { + class DelayClient { + get() { + if (this.resolved) return this.resolved; + if (this.pending) return this.pending; + return this.pending = new Promise(resolve => { + setTimeout(() => { + delete this.pending; + this.resolved = "OK"; + resolve(); + }, 500); + }); + } + } + const DelayContext = React.createContext(undefined); + const Component = () => { + const client = React.useContext(DelayContext); + if (!client) { + return "context never found"; + } + const result = client.get(); + if (typeof result === "string") { + return result; + } + throw result; + } + + const client0 = new DelayClient(); + const {writable: writable0, output: output0, completed: completed0 } = getTestWritable(); + ReactDOMFizzServer.renderToPipeableStream( + + + + + + ).pipe(writable0); + + const client1 = new DelayClient(); + const {writable: writable1, output: output1, completed: completed1 } = getTestWritable(); + ReactDOMFizzServer.renderToPipeableStream( + + + + + + ).pipe(writable1); + + jest.runAllTimers(); + + expect(output0.error).toBe(undefined); + expect(output0.result).toContain('loading'); + + expect(output1.error).toBe(undefined); + expect(output1.result).toContain('loading'); + + await Promise.all([completed0, completed1]); + + expect(output0.error).toBe(undefined); + expect(output0.result).not.toContain('context never found'); + expect(output0.result).toContain('OK'); + + expect(output1.error).toBe(undefined); + expect(output1.result).not.toContain('context never found'); + expect(output1.result).toContain('OK'); + }); + }); From bd82f8b19e7aff5046a6feab5bc6a8f9a0289412 Mon Sep 17 00:00:00 2001 From: zhuyi01 Date: Mon, 17 Jan 2022 23:51:21 +0800 Subject: [PATCH 2/3] fix lint problem --- .../__tests__/ReactDOMFizzServerNode-test.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js index bfca663795a..d9fda743670 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js @@ -349,7 +349,7 @@ describe('ReactDOMFizzServer', () => { return this.pending = new Promise(resolve => { setTimeout(() => { delete this.pending; - this.resolved = "OK"; + this.resolved = 'OK'; resolve(); }, 500); }); @@ -360,10 +360,10 @@ describe('ReactDOMFizzServer', () => { const Component = () => { const client = React.useContext(DelayContext); if (!client) { - return "context not found."; + return 'context not found.'; } const result = client.get(); - if (typeof result === "string") { + if (typeof result === 'string') { return result; } throw result; @@ -374,7 +374,7 @@ describe('ReactDOMFizzServer', () => { ReactDOMFizzServer.renderToPipeableStream( - + ).pipe(writable); @@ -400,7 +400,7 @@ describe('ReactDOMFizzServer', () => { return this.pending = new Promise(resolve => { setTimeout(() => { delete this.pending; - this.resolved = "OK"; + this.resolved = 'OK'; resolve(); }, 500); }); @@ -410,10 +410,10 @@ describe('ReactDOMFizzServer', () => { const Component = () => { const client = React.useContext(DelayContext); if (!client) { - return "context never found"; + return 'context never found'; } const result = client.get(); - if (typeof result === "string") { + if (typeof result === 'string') { return result; } throw result; @@ -424,7 +424,7 @@ describe('ReactDOMFizzServer', () => { ReactDOMFizzServer.renderToPipeableStream( - + ).pipe(writable0); @@ -434,7 +434,7 @@ describe('ReactDOMFizzServer', () => { ReactDOMFizzServer.renderToPipeableStream( - + ).pipe(writable1); From 5189d67a942da19d0448640cf9da936cc3355778 Mon Sep 17 00:00:00 2001 From: zhuyi01 Date: Mon, 17 Jan 2022 23:59:11 +0800 Subject: [PATCH 3/3] prettier code --- .../__tests__/ReactDOMFizzServerNode-test.js | 34 +++++++++++-------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js index d9fda743670..73d20fa8070 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js @@ -341,18 +341,17 @@ describe('ReactDOMFizzServer', () => { // @gate experimental it('should be able to get context value when promise resloved.', async () => { - class DelayClient { get() { if (this.resolved) return this.resolved; if (this.pending) return this.pending; - return this.pending = new Promise(resolve => { + return (this.pending = new Promise(resolve => { setTimeout(() => { delete this.pending; this.resolved = 'OK'; resolve(); }, 500); - }); + })); } } @@ -367,16 +366,16 @@ describe('ReactDOMFizzServer', () => { return result; } throw result; - } + }; const client = new DelayClient(); - const {writable, output, completed } = getTestWritable(); + const {writable, output, completed} = getTestWritable(); ReactDOMFizzServer.renderToPipeableStream( - + , ).pipe(writable); jest.runAllTimers(); @@ -397,13 +396,13 @@ describe('ReactDOMFizzServer', () => { get() { if (this.resolved) return this.resolved; if (this.pending) return this.pending; - return this.pending = new Promise(resolve => { + return (this.pending = new Promise(resolve => { setTimeout(() => { delete this.pending; this.resolved = 'OK'; resolve(); }, 500); - }); + })); } } const DelayContext = React.createContext(undefined); @@ -417,26 +416,34 @@ describe('ReactDOMFizzServer', () => { return result; } throw result; - } + }; const client0 = new DelayClient(); - const {writable: writable0, output: output0, completed: completed0 } = getTestWritable(); + const { + writable: writable0, + output: output0, + completed: completed0, + } = getTestWritable(); ReactDOMFizzServer.renderToPipeableStream( - + , ).pipe(writable0); const client1 = new DelayClient(); - const {writable: writable1, output: output1, completed: completed1 } = getTestWritable(); + const { + writable: writable1, + output: output1, + completed: completed1, + } = getTestWritable(); ReactDOMFizzServer.renderToPipeableStream( - + , ).pipe(writable1); jest.runAllTimers(); @@ -457,5 +464,4 @@ describe('ReactDOMFizzServer', () => { expect(output1.result).not.toContain('context never found'); expect(output1.result).toContain('OK'); }); - });