Skip to content

feat: data-testid on Cn* components for journeydoc capture specs - #225

Merged
rubenvdlinde merged 1 commit into
betafrom
feature/cn-data-testids
May 13, 2026
Merged

feat: data-testid on Cn* components for journeydoc capture specs#225
rubenvdlinde merged 1 commit into
betafrom
feature/cn-data-testids

Conversation

@rubenvdlinde

Copy link
Copy Markdown
Contributor

Adds stable data-testid="cn-…-…" selectors to the high-traffic Cn* shell components so the journeydoc capture spec (ADR-030) on every Tier-4 Conduction app can target them without per-app instrumentation. Found in the decidesk pilot (ConductionNL/decidiq#195) where most chrome turned out to be @conduction/nextcloud-vue. Purely additive — zero behaviour or styling impact, per the journeydoc-instrument convention.

Components touched

Shell

  • CnAppRootcn-app-root on <NcContent>; cn-app-root-capabilities-loading on the phase-0a spinner div
  • CnAppNavcn-nav on <NcAppNavigation>; cn-nav-entry-${item.id} on each main/child/settings entry; cn-nav-footer on the settings <ul>
  • CnAppLoadingcn-app-loading on the root
  • CnDependencyMissingcn-dependency-missing on the root

Pages

  • CnPageRenderercn-page + data-testid-page-id on the dispatch wrapper
  • CnPageHeadercn-page-header, cn-page-title, cn-page-description
  • CnIndexPagecn-index-page
  • CnDetailPagecn-detail-page, cn-detail-page-header
  • CnDashboardPagecn-dashboard-page, cn-dashboard-page-header
  • CnSettingsPagecn-settings-page, cn-settings-page-tabs, cn-settings-page-tab-${tab.id} per tab
  • CnSettingsSectioncn-settings-section
  • CnFormPagecn-form-page
  • CnLogsPagecn-logs-page
  • CnFilesPagecn-files-page
  • CnMapPagecn-map-page
  • CnWikiPagecn-wiki-page
  • CnChatPagecn-chat-page

Lists

  • CnDataTablecn-object-list on the container, cn-object-list-loading, cn-object-list-table, cn-object-list-empty, cn-object-row + data-testid-row-id per row

Object sidebar

  • CnObjectSidebarcn-object-sidebar on the root <NcAppSidebar>; cn-object-sidebar-tab-{files,notes,tags,tasks,audit-trail} on the built-in tabs; cn-object-sidebar-tab-${id} for registry-driven and consumer tabs

Modals / dialogscn-modal + data-testid-modal + data-testid-phase on the visible inner section (one per phase: form/result/review/confirm/loading/list). Sits inside the dialog body, not on the teleported NcDialog root, so Playwright selectors are reliable.

  • CnFormDialog, CnDeleteDialog, CnCopyDialog, CnAdvancedFormDialog, CnTabbedFormDialog, CnMassDeleteDialog, CnMassCopyDialog, CnMassExportDialog, CnMassImportDialog, CnSuggestFeatureModal, CnAiHistoryDialog

Actions

  • CnActionsBarcn-actions-bar on the root, cn-cta-primary on the Add button, cn-actions on the overflow <NcActions>
  • CnContextMenucn-context-menu on <NcActions>; cn-action-item-${slug(label)} on each <NcActionButton>
  • CnRowActionscn-row-actions on <NcActions>; cn-action-item-${slug(label)} on each <NcActionButton>
  • CnUserActionMenucn-user-action-menu on the root <span>

Filter / pagination

  • CnFilterBarcn-filter-bar, cn-filter-bar-search
  • CnPaginationcn-pagination

AI Chat Companion

  • CnAiCompanioncn-ai-companion on the wrapper
  • CnAiChatPanelcn-ai-panel on <NcAppSidebar>; cn-ai-panel-tab-chat on the chat tab
  • CnAiFloatingButtoncn-ai-fab
  • CnAiInputcn-ai-input, cn-ai-input-textarea, cn-ai-input-send
  • CnAiMessageListcn-ai-message-list

Banners

  • CnLockedBannercn-locked-banner

Conventions

  • <scope>-<element>, lowercase, kebab-case, cn- prefix (lib's namespace), per ADR-030 §4 / journeydoc-instrument SKILL.md
  • Container elements + key interactive elements only — no leaf-level testids
  • Inner-body placement for modals (teleported portals from NcDialog can't be reliably targeted by an attribute on the host)
  • Dynamic ids bound via :data-testid=" + template literal (e.g. cn-nav-entry-${item.id}); for action menus, the action label is slugified by a small slugifyLabel() method in the same SFC (CnContextMenu, CnRowActions)

Verification

  • npm run lint → 0 errors (297 warnings, all pre-existing jsdoc nits unrelated to this change)
  • npm test → all 1267 tests pass across 89 suites; no snapshot updates (the repo has no snapshot tests)

Snapshot tests

Unchanged — none exist in this repo.

Skipped

  • CnAppRoot's alternate phases (or-missing / loading / dependency-missing / user-settings dialog) — only the outermost root + Phase-0a get testids; the other phases already have dedicated single-purpose components (CnAppLoading, CnDependencyMissing) that are instrumented in their own files.
  • Low-level layout primitives, icon-only components, and the schema-form-dialog internals were left alone — these aren't capture-spec targets.

🤖 Generated with Claude Code

Adds stable data-testid selectors to the high-traffic Cn* shell
components so the journeydoc capture spec (ADR-030) on every Tier-4
Conduction app can target them without per-app instrumentation.

The decidesk journeydoc pilot (ConductionNL/decidiq#195) found that
most app chrome is rendered by @conduction/nextcloud-vue components,
so doing this once in the lib helps every app at once.

Purely additive — zero behaviour or styling impact, per the
journeydoc-instrument convention. Testids follow the
"cn-<scope>-<element>" naming convention from the journeydoc-instrument
SKILL.md guide.

Components instrumented (by surface):
- Shell:   CnAppRoot, CnAppNav, CnAppLoading, CnDependencyMissing
- Pages:   CnPageRenderer, CnPageHeader, CnIndexPage, CnDetailPage,
           CnDashboardPage, CnSettingsPage, CnSettingsSection,
           CnFormPage, CnLogsPage, CnFilesPage, CnMapPage,
           CnWikiPage, CnChatPage
- Lists:   CnDataTable (table + rows + empty)
- Sidebar: CnObjectSidebar (root + each built-in tab + registry tabs +
           consumer tabs)
- Modals:  CnFormDialog, CnDeleteDialog, CnCopyDialog,
           CnAdvancedFormDialog, CnTabbedFormDialog,
           CnMassDelete/Copy/Export/Import, CnSuggestFeatureModal,
           CnAiHistoryDialog
- Actions: CnActionsBar (+ primary CTA + overflow menu),
           CnContextMenu, CnRowActions (per-item testid slugged from
           label), CnUserActionMenu
- Filter:  CnFilterBar, CnPagination
- AI:      CnAiCompanion, CnAiChatPanel, CnAiFloatingButton, CnAiInput,
           CnAiMessageList
- Banners: CnLockedBanner
@rubenvdlinde
rubenvdlinde merged commit 8d10c78 into beta May 13, 2026
1 of 3 checks passed
@rubenvdlinde
rubenvdlinde deleted the feature/cn-data-testids branch May 13, 2026 07:25
@github-actions

Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 1.0.0-beta.43 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant