Fix resetting timer on ChunkWriter

We were resetting the timer on ChunkWriter on each chunk write,
which led to throttling by timeout to be impossible.

Changelog: fixed

app/assets/javascripts/streaming/chunk_writer.js

@@ -71,8 +71,6 @@ export class ChunkWriter {
   }
 
   write(chunk) {
-    this.scheduleAccumulatorFlush.cancel();
-
     if (this.buffer) {
       this.buffer = concatUint8Arrays(this.buffer, chunk);
     } else {
@@ -85,6 +83,7 @@ export class ChunkWriter {
       return Promise.resolve();
     }
 
+    this.scheduleAccumulatorFlush.cancel();
     return this.balancedWrite();
   }
 

app/assets/javascripts/streaming/constants.js

@@ -6,4 +6,4 @@ export const LOW_FRAME_TIME = 32;
 // https://web.dev/optimize-long-tasks/
 export const HIGH_FRAME_TIME = 64;
 export const BALANCE_RATE = 1.2;
-export const TIMEOUT = 500;
+export const TIMEOUT = 100;

spec/frontend/streaming/chunk_writer_spec.js

+import { throttle } from 'lodash';
 import { ChunkWriter } from '~/streaming/chunk_writer';
 import { RenderBalancer } from '~/streaming/render_balancer';
 
 jest.mock('~/streaming/render_balancer');
+jest.mock('lodash/throttle', () => jest.fn());
 
 describe('ChunkWriter', () => {
   let accumulator = '';
@@ -10,6 +12,8 @@ describe('ChunkWriter', () => {
   let abort;
   let config;
   let render;
+  let cancelTimer;
+  let runTimer;
 
   const createChunk = (text) => {
     const encoder = new TextEncoder();
@@ -55,6 +59,23 @@ describe('ChunkWriter', () => {
       }
     });
     RenderBalancer.mockImplementation(() => ({ render }));
+    cancelTimer = jest.fn();
+    throttle.mockImplementation((fn) => {
+      const promise = new Promise((resolve) => {
+        runTimer = () => {
+          fn();
+          resolve();
+        };
+      });
+      promise.cancel = cancelTimer;
+      const result = () => promise;
+      result.cancel = cancelTimer;
+      return result;
+    });
+  });
+
+  afterEach(() => {
+    throttle.mockReset();
   });
 
   describe('when chunk length must be "1"', () => {
@@ -103,6 +124,7 @@ describe('ChunkWriter', () => {
       const flushAccumulator = jest.spyOn(ChunkWriter.prototype, 'flushAccumulator');
       const text = '1';
       pushChunks(text);
+      runTimer();
       expect(accumulator).toBe(text);
       expect(flushAccumulator).toHaveBeenCalledTimes(1);
     });
@@ -112,7 +134,7 @@ describe('ChunkWriter', () => {
       const text = '1234567890123';
       const writer = createWriter();
       writer.write(createChunk(text));
-      jest.runAllTimers();
+      runTimer();
       expect(accumulator).toBe(text);
       expect(flushAccumulator).toHaveBeenCalledTimes(1);
     });
@@ -211,4 +233,18 @@ describe('ChunkWriter', () => {
     writer.abort();
     expect(abort).toHaveBeenCalledTimes(1);
   });
+
+  it('accumulates chunk with a timeout', () => {
+    const text = '111222223';
+    config = { minChunkSize: 1000, maxChunkSize: 1000 };
+    const writer = createWriter();
+    const chunk = createChunk(text);
+    writer.write(chunk);
+    writer.write(chunk);
+    writer.write(chunk);
+    runTimer();
+    expect(accumulator).toBe(text.repeat(3));
+    expect(write.mock.calls).toMatchObject([[text.repeat(3)]]);
+    expect(cancelTimer).not.toHaveBeenCalled();
+  });
 });