enzyme -> RTL: convert the Project screen suites - #448
Merged
Conversation
Migrate the Project screen's test suite off enzyme/mountWithContexts onto renderWithContexts (React Testing Library): ProjectList + item (sync/copy), ProjectDetail, ProjectAdd/Edit (shared ProjectForm mocked), ProjectForm (SCM subform reveal), the sync button, and the useWsProject(s) hooks. Behaviour and assertions are preserved; interactions go through accessible roles and real user events.
Contributor
There was a problem hiding this comment.
Pull request overview
Migrates the Project screen’s UI test coverage from Enzyme (mountWithContexts) to React Testing Library (renderWithContexts), continuing the incremental Enzyme → RTL conversion for the Project screen directory and related hooks/components.
Changes:
- Converted Project screen container, list, detail, add/edit, and shared component tests to RTL patterns (roles/labels +
userEvent). - Updated websocket-hook tests (
useWsProjects,useWsProject) to assert state updates via rendered output. - Refactored deletion-related assertions away from internal-prop checks toward behavior-level API call expectations.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| awx/ui/src/screens/Project/shared/ProjectSyncButton.test.js | Migrates sync button tests to RTL interactions and modal assertions. |
| awx/ui/src/screens/Project/shared/ProjectForm.test.js | Migrates ProjectForm tests to RTL; asserts field visibility and button actions. |
| awx/ui/src/screens/Project/Projects.test.js | Migrates Projects route/header test to RTL and validates activity-stream link wiring. |
| awx/ui/src/screens/Project/ProjectList/useWsProjects.test.js | Migrates list websocket hook test to RTL and checks live status updates. |
| awx/ui/src/screens/Project/ProjectList/ProjectListItem.test.js | Migrates list item capability/action tests to RTL queries and assertions. |
| awx/ui/src/screens/Project/ProjectList/ProjectList.test.js | Migrates list load/select/delete/add tests to RTL user flows and API expectations. |
| awx/ui/src/screens/Project/ProjectEdit/ProjectEdit.test.js | Migrates edit container tests to RTL; uses mocked ProjectForm to drive submit/cancel paths. |
| awx/ui/src/screens/Project/ProjectDetail/useWsProject.test.js | Migrates detail websocket hook test to RTL and validates refresh behavior. |
| awx/ui/src/screens/Project/ProjectDetail/ProjectDetail.test.js | Migrates detail view tests to RTL; validates details/options/actions and delete-related reads. |
| awx/ui/src/screens/Project/ProjectAdd/ProjectAdd.test.js | Migrates add container tests to RTL; uses mocked ProjectForm to drive submit/cancel/redirect. |
| awx/ui/src/screens/Project/Project.test.js | Migrates Project screen routing/tab tests to RTL under a compat v6 route. |
Comment on lines
+115
to
+121
| await waitFor(() => | ||
| expect(getResult().summary_fields.current_job).toEqual({ | ||
| id: 2, | ||
| status: 'running', | ||
| finished: undefined, | ||
| }); | ||
| } else { | ||
| // If the websocket message didn't update the state, just verify the original project is still there | ||
| expect(currentProject.id).toBe(1); | ||
| expect(currentProject.summary_fields.last_job.status).toBe('successful'); | ||
| } | ||
|
|
||
| await act(async () => { | ||
| mockServer.send( | ||
| JSON.stringify({ | ||
| group_name: 'jobs', | ||
| project_id: 1, | ||
| status: 'successful', | ||
| type: 'project_update', | ||
| unified_job_id: 2, | ||
| unified_job_template_id: 1, | ||
| finished: '2020-07-02T16:28:31.839071Z', | ||
| }) | ||
| ); | ||
| }); | ||
|
|
||
| wrapper.update(); | ||
| }) | ||
| ); |
Comment on lines
56
to
66
| test('should render tooltip wrapper on disabled sync', async () => { | ||
| const { container } = renderWithContexts( | ||
| <ProjectSyncButton projectId={1} lastJobStatus="running"> | ||
| {children} | ||
| </ProjectSyncButton> | ||
| ); | ||
|
|
||
| // disabled state wraps the button in a Tooltip-controlled div | ||
| expect(container.querySelector('div > button')).toBeInTheDocument(); | ||
| expect(screen.getByRole('button', { name: 'Sync Project' })).toBeDisabled(); | ||
| }); |
Comment on lines
+122
to
+125
| // AnsibleSelect renders a native <select id="scm_type"> | ||
| const scmSelect = document.querySelector('#scm_type'); | ||
| await user.selectOptions(scmSelect, 'git'); | ||
|
|
# Conflicts: # awx/ui/src/screens/Project/Projects.test.js
Assert stable fields (not undefined-dropping JSON) in useWsProject; verify the disabled-sync tooltip actually renders; guard the #scm_type lookup before selecting.
awx/ui/node_modules was committed as a self-referential symlink; .gitignore only excludes the directory contents, not the symlink itself. Checking out the branch lays this broken link over a real node_modules. Untrack it.
Contributor
Author
|
Thanks for the review. Pushed a commit: assert the stable fields in the useWsProject test instead of the JSON round trip that drops undefined keys, verify the disabled-sync tooltip actually renders, and check the #scm_type lookup exists before selecting. I also removed an accidentally committed node_modules symlink on this branch. |
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 Project screen's test suite from enzyme to React Testing Library, continuing the incremental enzyme → RTL migration (one screen directory per PR).
Files migrated off
mountWithContexts/enzyme ontorenderWithContexts:Project/Projects— tab routing under a real v6 route, breadcrumb headerProjectList/ProjectListItem— load, selection, bulk delete, sync/copy/edit buttons, revision cellsProjectDetail— detail fields, options, sync, delete + related-resource reads + error dialogProjectAdd/ProjectEdit— create/update API args + redirect, cancel, submit-error (sharedProjectFormmocked)ProjectForm— primary fields, SCM-type subform reveal, manual subform warning, save/cancelProjectSyncButton,useWsProjects,useWsProject— sync button + error modal, websocket hooksInteractions now go through accessible roles and real user events. Behaviour and assertions are preserved.
ISSUE TYPE
COMPONENT NAME
ADDITIONAL INFORMATION
npm testfor the Project directory: 11 suites, 64 tests, all passing. ESLint clean. No production code changed — test-only.Two internal-prop assertions (
deleteDetailsRequestslength) were re-expressed as behaviour-level checks asserting the three related-resource reads actually fire when the confirm-delete modal opens.