passing test for chat

Author: sestinj

gui/src/components/find/FindWidget.tsx

@@ -11,9 +11,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { useSelector } from "react-redux";
 import { HeaderButton, Input } from "..";
-import { RootState } from "../../redux/store";
 import HeaderButtonWithToolTip from "../gui/HeaderButtonWithToolTip";
 import { useAppSelector } from "../../redux/hooks";
 

gui/src/components/mainInput/ContinueInputBox.tsx

@@ -114,7 +114,10 @@ function ContinueInputBox(props: ContinueInputBoxProps) {
     : {};
 
   return (
-    <div className={`${props.hidden ? "hidden" : ""}`}>
+    <div
+      className={`${props.hidden ? "hidden" : ""}`}
+      data-testid="continue-input-box"
+    >
       <div className={`relative flex flex-col px-2`}>
         {props.isMainInput && <Lump />}
         <GradientBorder

gui/src/pages/gui/Chat.test.tsx

@@ -0,0 +1,11 @@
+import { renderWithProviders } from "../../util/test/render";
+import { screen } from "@testing-library/dom";
+import { Chat } from "./Chat";
+
+describe("Chat page test", () => {
+  it("should render", async () => {
+    await renderWithProviders(<Chat />);
+    
+    expect(await screen.findByTestId("continue-input-box")).toBeInTheDocument();
+  });
+});

gui/src/pages/history/history.test.tsx

@@ -1,31 +1,20 @@
 import { screen } from "@testing-library/dom";
 import { renderWithProviders } from "../../util/test/render";
 import HistoryPage from "./index";
-import { act } from "@testing-library/react";
-
-const navigateFn = vi.fn();
-
-vi.mock("react-router-dom", async () => {
-  const original = await vi.importActual("react-router-dom");
-  return {
-    ...original,
-    useNavigate: () => navigateFn,
-  };
-});
 
 describe("history Page test", () => {
-  it("History text is existed after render", () => {
-    renderWithProviders(<HistoryPage />);
+  it("History text is existed after render", async () => {
+    await renderWithProviders(<HistoryPage />);
     expect(screen.getByTestId("history-sessions-note")).toBeInTheDocument();
   });
 
   it("History shows the first item in the list", async () => {
-    renderWithProviders(<HistoryPage />);
+    await renderWithProviders(<HistoryPage />);
     const sessionElement = await screen.findByText(
       "Session 1",
       {},
       {
-        timeout: 5000,
+        timeout: 3000, // There is a 2000ms timeout before the first call to refreshSessionMetadata is called
       },
     );
     expect(sessionElement).toBeInTheDocument();

gui/src/redux/selectors/index.ts

@@ -47,7 +47,5 @@ export const selectUseActiveFile = createSelector(
   (defaultContext) => defaultContext?.includes("activeFile" as any),
 );
 
-export const selectUseHub = createSelector(
-  [(state: RootState) => state.config.config.usePlatform],
-  (usePlatform) => usePlatform,
-);
+export const selectUseHub = (state: RootState) =>
+  state.config.config.usePlatform;

gui/src/util/test/render.tsx

@@ -10,6 +10,8 @@ import { MockIdeMessenger } from "../../context/MockIdeMessenger";
 import { setupStore } from "../../redux/store";
 import { SetupListeners } from "../../App";
 import { act } from "@testing-library/react";
+import { LumpProvider } from "../../components/mainInput/Lump/LumpContext";
+import { MainEditorProvider } from "../../components/mainInput/TipTapEditor";
 // As a basic setup, import your same slice reducers
 
 // This type interface extends the default options for render from RTL, as well
@@ -19,10 +21,19 @@ type ExtendedRenderOptions = Omit<RenderOptions, "queries"> & {
   routerProps?: RouterProps;
 };
 
-export function renderWithProviders(
+function setupMocks() {
+  global.ResizeObserver = vi.fn().mockImplementation(() => ({
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  }));
+}
+
+export async function renderWithProviders(
   ui: React.ReactElement,
   extendedRenderOptions: ExtendedRenderOptions = {},
 ) {
+  setupMocks();
   const ideMessenger = new MockIdeMessenger();
 
   const {
@@ -41,16 +52,20 @@ export function renderWithProviders(
       <IdeMessengerProvider messenger={ideMessenger}>
         <Provider store={store}>
           <AuthProvider>
-            {children}
-            <SetupListeners />
+            <MainEditorProvider>
+              <LumpProvider>
+                {children}
+                <SetupListeners />
+              </LumpProvider>
+            </MainEditorProvider>
           </AuthProvider>
         </Provider>
       </IdeMessengerProvider>
     </MemoryRouter>
   );
 
   let rendered: RenderResult;
-  act(() => {
+  await act(async () => {
     rendered = render(ui, { wrapper: Wrapper, ...renderOptions });
   });