add tests to exercise codepaths dealing with buffer overlows

packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js

@@ -248,4 +248,42 @@ describe('ReactDOMFizzServer', () => {
  expect(rendered).toBe(false);
  expect(isComplete).toBe(true);
  });
+
+ // @gate experimental
+ it('should stream large contents that might overlow individual buffers', async () => {
+ let str492 = `(492) This string is intentionally 492 bytes long because we want to make sure we process chunks that will overflow buffer boundaries. It will repeat to fill out the bytes required (inclusive of this prompt):: foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux q :: total count (492)`;
+ let str2049 = `(2049) This string is intentionally 2049 bytes long because we want to make sure we process chunks that will overflow buffer boundaries. It will repeat to fill out the bytes required (inclusive of this prompt):: foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy :: total count (2049)`;
+
+ // this specific layout is somewhat contrived to exercise the landing on
+ // an exact view boundary. it's not critical to test this edge case but
+ // since we are setting up a test in general for larger chunks I contrived it
+ // as such for now. I don't think it needs to be maintained if in the future
+ // the view sizes change or become dynamic becasue of the use of byobRequest
+ const stream511 = await ReactDOMFizzServer.renderToReadableStream(
+ <>
+ <div>
+ <span>{''}</span>
+ </div>
+ <div>{str492}</div>
+ <div>{str492}</div>
+ </>,
+ );
+
+ const result511 = await readResult(stream511);
+ expect(result511).toMatchInlineSnapshot(
+ `"<div><span></span></div><div>${str492}</div><div>${str492}</div>"`,
+ );
+
+ // this size 2049 was chosen to be a couple base 2 orders larger than the current view
+ // size. if the size changes in the future hopefully this will still exercise
+ // a chunk that is too large for the view size.
+ const stream2049 = await ReactDOMFizzServer.renderToReadableStream(
+ <>
+ <div>{str2049}</div>
+ </>,
+ );
+
+ const result2049 = await readResult(stream2049);
+ expect(result2049).toMatchInlineSnapshot(`"<div>${str2049}</div>"`);
+ });
 });