add test suite for history

Author: leonardo3130

src/index.tsx

@@ -47,6 +47,11 @@ const Terminal = ({
   greenBtnCallback,
   TopButtonsPanel = WindowButtons,
 }: Props) => {
+  // local storage key
+  const terminalHistoryKey = name
+    ? `terminal-history-${name}`
+    : "terminal-history";
+
   // command history handling
   const [historyIndex, setHistoryIndex] = useState(-1);
   const [history, setHistory] = useState<string[]>([]);
@@ -115,7 +120,8 @@ const Terminal = ({
 
       // history update
       setHistory((previousHistory) =>
-        currentLineInput.trim() === ""
+        currentLineInput.trim() === "" ||
+          previousHistory[previousHistory.length - 1] === currentLineInput.trim()
           ? previousHistory
           : [...previousHistory, currentLineInput],
       );
@@ -179,14 +185,14 @@ const Terminal = ({
 
   // history local storage persistency
   useEffect(() => {
-    const storedHistory = localStorage.getItem("terminal-history");
+    const storedHistory = localStorage.getItem(terminalHistoryKey);
     if (storedHistory) {
       setHistory(JSON.parse(storedHistory));
     }
   }, []);
 
   useEffect(() => {
-    localStorage.setItem("terminalhistory", JSON.stringify(history));
+    localStorage.setItem(terminalHistoryKey, JSON.stringify(history));
   }, [history]);
 
   // We use a hidden input to capture terminal input; make sure the hidden input is focused when clicking anywhere on the terminal

tests/terminal.history.spec.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Terminal from "../src/index";
+
+// mock localStorage
+beforeEach(() => {
+  localStorage.clear();
+});
+
+describe("Terminal history persistence", () => {
+  test("loads history from localStorage on mount", () => {
+    const storedHistory = ["ls", "echo hi"];
+    localStorage.setItem("terminal-history", JSON.stringify(storedHistory));
+
+    render(<Terminal onInput={() => { }} />);
+
+    const input = screen.getByPlaceholderText("Terminal Hidden Input");
+
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    expect(input).toHaveValue("echo hi");
+
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    expect(input).toHaveValue("ls");
+  });
+
+  test("persists history to localStorage after entering a command", () => {
+    render(<Terminal onInput={() => { }} />);
+
+    const input = screen.getByPlaceholderText("Terminal Hidden Input");
+
+    fireEvent.change(input, { target: { value: "help" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    const stored = JSON.parse(localStorage.getItem("terminal-history")!);
+
+    expect(stored).toEqual(["help"]);
+  });
+
+  test("does not persist empty commands", () => {
+    render(<Terminal onInput={() => { }} />);
+
+    const input = screen.getByPlaceholderText("Terminal Hidden Input");
+
+    fireEvent.change(input, { target: { value: "   " } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    expect(localStorage.getItem("terminal-history")).toBe(JSON.stringify([]));
+  });
+
+  test("avoids persisting duplicate consecutive commands", () => {
+    render(<Terminal onInput={() => { }} />);
+
+    const input = screen.getByPlaceholderText("Terminal Hidden Input");
+
+    fireEvent.change(input, { target: { value: "date" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    fireEvent.change(input, { target: { value: "date" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    const stored = JSON.parse(localStorage.getItem("terminal-history")!);
+
+    expect(stored).toEqual(["date"]);
+  });
+
+  test("ArrowUp navigates persisted history", () => {
+    localStorage.setItem(
+      "terminal-history",
+      JSON.stringify(["cmd1", "cmd2", "cmd3"]),
+    );
+
+    render(<Terminal onInput={() => { }} />);
+    const input = screen.getByPlaceholderText("Terminal Hidden Input");
+
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    expect(input).toHaveValue("cmd3");
+
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    expect(input).toHaveValue("cmd2");
+
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    expect(input).toHaveValue("cmd1");
+  });
+
+  test("ArrowUp stops at oldest history entry and does not go out of bounds", () => {
+    render(<Terminal onInput={() => { }} />);
+
+    const input = screen.getByPlaceholderText("Terminal Hidden Input");
+
+    fireEvent.change(input, { target: { value: "first" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    fireEvent.change(input, { target: { value: "second" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    fireEvent.change(input, { target: { value: "third" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+
+    expect(input).toHaveValue("first");
+  });
+});