test: more tests for editor component

[HardMax71]

Summary by cubic

Adds comprehensive tests for the editor UI to lock down core behaviors and prevent regressions. Covers theme selection, settings reconfig, runtime/version menus, output/resource usage display, and clipboard actions.

• Test Coverage
  • CodeMirrorEditor: state init, view cleanup, theme selection (auto/dark/light), font size, line numbers, language extension.
  • LanguageSelect: trigger states, open/close, version submenus, onselect callback, keyboard navigation.
  • OutputPanel: phase spinner labels, status badges, stdout/stderr visibility, resource usage formatting, clipboard copy with success/error toasts, render priority.
  • ResourceLimits: collapse/expand toggle and values (CPU, memory, timeout).
  • SavedScripts: toggle and refresh, empty state, load/delete actions, language/version display.

^{Written for commit 80661c3. Summary will update on new commits.}

Summary by CodeRabbit

• Tests
  • Added comprehensive unit tests for core editor components: CodeMirror editor rendering and theme configuration, language selection and version switching, output panel display and copy functionality, resource limits toggling, and saved scripts interaction workflows.

[coderabbitai]

📝 Walkthrough

Walkthrough

Five new test files are added to the editor component test suite, covering CodeMirrorEditor, LanguageSelect, OutputPanel, ResourceLimits, and SavedScripts components with comprehensive unit tests for rendering, user interactions, state management, and edge cases.

Changes

Cohort / File(s)	Summary
Editor Component Tests frontend/src/components/editor/__tests__/CodeMirrorEditor.test.ts, frontend/src/components/editor/__tests__/LanguageSelect.test.ts, frontend/src/components/editor/__tests__/OutputPanel.test.ts, frontend/src/components/editor/__tests__/ResourceLimits.test.ts, frontend/src/components/editor/__tests__/SavedScripts.test.ts	Five new test suites added covering editor lifecycle, theme selection, settings reconfiguration, UI interactions (buttons, dropdowns, menus, keyboard navigation), output rendering across multiple states, copy-to-clipboard functionality, collapsible panels, and script management workflows.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• fix: frontend tests added #121: Expands frontend test coverage for editor-related modules and test infrastructure, directly parallel to this test suite addition.

Poem

🐰 Hop along through testing paths so bright,
CodeMirror, panels, scripts in sight,
With mocks and claims, each interaction's clear,
Our burrow of tests brings code we hold dear!
✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'test: more tests for editor component' accurately describes the PR's main purpose: adding new test files for editor-related components (CodeMirrorEditor, LanguageSelect, OutputPanel, ResourceLimits, SavedScripts).

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch test/frontend-editor

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

frontend/src/components/editor/__tests__/LanguageSelect.test.ts (1)

17-17: onselect in defaultProps is dead code — always overwritten in renderSelect.

Line 20 in renderSelect always creates a fresh vi.fn() before spreading overrides, so defaultProps.onselect is never used.

♻️ Suggested simplification

-const defaultProps = { runtimes: RUNTIMES, lang: 'python', version: '3.11', onselect: vi.fn() };
+const defaultProps = { runtimes: RUNTIMES, lang: 'python', version: '3.11' };
 
-function renderSelect(overrides: Partial<typeof defaultProps> = {}) {
+function renderSelect(overrides: Partial<typeof defaultProps & { onselect: ReturnType<typeof vi.fn> }> = {}) {
   const props = { ...defaultProps, onselect: vi.fn(), ...overrides };
   return { ...render(LanguageSelect, { props }), onselect: props.onselect };
 }

frontend/src/components/editor/__tests__/SavedScripts.test.ts (1)

57-65: renderAndExpand already returns user, but tests create redundant userEvent.setup() instances.

Lines 62 and 91 create new userEvent.setup() instances instead of using the user returned by renderAndExpand. This works, but adds unnecessary setup overhead and obscures the intent.

♻️ Example for the onrefresh test

   it('calls onrefresh only when expanding, not when collapsing', async () => {
-    const { onrefresh } = await renderAndExpand();
+    const { user, onrefresh } = await renderAndExpand();
     expect(onrefresh).toHaveBeenCalledOnce();
     onrefresh.mockClear();
 
-    const user = userEvent.setup();
     await user.click(screen.getByRole('button', { name: /Hide Saved Scripts/i }));
     expect(onrefresh).not.toHaveBeenCalled();
   });

Same applies to the onload test at line 91.

frontend/src/components/editor/__tests__/OutputPanel.test.ts (2)

145-157: Clipboard mock is never restored between tests — potential cross-test leakage.

mockClipboard overrides navigator.clipboard via Object.defineProperty but there's no afterEach to restore the original. If a future test elsewhere in the suite assumes the real clipboard API (or its absence), this leaks. Consider saving and restoring the original descriptor.

♻️ Suggested cleanup

   describe('copy to clipboard', () => {
     let writeTextMock: ReturnType<typeof vi.fn>;
+    const originalClipboard = Object.getOwnPropertyDescriptor(navigator, 'clipboard');
+
+    afterEach(() => {
+      if (originalClipboard) {
+        Object.defineProperty(navigator, 'clipboard', originalClipboard);
+      } else {
+        delete (navigator as any).clipboard;
+      }
+    });
 
     function mockClipboard(resolves = true) {

---

35-41: renderIdle name is misleading when used for non-idle phases.

The helper defaults phase to 'idle', but callers pass 'running', 'starting', etc. A more neutral name like renderPanel would better reflect its general-purpose usage.

frontend/src/components/editor/__tests__/CodeMirrorEditor.test.ts (2)

128-134: themeArgs is computed but never asserted on — dead code in the test.

The find on dispatchFn.mock.calls stores the result in themeArgs, but no expect references it. The actual assertion is on lines 136–138 which checks the initial extensions. This dead code is misleading and should either be asserted or removed.

♻️ Option A: Remove the unused search

       await waitFor(() => {
-        // applySettings dispatches theme reconfigure; verify the last theme-related extension
-        const themeArgs = mocks.dispatchFn.mock.calls.find(
-          (call: unknown[]) => {
-            const effect = (call[0] as { effects?: { ext?: unknown } })?.effects;
-            return effect && 'type' in effect && (effect as { type: string }).type === 'reconfigure'
-              && (effect as { ext?: unknown }).ext === expectedTheme;
-          },
-        );
-        // At minimum verify the view was initialized with the right theme in extensions
         expect(mocks.editorStateCreate).toHaveBeenCalled();
         const extensions = mocks.editorStateCreate.mock.calls[0]![0].extensions;
         expect(extensions).toContain(expectedTheme);
       });

♻️ Option B: Actually assert on themeArgs

         );
-        // At minimum verify the view was initialized with the right theme in extensions
-        expect(mocks.editorStateCreate).toHaveBeenCalled();
-        const extensions = mocks.editorStateCreate.mock.calls[0]![0].extensions;
-        expect(extensions).toContain(expectedTheme);
+        expect(themeArgs).toBeDefined();
       });

---

92-98: Consider using toHaveClass for cleaner class assertions.

@testing-library/jest-dom (bundled with vitest) provides toHaveClass which is more idiomatic:

♻️ Suggested simplification

     const wrapper = container.querySelector('.editor-wrapper');
     expect(wrapper).toBeInTheDocument();
-    expect(wrapper?.classList.contains('h-full')).toBe(true);
-    expect(wrapper?.classList.contains('w-full')).toBe(true);
+    expect(wrapper).toHaveClass('h-full', 'w-full');

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[cubic-dev-ai]

No issues found across 5 files