enzyme -> RTL: convert the remaining small component suites - #474
Merged
Conversation
Migrate the remaining single-file shared component test suites off enzyme/mountWithContexts onto renderWithContexts (React Testing Library): About, AddDropDownButton, AnsibleSelect, AssociateModal, CheckboxListItem, ContentError, CopyButton, CredentialChip, DataListToolbar, DisassociateButton, ErrorDetail, ExecutionEnvironmentDetail, ExpandCollapse, FieldWithPrompt, HostForm, HostToggle, InstanceToggle, JobCancelButton, LabelSelect, ListHeader, MultiButtonToggle, MultiSelect, OptionsList, Pagination, RelatedTemplateList, RoutedTabs, ScreenHeader, SelectableCard, Sort, Sparkline, StatusIcon, StatusLabel and UserAndTeamAccessAdd. Interactions go through accessible roles and real user events; component props with no DOM surface are asserted via their rendered equivalents (class/attr/text/SVG path). Behaviour and assertions are preserved.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR completes the UI shared-component test migration from Enzyme (mountWithContexts) to React Testing Library (renderWithContexts) for the remaining small, single-file suites in awx/ui/src/components. The updated tests drive interactions through user events and accessible queries, while preserving the intent of the prior assertions (including fixing a few previously ineffective Enzyme assertions).
Changes:
- Converted remaining component unit tests from Enzyme to RTL (queries by role/text,
userEventinteractions). - Updated assertions to validate rendered DOM equivalents (PF modifier classes/attributes, tooltip portals, etc.).
- Added two new “_dump” test files that emit icon SVG path data (these should not run in CI as-is).
Reviewed changes
Copilot reviewed 35 out of 35 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| awx/ui/src/components/UserAndTeamAccessAdd/UserAndTeamAccessAdd.test.js | Migrates wizard/role-association tests to RTL user flows and async waits. |
| awx/ui/src/components/StatusLabel/StatusLabel.test.js | Rewrites status label tests using DOM assertions (PF label classes, tooltip portal behavior). |
| awx/ui/src/components/StatusIcon/StatusIcon.test.js | Converts icon mapping tests from Enzyme to RTL render-based assertions. |
| awx/ui/src/components/StatusIcon/_dump.test.js | Adds debug-only icon path dump tests (currently executes during Jest runs). |
| awx/ui/src/components/Sparkline/Sparkline.test.js | Migrates sparkline rendering/link assertions to RTL queries. |
| awx/ui/src/components/Sort/Sort.test.js | Migrates sort interaction/icon tests to RTL with dropdown selection coverage. |
| awx/ui/src/components/Sort/_dump.test.js | Adds debug-only PF icon path dump tests (currently executes during Jest runs). |
| awx/ui/src/components/SelectableCard/SelectableCard.test.js | Converts shallow render checks to RTL presence assertions. |
| awx/ui/src/components/ScreenHeader/ScreenHeader.test.js | Migrates breadcrumb/heading assertions to RTL navigation/heading roles. |
| awx/ui/src/components/RoutedTabs/RoutedTabs.test.js | Migrates tab routing tests to RTL with v5-compat routing and aria-selected checks. |
| awx/ui/src/components/RelatedTemplateList/RelatedTemplateList.test.js | Migrates template list selection/delete/copy flows to RTL user interactions. |
| awx/ui/src/components/Pagination/Pagination.test.js | Migrates pagination smoke test to RTL navigation role assertion. |
| awx/ui/src/components/OptionsList/OptionsList.test.js | Migrates options list selection/selected list rendering assertions to RTL. |
| awx/ui/src/components/MultiSelect/TagMultiSelect.test.js | Migrates chip rendering and creatable-select flow to RTL. |
| awx/ui/src/components/MultiButtonToggle/MultiButtonToggle.test.js | Migrates toggle rendering/click behavior to RTL + user-event. |
| awx/ui/src/components/ListHeader/ListHeader.test.js | Migrates ListHeader tests by capturing toolbar callback props and asserting router updates. |
| awx/ui/src/components/LabelSelect/LabelSelect.test.js | Migrates label fetching/pagination/creatable/read-only behavior to RTL. |
| awx/ui/src/components/JobCancelButton/JobCancelButton.test.js | Migrates cancel flows (confirm/error) across job types to RTL dialog interactions. |
| awx/ui/src/components/InstanceToggle/InstanceToggle.test.js | Migrates switch toggling and error modal behavior to RTL. |
| awx/ui/src/components/HostToggle/HostToggle.test.js | Migrates host enable/disable/error modal tests to RTL. |
| awx/ui/src/components/HostForm/HostForm.test.js | Migrates form editing/submit/cancel and inventory lookup visibility/disabled checks to RTL. |
| awx/ui/src/components/FieldWithPrompt/FieldWithPrompt.test.js | Migrates required-indicator/popover presence assertions to RTL DOM queries. |
| awx/ui/src/components/ExpandCollapse/ExpandCollapse.test.js | Migrates expand/collapse button rendering and click callbacks to RTL. |
| awx/ui/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.test.js | Migrates detail + missing-resource tooltip assertions to RTL (hover/portal). |
| awx/ui/src/components/ErrorDetail/ErrorDetail.test.js | Fixes ineffective error construction and migrates expandable details assertions to RTL. |
| awx/ui/src/components/DisassociateButton/DisassociateButton.test.js | Migrates modal open/close/confirm + disabled-state scenarios to RTL. |
| awx/ui/src/components/DataListToolbar/DataListToolbar.test.js | Migrates toolbar sort/search/select-all/advanced-search + kebab behaviors to RTL. |
| awx/ui/src/components/CredentialChip/CredentialChip.test.js | Migrates chip text + close-button/read-only behavior assertions to RTL. |
| awx/ui/src/components/CopyButton/CopyButton.test.js | Migrates copy button rendering/click callback to RTL. |
| awx/ui/src/components/ContentError/ContentError.test.js | Migrates generic/404/not-found rendering assertions to RTL. |
| awx/ui/src/components/CheckboxListItem/CheckboxListItem.test.js | Migrates row rendering/selection/deselection/actions assertions to RTL. |
| awx/ui/src/components/AssociateModal/AssociateModal.test.js | Migrates modal list loading/selection/save/cancel flows to RTL. |
| awx/ui/src/components/AnsibleSelect/AnsibleSelect.test.js | Migrates select rendering and onChange signature assertion to RTL. |
| awx/ui/src/components/AddDropDownButton/AddDropDownButton.test.js | Migrates dropdown open/close and menu item presence assertions to RTL. |
| awx/ui/src/components/About/About.test.js | Migrates About modal open/close and version rendering assertions to RTL. |
Comment on lines
+1
to
+13
| import React from 'react'; | ||
| import { render } from '@testing-library/react'; | ||
| import StatusIcon from 'components/StatusIcon'; | ||
|
|
||
| ['successful','running','waiting','failed','ok','changed','skipped','unreachable'].forEach((s) => { | ||
| test(`dump-${s}`, () => { | ||
| const { container } = render(<StatusIcon status={s} />); | ||
| const svg = container.querySelector('svg'); | ||
| const path = svg.querySelector('path').getAttribute('d'); | ||
| // eslint-disable-next-line no-console | ||
| console.log(`${s} :: viewBox=${svg.getAttribute('viewBox')} :: d.start=${path.slice(0,30)}`); | ||
| }); | ||
| }); |
Comment on lines
+1
to
+11
| import React from 'react'; | ||
| import { render } from '@testing-library/react'; | ||
| import { SortAlphaDownIcon, SortAlphaDownAltIcon, SortNumericDownIcon, SortNumericDownAltIcon } from '@patternfly/react-icons'; | ||
|
|
||
| [['SortAlphaDownIcon',SortAlphaDownIcon],['SortAlphaDownAltIcon',SortAlphaDownAltIcon],['SortNumericDownIcon',SortNumericDownIcon],['SortNumericDownAltIcon',SortNumericDownAltIcon]].forEach(([n,Ic])=>{ | ||
| test(n, () => { | ||
| const { container } = render(<Ic />); | ||
| const d = container.querySelector('path').getAttribute('d'); | ||
| process.stdout.write(`ICON::${n}::len=${d.length}::${d}\n\n`); | ||
| }); | ||
| }); |
Comment on lines
+78
to
82
| await act(async () => { | ||
| await new Promise((resolve) => { | ||
| setTimeout(resolve, 1200); | ||
| }); | ||
| wrapper.update(); | ||
| }); |
Remove the StatusIcon/Sort _dump.test.js debug files (they logged to stdout and asserted nothing); drive the debounced list render with Jest fake timers instead of a real 1.2s setTimeout.
Drive the debounced (1000ms) SelectResourceStep read with fake timers instead of a real 1.2s setTimeout, and bind userEvent to the fake timers.
Contributor
Author
|
Thanks for the review. Pushed a commit: removed the StatusIcon and Sort _dump.test.js debug files, and switched the debounced list to Jest fake timers instead of a real 1.2 second setTimeout. |
cigamit
approved these changes
Jun 18, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
SUMMARY
Converts the remaining single-file shared component test suites from enzyme to React Testing Library, finishing the per-component migration. Bundled into one PR because each is a single small test file.
Dirs migrated off
mountWithContexts/enzyme ontorenderWithContexts:About, AddDropDownButton, AnsibleSelect, AssociateModal, CheckboxListItem, ContentError, CopyButton, CredentialChip, DataListToolbar, DisassociateButton, ErrorDetail, ExecutionEnvironmentDetail, ExpandCollapse, FieldWithPrompt, HostForm, HostToggle, InstanceToggle, JobCancelButton, LabelSelect, ListHeader, MultiButtonToggle, MultiSelect, OptionsList, Pagination, RelatedTemplateList, RoutedTabs, ScreenHeader, SelectableCard, Sort, Sparkline, StatusIcon, StatusLabel, UserAndTeamAccessAdd.
Interactions go through accessible roles and real user events; component props with no DOM surface (color, icon, selected/active state) are asserted via their rendered equivalents (PF modifier class / attribute / text / SVG
path). A few dead or typo'd enzyme assertions (e.g. anErrorwhose.responsenever set, acontainsMatchingElementmissingexpect, swapped disabled-state props) were corrected to genuinely exercise their branch. Behaviour and assertions are otherwise preserved.ISSUE TYPE
COMPONENT NAME
ADDITIONAL INFORMATION
npm testacross these directories: all passing (the bundle plus their already-RTL neighbors run green together). ESLint clean (--no-ignore). No production code changed — test-only.