fix tests caused by mock-fs and linting

Author: AbanoubGhadban

packages/react-on-rails-pro/tests/AsyncQueue.ts

@@ -1,13 +1,15 @@
 import * as EventEmitter from 'node:events';
 
 class AsyncQueue<T> {
-  private eventEmitter = new EventEmitter<{ data: any, end: any }>();
+  private eventEmitter = new EventEmitter();
+
   private buffer: T[] = [];
+
   private isEnded = false;
 
   enqueue(value: T) {
     if (this.isEnded) {
-      throw new Error("Queue Ended");
+      throw new Error('Queue Ended');
     }
 
     if (this.eventEmitter.listenerCount('data') > 0) {
@@ -28,31 +30,27 @@ class AsyncQueue<T> {
       if (bufferValueIfExist) {
         resolve(bufferValueIfExist);
       } else if (this.isEnded) {
-        reject(new Error("Queue Ended"));
+        reject(new Error('Queue Ended'));
       } else {
-        let teardown = () => {}
+        let teardown = () => {};
         const onData = (value: T) => {
           resolve(value);
           teardown();
-        }
-        
+        };
+
         const onEnd = () => {
-          reject(new Error("Queue Ended"));
+          reject(new Error('Queue Ended'));
           teardown();
-        }
+        };
 
         this.eventEmitter.on('data', onData);
         this.eventEmitter.on('end', onEnd);
         teardown = () => {
           this.eventEmitter.off('data', onData);
           this.eventEmitter.off('end', onEnd);
-        }
+        };
       }
-    })
-  }
-
-  toString() {
-    return ""
+    });
   }
 }
 

packages/react-on-rails-pro/tests/StreamReader.ts

@@ -1,5 +1,5 @@
 import { PassThrough, Readable } from 'node:stream';
-import AsyncQueue from './AsyncQueue';
+import AsyncQueue from './AsyncQueue.ts';
 
 class StreamReader {
   private asyncQueue: AsyncQueue<string>;
@@ -11,7 +11,7 @@ class StreamReader {
     const readableStream = new PassThrough();
     pipeableStream.pipe(readableStream);
 
-    readableStream.on('data', (chunk) => {
+    readableStream.on('data', (chunk: Buffer) => {
       const decodedChunk = decoder.decode(chunk);
       this.asyncQueue.enqueue(decodedChunk);
     });

packages/react-on-rails-pro/tests/concurrentRSCPayloadGeneration.rsc.test.tsx

@@ -4,40 +4,43 @@
 /// <reference types="react/experimental" />
 
 import * as React from 'react';
-import { PassThrough, Readable, Transform } from 'node:stream';
-import { text } from 'node:stream/consumers';
 import { Suspense, PropsWithChildren } from 'react';
 
 import * as path from 'path';
 import * as mock from 'mock-fs';
 
-import ReactOnRails, { RailsContextWithServerStreamingCapabilities } from '../src/ReactOnRailsRSC';
-import AsyncQueue from './AsyncQueue';
-import StreamReader from './StreamReader';
-import removeRSCChunkStack from './utils/removeRSCChunkStack';
+import ReactOnRails, { RailsContextWithServerStreamingCapabilities } from '../src/ReactOnRailsRSC.ts';
+import AsyncQueue from './AsyncQueue.ts';
+import StreamReader from './StreamReader.ts';
+import removeRSCChunkStack from './utils/removeRSCChunkStack.ts';
 
-const manifestFileDirectory = path.resolve(__dirname, '../src')
+const manifestFileDirectory = path.resolve(__dirname, '../src');
 const clientManifestPath = path.join(manifestFileDirectory, 'react-client-manifest.json');
 
-mock({
-  [clientManifestPath]: JSON.stringify({
-    filePathToModuleMetadata: {},
-    moduleLoading: { prefix: '', crossOrigin: null },
-  }),
+beforeEach(() => {
+  mock({
+    [clientManifestPath]: JSON.stringify({
+      filePathToModuleMetadata: {},
+      moduleLoading: { prefix: '', crossOrigin: null },
+    }),
+  });
 });
 
-afterAll(() => mock.restore());
+afterEach(() => mock.restore());
 
-const AsyncQueueItem = async ({ asyncQueue, children  }: PropsWithChildren<{asyncQueue: AsyncQueue<string>}>) => {
+const AsyncQueueItem = async ({
+  asyncQueue,
+  children,
+}: PropsWithChildren<{ asyncQueue: AsyncQueue<string> }>) => {
   const value = await asyncQueue.dequeue();
 
   return (
     <>
       <p>Data: {value}</p>
       {children}
     </>
-  )
-}
+  );
+};
 
 const AsyncQueueContainer = ({ asyncQueue }: { asyncQueue: AsyncQueue<string> }) => {
   return (
@@ -55,8 +58,8 @@ const AsyncQueueContainer = ({ asyncQueue }: { asyncQueue: AsyncQueue<string> })
         </AsyncQueueItem>
       </Suspense>
     </div>
-  )
-}
+  );
+};
 
 ReactOnRails.register({ AsyncQueueContainer });
 
@@ -72,30 +75,30 @@ const renderComponent = (props: Record<string, unknown>) => {
     domNodeId: 'dom-id',
     props,
   });
-}
+};
 
 const createParallelRenders = (size: number) => {
   const asyncQueues = new Array(size).fill(null).map(() => new AsyncQueue<string>());
   const streams = asyncQueues.map((asyncQueue) => {
     return renderComponent({ asyncQueue });
   });
-  const readers = streams.map(stream => new StreamReader(stream));
+  const readers = streams.map((stream) => new StreamReader(stream));
 
-  const enqueue = (value: string) => asyncQueues.forEach(asyncQueues => asyncQueues.enqueue(value));
+  const enqueue = (value: string) => asyncQueues.forEach((asyncQueue) => asyncQueue.enqueue(value));
 
-  const expectNextChunk = (nextChunk: string) => Promise.all(
-    readers.map(async (reader) => {
-      const chunk = await reader.nextChunk();
-      expect(removeRSCChunkStack(chunk)).toEqual(removeRSCChunkStack(nextChunk));
-    })
-  );
-  
-  const expectEndOfStream = () => Promise.all(
-    readers.map(reader => expect(reader.nextChunk()).rejects.toThrow(/Queue Ended/))
-  );
+  const expectNextChunk = (nextChunk: string) =>
+    Promise.all(
+      readers.map(async (reader) => {
+        const chunk = await reader.nextChunk();
+        expect(removeRSCChunkStack(chunk)).toEqual(removeRSCChunkStack(nextChunk));
+      }),
+    );
+
+  const expectEndOfStream = () =>
+    Promise.all(readers.map((reader) => expect(reader.nextChunk()).rejects.toThrow(/Queue Ended/)));
 
   return { enqueue, expectNextChunk, expectEndOfStream };
-}
+};
 
 test('Renders concurrent rsc streams as single rsc stream', async () => {
   expect.assertions(258);
@@ -104,38 +107,38 @@ test('Renders concurrent rsc streams as single rsc stream', async () => {
   const reader = new StreamReader(stream);
 
   const chunks: string[] = [];
-  let chunk = await reader.nextChunk()
+  let chunk = await reader.nextChunk();
   chunks.push(chunk);
-  expect(chunk).toContain("Async Queue");
-  expect(chunk).toContain("Loading Item2");
-  expect(chunk).not.toContain("Random Value");
+  expect(chunk).toContain('Async Queue');
+  expect(chunk).toContain('Loading Item2');
+  expect(chunk).not.toContain('Random Value');
 
-  asyncQueue.enqueue("Random Value1");
+  asyncQueue.enqueue('Random Value1');
   chunk = await reader.nextChunk();
   chunks.push(chunk);
-  expect(chunk).toContain("Random Value1");
+  expect(chunk).toContain('Random Value1');
 
-  asyncQueue.enqueue("Random Value2");
+  asyncQueue.enqueue('Random Value2');
   chunk = await reader.nextChunk();
   chunks.push(chunk);
-  expect(chunk).toContain("Random Value2");
+  expect(chunk).toContain('Random Value2');
 
-  asyncQueue.enqueue("Random Value3");
+  asyncQueue.enqueue('Random Value3');
   chunk = await reader.nextChunk();
   chunks.push(chunk);
-  expect(chunk).toContain("Random Value3");
+  expect(chunk).toContain('Random Value3');
 
   await expect(reader.nextChunk()).rejects.toThrow(/Queue Ended/);
 
   const { enqueue, expectNextChunk, expectEndOfStream } = createParallelRenders(50);
 
   expect(chunks).toHaveLength(4);
-  await expectNextChunk(chunks[0]!);
-  enqueue("Random Value1");
-  await expectNextChunk(chunks[1]!);
-  enqueue("Random Value2");
-  await expectNextChunk(chunks[2]!);
-  enqueue("Random Value3");
-  await expectNextChunk(chunks[3]!);
+  await expectNextChunk(chunks[0]);
+  enqueue('Random Value1');
+  await expectNextChunk(chunks[1]);
+  enqueue('Random Value2');
+  await expectNextChunk(chunks[2]);
+  enqueue('Random Value3');
+  await expectNextChunk(chunks[3]);
   await expectEndOfStream();
 });

packages/react-on-rails-pro/tests/serverRenderRSCReactComponent.rsc.test.tsx

@@ -1,27 +1,22 @@
 /**
  * @jest-environment node
  */
+/// <reference types="react/experimental" />
 
 import * as React from 'react';
 import { Suspense } from 'react';
 import * as mock from 'mock-fs';
-import * as fs from 'fs';
 import * as path from 'path';
-import { pipeline, finished } from 'stream/promises';
+import { finished } from 'stream/promises';
 import { text } from 'stream/consumers';
-import { buildServerRenderer } from 'react-on-rails-rsc/server.node';
-import createReactOutput from 'react-on-rails/createReactOutput';
 import ReactOnRails, { RailsContextWithServerStreamingCapabilities } from '../src/ReactOnRailsRSC.ts';
-import removeRSCStackFromAllChunks from './utils/removeRSCStackFromAllChunks.ts'
 
-const PromiseWrapper = async ({ promise, name }: { promise: Promise<string>, name: string }) => {
+const PromiseWrapper = async ({ promise, name }: { promise: Promise<string>; name: string }) => {
   console.log(`[${name}] Before awaitng`);
   const value = await promise;
   console.log(`[${name}] After awaitng`);
-  return (
-    <p>Value: {value}</p>
-  );
-}
+  return <p>Value: {value}</p>;
+};
 
 const PromiseContainer = ({ name }: { name: string }) => {
   const promise = new Promise<string>((resolve) => {
@@ -44,21 +39,23 @@ const PromiseContainer = ({ name }: { name: string }) => {
       </Suspense>
     </div>
   );
-}
+};
 
 ReactOnRails.register({ PromiseContainer });
 
-const manifestFileDirectory = path.resolve(__dirname, '../src')
+const manifestFileDirectory = path.resolve(__dirname, '../src');
 const clientManifestPath = path.join(manifestFileDirectory, 'react-client-manifest.json');
 
-mock({
-  [clientManifestPath]: JSON.stringify({
-    filePathToModuleMetadata: {},
-    moduleLoading: { prefix: '', crossOrigin: null },
-  }),
+beforeEach(() => {
+  mock({
+    [clientManifestPath]: JSON.stringify({
+      filePathToModuleMetadata: {},
+      moduleLoading: { prefix: '', crossOrigin: null },
+    }),
+  });
 });
 
-afterAll(() => {
+afterEach(() => {
   mock.restore();
 });
 
@@ -72,7 +69,7 @@ test('no logs leakage between concurrent rendering components', async () => {
     renderingReturnsPromises: true,
     throwJsErrors: true,
     domNodeId: 'dom-id',
-    props: { name: "First Unique Name" }
+    props: { name: 'First Unique Name' },
   });
   const readable2 = ReactOnRails.serverRenderRSCReactComponent({
     railsContext: {
@@ -83,15 +80,15 @@ test('no logs leakage between concurrent rendering components', async () => {
     renderingReturnsPromises: true,
     throwJsErrors: true,
     domNodeId: 'dom-id',
-    props: { name: "Second Unique Name" }
+    props: { name: 'Second Unique Name' },
   });
 
   const [content1, content2] = await Promise.all([text(readable1), text(readable2)]);
 
-  expect(content1).toContain("First Unique Name");
-  expect(content2).toContain("Second Unique Name");
-  expect(content1).not.toContain("Second Unique Name");
-  expect(content2).not.toContain("First Unique Name");
+  expect(content1).toContain('First Unique Name');
+  expect(content2).toContain('Second Unique Name');
+  expect(content1).not.toContain('Second Unique Name');
+  expect(content2).not.toContain('First Unique Name');
 });
 
 test('no logs lekage from outside the component', async () => {
@@ -104,7 +101,7 @@ test('no logs lekage from outside the component', async () => {
     renderingReturnsPromises: true,
     throwJsErrors: true,
     domNodeId: 'dom-id',
-    props: { name: "First Unique Name" }
+    props: { name: 'First Unique Name' },
   });
 
   const promise = new Promise<void>((resolve) => {
@@ -121,8 +118,8 @@ test('no logs lekage from outside the component', async () => {
 
   const [content1] = await Promise.all([text(readable1), promise]);
 
-  expect(content1).toContain("First Unique Name");
-  expect(content1).not.toContain("Outside The Component");
+  expect(content1).toContain('First Unique Name');
+  expect(content1).not.toContain('Outside The Component');
 });
 
 test('[bug] catches logs outside the component during reading the stream', async () => {
@@ -135,29 +132,29 @@ test('[bug] catches logs outside the component during reading the stream', async
     renderingReturnsPromises: true,
     throwJsErrors: true,
     domNodeId: 'dom-id',
-    props: { name: "First Unique Name" }
+    props: { name: 'First Unique Name' },
   });
-  
-  let content1 = "";
+
+  let content1 = '';
   let i = 0;
-  readable1.on('data', (chunk) => {
+  readable1.on('data', (chunk: Buffer) => {
     i += 1;
     // To avoid infinite loop
     if (i < 5) {
-      console.log("Outside The Component");
+      console.log('Outside The Component');
     }
     content1 += chunk.toString();
   });
 
   // However, any logs from outside the stream 'data' event callback is not catched
   const intervalId = setInterval(() => {
-    console.log("From Interval")
+    console.log('From Interval');
   }, 2);
   await finished(readable1);
   clearInterval(intervalId);
 
-  expect(content1).toContain("First Unique Name");
-  expect(content1).not.toContain("From Interval");
+  expect(content1).toContain('First Unique Name');
+  expect(content1).not.toContain('From Interval');
   // Here's the bug
-  expect(content1).toContain("Outside The Component");
+  expect(content1).toContain('Outside The Component');
 });