Add comprehensive tests and GitHub Actions CI

- Update App.test.tsx with relevant tests for MathJojo functionality
- Add Katex.test.tsx to test LaTeX rendering component
- Add Settings.test.tsx to test display mode and dark mode settings
- Add CheatSheet.test.tsx to test cheat sheet toggle and quick inserts
- Add QuickInsert.test.tsx to test quick insert component
- Add GitHub Actions CI workflow for running tests and build verification
- All 61 tests passing with ~81% code coverage

Author: claude

.github/workflows/ci.yml

@@ -0,0 +1,63 @@
+name: CI
+
+on:
+  push:
+    branches: [ main, claude/** ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+    name: Test and Build
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
+
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile
+
+    - name: Run tests
+      run: yarn test --coverage --watchAll=false
+
+    - name: Build
+      run: yarn build
+
+    - name: Upload coverage to Codecov
+      if: matrix.node-version == '20.x'
+      uses: codecov/codecov-action@v4
+      with:
+        fail_ci_if_error: false
+        files: ./coverage/lcov.info
+      continue-on-error: true
+
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20.x
+        cache: 'yarn'
+
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile
+
+    - name: Check formatting with Prettier
+      run: yarn prettier --check "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"

src/App.test.tsx

@@ -1,9 +1,130 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import App from "./App";
 
-test("renders learn react link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+describe("App", () => {
+  test("renders MathJojo heading", () => {
+    render(<App />);
+    const heading = screen.getByText(/MathJojo/i);
+    expect(heading).toBeInTheDocument();
+  });
+
+  test("renders with default LaTeX value", () => {
+    render(<App />);
+    const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+    expect(textarea.value).toBe(
+      "\\zeta(s) = \\sum_{n=1}^\\infty \\frac{1}{n^s}"
+    );
+  });
+
+  test("updates textarea value on user input", () => {
+    render(<App />);
+    const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+    fireEvent.change(textarea, { target: { value: "x^2 + y^2 = z^2" } });
+
+    expect(textarea.value).toBe("x^2 + y^2 = z^2");
+  });
+
+  test("shows cheatsheet toggle", () => {
+    render(<App />);
+    const toggleLink = screen.getByText(/Hide Cheatsheet/i);
+    expect(toggleLink).toBeInTheDocument();
+  });
+
+  test("shows settings toggle", () => {
+    render(<App />);
+    const toggleLink = screen.getByText(/Show Settings/i);
+    expect(toggleLink).toBeInTheDocument();
+  });
+
+  test("cheatsheet can be toggled", () => {
+    render(<App />);
+
+    // Initially shows "Hide Cheatsheet"
+    let toggleLink = screen.getByText(/Hide Cheatsheet/i);
+    expect(toggleLink).toBeInTheDocument();
+
+    // Click to hide
+    fireEvent.click(toggleLink);
+
+    // Now shows "Show Cheatsheet"
+    toggleLink = screen.getByText(/Show Cheatsheet/i);
+    expect(toggleLink).toBeInTheDocument();
+
+    // Click to show again
+    fireEvent.click(toggleLink);
+
+    // Back to "Hide Cheatsheet"
+    toggleLink = screen.getByText(/Hide Cheatsheet/i);
+    expect(toggleLink).toBeInTheDocument();
+  });
+
+  test("settings can be toggled", () => {
+    render(<App />);
+
+    // Initially shows "Show Settings"
+    let toggleLink = screen.getByText(/Show Settings/i);
+    expect(toggleLink).toBeInTheDocument();
+
+    // Click to show
+    fireEvent.click(toggleLink);
+
+    // Now shows "Hide Settings"
+    toggleLink = screen.getByText(/Hide Settings/i);
+    expect(toggleLink).toBeInTheDocument();
+  });
+});
+
+describe("URL parameter handling", () => {
+  const originalLocation = window.location;
+
+  beforeEach(() => {
+    // Mock window.location
+    delete (window as any).location;
+    window.location = { ...originalLocation, search: "" } as any;
+  });
+
+  afterEach(() => {
+    window.location = originalLocation;
+  });
+
+  test("loads value from URL parameter", () => {
+    // Set up URL with compressed value
+    window.location.search = "?v=NobAgB";
+
+    render(<App />);
+    const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+    // The compressed value should be decompressed
+    expect(textarea.value).toBeTruthy();
+  });
+
+  test("handles empty compressed value", () => {
+    window.location.search = "?v=Q";
+
+    render(<App />);
+    const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+    // Should render empty value when v=Q
+    expect(textarea.value).toBe("");
+  });
+
+  test("loads displayMode from URL parameter", () => {
+    window.location.search = "?displayMode=0";
+
+    render(<App />);
+
+    // Open settings to check display mode
+    const toggleLink = screen.getByText(/Show Settings/i);
+    fireEvent.click(toggleLink);
+
+    // The "No" option for display mode should be bold (active)
+    const displayModeOptions = screen.getAllByText(/^(Yes|No)$/);
+    const noOption = displayModeOptions.find(
+      (el) => el.textContent === "No" && el.getAttribute("href") === "#disable-displaymode"
+    );
+
+    expect(noOption).toHaveStyle({ fontWeight: "bold" });
+  });
 });

src/cheatsheet.test.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import CheatSheet from "./cheatsheet";
+
+// Mock the QuickInsert component
+jest.mock("./quickinsert", () => {
+  return function QuickInsert(props: any) {
+    return (
+      <a
+        href="#insert"
+        onClick={(e) => {
+          e.preventDefault();
+          props.onClick();
+        }}
+        data-testid={`quick-insert-${props.source}`}
+      >
+        {props.source}
+      </a>
+    );
+  };
+});
+
+describe("CheatSheet", () => {
+  const defaultProps = {
+    displayCheatSheet: false,
+    insertSource: jest.fn(),
+    toggleCheatSheet: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("when cheatsheet is hidden", () => {
+    test("shows 'Show Cheatsheet' link", () => {
+      render(<CheatSheet {...defaultProps} />);
+      const link = screen.getByText(/Show Cheatsheet/i);
+      expect(link).toBeInTheDocument();
+    });
+
+    test("calls toggleCheatSheet when clicked", () => {
+      render(<CheatSheet {...defaultProps} />);
+      const link = screen.getByText(/Show Cheatsheet/i);
+
+      fireEvent.click(link);
+
+      expect(defaultProps.toggleCheatSheet).toHaveBeenCalledTimes(1);
+    });
+
+    test("does not show greek letters", () => {
+      render(<CheatSheet {...defaultProps} />);
+      const greekLettersText = screen.queryByText(/Greek Letters/i);
+      expect(greekLettersText).not.toBeInTheDocument();
+    });
+  });
+
+  describe("when cheatsheet is shown", () => {
+    const visibleProps = { ...defaultProps, displayCheatSheet: true };
+
+    test("shows 'Hide Cheatsheet' link", () => {
+      render(<CheatSheet {...visibleProps} />);
+      const link = screen.getByText(/Hide Cheatsheet/i);
+      expect(link).toBeInTheDocument();
+    });
+
+    test("calls toggleCheatSheet when Hide Cheatsheet is clicked", () => {
+      render(<CheatSheet {...visibleProps} />);
+      const link = screen.getByText(/Hide Cheatsheet/i);
+
+      fireEvent.click(link);
+
+      expect(defaultProps.toggleCheatSheet).toHaveBeenCalledTimes(1);
+    });
+
+    test("shows Greek Letters section", () => {
+      render(<CheatSheet {...visibleProps} />);
+      const greekLettersText = screen.getByText(/Greek Letters/i);
+      expect(greekLettersText).toBeInTheDocument();
+    });
+
+    test("shows Symbols section", () => {
+      render(<CheatSheet {...visibleProps} />);
+      const symbolsText = screen.getByText(/Symbols/i);
+      expect(symbolsText).toBeInTheDocument();
+    });
+
+    test("shows Accents section", () => {
+      render(<CheatSheet {...visibleProps} />);
+      const accentsText = screen.getByText(/Accents/i);
+      expect(accentsText).toBeInTheDocument();
+    });
+
+    test("shows Layout / Common section", () => {
+      render(<CheatSheet {...visibleProps} />);
+      const layoutText = screen.getByText(/Layout \/ Common/i);
+      expect(layoutText).toBeInTheDocument();
+    });
+
+    test("renders greek letter quick inserts", () => {
+      render(<CheatSheet {...visibleProps} />);
+
+      const alphaInsert = screen.getByTestId("quick-insert-\\alpha");
+      expect(alphaInsert).toBeInTheDocument();
+
+      const betaInsert = screen.getByTestId("quick-insert-\\beta");
+      expect(betaInsert).toBeInTheDocument();
+    });
+
+    test("calls insertSource when a greek letter is clicked", () => {
+      render(<CheatSheet {...visibleProps} />);
+
+      const alphaInsert = screen.getByTestId("quick-insert-\\alpha");
+      fireEvent.click(alphaInsert);
+
+      expect(defaultProps.insertSource).toHaveBeenCalledWith("\\alpha");
+    });
+
+    test("renders symbol quick inserts", () => {
+      render(<CheatSheet {...visibleProps} />);
+
+      const infinityInsert = screen.getByTestId("quick-insert-\\infty");
+      expect(infinityInsert).toBeInTheDocument();
+    });
+
+    test("calls insertSource when a symbol is clicked", () => {
+      render(<CheatSheet {...visibleProps} />);
+
+      const infinityInsert = screen.getByTestId("quick-insert-\\infty");
+      fireEvent.click(infinityInsert);
+
+      expect(defaultProps.insertSource).toHaveBeenCalledWith("\\infty");
+    });
+
+    test("renders accent quick inserts", () => {
+      render(<CheatSheet {...visibleProps} />);
+
+      const hatInsert = screen.getByTestId("quick-insert-\\hat{x}");
+      expect(hatInsert).toBeInTheDocument();
+    });
+
+    test("calls insertSource when an accent is clicked", () => {
+      render(<CheatSheet {...visibleProps} />);
+
+      const hatInsert = screen.getByTestId("quick-insert-\\hat{x}");
+      fireEvent.click(hatInsert);
+
+      expect(defaultProps.insertSource).toHaveBeenCalledWith("\\hat{x}");
+    });
+
+    test("renders layout/common quick inserts", () => {
+      render(<CheatSheet {...visibleProps} />);
+
+      const fracInsert = screen.getByTestId("quick-insert-\\frac{a}{b}");
+      expect(fracInsert).toBeInTheDocument();
+    });
+
+    test("calls insertSource when a layout item is clicked", () => {
+      render(<CheatSheet {...visibleProps} />);
+
+      const fracInsert = screen.getByTestId("quick-insert-\\frac{a}{b}");
+      fireEvent.click(fracInsert);
+
+      expect(defaultProps.insertSource).toHaveBeenCalledWith("\\frac{a}{b}");
+    });
+
+    test("renders uppercase greek letters", () => {
+      render(<CheatSheet {...visibleProps} />);
+
+      const gammaInsert = screen.getByTestId("quick-insert-\\Gamma");
+      expect(gammaInsert).toBeInTheDocument();
+    });
+
+    test("calls insertSource when an uppercase greek letter is clicked", () => {
+      render(<CheatSheet {...visibleProps} />);
+
+      const gammaInsert = screen.getByTestId("quick-insert-\\Gamma");
+      fireEvent.click(gammaInsert);
+
+      expect(defaultProps.insertSource).toHaveBeenCalledWith("\\Gamma");
+    });
+  });
+});