add more integration tests

.pre-commit-config.yaml

@@ -1,3 +1,4 @@
+repos:
 - repo: https://github.com/pre-commit/mirrors-eslint
   rev: 'v6.8.0'
   hooks:

package.json

@@ -64,12 +64,9 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.32.1",
     "sass": "^1.52.3",
-    "source-map-loader": "^4.0.0",
     "ts-jest": "^28.0.5",
     "ts-loader": "^9.3.0",
-    "typescript": "^4.3.5",
-    "webpack": "^5.73.0",
-    "webpack-cli": "^4.9.2"
+    "typescript": "^4.3.5"
   },
   "resolutions": {
     "cheerio": "1.0.0-rc.10"

src/contexts/TerminalContext.tsx

@@ -39,9 +39,6 @@ export const TerminalContextProvider = (props: any) => {
 
   const getNextCommand = () => {
     if (historyPointer + 1 <= commandsHistory.length) {
-      if (historyPointer === commandsHistory.length) {
-        return "";
-      }
       const command = commandsHistory[historyPointer + 1];
       setHistoryPointer(historyPointer + 1);
       return command;

src/hooks/editor.tsx

@@ -160,7 +160,7 @@ export const useBufferedContent = (
             const executor = commands[command];
 
             if (typeof executor === "function") {
-              output = await executor(commandArguments);
+              output = await executor(text);
             } else {
               output = executor;
             }

tests/integration/components/Terminal.test.tsx

@@ -13,30 +13,61 @@ describe('ReactTerminal', () => {
     );
   });
 
-  test('selects terminal component', async () => {
+  test('selects terminal component when clicked inside it', async () => {
     render(
       <TerminalContextProvider>
           <ReactTerminal/>
       </TerminalContextProvider>
     );
 
     await userEvent.click(screen.getByTestId('terminal'));
+    const terminalContainer = screen.getByTestId('terminal')
+    writeText(terminalContainer, 'invalid_command');
+    expect(terminalContainer.textContent).toContain("invalid_command")
+  });
+
+  test('unselects terminal component when clicked outside it', async () => {
+    render(
+      <div data-testid="outer-shell">
+        <TerminalContextProvider>
+            <ReactTerminal/>
+        </TerminalContextProvider>
+      </div>
+    );
+
+    await userEvent.click(screen.getByTestId('outer-shell'));
+    const terminalContainer = screen.getByTestId('terminal')
+    writeText(terminalContainer, 'invalid_command');
+    expect(terminalContainer.textContent).not.toContain("invalid_command")
+  });
+
+  test('doesnt register input when enableInput is false', async () => {
+    render(
+      <TerminalContextProvider>
+          <ReactTerminal enableInput={false}/>
+      </TerminalContextProvider>
+    );
+
+    await userEvent.click(screen.getByTestId('terminal'));
+    const terminalContainer = screen.getByTestId('terminal')
+    writeText(terminalContainer, 'invalid_command');
+    expect(terminalContainer.textContent).not.toContain("invalid_command")
   });
 
   test('write some text on terminal component', () => {
-    const { container } = render(
+    render(
       <TerminalContextProvider>
           <ReactTerminal/>
       </TerminalContextProvider>
     );
 
     const terminalContainer = screen.getByTestId('terminal')
     writeText(terminalContainer, 'invalid_command');
-    expect(container.querySelector('.lineText')?.textContent).toBe('invalid_command');
+    expect(terminalContainer.textContent).toContain('invalid_command');
   });
 
   test('execute an invalid command on terminal component returns default text', () => {
-    const { container } = render(
+    render(
       <TerminalContextProvider>
           <ReactTerminal/>
       </TerminalContextProvider>
@@ -45,11 +76,11 @@ describe('ReactTerminal', () => {
     const terminalContainer = screen.getByTestId('terminal')
     writeText(terminalContainer, 'invalid_command');
     writeText(terminalContainer, 'Enter');
-    expect(container.textContent).toContain('not found!');
+    expect(terminalContainer.textContent).toContain('not found!');
   });
 
   test('execute a valid command on terminal component', () => {
-    const { container } = render(
+    render(
       <TerminalContextProvider>
           <ReactTerminal commands={{ whoami: 'jackharper' }}/>
       </TerminalContextProvider>
@@ -58,11 +89,28 @@ describe('ReactTerminal', () => {
     const terminalContainer = screen.getByTestId('terminal')
     writeText(terminalContainer, 'whoami');
     writeText(terminalContainer, 'Enter');
-    expect(container.textContent).toContain('jackharper');
+    expect(terminalContainer.textContent).toContain('jackharper');
+  });
+
+  test('command can call a function', async () => {
+    render(
+      <TerminalContextProvider>
+          <ReactTerminal commands={{ whoami: () => {
+            return 'jackharper';
+          } }}/>
+      </TerminalContextProvider>
+    );
+
+    const terminalContainer = screen.getByTestId('terminal');
+    writeText(terminalContainer, 'whoami');
+    await act(async () => {
+      writeText(terminalContainer, 'Enter');
+    });
+    expect(terminalContainer.textContent).toContain('jackharper');
   });
 
   test('backspace deletes a character', () => {
-    const { container } = render(
+    render(
       <TerminalContextProvider>
           <ReactTerminal commands={{ whoami: 'jackharper' }}/>
       </TerminalContextProvider>
@@ -71,14 +119,14 @@ describe('ReactTerminal', () => {
     const terminalContainer = screen.getByTestId('terminal')
     writeText(terminalContainer, 'whoami');
     writeText(terminalContainer, 'Backspace');
-    expect(container.textContent).toContain('whoam');
+    expect(terminalContainer.textContent).toContain('whoam');
     writeText(terminalContainer, 'i');
     writeText(terminalContainer, 'Enter');
-    expect(container.textContent).toContain('jackharper');
+    expect(terminalContainer.textContent).toContain('jackharper');
   });
 
   test('up arrow fetch previous command', () => {
-    const { container } = render(
+    render(
       <TerminalContextProvider>
           <ReactTerminal commands={{ whoami: 'jackharper' }}/>
       </TerminalContextProvider>
@@ -92,16 +140,16 @@ describe('ReactTerminal', () => {
   });
 
   test('down arrow fetch next command', () => {
-    const { container } = render(
+    render(
       <TerminalContextProvider>
           <ReactTerminal commands={{ whoami: 'jackharper' }}/>
       </TerminalContextProvider>
     );
 
     const terminalContainer = screen.getByTestId('terminal')
     writeText(terminalContainer, 'ArrowUp');
-    expect(container.querySelectorAll('.preWhiteSpace')[0].textContent).toBe('');
-    expect(container.querySelectorAll('.preWhiteSpace')[1].textContent).toBe('');
+    expect(terminalContainer.querySelectorAll('.preWhiteSpace')[0].textContent).toBe('');
+    expect(terminalContainer.querySelectorAll('.preWhiteSpace')[1].textContent).toBe('');
     writeText(terminalContainer, 'whoami');
     writeText(terminalContainer, 'Enter');
     writeText(terminalContainer, 'ArrowUp');
@@ -115,7 +163,7 @@ describe('ReactTerminal', () => {
   });
 
   test('arrow left/right moves the cursor', () => {
-    const { container } = render(
+    render(
       <TerminalContextProvider>
           <ReactTerminal commands={{ whoami: 'jackharper' }}/>
       </TerminalContextProvider>
@@ -124,15 +172,15 @@ describe('ReactTerminal', () => {
     const terminalContainer = screen.getByTestId('terminal')
     writeText(terminalContainer, 'whoami');
     writeText(terminalContainer, 'ArrowLeft');
-    expect(container.querySelectorAll('.preWhiteSpace')[0].textContent).toBe('whoam');
-    expect(container.querySelectorAll('.preWhiteSpace')[1].textContent).toBe('i');
+    expect(terminalContainer.querySelectorAll('.preWhiteSpace')[0].textContent).toBe('whoam');
+    expect(terminalContainer.querySelectorAll('.preWhiteSpace')[1].textContent).toBe('i');
     writeText(terminalContainer, 'ArrowRight');
-    expect(container.querySelectorAll('.preWhiteSpace')[0].textContent).toBe('whoami');
-    expect(container.querySelectorAll('.preWhiteSpace')[1].textContent).toBe('');
+    expect(terminalContainer.querySelectorAll('.preWhiteSpace')[0].textContent).toBe('whoami');
+    expect(terminalContainer.querySelectorAll('.preWhiteSpace')[1].textContent).toBe('');
   });
 
   test('empty command does nothing', () => {
-    const { container } = render(
+    render(
       <TerminalContextProvider>
           <ReactTerminal commands={{ whoami: 'jackharper' }}/>
       </TerminalContextProvider>
@@ -141,12 +189,12 @@ describe('ReactTerminal', () => {
     const terminalContainer = screen.getByTestId('terminal')
     writeText(terminalContainer, '');
     writeText(terminalContainer, 'Enter');
-    expect(container.querySelectorAll('.preWhiteSpace')[0].textContent).toBe('');
-    expect(container.querySelectorAll('.preWhiteSpace')[1].textContent).toBe('');
+    expect(terminalContainer.querySelectorAll('.preWhiteSpace')[0].textContent).toBe('');
+    expect(terminalContainer.querySelectorAll('.preWhiteSpace')[1].textContent).toBe('');
   });
 
   test('clear command clears the console', () => {
-    const { container } = render(
+    render(
       <TerminalContextProvider>
           <ReactTerminal/>
       </TerminalContextProvider>
@@ -155,14 +203,57 @@ describe('ReactTerminal', () => {
     const terminalContainer = screen.getByTestId('terminal')
     writeText(terminalContainer, 'invalid_command');
     writeText(terminalContainer, 'Enter');
+    expect(terminalContainer.textContent).toContain('not found!');
     writeText(terminalContainer, 'clear');
     writeText(terminalContainer, 'Enter');
     expect(terminalContainer.textContent).toBe('>>>');
   });
+
+  test('doesnt do anything for unmappable key', () => {
+    render(
+      <TerminalContextProvider>
+          <ReactTerminal/>
+      </TerminalContextProvider>
+    );
+
+    const terminalContainer = screen.getByTestId('terminal')
+    writeText(terminalContainer, 'Tab');
+    expect(terminalContainer.textContent).toBe('>>>');
+  });
+
+  test('custom errorMessage is string', async () => {
+    render(
+      <TerminalContextProvider>
+          <ReactTerminal errorMessage="Command not found"/>
+      </TerminalContextProvider>
+    );
+
+    let terminalContainer = screen.getByTestId('terminal')
+    writeText(terminalContainer, 'invalid_command');
+    writeText(terminalContainer, 'Enter');
+    expect(terminalContainer.textContent).toContain('Command not found');
+  });
+
+  test('custom errorMessage is function', async () => {
+    render(
+      <TerminalContextProvider>
+          <ReactTerminal errorMessage={() => {
+            return "Function but command not found";
+          }}/>
+      </TerminalContextProvider>
+    );
+
+    let terminalContainer = screen.getByTestId('terminal');
+    writeText(terminalContainer, 'invalid_command');
+    await act(async () => {
+      writeText(terminalContainer, 'Enter');
+    });
+    expect(terminalContainer.textContent).toContain('Function but command not found');
+  });
 });
 
 function writeText(container: any, value: string, metaKey = false) {
-  if (["Enter", "Backspace", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(value)) {
+  if (["Enter", "Backspace", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab"].includes(value)) {
     fireEvent.keyDown(container, {
       metaKey: metaKey,
       key: value