@judo/test-ids

Test ID generation utilities for E2E testing support in JUDO UI Runtime

Purpose

Produces deterministic, structured data-testid strings for all visual element categories using a {context}::{element-type}::{sourceId} convention with :: as the separator. This is a pure, framework-agnostic utility package — no React, no state, no side effects.

Architecture Layer

Layer 2 (Cross-cutting) — used by components, app-shell, and test suites for consistent test IDs.

Dependencies

• @judo/model-api — model type definitions (peer)

File Structure

src/
├── index.ts            # Barrel re-exports
├── utils.ts            # Low-level string helpers
├── element.ts          # Generic visual-element IDs (buttons, inputs, links)
├── table.ts            # Table / row / cell / column / filter IDs
├── navigation.ts       # Nav items, breadcrumbs, user menu, actor selector
├── dialog.ts           # Dialog container & parts IDs
├── options.ts          # Autocomplete / select / chip IDs
├── tabs.ts             # Tab controller / tab / tab-panel IDs
└── *.test.ts           # Tests for each module

Exports Summary

String Helpers (3 functions)

| Function | Description | | ---------------------- | --------------------------------------------------------------------------------------------------- | | slugify(text) | Converts text to lowercase kebab-case, replacing special chars/spaces/underscores with hyphens. | | sanitizeId(value) | Strips everything except [a-zA-Z0-9_-], replacing removed chars with a single -. | | joinTestId(...parts) | Filters out null/undefined/empty parts and joins with ::. Core building-block for all generators. |

Element IDs (5 functions + 1 interface)

| Export | Kind | Description | | ------------------------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------- | | TestIdElement | interface | Minimal shape for test-ID generation: { "xmi:id"?, sourceId?, name? }. | | getElementTestId(element, prefix?) | function | General-purpose ID: prefers sourceId, falls back to xmi:id, then name, then "unknown". | | getButtonTestId(button) | function | ID for a button; extracts action type from actionDefinition. Pattern: button::{id}[::{actionType}]. Takes Button. | | getButtonGroupTestId(group) | function | ID for a button group. Pattern: button-group::{id}. Takes ButtonGroup. | | getInputTestId(element) | function | Shorthand delegating to getElementTestId. Pattern: input::{id}. | | getLinkTestId(element) | function | Shorthand delegating to getElementTestId. Pattern: link::{id}. |

Table IDs (11 functions + 1 interface)

| Export | Description | | --------------------------------------------------- | ------------------------------------------------------------------- | | TransferData | interface: { __identifier?, __signedIdentifier?, [key]: unknown } | | getTableTestId(table) | Table container: table::{id} | | getRowTestId(tableId, transfer) | Row: table::{tableId}::row::{identifier} | | getCellTestId(tableId, transfer, columnName) | Cell: {rowId}::cell::{columnName} | | getRowActionTestId(tableId, transfer, actionName) | Row action: {rowId}::action::{actionName} | | getColumnHeaderTestId(tableId, columnName) | Column header: table::{tableId}::header::{columnName} | | getFilterTestId(tableId, filterName) | Filter input: table::{tableId}::filter::{filterName} | | getTableToolbarTestId(tableId) | Toolbar: table::{tableId}::toolbar | | getTablePaginationTestId(tableId) | Pagination: table::{tableId}::pagination | | getTableGridTestId(tableId) | Grid area: table::{tableId}::grid | | getTableFiltersTestId(tableId) | Filters container: table::{tableId}::filters | | getTableContainerTestId(tableId) | Outer container: table::{tableId}::container |

Navigation IDs (8 functions)

| Function | Description | | --------------------------------------- | ----------------------------------------------------------------- | | getNavItemTestId(item, parentPath?) | Nav item with optional parent path for nested trees. | | getNavItemIconTestId(navItemTestId) | Appends ::icon to a nav item test ID string. | | getNavItemLabelTestId(navItemTestId) | Appends ::label to a nav item test ID string. | | getNavItemExpandTestId(navItemTestId) | Appends ::expand to a nav item test ID string. | | getNavItemPath(navItemTestId) | Strips the nav::item:: prefix, returning just the path portion. | | getBreadcrumbTestId(index) | Breadcrumb by index: breadcrumb::{index}. | | getUserMenuTestId(action) | User menu action: user-menu::{action}. | | getActorSelectorTestId(actorName) | Actor selector option: actor-selector::option::{actorName}. |

Dialog IDs (8 functions)

| Function | Description | | ------------------------------------------- | -------------------------------------------------- | | getDialogTestId(dialogId) | Dialog container: dialog::{id} | | getDialogElementTestId(dialogId, element) | Element inside dialog: dialog::{id}::{elementId} | | getDialogTitleTestId(dialogId) | Dialog title: dialog::{id}::title | | getDialogContentTestId(dialogId) | Dialog content: dialog::{id}::content | | getDialogActionsTestId(dialogId) | Dialog actions bar: dialog::{id}::actions | | getDialogCloseTestId(dialogId) | Close button: dialog::{id}::close | | getDialogConfirmTestId(dialogId) | Confirm button: dialog::{id}::confirm | | getDialogCancelTestId(dialogId) | Cancel button: dialog::{id}::cancel |

Tab IDs (4 functions)

| Function | Description | | ------------------------------------------------ | ----------------------------------------------- | | getTabControllerTestId(controller) | Tab controller container: tabs::{id} | | getTabTestId(tabControllerId, tab, index) | Individual tab: tabs::{controllerId}::{tabId} | | getTabPanelTestId(tabControllerId, tab, index) | Tab panel: appends ::panel to tab test ID. | | getTabListTestId(tabControllerId) | Tab list: tabs::{controllerId}::list |

Autocomplete / Select / Chip IDs (7 functions)

| Function | Description | | ----------------------------------------- | ------------------------------------------------------- | | getOptionTestId(inputId, option, index) | Dropdown option: {inputId}::option::{identifier} | | getAutocompleteInputTestId(inputId) | Autocomplete text input: {inputId}::autocomplete | | getAutocompleteDropdownTestId(inputId) | Autocomplete dropdown: {inputId}::dropdown | | getSelectTriggerTestId(inputId) | Select trigger button: {inputId}::trigger | | getSelectMenuTestId(inputId) | Select menu: {inputId}::menu | | getChipTestId(inputId, option, index) | Multi-select chip: {inputId}::chip::{identifier} | | getChipDeleteTestId(chipTestId) | Chip delete button: appends ::delete to chip test ID. |

Key Patterns

• :: separator convention: Every test ID uses joinTestId() which joins non-empty parts with ::
• sourceId → xmi:id → name → "unknown" fallback chain: Consistent across element-based generators
• Compositional nesting: Higher-level IDs (e.g., cell) build on top of lower-level IDs (e.g., row)
• String-append shorthand: Sub-part generators append ::suffix directly via template literals
• No runtime dependencies: Pure functions; zero React, zero state, zero side effects