argonaut-cli/integration-tests.md

A CLI tool for managing and interacting with Argo CD.

To effectively test the actual UI of your refactored TUI app, especially to catch regressions in rendering, user interactions, and dynamic behaviors, you should focus on automating simulated terminal input/output and verifying the visual output, ideally in an end-to-end or integration style manner. Here's a pragmatic plan:
1. Use an Ink-compatible Testing Library
ink-testing-library (https://github.com/vadimdemedes/ink-testing-library) is the essential tool. It allows you to render your Ink components in a test environment, simulate key presses, and examine the output frames.
Why: It simulates your app running in a terminal, capturing what is rendered at each step, enabling assertions on visual content, cursor positions, etc.
2. Write UI Interaction Tests
Launch your top-level App component with render().
Simulate user input via stdin.write() or userEvent() helpers.
Assert the output frame (lastFrame()) contains expected text snippets, prompts, or UI elements.
Example:
typescript
import { render } from 'ink-testing-library';
import App from '../src/App';

it('displays main menu and navigates to app list', () => {
  const { lastFrame, stdin } = render(<App />);
  // Wait for initial load
  expect(lastFrame()).toContain('Loading');

  // Simulate keypresses, e.g., 'j' for down
  stdin.write('j');
  stdin.write('enter'); // or '\r' for Enter
  // Check if UI updated as expected
  expect(lastFrame()).toContain('Apps List');
});
3. Automate and Assert UI States
Capture lastFrame() output after each input.
Use pattern matching (e.g., expect(lastFrame()).toMatch(/some regex/)) to verify that the expected UI components, headers, etc., are shown.
For confirmation modals or overlays, verify their presence or absence based on simulated inputs.
Check dynamic elements like scroll positions or selection highlights if visible in output.
4. What to Test
Initial loading: verify loading indicators appear, then main menu.
Navigation: simulate key presses (j, k, arrow keys), ensure focus updates, and the correct items are highlighted.
Commands: trigger commands (:sync, :diff) by simulating command mode input, verify modal appearance.
Modal interactions: confirm dialogs, choices, and cancellations.
Mode transitions: switching between search, command, help, normal modes.
Edge cases: no items, large lists, long search queries, rapid inputs.
5. Handling Visual Complexity & Flaky Tests
Use clear expect() assertions against lastFrame() snippets rather than pixel-perfect renders.
Run tests repeatedly to catch flakiness.
Use snapshots of output frames for complex screens; update when intentionally changing UI.
6. Incorporate Snapshot Testing for UI
Capture output frames as snapshots, e.g., expect(lastFrame()).toMatchInlineSnapshot() or toMatchSnapshot().
Example:
typescript
expect(lastFrame()).toMatchSnapshot();
Updating snapshots should be deliberate and only after UI changes are verified.
7. Mock External Interactions
Mock API calls and side effects to keep tests deterministic.
Ensure your app’s API calls are abstracted so responses can be simulated in tests.
8. Automate End-to-End (E2E) Testing (Optional but Powerful)
Use tools like cypress-ink (if exists) or custom scripts to run your app in a headless terminal emulator, feeding inputs and capturing outputs programmatically.
These are more complex but give the highest confidence that UI flows function correctly in real scenarios.
Summary & Practical Steps
Implement tests with ink-testing-library, focusing on:
Rendering correctness
User input simulation
Output frame assertions
Modal/dialog presence
Use snapshots for complex screens, update as UI evolves.
Mock external dependencies to isolate UI tests from network/UI side effects.
Example Test Snippet to Get Started
typescript
import { render } from 'ink-testing-library';
import App from '../src/App';

it('displays main menu and navigates to app details', () => {
  const { lastFrame, stdin } = render(<App />);
  expect(lastFrame()).toContain('Loading');

  // Simulate navigation: down arrow + Enter
  stdin.write('\x1b[C'); // right arrow or specific key depending on input mapping
  stdin.write('\r'); // Enter
  // Verify UI updates
  expect(lastFrame()).toContain('Application Details');
});
Final note:
This approach is reliable because it tests the real rendering output of your Ink app, simulating actual user actions, and verifying expected visual cues. It complements your unit and integration tests with a high-level UI validation, giving you strong confidence that your app functions as intended from the user’s perspective.