enzyme -> RTL: convert the Job screen suites - #451
Merged
Conversation
Migrate the Job screen's test suite off enzyme/mountWithContexts (and the two bare-enzyme files) onto React Testing Library: JobDetail, the JobOutput view and its pieces (events, search, page controls, host-status bar, toolbar), the WorkflowOutput graph/node/toolbar, and the useJobEvents hook. Virtualized output and SVG graph assertions use stable element ids; the hook API is exercised via a captured-render helper (RTL 12 has no renderHook). Behaviour and assertions are preserved.
Mutate a property of a const object instead of reassigning a module-level let from render, which trips react-hooks/globals when test files are linted (eslint-plugin-react-hooks v7). Matches the hooks-suite conversion pattern.
Contributor
There was a problem hiding this comment.
Pull request overview
Migrates the Job screen test suites (including JobOutput + WorkflowOutput subcomponents and useJobEvents) from Enzyme to React Testing Library, aligning with the ongoing incremental Enzyme → RTL conversion strategy for awx/ui/src/screens.
Changes:
- Replaced Enzyme
mount/shallowusage withrenderWithContexts/RTL queries and user interactions across Job-related suites. - Updated WorkflowOutput tests to assert against stable SVG ids / OUIA attributes and DOM structure rather than component internals.
- Reworked
useJobEventshook tests to exercise its imperative API via a captured render reference (withoutrenderHook).
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.test.js | Converts toolbar assertions and dispatch interactions to RTL. |
| awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputNode.test.js | Converts SVG node rendering assertions to DOM-based RTL checks. |
| awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputLink.test.js | Replaces Enzyme mount with RTL render and id-based assertion. |
| awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputGraph.test.js | Converts hover/help-text tests to RTL + DOM event simulation. |
| awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutput.test.js | Converts async node-loading assertions to RTL waitFor + DOM queries. |
| awx/ui/src/screens/Job/JobOutput/useJobEvents.test.js | Replaces shallow/mount with RTL render and a captured imperative hook API wrapper. |
| awx/ui/src/screens/Job/JobOutput/shared/OutputToolbar.test.js | Moves toolbar badge/button assertions to accessible RTL queries. |
| awx/ui/src/screens/Job/JobOutput/shared/HostStatusBar.test.js | Converts bar segment + tooltip behavior assertions to RTL hover-based testing. |
| awx/ui/src/screens/Job/JobOutput/PageControls.test.js | Converts icon/button presence checks to role/name-based RTL assertions. |
| awx/ui/src/screens/Job/JobOutput/JobOutputSearch.test.js | Converts search + URL query param behavior to RTL user events and DOM queries. |
| awx/ui/src/screens/Job/JobOutput/JobOutput.test.js | Converts core JobOutput behaviors to RTL and tests overscan logic via the exported pure function. |
| awx/ui/src/screens/Job/JobOutput/JobEventSkeleton.test.js | Converts skeleton render assertions to RTL DOM checks. |
| awx/ui/src/screens/Job/JobOutput/JobEvent.test.js | Converts JobEvent rendering/click-selection behavior to RTL rendering + user interaction. |
| awx/ui/src/screens/Job/JobOutput/HostEventModal.test.js | Converts modal/tab/detail assertions to RTL and updates test fixtures. |
| awx/ui/src/screens/Job/JobDetail/JobDetail.test.js | Converts detail/actions coverage to RTL queries; adds tooltip passthrough test mock. |
| awx/ui/src/screens/Job/Job.test.js | Converts basic render test to RTL and waits for initial async settle. |
Comment on lines
44
to
45
| stdout: `stdout: "[0;33mchanged: [localhost] => {"changed": true, "cmd": ["free", "-m"], "delta": "0:00:01.479609", "end": "2019-09-10 14:21:45.469533", "rc": 0, "start": "2019-09-10 14:21:43.989924", "stderr": "", "stderr_lines": [], "stdout": " total used free shared buff/cache available\nMem: 7973 3005 960 30 4007 4582\nSwap: 1023 0 1023", "stdout_lines": [" total used free shared buff/cache available", "Mem: 7973 3005 960 30 4007 4582", "Swap: 1023 0 1023"]}[0m" | ||
| `, |
Comment on lines
+57
to
+65
| async function waitForLoaded() { | ||
| await waitFor(() => | ||
| expect(JobsAPI.readEvents.mock.calls.length).toBeGreaterThan(0) | ||
| ); | ||
| await waitForElementToBeRemoved( | ||
| () => document.querySelector('[role="progressbar"]'), | ||
| { timeout: 4000 } | ||
| ).catch(() => {}); | ||
| } |
Restore ANSI escape codes in the HostEventModal stdout fixture; only await the JobOutput spinner removal when present and stop swallowing timeouts.
Contributor
Author
|
Thanks for the review. Pushed a commit: restored the ANSI escape codes in the HostEventModal stdout fixture, and made JobOutput only await the spinner removal when one is present without swallowing timeouts. |
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 Job 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; it included two files importing
enzymedirectly (WorkflowOutputLink,useJobEvents) which are also converted, so the directory is now fully enzyme-free.Files migrated off enzyme onto
renderWithContexts/ RTLrender:Job— tab routing under a real v6 routeJobDetail— detail fields, relaunch/cancel/delete + related-resource readsJobOutput/*—JobOutput(virtualized list —computeOverscanIndicestested directly),JobEvent,JobEventSkeleton,JobOutputSearch,PageControls,HostEventModal,HostStatusBar,OutputToolbarWorkflowOutput/*— graph, node, toolbar, link (SVG assertions via stable element ids)useJobEvents— reducer logic unchanged; the imperative hook API is exercised via a captured-render helper (RTL 12 has norenderHook), with mutators wrapped inact()Interactions go through accessible roles and real user events. Behaviour and assertions are preserved.
ISSUE TYPE
COMPONENT NAME
ADDITIONAL INFORMATION
npm testfor the Job directory: 19 suites, 164 tests, all passing. ESLint clean. No production code changed — test-only.Notes:
JobOutput's react-virtualized list renders no rows under jsdom, so the overscan logic is tested through the exported purecomputeOverscanIndices(all numeric expectations preserved); a couple of empty-i18n detail values were dropped with comments.