test(e2e): add stable UI hooks

[aqilaziz]

Summary - Adds stable data-testid hooks for settings navigation rows, developer settings rows, skills rows/actions, conversation thread rows, and chat composer controls. - Adds panel-level hooks for Webhooks Debug and Memory Debug so E2E specs can wait on rendered settings panels instead of text/class selectors. - Adds focused component tests for the new hooks on Settings, SkillCard, Webhooks Debug, and Memory Debug. ## Problem Issue #1861 tracks brittle E2E selectors that depend on Tailwind class strings and visible copy. Several foundations were already present on origin/main (cron hooks, helper APIs, and taxonomy docs), but key UI affordances still lacked stable selectors. ## Solution - Reuses the documented taxonomy from gitbooks/developing/e2e-testing.md. - Threads testId through SettingsMenuItem and UnifiedSkillCard. - Adds settings-nav-*, skill-row-*, skill-install-*, skill-uninstall-*, thread-row-*, new-thread-button, send-message-button, webhooks-debug-panel, and memory-debug-panel hooks. ## Submission Checklist - [x] Tests added or updated (happy path + at least one failure / edge case) per Testing Strategy. - [x] Diff coverage >= 80% - focused component tests cover the added hook plumbing where practical; remaining JSX hook attributes are exercised by TypeScript compile and existing E2E usage. - [x] Coverage matrix updated - N/A: E2E selector stability only; no product feature row changed. - [x] All affected feature IDs from the matrix are listed in the PR description under ## Related - N/A: no matrix feature ID changed. - [x] No new external network dependencies introduced. - [x] Manual smoke checklist updated if this touches release-cut surfaces - N/A: test-only selector hooks. - [x] Linked issue closure - N/A: partial selector-stability pass; #1861 remains open for helper, cron, onboarding, and notification follow-ups. ## Validation - [x] pnpm install --offline --frozen-lockfile - [x] pnpm --dir app test -- src/components/skills/SkillCard.test.tsx src/components/settings/__tests__/SettingsHome.test.tsx src/components/settings/panels/__tests__/WebhooksDebugPanel.test.tsx src/components/settings/panels/__tests__/MemoryDebugPanel.test.tsx - [x] pnpm --dir app compile - [x] pnpm --dir app exec prettier --check src/components/skills/SkillCard.tsx src/components/skills/SkillCard.test.tsx src/components/settings/SettingsHome.tsx src/components/settings/SettingsSectionPage.tsx src/components/settings/__tests__/SettingsHome.test.tsx src/components/settings/components/SettingsMenuItem.tsx src/components/settings/panels/DeveloperOptionsPanel.tsx src/components/settings/panels/MemoryDebugPanel.tsx src/components/settings/panels/__tests__/MemoryDebugPanel.test.tsx src/components/settings/panels/WebhooksDebugPanel.tsx src/components/settings/panels/__tests__/WebhooksDebugPanel.test.tsx src/pages/Conversations.tsx src/pages/Skills.tsx - [x] pnpm --dir app test -- src/pages/__tests__/Skills.discovered-skills.test.tsx src/components/skills/SkillCard.test.tsx\n- [x] git diff --check ## Related - Toward #1861 --- ## AI Authored PR Metadata (required for Codex/Linear PRs) ### Linear Issue - Key: N/A - URL: N/A ### Commit & Branch - Branch: codex/1861-e2e-testids - Commit SHA: bb8950e86cb792336705f101103398f3643e849a ### Validation Run - [x] Frontend targeted tests passed: 4 files, 23 tests. - [x] TypeScript compile passed. - [x] Prettier check passed on changed files. - [x] Diff whitespace check passed. ### Validation Blocked - N/A ### Behavior Changes - Intended behavior change: none for users; UI now exposes stable test hooks. - User-visible effect: none. ### Parity Contract - Legacy behavior preserved: existing labels, routes, buttons, and handlers are unchanged. - Guard/fallback/dispatch parity checks: added attributes only; component tests verify click handlers still fire through the hooked actions. ### Duplicate / Superseded PR Handling - Duplicate PR(s): none found for #1861. - Canonical PR: this PR. - Resolution: N/A.

Summary by CodeRabbit

• Tests
  • Improved automated test coverage and stability across Settings, Skills, and Conversations; added new suites for Memory Debug, Webhooks Debug, and Skill Card components
• Chores
  • Added stable UI identifiers to settings navigation, developer/memory/webhooks panels, skill cards/tiles, and conversation controls to enable more reliable testing and maintenance

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds stable data-testid attributes and optional testId/ctaTestId props across Settings navigation, Skills UI, Conversations, and debug panels; includes new and updated tests asserting these testids.

Changes

E2E Test Identifier Coverage

Layer / File(s)	Summary
SettingsMenuItem testId prop support app/src/components/settings/components/SettingsMenuItem.tsx	SettingsMenuItemProps adds optional testId?: string; component forwards it to data-testid on both clickable (<button>) and non-clickable (<div>) render paths.
Settings navigation testid wiring app/src/components/settings/SettingsHome.tsx, app/src/components/settings/SettingsSectionPage.tsx, app/src/components/settings/panels/DeveloperOptionsPanel.tsx, app/src/components/settings/__tests__/SettingsHome.test.tsx	SettingsHome, SettingsSectionPage, and DeveloperOptionsPanel pass testId={settings-nav-${item.id}} to each SettingsMenuItem. SettingsHome test updated to assert settings-nav-account and settings-nav-notifications.
UnifiedSkillCard testId prop support app/src/components/skills/SkillCard.tsx, app/src/components/skills/SkillCard.test.tsx	UnifiedSkillCardProps adds testId?: string and ctaTestId?: string; the card root and CTA button render corresponding data-testid attributes. New test covers rendering and click behavior for primary CTA and secondary actions.
Skill tile testId prop support app/src/pages/Skills.tsx (ComposioConnectorTile, ChannelTile)	ComposioConnectorTile and ChannelTile accept testId?: string and render it as data-testid on their primary buttons.
Skills page comprehensive testid wiring app/src/pages/Skills.tsx (skill card and grid rendering)	Skills.tsx passes testId and ctaTestId to UnifiedSkillCard for multiple skill types, wraps tiles with div data-testid="skill-row-*", passes skill-install-*/skill-install-composio-* to tiles, and renames discovered uninstall action to skill-uninstall-<id>.
Conversations page testid coverage app/src/pages/Conversations.tsx	Adds data-testid to sidebar new-thread button, each thread row (thread-row-<id>), chat header new-thread button, and composer send button (send-message-button).
Settings debug panels testid support and tests app/src/components/settings/panels/MemoryDebugPanel.tsx, app/src/components/settings/panels/WebhooksDebugPanel.tsx, app/src/components/settings/panels/__tests__/MemoryDebugPanel.test.tsx, app/src/components/settings/panels/__tests__/WebhooksDebugPanel.test.tsx	MemoryDebugPanel and WebhooksDebugPanel root <div> elements add data-testid attributes. New MemoryDebugPanel test scaffolds mocks and asserts root presence and rendered "Documents" content; Webhooks test asserts root presence before SSE assertions.

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

working

Suggested reviewers

• senamakel

🐰 I stitched testids neat and small,
so specs can hop and never fall.
With buttons named and rows in line,
E2E tests now brightly shine,
a rabbit's hop through selectors all.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR implements most core objectives from #1861: adds testid taxonomy to settings nav, skills, conversations, and panels. However, helper utilities (waitForTestId, clickTestId) and reference cron spec migration are not included in this changeset.	Add waitForTestId and clickTestId helpers to element-helpers.ts and migrate cron-jobs-flow.spec.ts to use testids instead of class-name regexes to fully address #1861 requirements.
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and accurately describes the main change: adding stable UI hooks (data-testid attributes) for E2E testing across multiple components.
Out of Scope Changes check	✅ Passed	All changes are within scope: testid additions follow the documented taxonomy, component tests validate the hooks, and no unrelated logic changes are present.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

---

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.}

[graycyrus]

Nice work — the taxonomy is clean, the testid naming is consistent, and the uninstall-skill-* → skill-uninstall-* rename aligns with the documented convention. Tests are focused and cover the hook plumbing well.

Issue alignment concern: The PR claims Closes #1861, but several acceptance criteria from that issue remain unaddressed:

• waitForTestId / clickTestId helpers in element-helpers.ts
• Cron job panel testids (cron-job-row-*, cron-job-pause-*, etc.)
• Onboarding and notification testids
• Reference cron spec migration to use testids

If these are being handled in follow-up PRs, change Closes #1861 to Toward #1861 so the issue stays open for tracking.

File	Changes
SettingsMenuItem.tsx	Thread testId → data-testid on button and div paths
SkillCard.tsx	Add testId, ctaTestId props
Conversations.tsx	Hooks for thread rows, new-thread, send-message
Skills.tsx	Hooks for skill rows/actions, channels, composio tiles
DeveloperOptionsPanel.tsx	Thread testId through dev settings rows
MemoryDebugPanel.tsx, WebhooksDebugPanel.tsx	Panel-level data-testid
Tests (4 files)	New/updated component tests for hooks

[graycyrus]

[minor] The wrapper <div> introduces an extra DOM node inside a CSS grid (repeat(auto-fill, minmax(5.5rem, 1fr))). This shouldn't break layout, but it's cleaner to thread a rowTestId prop through ChannelTile directly — the same pattern used for UnifiedSkillCard. Same applies to the ComposioConnectorTile wrapper below.

[aqilaziz]

Updated the PR body per review: changed the issue linkage from Closes #1861 to Toward #1861, and marked the closure checklist item as N/A so the remaining acceptance criteria stay tracked on the issue.

[graycyrus]

Re-review — previous changes addressed

The PR description now correctly says "Toward #1861" instead of "Closes #1861", acknowledging the remaining acceptance criteria. The major finding from my prior review is resolved.

The minor note about wrapper <div>s around ChannelTile/ComposioConnectorTile still stands but isn't blocking — it's a cleanup opportunity, not a correctness issue.

Good contribution — stable test hooks are well-structured and follow the documented taxonomy. Tests cover the new attributes properly.

[aqilaziz]

@graycyrus thanks for the re-review. Since the issue-linkage change is addressed and your remaining note is non-blocking, could you re-approve or dismiss the stale changes-requested review when you get a chance? The PR still shows CHANGES_REQUESTED even though the blocker is resolved.