Added waitForReactRenderCycle and fixed specs warnings

nlkitai · May 12, 2024 · c94c330 · c94c330
1 parent 6a458fb
commit c94c330
Show file tree

Hide file tree

Showing 25 changed files with 312 additions and 281 deletions.
diff --git a/packages/react/core/src/logic/StreamContainer/StreamContainerComp.tsx b/packages/react/core/src/logic/StreamContainer/StreamContainerComp.tsx
@@ -1,4 +1,4 @@
-import {Ref, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import {ReactElement, Ref, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {createMarkdownStreamParser, MarkdownStreamParser} from '../../../../../extra/markdown/src';
 import {className as compMessageClassName} from '../../../../../shared/src/ui/Message/create';
 import {
@@ -76,7 +76,7 @@ export const StreamContainerComp = function <AiChat>(
         markdownOptions?.streamingAnimationSpeed,
     ]);
 
-    const rootElement = useMemo(() => {
+    const rootElement: ReactElement = useMemo(() => {
         if (responseRenderer) {
             const ResponseRendererComp = responseRenderer;
             return (

diff --git a/specs/specs/adapters/react/extras-conversationHistory.spec.tsx b/specs/specs/adapters/react/extras-conversationHistory.spec.tsx
@@ -1,10 +1,11 @@
 import {AiChat, ChatItem} from '@nlux-dev/react/src';
 import {render} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {act} from 'react';
 import {afterEach, beforeEach, describe, expect, it} from 'vitest';
 import {adapterBuilder} from '../../../utils/adapterBuilder';
 import {AdapterController} from '../../../utils/adapters';
-import {waitForMdStreamToComplete, waitForRenderCycle} from '../../../utils/wait';
+import {waitForMdStreamToComplete, waitForReactRenderCycle} from '../../../utils/wait';
 
 describe.each([
         {dataTransferMode: 'fetch'},
@@ -34,12 +35,12 @@ describe.each([
                 <AiChat adapter={adapterController!.adapter} initialConversation={initialConversation}/>,
             );
 
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
             const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-prmptBox > textarea')!;
 
             // Act
             await userEvent.type(textArea, 'Hello{enter}');
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
 
             // Assert
             expect(adapterController!.getLastExtras()?.conversationHistory).toEqual([...initialConversation]);
@@ -58,12 +59,12 @@ describe.each([
                     <AiChat adapter={adapterController!.adapter} initialConversation={initialConversation}/>,
                 );
 
-                await waitForRenderCycle();
+                await waitForReactRenderCycle();
                 const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-prmptBox > textarea')!;
 
                 // Act
                 await userEvent.type(textArea, 'So what did you do?{enter}');
-                await waitForRenderCycle();
+                await waitForReactRenderCycle();
 
                 if (dataTransferMode === 'fetch') {
                     adapterController!.resolve('I helped you with your account.');
@@ -72,15 +73,16 @@ describe.each([
                     adapterController!.complete();
                 }
 
+                await act(() => waitForMdStreamToComplete(60));
+
                 // Assert
-                await waitForMdStreamToComplete(60);
                 expect(container.innerHTML).toEqual(
                     expect.stringContaining('I helped you with your account.'),
                 );
 
                 // Act
                 await userEvent.type(textArea, 'Thank you!{enter}');
-                await waitForRenderCycle();
+                await waitForReactRenderCycle();
 
                 // Assert
                 const newConversationHistory = adapterController!.getLastExtras()?.conversationHistory;
@@ -112,12 +114,12 @@ describe.each([
                 />,
             );
 
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
             const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-prmptBox > textarea')!;
 
             // Act
             await userEvent.type(textArea, 'Hello{enter}');
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
 
             // Assert
             expect(adapterController!.getLastExtras()?.conversationHistory).toBeUndefined();
@@ -144,12 +146,12 @@ describe.each([
                     />,
                 );
 
-                await waitForRenderCycle();
+                await waitForReactRenderCycle();
                 const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-prmptBox > textarea')!;
 
                 // Act
                 await userEvent.type(textArea, 'Hello{enter}');
-                await waitForRenderCycle();
+                await waitForReactRenderCycle();
 
                 // Assert
                 expect(adapterController!.getLastExtras()?.conversationHistory).toEqual([

diff --git a/specs/specs/adapters/react/extras-personaOptions.spec.tsx b/specs/specs/adapters/react/extras-personaOptions.spec.tsx
@@ -1,10 +1,11 @@
 import {AiChat} from '@nlux-dev/react/src';
 import {render} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {act} from 'react';
 import {afterEach, beforeEach, describe, expect, it} from 'vitest';
 import {adapterBuilder} from '../../../utils/adapterBuilder';
 import {AdapterController} from '../../../utils/adapters';
-import {waitForMilliseconds, waitForRenderCycle} from '../../../utils/wait';
+import {waitForMdStreamToComplete, waitForMilliseconds, waitForReactRenderCycle} from '../../../utils/wait';
 
 describe.each([
         {dataTransferMode: 'fetch'},
@@ -39,15 +40,15 @@ describe.each([
             <AiChat adapter={adapterController!.adapter} personaOptions={testPersonaOptions}/>,
         );
 
-        await waitForRenderCycle();
+        await waitForReactRenderCycle();
         const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-prmptBox > textarea')!;
 
         // Act
         await userEvent.type(textArea, 'Hello{enter}');
-        await waitForRenderCycle();
+        await waitForReactRenderCycle();
 
         // Assert
-        expect(adapterController.getLastExtras()?.aiChatProps?.personaOptions)
+        expect(adapterController!.getLastExtras()?.aiChatProps?.personaOptions)
             .toEqual(testPersonaOptions);
     });
 
@@ -81,35 +82,37 @@ describe.each([
             const {container, rerender} = render(
                 <AiChat adapter={adapterController!.adapter} personaOptions={testPersonaOptions}/>,
             );
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
 
             let textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-prmptBox > textarea')!;
 
             // Act
             await userEvent.type(textArea, 'Hello{enter}');
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
 
-            adapterController.resolve('Cheers!');
-            adapterController.complete();
-            await waitForMilliseconds(100);
+            await act(async () => {
+                adapterController!.resolve('Cheers!');
+                adapterController!.complete();
+                await waitForMdStreamToComplete(20);
+            });
 
             // Assert
-            expect(adapterController.getLastExtras()?.aiChatProps?.personaOptions)
+            expect(adapterController!.getLastExtras()?.aiChatProps?.personaOptions)
                 .toEqual(testPersonaOptions);
 
             // Act
             rerender(<AiChat adapter={adapterController!.adapter} personaOptions={newPersonaOptions}/>);
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
 
             textArea = container.querySelector('.nlux-comp-prmptBox > textarea')!;
             textArea.focus();
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
 
             await userEvent.type(textArea, 'Bonjour{enter}');
             await waitForMilliseconds(100);
 
             // Assert
-            expect(adapterController.getLastExtras()?.aiChatProps?.personaOptions)
+            expect(adapterController!.getLastExtras()?.aiChatProps?.personaOptions)
                 .toEqual(newPersonaOptions);
         });
     });

diff --git a/specs/specs/aiChat/behavior/react/exceptionsBox.spec.tsx b/specs/specs/aiChat/behavior/react/exceptionsBox.spec.tsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import {afterEach, beforeEach, describe, expect, it} from 'vitest';
 import {adapterBuilder} from '../../../../utils/adapterBuilder';
 import {AdapterController} from '../../../../utils/adapters';
-import {waitForRenderCycle} from '../../../../utils/wait';
+import {waitForReactRenderCycle} from '../../../../utils/wait';
 
 describe('<AiChat /> + theme', () => {
     let adapterController: AdapterController | undefined;
@@ -22,14 +22,14 @@ describe('<AiChat /> + theme', () => {
             // Arrange
             const aiChat = <AiChat adapter={adapterController!.adapter}/>;
             const {container} = render(aiChat);
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
 
             const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-prmptBox > textarea')!;
             await userEvent.type(textArea, 'Hello{enter}');
 
             // Act
             adapterController!.reject('Error message');
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
 
             // Assert
             const exceptionBox = container.querySelector('.nlux-comp-exp_box')!;

diff --git a/specs/specs/aiChat/behavior/react/markdown-fetch.spec.tsx b/specs/specs/aiChat/behavior/react/markdown-fetch.spec.tsx
@@ -1,10 +1,11 @@
 import {AiChat} from '@nlux-dev/react/src';
 import {render} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {act} from 'react';
 import {afterEach, beforeEach, describe, expect, it} from 'vitest';
 import {adapterBuilder} from '../../../../utils/adapterBuilder';
 import {AdapterController} from '../../../../utils/adapters';
-import {waitForMdStreamToComplete, waitForRenderCycle} from '../../../../utils/wait';
+import {waitForMdStreamToComplete, waitForReactRenderCycle} from '../../../../utils/wait';
 
 describe('<AiChat /> + fetch adapter + markdown', () => {
     let adapterController: AdapterController | undefined;
@@ -25,14 +26,15 @@ describe('<AiChat /> + fetch adapter + markdown', () => {
             // Arrange
             const aiChat = <AiChat adapter={adapterController!.adapter}/>;
             const {container} = render(aiChat);
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
+
             const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-prmptBox > textarea')!;
             await userEvent.type(textArea, 'Hello{enter}');
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
 
             // Act
             adapterController!.resolve('**Hello Human!**');
-            await waitForMdStreamToComplete();
+            await act(() => waitForMdStreamToComplete());
 
             // Assert
             const markdownContainer = container.querySelector('.nlux-md-cntr');

diff --git a/specs/specs/aiChat/behavior/react/markdown-stream.spec.tsx b/specs/specs/aiChat/behavior/react/markdown-stream.spec.tsx
@@ -1,10 +1,11 @@
 import {AiChat} from '@nlux-dev/react/src';
-import {render} from '@testing-library/react';
+import {render, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {act} from 'react';
 import {afterEach, beforeEach, describe, expect, it} from 'vitest';
 import {adapterBuilder} from '../../../../utils/adapterBuilder';
 import {AdapterController} from '../../../../utils/adapters';
-import {waitForMdStreamToComplete, waitForRenderCycle} from '../../../../utils/wait';
+import {waitForMdStreamToComplete, waitForReactRenderCycle} from '../../../../utils/wait';
 
 describe('<AiChat /> + stream adapter + markdown', () => {
     let adapterController: AdapterController | undefined;
@@ -25,20 +26,26 @@ describe('<AiChat /> + stream adapter + markdown', () => {
             // Arrange
             const aiChat = <AiChat adapter={adapterController!.adapter}/>;
             const {container} = render(aiChat);
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
+
             const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-prmptBox > textarea')!;
             await userEvent.type(textArea, 'Hello{enter}');
-            await waitForRenderCycle();
+            await waitForReactRenderCycle();
 
             // Act
-            adapterController!.next('**Hello');
-            adapterController!.next(' Human!**');
-            await waitForMdStreamToComplete();
+            await act(async () => {
+                adapterController!.next('**Hello');
+                adapterController!.next(' Human!**');
+                await waitForMdStreamToComplete();
+            });
 
             // Assert
             const markdownContainer = container.querySelector('.nlux-md-cntr');
             expect(markdownContainer).toBeInTheDocument();
-            expect(markdownContainer!.innerHTML).toBe('<p><strong>Hello Human!</strong></p>');
+
+            await waitFor(() => {
+                expect(markdownContainer!.innerHTML).toBe('<p><strong>Hello Human!</strong></p>');
+            });
         });
     });
 });