fix tests

Author: mabaasit

packages/browser-repl/src/components/shell-output.spec.tsx

@@ -1,33 +1,62 @@
 import React from 'react';
 import { expect } from '../../testing/chai';
-import { shallow } from '../../testing/enzyme';
+import { screen, render, waitFor, cleanup } from '@testing-library/react';
 
 import type { ShellOutputEntry } from './shell-output-line';
-import { ShellOutputLine } from './shell-output-line';
 import { ShellOutput } from './shell-output';
 
+function WrappedShellOutput(props: { output: ShellOutputEntry[] }) {
+  return (
+    <div style={{ height: '200px' }}>
+      <ShellOutput
+        output={props.output}
+        __TEST_LIST_HEIGHT={200}
+        setInnerContainerRef={() => {
+          /** */
+        }}
+      />
+    </div>
+  );
+}
+
 describe('<ShellOutput />', function () {
+  beforeEach(cleanup);
+
   it('renders no output lines if none are passed', function () {
-    const wrapper = shallow(<ShellOutput output={[]} />);
-    expect(wrapper.find(ShellOutputLine)).to.have.lengthOf(0);
+    render(<WrappedShellOutput output={[]} />);
+    expect(screen.queryByTestId('shell-output-line')).to.not.exist;
   });
 
   it('renders an output line if one is passed', function () {
-    const line1: ShellOutputEntry = { type: 'output', value: 'line 1' };
-    const wrapper = shallow(<ShellOutput output={[line1]} />);
-    expect(wrapper.find(ShellOutputLine)).to.have.lengthOf(1);
+    const line1: ShellOutputEntry = {
+      type: 'output',
+      value: 'line 1',
+      format: 'output',
+    };
+    render(<WrappedShellOutput output={[line1]} />);
+    expect(screen.getByText(/line 1/i)).to.exist;
+    expect(screen.getAllByTestId('shell-output-line')).to.have.lengthOf(1);
   });
 
-  it('renders no output lines if only one with a value of undefined is passed', function () {
-    const line1: ShellOutputEntry = { type: 'output', value: undefined };
-    const wrapper = shallow(<ShellOutput output={[line1]} />);
-    expect(wrapper.find(ShellOutputLine)).to.have.lengthOf(0);
-  });
+  it('scrolls to the newly added item', async function () {
+    const output: ShellOutputEntry[] = Array.from({ length: 100 }, (_, i) => ({
+      type: 'output',
+      value: `line ${i}`,
+      format: 'output',
+    }));
+
+    const { rerender } = render(<WrappedShellOutput output={output} />);
+
+    const newLine: ShellOutputEntry = {
+      type: 'output',
+      value: 'new line',
+      format: 'output',
+    };
 
-  it('pass the entry to the output line as prop', function () {
-    const line1: ShellOutputEntry = { type: 'output', value: 'line 1' };
-    const wrapper = shallow(<ShellOutput output={[line1]} />);
+    rerender(<WrappedShellOutput output={[...output, newLine]} />);
 
-    expect(wrapper.find(ShellOutputLine).prop('entry')).to.deep.equal(line1);
+    await waitFor(() => {
+      expect(screen.getByText(/new line/i)).to.exist;
+    });
   });
 });

packages/browser-repl/src/components/shell-output.tsx

@@ -9,11 +9,13 @@ export type { ShellOutputEntry } from './shell-output-line';
 type ShellIOListProps = {
   output: ShellOutputEntry[];
   setInnerContainerRef: (ref: HTMLDivElement) => void;
+  __TEST_LIST_HEIGHT?: number;
 };
 
 export const ShellOutput = ({
   output,
   setInnerContainerRef,
+  __TEST_LIST_HEIGHT,
 }: ShellIOListProps) => {
   const listRef: VirtualListRef = useRef();
 
@@ -40,6 +42,7 @@ export const ShellOutput = ({
         </div>
       )}
       estimateItemInitialHeight={() => 24}
+      __TEST_LIST_HEIGHT={__TEST_LIST_HEIGHT}
     />
   );
 };

packages/browser-repl/src/components/shell.spec.tsx

@@ -28,7 +28,11 @@ function ShellWrapper({
   ...props
 }: React.ComponentProps<typeof Shell>) {
   const initialEvaluate = useInitialEval(_initialEvaluate);
-  return <Shell initialEvaluate={initialEvaluate} {...props} />;
+  return (
+    <div style={{ height: '100px', width: '100px' }}>
+      <Shell initialEvaluate={initialEvaluate} {...props} />
+    </div>
+  );
 }
 
 function filterEvaluateCalls(calls: any) {
@@ -89,8 +93,18 @@ describe('shell', function () {
   });
 
   it('calls onOutputChanged', async function () {
-    let output = [];
-    const onOutputChanged = (newOutput) => {
+    const shellEntries: ShellOutputEntry[] = Array.from(
+      { length: 10 },
+      (_, i) => ({
+        format: 'input',
+        type: 'input',
+        value: `item ${i}`,
+      })
+    );
+
+    let output = shellEntries;
+    // this callback contains the new output (current merged with the new one)
+    const onOutputChanged = (newOutput: ShellOutputEntry[]) => {
       output = newOutput;
     };
 
@@ -100,12 +114,13 @@ describe('shell', function () {
         runtime={fakeRuntime}
         initialEvaluate={initialEvaluate}
         onOutputChanged={onOutputChanged}
-        output={output}
+        output={output as any}
       />
     );
 
     await waitFor(() => {
       expect(output).to.deep.equal([
+        ...shellEntries,
         {
           format: 'input',
           value: 'my command',
@@ -120,22 +135,17 @@ describe('shell', function () {
 
     expect(filterEvaluateCalls(fakeRuntime.evaluate.args)).to.have.length(1);
 
-    // scrolls to the bottom initially and every time it outputs
-    await waitFor(() => {
-      expect(Element.prototype.scrollIntoView).to.have.been.calledTwice;
-    });
-
-    // make sure we scroll to the bottom every time output changes
     rerender(
       <ShellWrapper
         runtime={fakeRuntime}
         initialEvaluate={initialEvaluate}
         onOutputChanged={onOutputChanged}
-        output={output}
+        output={output as any}
       />
     );
+    // Make sure that it scrolls to the last added item
     await waitFor(() => {
-      expect(Element.prototype.scrollIntoView).to.have.been.calledThrice;
+      expect(screen.getByText('some result')).to.exist;
     });
   });
 

packages/browser-repl/src/components/shell.tsx

@@ -485,7 +485,7 @@ const _Shell: ForwardRefRenderFunction<EditorRef | null, ShellProps> = (
     return () => {
       observer.disconnect();
     };
-  }, [output]);
+  }, [listInnerContainerRef.current]);
 
   useEffect(() => {
     if (!shellInputContainerRef.current) {