Skip to content

enzyme -> RTL: convert the Inventory screen suites - #453

Merged
cigamit merged 4 commits into
ctrliq:mainfrom
blaipr:feature/rtl-batch-inventory
Jun 18, 2026
Merged

enzyme -> RTL: convert the Inventory screen suites#453
cigamit merged 4 commits into
ctrliq:mainfrom
blaipr:feature/rtl-batch-inventory

Conversation

@blaipr

@blaipr blaipr commented Jun 16, 2026

Copy link
Copy Markdown
Contributor
SUMMARY

Converts the Inventory screen's test suite from enzyme to React Testing Library, continuing the incremental enzyme → RTL migration (one screen directory per PR). This is the largest screen directory.

Migrated off mountWithContexts/enzyme (incl. bare enzyme imports) onto renderWithContexts:

  • Inventory / SmartInventory / ConstructedInventory Add / Edit / Detail and their tab trees
  • InventorySources + the 11 source subforms, InventorySource Add/Edit/Detail/tabs
  • InventoryList, InventoryGroups, InventoryHosts, InventoryGroupHosts, InventoryHostGroups, InventoryRelatedGroups, AdvancedInventoryHosts, host facts/detail/edit/add
  • shared forms (InventoryForm / SmartInventoryForm / ConstructedInventoryForm / InventorySourceForm / InventoryGroupForm) and the useWs* websocket hooks

Tab trees and useParams-reading leaf components are mounted under real v6 <Routes> at concrete URLs (no router mocking). Add/Edit containers mock their shared form and assert the API call + navigation + submit-error. Interactions go through accessible roles and real user events; behaviour and assertions are preserved.

ISSUE TYPE
  • Bug, Docs Fix or other nominal change
COMPONENT NAME
  • UI
ADDITIONAL INFORMATION

npm test for the Inventory directory: 76 suites, 331 tests, all passing. ESLint clean (--no-ignore). No production code changed — test-only.

Notes: lookup-modal interactions are performed once with assertions in waitFor (never a click inside a waitFor retry, which would race the lookup's 1s debounce); react-ace variables render empty under jsdom so the surrounding label is asserted instead of the editor text; useWs* hooks expose their result via a data-testid (RTL 12 has no renderHook).

Migrate the Inventory screen's test suite (the largest directory) off
enzyme/mountWithContexts onto renderWithContexts (React Testing Library):
the inventory/smart/constructed inventory Add/Edit/Detail trees, inventory
sources and their subforms, groups, hosts, related groups, host facts, the
shared forms, and the useWs* websocket hooks. Tab trees and param-reading
leaf components are mounted under real v6 routes; behaviour and assertions
are preserved; interactions go through accessible roles and real user
events.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This pull request continues the UI test migration from Enzyme to React Testing Library by converting the Inventory screen’s test suites (including Smart/Constructed inventories, inventory sources, groups/hosts screens, and websocket hooks) to use renderWithContexts and route-mounted rendering under real v6 <Routes>.

Changes:

  • Replaced Enzyme mountWithContexts/act patterns with RTL renderWithContexts, screen, userEvent, and async waitFor assertions.
  • Updated route-dependent suites to mount components under concrete URLs (avoiding router hook mocking).
  • Refactored several container tests to mock shared forms and assert API calls + navigation + submit-error behavior.

Reviewed changes

Copilot reviewed 74 out of 74 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
awx/ui/src/screens/Inventory/SmartInventoryEdit/SmartInventoryEdit.test.js Convert SmartInventory edit tests to RTL with mocked form submit/cancel.
awx/ui/src/screens/Inventory/SmartInventoryAdd/SmartInventoryAdd.test.js Convert SmartInventory add tests to RTL with mocked form interactions.
awx/ui/src/screens/Inventory/SmartInventory.test.js Convert SmartInventory routed tab assertions to RTL under real routes.
awx/ui/src/screens/Inventory/shared/useWsInventorySourcesDetails.test.js Convert websocket hook test to DOM-asserted JSON output + RTL utilities.
awx/ui/src/screens/Inventory/shared/InventorySourceSyncButton.test.js Convert sync button suite to RTL interactions and async assertions.
awx/ui/src/screens/Inventory/shared/InventorySourceSubForms/VMwareSubForm.test.js Convert subform field/API-call tests to RTL with async waits.
awx/ui/src/screens/Inventory/shared/InventorySourceSubForms/VirtualizationSubForm.test.js Convert subform field/API-call tests to RTL with async waits.
awx/ui/src/screens/Inventory/shared/InventorySourceSubForms/TerraformSubForm.test.js Convert subform field/API-call tests to RTL with async waits.
awx/ui/src/screens/Inventory/shared/InventorySourceSubForms/SCMSubForm.test.js Convert SCM subform tests to RTL and route effect assertions.
awx/ui/src/screens/Inventory/shared/InventorySourceSubForms/SatelliteSubForm.test.js Convert subform field/API-call tests to RTL with async waits.
awx/ui/src/screens/Inventory/shared/InventorySourceSubForms/OpenStackSubForm.test.js Convert subform field/API-call tests to RTL with async waits.
awx/ui/src/screens/Inventory/shared/InventorySourceSubForms/InsightsSubForm.test.js Convert subform field/API-call tests to RTL with async waits.
awx/ui/src/screens/Inventory/shared/InventorySourceSubForms/GCESubForm.test.js Convert subform field/API-call tests to RTL with async waits.
awx/ui/src/screens/Inventory/shared/InventorySourceSubForms/EC2SubForm.test.js Convert subform field/API-call tests to RTL with async waits.
awx/ui/src/screens/Inventory/shared/InventorySourceSubForms/ControllerSubForm.test.js Convert subform field/API-call tests to RTL with async waits.
awx/ui/src/screens/Inventory/shared/InventorySourceSubForms/AzureSubForm.test.js Convert subform field/API-call tests to RTL with async waits.
awx/ui/src/screens/Inventory/shared/InventoryGroupsDeleteModal.test.js Convert delete-modal tests to RTL with dialog/role-based assertions.
awx/ui/src/screens/Inventory/shared/InventoryGroupForm.test.js Convert InventoryGroupForm tests to RTL label/value assertions.
awx/ui/src/screens/Inventory/shared/InventoryForm.test.js Convert InventoryForm tests to RTL and adjust assertions for jsdom/react-ace.
awx/ui/src/screens/Inventory/shared/ConstructedInventoryHint.test.js Update hint/clipboard test to RTL interaction flow.
awx/ui/src/screens/Inventory/shared/ConstructedInventoryForm.test.js Convert ConstructedInventoryForm tests to RTL with async lookup mocks.
awx/ui/src/screens/Inventory/InventorySources/useWsInventorySources.test.js Convert websocket hook test to DOM JSON assertion and RTL waits.
awx/ui/src/screens/Inventory/InventorySources/InventorySources.test.js Replace shallow render with RTL + mocked leaf list component.
awx/ui/src/screens/Inventory/InventorySources/InventorySourceListItem.test.js Convert list item table rendering assertions to RTL role/cell checks.
awx/ui/src/screens/Inventory/InventorySourceEdit/InventorySourceEdit.test.js Convert InventorySource edit container to RTL with mocked form + navigation asserts.
awx/ui/src/screens/Inventory/InventorySourceAdd/InventorySourceAdd.test.js Convert InventorySource add container to RTL with mocked form + API asserts.
awx/ui/src/screens/Inventory/InventorySource/InventorySource.test.js Convert InventorySource routed tabs/errors to RTL under real routes.
awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.test.js Convert related group list item to RTL under route-mounted params.
awx/ui/src/screens/Inventory/InventoryRelatedGroupAdd/InventoryRelatedGroupAdd.test.js Convert related group add flow to RTL with mocked group form.
awx/ui/src/screens/Inventory/InventoryList/useWsInventories.test.js Convert inventories websocket hook test to DOM JSON + RTL waits.
awx/ui/src/screens/Inventory/InventoryHosts/InventoryHosts.test.js Convert hosts route dispatcher test to RTL with mocked leaf.
awx/ui/src/screens/Inventory/InventoryHostGroups/InventoryHostGroups.test.js Convert host-groups dispatcher test to RTL with mocked leaf.
awx/ui/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupItem.test.js Convert host-group item rendering to RTL and href-based edit checks.
awx/ui/src/screens/Inventory/InventoryHostFacts/InventoryHostFacts.test.js Convert facts view tests to RTL; assert labels/errors under jsdom constraints.
awx/ui/src/screens/Inventory/InventoryHostEdit/InventoryHostEdit.test.js Convert host edit container to RTL with mocked HostForm and navigation asserts.
awx/ui/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.test.js Convert host detail tests to RTL with delete flow + tooltip settling helper.
awx/ui/src/screens/Inventory/InventoryHostAdd/InventoryHostAdd.test.js Convert host add container to RTL with mocked HostForm and redirect asserts.
awx/ui/src/screens/Inventory/InventoryHost/InventoryHost.test.js Convert host routed tabs/errors to RTL under real routes.
awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroups.test.js Convert groups route dispatcher to RTL with mocked leaf screens.
awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupItem.test.js Convert group item tests to RTL with route-mounted inventoryType param.
awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHosts.test.js Convert group-hosts dispatcher to RTL with mocked leaf list.
awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.test.js Convert group-host list item to RTL under route-mounted params.
awx/ui/src/screens/Inventory/InventoryGroupHostAdd/InventoryGroupHostAdd.test.js Convert group-host add container to RTL with mocked HostForm.
awx/ui/src/screens/Inventory/InventoryGroupEdit/InventoryGroupEdit.test.js Convert group edit container to RTL with mocked group form + routing asserts.
awx/ui/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.test.js Convert group detail tests (incl delete) to RTL with assertDetail helper.
awx/ui/src/screens/Inventory/InventoryGroupAdd/InventoryGroupAdd.test.js Convert group add container to RTL with mocked group form + redirect asserts.
awx/ui/src/screens/Inventory/InventoryGroup/InventoryGroup.test.js Convert group routed tabs/errors to RTL under real routes.
awx/ui/src/screens/Inventory/InventoryEdit/InventoryEdit.test.js Convert inventory edit container to RTL with mocked form submit/cancel.
awx/ui/src/screens/Inventory/InventoryDetail/InventoryDetail.test.js Convert inventory detail tests to RTL; add delete flow assertions.
awx/ui/src/screens/Inventory/InventoryAdd/InventoryAdd.test.js Convert inventory add container to RTL with mocked form submit/cancel/error.
awx/ui/src/screens/Inventory/Inventory.test.js Convert Inventory dispatcher tabs/errors to RTL under route-mounted params.
awx/ui/src/screens/Inventory/Inventories.test.js Convert top-level Inventories routing test to RTL; mock detail leaf.
awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventorySyncButton.test.js Minor RTL import organization update for constructed sync button test.
awx/ui/src/screens/Inventory/ConstructedInventoryAdd/ConstructedInventoryAdd.test.js Convert constructed inventory add container to RTL with mocked form + API asserts.
awx/ui/src/screens/Inventory/ConstructedInventory.test.js Convert ConstructedInventory tabs/errors to RTL under route-mounted params.
awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHosts.test.js Convert advanced hosts dispatcher to RTL with mocked leaf list + host-detail load.
awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHostListItem.test.js Convert advanced host list item to RTL and assert links/cells.
awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHostList.test.js Convert advanced host list test to RTL (select-all + API/error paths).
awx/ui/src/screens/Inventory/AdvancedInventoryHostDetail/AdvancedInventoryHostDetail.test.js Convert advanced host detail assertions to RTL with assertDetail helper.
awx/ui/src/screens/Inventory/AdvancedInventoryHost/AdvancedInventoryHost.test.js Convert advanced host routed tabs/errors to RTL under real routes.

Comment on lines +54 to +60
// the AlertModal has both a ModalBox "Close" (X) and a Cancel button
// labelled "Close"; click the modal-box close button by its ouia id
await user.click(
document.querySelector(
'[data-ouia-component-id="alert-modal-ModalBoxCloseButton"]'
)
);
blaipr added 3 commits June 17, 2026 09:43
# Conflicts:
#	awx/ui/src/screens/Inventory/Inventories.test.js
Close the delete-groups modal via the user-visible Cancel button instead of querying the internal PF/OUIA ModalBox close (X).
awx/ui/node_modules was committed as a self-referential symlink; .gitignore only excludes the directory contents, not the symlink itself. Untrack it so checkout doesn't clobber a real node_modules.
@blaipr

blaipr commented Jun 17, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for the review. Pushed a commit: close the delete-groups modal via the visible Cancel button instead of querying the internal OUIA close button. I also removed an accidentally committed node_modules symlink on this branch.

@cigamit
cigamit merged commit f1a9ae3 into ctrliq:main Jun 18, 2026
cigamit pushed a commit that referenced this pull request Jun 18, 2026
* enzyme -> RTL: convert the Template screen suites

Convert all 47 enzyme test suites under screens/Template to React Testing
Library (the last remaining screens/ directory), matching the
renderWithContexts + screen/fireEvent/waitFor pattern of the prior
conversions (#398, #433-#453).

Covers: Templates / Template / WorkflowJobTemplate + TemplateSurvey, the
JobTemplate and WorkflowJobTemplate Add/Edit/Detail screens, the shared
JobTemplateForm / WorkflowJobTemplateForm / WebhookSubForm, the Survey editor
(list/item/question add-edit-form/reorder/toolbar/multiple-choice), and the
entire WorkflowJobTemplateVisualizer tree (graph/node/link/start/toolbar, the
link and node modals, and the node-type resource lists).

d3/SVG and PatternFly portals are asserted via element ids,
data-cy / data-ouia-component-id, foreignObject content and accessible names
rather than geometry or component-name lookups. Two interactions that are
infeasible in jsdom (native drag reorder; one visualizer save-error scenario
that passes in the browser) are kept as documented skips.

48 suites / 257 tests pass (2 documented skips); no production code changed.

* Address Copilot review feedback on PR #483 RTL tests

Remove the duplicated Delete All dispatch test; fix the 'incrimented' and 'survery' test-name typos.

* Remove accidentally committed node_modules symlink

awx/ui/node_modules was committed as a self-referential symlink; .gitignore only excludes the directory contents, not the symlink itself. Untrack it so checkout doesn't clobber a real node_modules.

* Cede the 3 Template entry/detail test files to PR #484

Templates.test.js, Template.test.js and WorkflowJobTemplate.test.js are the only files this PR shared with #484 (Templates route tree -> v6). #484 now owns and RTL-converts those three (mounted for v6). Revert them here so the two PRs touch disjoint files and are independently mergeable in either order; this PR still converts the rest of screens/Template to RTL.
@cigamit cigamit self-assigned this Jun 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants