enzyme -> RTL: convert the DetailList component suites - #472
Conversation
Migrate components/DetailList (Detail, DetailList) off enzyme onto renderWithContexts (React Testing Library). Label/value pairs are asserted via the rendered dt/dd DOM; behaviour and assertions are preserved.
There was a problem hiding this comment.
⚠️ Not ready to approve
The new RTL tests should be aligned with the repo’s established renderWithContexts/assertDetail helpers and the PR description (currently the suites use raw render() instead).
Pull request overview
This PR continues the UI test migration from Enzyme to React Testing Library for the components/DetailList directory by updating the DetailList and Detail component test suites to assert rendered dt/dd output instead of Enzyme wrapper structure.
Changes:
- Migrates
DetailList.test.jsfrom Enzymemount()to RTL-style rendering and DOM assertions. - Migrates
Detail.test.jsfrom Enzymemount()to RTL-style rendering, adds a null-render assertion for empty values.
File summaries
| File | Description |
|---|---|
| awx/ui/src/components/DetailList/DetailList.test.js | Rewrites the DetailList suite from Enzyme to RTL assertions over rendered label/value output. |
| awx/ui/src/components/DetailList/Detail.test.js | Rewrites the Detail suite from Enzyme to RTL and adds a test covering the null-render case. |
Copilot's findings
- Files reviewed: 2/2 changed files
- Comments generated: 2
Note
Your feedback helps us improve the quality of this feature.
Please use 👍 or 👎 to tell us whether this assessment is correct.
| import React from 'react'; | ||
| import { mount } from 'enzyme'; | ||
| import { render, screen } from '@testing-library/react'; | ||
|
|
| import React from 'react'; | ||
| import { mount } from 'enzyme'; | ||
| import { render, screen } from '@testing-library/react'; | ||
|
|
||
| import Detail from './Detail'; | ||
|
|
Use the shared renderWithContexts and assertDetail helpers; exercise the empty-string case explicitly with value="".
|
Thanks for the review. Pushed a commit: use the shared renderWithContexts and assertDetail helpers, and exercise the empty-string case explicitly by passing an empty value. |
SUMMARY
Converts the DetailList component test suite (
components/DetailList) from enzyme to React Testing Library, continuing the enzyme → RTL migration (components, one directory per PR).Files migrated off enzyme onto
renderWithContexts:Detail,DetailList. Label/value pairs are asserted via the rendereddt/ddDOM (and a null-render case). Behaviour and assertions are preserved.ISSUE TYPE
COMPONENT NAME
ADDITIONAL INFORMATION
npm testforcomponents/DetailList: all passing. ESLint clean (--no-ignore). No production code changed — test-only.