Skip to content

enzyme -> RTL: convert the AppContainer component suites - #460

Merged
cigamit merged 2 commits into
ctrliq:mainfrom
blaipr:feature/rtl-components-appcontainer
Jun 18, 2026
Merged

enzyme -> RTL: convert the AppContainer component suites#460
cigamit merged 2 commits into
ctrliq:mainfrom
blaipr:feature/rtl-components-appcontainer

Conversation

@blaipr

@blaipr blaipr commented Jun 16, 2026

Copy link
Copy Markdown
Contributor
SUMMARY

Converts the AppContainer component test suite (components/AppContainer) from enzyme to React Testing Library, continuing the enzyme → RTL migration (components, one directory per PR).

Files migrated off mountWithContexts/enzyme onto renderWithContexts: BrandLogo, NavExpandableGroup, PageHeaderToolbar, the AppContainer shell, and useWsPendingApprovalCount.

Navigation, the help/user dropdowns, and the About modal are driven through their real toggles; active nav is asserted via aria-current, menu items via role="menuitem" + href, logout via the session mock, and the approval badge via its element text. Behaviour and assertions are preserved.

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

npm test for components/AppContainer: 5 suites, 17 tests, all passing. ESLint clean (--no-ignore). No production code changed — test-only.

Migrate components/AppContainer (BrandLogo, NavExpandableGroup,
PageHeaderToolbar, AppContainer shell, useWsPendingApprovalCount) off
enzyme/mountWithContexts onto renderWithContexts (React Testing Library).
Nav/menus/About modal driven through real toggles; active nav asserted via
aria-current; behaviour and assertions are preserved.

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

Migrates the components/AppContainer test suites from Enzyme (mountWithContexts) to React Testing Library (renderWithContexts), aligning these component tests with the ongoing Enzyme → RTL migration strategy in the UI codebase.

Changes:

  • Converted AppContainer-related component tests to RTL queries and user-event driven interactions.
  • Updated navigation/menu assertions to rely on DOM attributes/roles (e.g., aria-current, role="menuitem", href) instead of Enzyme props.
  • Refactored the websocket hook test harness to assert rendered output via RTL.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
awx/ui/src/components/AppContainer/useWsPendingApprovalCount.test.js RTL migration for websocket hook tests; replaces Enzyme prop assertions with DOM assertions.
awx/ui/src/components/AppContainer/PageHeaderToolbar.test.js RTL migration for toolbar dropdowns and workflow-approval badge assertions.
awx/ui/src/components/AppContainer/NavExpandableGroup.test.js RTL migration for nav link assertions and active-state checks via aria-current.
awx/ui/src/components/AppContainer/BrandLogo.test.js RTL migration for BrandLogo rendering assertions.
awx/ui/src/components/AppContainer/AppContainer.test.js RTL migration for AppContainer shell, About modal, and logout flows.
Comments suppressed due to low confidence (1)

awx/ui/src/components/AppContainer/useWsPendingApprovalCount.test.js:88

  • This test is named as if it verifies a refetch on workflow_approval websocket messages, but it currently doesn't assert that fetchApprovalsCount is called (the key expectation is commented out). Since useThrottle is mocked to return immediately, you should be able to assert the call after sending the message by wrapping it in async act.
    // Send the websocket message
    act(() => {
      mockServer.send(
        JSON.stringify({
          unified_job_id: 2,
          type: 'workflow_approval',

expect(fiz).not.toHaveAttribute('aria-current', 'page');
});

test('when location is /foo/1/bar/fiz isActive returns false', () => {
Comment on lines +159 to +160
const dialog = await screen.findByRole('dialog');
expect(dialog.querySelector('pre').textContent).toContain('< AWX 222 >');
Rename the NavExpandableGroup test to reflect that /foo stays active as a prefix match; use the version variable instead of hard-coding 222.
@blaipr

blaipr commented Jun 17, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for the review. Pushed a commit: renamed the NavExpandableGroup test to reflect that /foo stays active as a prefix match, and used the version variable instead of hard-coding 222.

@cigamit
cigamit merged commit cd9e241 into ctrliq:main Jun 18, 2026
@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