RenewCMS/features/integration_search.qa.md

QA procedure: Integration page search (jump-to palette)

No Go test: SPA only, no /v1 call, no API change. Counts and sample rows follow the real catalogue, not the board's sample data. The search index is built from the in-repo catalogue, so tests use the real API_GROUPS, SESSION_GROUPS, PUBLIC_AUTH_ROWS and ERROR_ROWS.

Automated SPA (Vitest + Vue Test Utils, task test:web)

Suggested files: web/src/views/__tests__/IntegrationSearch.spec.ts (palette), web/src/lib/__tests__/apiSearch.spec.ts (pure matcher), plus additions to IntegrationView.spec.ts for the trigger and the hash.

Setup:

• Mount IntegrationView like the existing spec (router at /integration, attached to the document body for focus checks).
• No /v1 mocks: assert no API call is made.
• Stub scrollTo, scrollIntoView and getBoundingClientRect as the existing spec does; fake timers for the 1.5 s flash class. No test freezes the system date.
• Mock matchMedia('(prefers-reduced-motion: reduce)') for the reduced-motion case, and the viewport for desktop vs mobile.

Cases (one it per scenario or Examples row; it.each for outlines):

1. Trigger: desktop button has placeholder, "/" kbd, aria-label, aria-keyshortcuts; mobile icon button sits beside "Jump to".
2. Shortcuts: /, Ctrl+K and Cmd+K open; / ignored in input, textarea and contenteditable and not typed into the palette input; Ctrl+K opens from inside an input and calls preventDefault; listeners removed on unmount; Ctrl/Cmd+S in the editor is not affected.
3. Open focus: input focused; close returns focus to the opener; Cancel on mobile.
4. Empty query: the 5 Suggested rows in order, first selected, "5 suggestions" in footer and live region; no recent searches stored.
5. "media": 6 endpoint rows of 16, Sections row Media "11 routes", cap line "10 more endpoints. Keep typing to narrow the list.", "17 results", live "17 results, showing 7", highlight marks.
6. "404": 6 rows with "Error" second line, Errors section, cap line "17 more endpoints. Keep typing to narrow the list.", "24 results", live "24 results, showing 7".
7. "keep_id": one row, "Body field keep_id", "1 result". "page": GET /v1/site/{key}/sitemap shows "Query parameter page"; GET /v1/article/ matches in its description and has no second line.
8. "login": dashed chip with lock, weight 400, Session only section row "37 routes, not available to API keys" with lock icon, "2 results".
9. "xyz": empty copy, "0 results", live "No results".
10. Matcher unit table: multi-term AND, case-insensitive, substring, "mdia" no match, extra spaces trimmed, path/description matches first then catalogue order, no search over code samples or response examples.
11. Keyboard: ArrowDown/ArrowUp wrap, Home, End, typing resets to row 1, Enter selects, Esc closes with no scroll and no hash change.
12. ARIA: combobox attributes, aria-activedescendant follows selection, listbox, group labelling, option aria-label, polite live region.
13. Select endpoint: palette closed, scroll helper called with the card, card expanded, focus on the card button, flash class present then removed after 1500 ms, hash #ep-<id> set through history.replaceState (history length unchanged), other cards unchanged, index at "Media".
14. Select section: heading focused, hash is the section id, no flash, no expansion.
15. Select session-only route: Session only heading focused, no card expanded.
16. Reduced motion: static ring class, no animation class.
17. Deep link: mount with #ep-<id> runs case 13 without opening the palette; #ep-nope does nothing.
18. Never filtered: after typing, the number of cards and sections in the page DOM is unchanged.
19. Regression: existing IntegrationView.spec.ts cases (section hash, scroll-spy, Jump to) still pass.

Visual (task visual:check -- integration, desktop and mobile, light and dark)

References: docs/design/screens/integration.md "Search (jump-to palette)", docs/design/source/IntegrationSearch.dc.html, states 8a to 8h of RenewCMS Screens Back-office.dc.html, and AppFrame.dc.html. Add each state to web/visual/states.ts with no /v1 mocks.

state	setup	notes
8a Trigger focused	focus the trigger
8b Open, empty	open the palette	5 Suggested rows
8c "media"	type "media"	6 of 16 endpoints, Media section, 17 results
8d "404", third row selected	type "404", ArrowDown x2	cap line, 24 results
8e "keep_id"	type "keep_id"	1 result
8f "login"	type "login"	session-only styling
8g no results	type "xyz"
8h After selecting	select POST /v1/media/merge	capture after the flash with its animation disabled in the setup; the flash itself is not checked

Queries and rows use the board's sample data exactly as in the table.

Manual checks (screenshots cannot cover)

• Keyboard and focus order: Tab reaches the trigger; "/" and Ctrl/Cmd+K open from the page; focus is trapped in the modal; Esc returns focus to the trigger.
• Flash motion: the 1.5 s fade is visible, and the OS reduced-motion setting swaps it for a static ring.
• Hover on rows and the trigger.
• Real browsers: Ctrl+K / Cmd+K does not open the address-bar search in Chrome, Firefox and Safari.
• Scroll offsets under the sticky bar on mobile and desktop for several groups.