diff --git a/frontend/__tests__/components/jupyter/jupyter.test.tsx b/frontend/__tests__/components/jupyter/jupyter.test.tsx new file mode 100644 index 0000000000..4683a47634 --- /dev/null +++ b/frontend/__tests__/components/jupyter/jupyter.test.tsx @@ -0,0 +1,45 @@ +import { render, screen } from "@testing-library/react"; +import { Provider } from "react-redux"; +import { configureStore } from "@reduxjs/toolkit"; +import { JupyterEditor } from "#/components/features/jupyter/jupyter"; +import { jupyterReducer } from "#/state/jupyter-slice"; +import { vi, describe, it, expect } from "vitest"; + +describe("JupyterEditor", () => { + const mockStore = configureStore({ + reducer: { + fileState: () => ({}), + initalQuery: () => ({}), + browser: () => ({}), + chat: () => ({}), + code: () => ({}), + cmd: () => ({}), + agent: () => ({}), + jupyter: jupyterReducer, + securityAnalyzer: () => ({}), + status: () => ({}), + }, + preloadedState: { + jupyter: { + cells: Array(20).fill({ + content: "Test cell content", + type: "input", + output: "Test output", + }), + }, + }, + }); + + it("should have a scrollable container", () => { + render( + +
+ +
+
+ ); + + const container = screen.getByTestId("jupyter-container"); + expect(container).toHaveClass("flex-1 overflow-y-auto"); + }); +}); diff --git a/frontend/src/components/features/jupyter/jupyter.tsx b/frontend/src/components/features/jupyter/jupyter.tsx index 8ae871c520..bae651f9f4 100644 --- a/frontend/src/components/features/jupyter/jupyter.tsx +++ b/frontend/src/components/features/jupyter/jupyter.tsx @@ -10,16 +10,17 @@ interface JupyterEditorProps { } export function JupyterEditor({ maxWidth }: JupyterEditorProps) { - const { cells } = useSelector((state: RootState) => state.jupyter); + const cells = useSelector((state: RootState) => state.jupyter?.cells ?? []); const jupyterRef = React.useRef(null); const { hitBottom, scrollDomToBottom, onChatBodyScroll } = useScrollToBottom(jupyterRef); return ( -
+
onChatBodyScroll(e.currentTarget)} > diff --git a/frontend/src/routes/_oh.app.jupyter.tsx b/frontend/src/routes/_oh.app.jupyter.tsx index 6565ad2c31..334ccc67bc 100644 --- a/frontend/src/routes/_oh.app.jupyter.tsx +++ b/frontend/src/routes/_oh.app.jupyter.tsx @@ -14,7 +14,7 @@ function Jupyter() { }, []); return ( -
+
); diff --git a/frontend/src/state/jupyter-slice.ts b/frontend/src/state/jupyter-slice.ts index 4a1d9ea8db..ffb750bd9b 100644 --- a/frontend/src/state/jupyter-slice.ts +++ b/frontend/src/state/jupyter-slice.ts @@ -7,8 +7,8 @@ export type Cell = { const initialCells: Cell[] = []; -export const cellSlice = createSlice({ - name: "cell", +export const jupyterSlice = createSlice({ + name: "jupyter", initialState: { cells: initialCells, }, @@ -26,6 +26,7 @@ export const cellSlice = createSlice({ }); export const { appendJupyterInput, appendJupyterOutput, clearJupyter } = - cellSlice.actions; + jupyterSlice.actions; -export default cellSlice.reducer; +export const jupyterReducer = jupyterSlice.reducer; +export default jupyterReducer; diff --git a/frontend/src/store.ts b/frontend/src/store.ts index ace5419b83..7c27f37cfa 100644 --- a/frontend/src/store.ts +++ b/frontend/src/store.ts @@ -6,7 +6,7 @@ import codeReducer from "./state/code-slice"; import fileStateReducer from "./state/file-state-slice"; import initialQueryReducer from "./state/initial-query-slice"; import commandReducer from "./state/command-slice"; -import jupyterReducer from "./state/jupyter-slice"; +import { jupyterReducer } from "./state/jupyter-slice"; import securityAnalyzerReducer from "./state/security-analyzer-slice"; import statusReducer from "./state/status-slice";