diff --git a/awx/ui/src/components/About/About.test.js b/awx/ui/src/components/About/About.test.js
index f3dede495..3511d1caf 100644
--- a/awx/ui/src/components/About/About.test.js
+++ b/awx/ui/src/components/About/About.test.js
@@ -1,5 +1,6 @@
import React from 'react';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import { screen } from '@testing-library/react';
+import { renderWithContexts } from '../../../testUtils/rtlContexts';
import About from './About';
jest.mock('../../hooks/useBrandName', () => ({
@@ -8,14 +9,24 @@ jest.mock('../../hooks/useBrandName', () => ({
}));
describe('.
+ const pre = dialog.querySelector('pre');
+ expect(pre.textContent).toContain('AWX 1.2.3');
+ });
+
+ test('should not render when isOpen is false', () => {
+ const onClose = jest.fn();
+ renderWithContexts(Add ,
Route ,
];
+
test('should be closed initially', () => {
- const wrapper = mountWithContexts(
- whose checkbox only renders
+// inside a full PF Table context; mounted standalone here the row content and
+// the Tr onClick selection behaviour are what we assert (matching the original
+// enzyme coverage, which never reached the checkbox input either).
+
describe('CheckboxListItem', () => {
test('renders the expected content', () => {
- const wrapper = mountWithContexts(
+ renderWithContexts(
);
- expect(wrapper).toHaveLength(1);
+ expect(screen.getByText('Buzz')).toBeInTheDocument();
+ expect(screen.getByRole('row')).toBeInTheDocument();
+ });
+
+ test('clicking an unselected row calls onSelect with the item id', async () => {
+ const onSelect = jest.fn();
+ const onDeselect = jest.fn();
+ renderWithContexts(
+
+ );
+ fireEvent.click(screen.getByRole('row'));
+ expect(onSelect).toHaveBeenCalledWith(7);
+ expect(onDeselect).not.toHaveBeenCalled();
+ });
+
+ test('clicking a selected row calls onDeselect with the item id', async () => {
+ const onSelect = jest.fn();
+ const onDeselect = jest.fn();
+ renderWithContexts(
+
+ );
+ fireEvent.click(screen.getByRole('row'));
+ expect(onDeselect).toHaveBeenCalledWith(7);
+ expect(onSelect).not.toHaveBeenCalled();
});
test('should render row actions', () => {
- const wrapper = mountWithContexts(
+ renderWithContexts(
{
onSelect={() => {}}
onDeselect={() => {}}
rowActions={[
- action_1
,
- action_2
,
+
+ action_1
+
,
+
+ action_2
+
,
]}
/>
);
- expect(
- wrapper
- .find('ActionsTd')
- .containsAllMatchingElements([
- action_1
,
- action_2
,
- ])
- ).toEqual(true);
+ expect(screen.getByText('action_1')).toBeInTheDocument();
+ expect(screen.getByText('action_2')).toBeInTheDocument();
});
});
diff --git a/awx/ui/src/components/ContentError/ContentError.test.js b/awx/ui/src/components/ContentError/ContentError.test.js
index 518f0ae8c..4fd648494 100644
--- a/awx/ui/src/components/ContentError/ContentError.test.js
+++ b/awx/ui/src/components/ContentError/ContentError.test.js
@@ -1,11 +1,12 @@
import React from 'react';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import { screen } from '@testing-library/react';
+import { renderWithContexts } from '../../../testUtils/rtlContexts';
import ContentError from './ContentError';
describe('ContentError', () => {
- test('renders the expected content', () => {
- const wrapper = mountWithContexts(
+ test('renders the generic error content', () => {
+ renderWithContexts(
{
}
/>
);
- expect(wrapper).toHaveLength(1);
+ expect(screen.getByText('Something went wrong...')).toBeInTheDocument();
+ expect(
+ screen.getByText(
+ 'There was an error loading this content. Please reload the page.'
+ )
+ ).toBeInTheDocument();
+ });
+
+ test('renders Not Found content for a 404 response', () => {
+ const error = new Error('not found');
+ error.response = { status: 404, headers: {} };
+ renderWithContexts( {}}
- onCopyFinish={() => {}}
- copyItem={() => {}}
- errorMessage="Failed to copy template."
- />
- );
- });
- expect(wrapper.find('CopyButton').length).toBe(1);
+ test('should mount properly', () => {
+ renderWithContexts(
+ {}}
+ onCopyFinish={() => {}}
+ copyItem={() => {}}
+ errorMessage="Failed to copy template."
+ />
+ );
+ expect(screen.getByRole('button', { name: 'Copy' })).toBeInTheDocument();
});
- test('should call the correct function on button click', async () => {
+ test('should call copyItem on button click', async () => {
const copyItem = jest.fn();
- await act(async () => {
- wrapper = mountWithContexts(
- {}}
- onCopyFinish={() => {}}
- copyItem={copyItem}
- errorMessage="Failed to copy template."
- />
- );
- });
- await act(async () => {
- wrapper.find('button').simulate('click');
- });
+ const { user } = renderWithContexts(
+ {}}
+ onCopyFinish={() => {}}
+ copyItem={copyItem}
+ errorMessage="Failed to copy template."
+ />
+ );
+ await user.click(screen.getByRole('button', { name: 'Copy' }));
expect(copyItem).toHaveBeenCalledTimes(1);
});
});
diff --git a/awx/ui/src/components/CredentialChip/CredentialChip.test.js b/awx/ui/src/components/CredentialChip/CredentialChip.test.js
index df678d5d2..547cfe5d5 100644
--- a/awx/ui/src/components/CredentialChip/CredentialChip.test.js
+++ b/awx/ui/src/components/CredentialChip/CredentialChip.test.js
@@ -1,5 +1,6 @@
import React from 'react';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import { screen } from '@testing-library/react';
+import { renderWithContexts } from '../../../testUtils/rtlContexts';
import CredentialChip from './CredentialChip';
describe('CredentialChip', () => {
@@ -10,10 +11,11 @@ describe('CredentialChip', () => {
name: 'foo',
};
- const wrapper = mountWithContexts(
- {}} />
+ );
+ // PF Chip's close button is labelled by the chip text (aria-labelledby).
+ expect(
+ screen.getByRole('button', { name: /SSH: foo/ })
+ ).toBeInTheDocument();
+ });
+
+ test('should render a read-only chip without a close button', () => {
+ const credential = { id: 1, kind: 'ssh', name: 'foo' };
+ renderWithContexts( {}}
- />
- );
- const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector);
- expect(sortDropdownToggle.length).toBe(1);
- sortDropdownToggle.simulate('click');
- toolbar.update();
- const sortDropdownItems = toolbar.find(sortDropdownMenuItems).children();
- expect(sortDropdownItems.length).toBe(2);
- let searchDropdownToggle = toolbar.find(searchDropdownToggleSelector);
- expect(searchDropdownToggle.length).toBe(1);
- searchDropdownToggle.simulate('click');
- toolbar.update();
- let searchDropdownItems = toolbar.find(searchDropdownMenuItems).children();
- expect(searchDropdownItems.length).toBe(2);
- const mockedSortEvent = { target: { innerText: 'Bar' } };
- searchDropdownItems.at(0).simulate('click', mockedSortEvent);
- toolbar = mountWithContexts(
+ test('should reflect isAllSelected on the select-all checkbox', () => {
+ const searchColumns = [{ name: 'Name', key: 'name', isDefault: true }];
+ const sortColumns = [{ name: 'Name', key: 'name' }];
+ renderWithContexts(
{}}
+ onSelectAll={onSelectAll}
+ showSelectAll
/>
);
- toolbar.update();
-
- const sortDropdownToggleDescending = toolbar.find(
- sortDropdownToggleSelector
- );
- expect(sortDropdownToggleDescending.length).toBe(1);
- sortDropdownToggleDescending.simulate('click');
- toolbar.update();
-
- const sortDropdownItemsDescending = toolbar
- .find(sortDropdownMenuItems)
- .children();
- expect(sortDropdownItemsDescending.length).toBe(2);
- sortDropdownToggleDescending.simulate('click'); // toggle close the sort dropdown
-
- const mockedSortEventDescending = { target: { innerText: 'Bar' } };
- sortDropdownItems.at(0).simulate('click', mockedSortEventDescending);
- toolbar.update();
-
- searchDropdownToggle = toolbar.find(searchDropdownToggleSelector);
- expect(searchDropdownToggle.length).toBe(1);
- searchDropdownToggle.simulate('click');
- toolbar.update();
-
- searchDropdownItems = toolbar.find(searchDropdownMenuItems).children();
- expect(searchDropdownItems.length).toBe(2);
-
- const mockedSearchEvent = { target: { innerText: 'Bar' } };
- searchDropdownItems.at(0).simulate('click', mockedSearchEvent);
+ expect(screen.getByRole('checkbox', { name: 'Select all' })).toBeChecked();
});
- test('should render sort icon', () => {
- const qsConfig = {
- namespace: 'organization',
- dateFields: ['modified', 'created'],
- defaultParams: { page: 1, page_size: 5, order_by: 'name' },
- integerFields: ['page', 'page_size', 'id'],
- };
+ test('should render the sort control', () => {
const sortColumns = [{ name: 'Name', key: 'name' }];
-
- const wrapper = mountWithContexts(
+ renderWithContexts(
- click
- ,
- ]}
/>
);
- const search = toolbar.find('Search');
+ // open the simple-key select and assert the injected "Advanced" option
+ await user.click(screen.getByRole('button', { name: 'Options menu' }));
expect(
- search.prop('columns').filter((col) => col.key === 'advanced').length
- ).toBe(1);
+ screen.getByRole('option', { name: 'Advanced' })
+ ).toBeInTheDocument();
});
- test('should properly render toolbar buttons when in advanced search mode', async () => {
+ test('should render the kebab and its items when in advanced search mode', async () => {
const searchColumns = [{ name: 'Name', key: 'name', isDefault: true }];
const sortColumns = [{ name: 'Name', key: 'name' }];
- const newToolbar = mountWithContexts(
+ const { user } = renderWithContexts(
- Add Contaner
+ Add Container
,
Add Instance Group
@@ -277,15 +168,22 @@ describe('
', () => {
]}
/>
);
- act(() => newToolbar.find('Search').prop('onShowAdvancedSearch')(true));
- newToolbar.update();
- expect(newToolbar.find('KebabToggle').length).toBe(1);
- act(() => newToolbar.find('KebabToggle').prop('onToggle')(true));
- newToolbar.update();
- expect(newToolbar.find('div[aria-label="add container"]').length).toBe(1);
- expect(newToolbar.find('div[aria-label="add instance group"]').length).toBe(
- 1
- );
+
+ // enter advanced search mode via the simple-key select -> "Advanced".
+ // Search.handleDropdownSelect matches the option by event.target.innerText,
+ // which jsdom does not populate from layout, so set it explicitly before
+ // dispatching the click (DOM equivalent of the option selection).
+ await user.click(screen.getByRole('button', { name: 'Options menu' }));
+ const advancedOption = screen.getByRole('option', { name: 'Advanced' });
+ advancedOption.innerText = 'Advanced';
+ fireEvent.click(advancedOption);
+
+ // a kebab toggle appears in advanced search mode
+ const kebab = await screen.findByRole('button', { name: 'Actions' });
+ await user.click(kebab);
+
+ expect(screen.getByLabelText('add container')).toBeInTheDocument();
+ expect(screen.getByLabelText('add instance group')).toBeInTheDocument();
});
test('should handle expanded rows', async () => {
@@ -294,7 +192,7 @@ describe('
', () => {
];
const sortColumns = [{ name: 'Name', key: 'name' }];
- const newtoolbar = mountWithContexts(
+ const { user } = renderWithContexts(
', () => {
onSort={onSort}
onSelectAll={onSelectAll}
showSelectAll
- showExpandAll
isAllExpanded={false}
onExpandAll={onExpandAll}
/>
);
- await act(async () =>
- newtoolbar.find('Button[aria-label="Expand all rows"]').prop('onClick')()
+
+ await user.click(
+ screen.getByRole('button', { name: 'Expand all rows' })
);
- expect(newtoolbar.find('AngleRightIcon')).toHaveLength(1);
- expect(newtoolbar.find('AngleDownIcon')).toHaveLength(0);
expect(onExpandAll).toHaveBeenCalledWith(true);
});
- test('should render angle down icon', async () => {
+ test('should render the expand/collapse all toggle reflecting isAllExpanded', () => {
const searchColumns = [
{ name: 'Name', key: 'name__icontains', isDefault: true },
];
const sortColumns = [{ name: 'Name', key: 'name' }];
- const newtoolbar = mountWithContexts(
+ renderWithContexts(
', () => {
onSort={onSort}
onSelectAll={onSelectAll}
showSelectAll
- showExpandAll
isAllExpanded
onExpandAll={onExpandAll}
/>
);
- expect(newtoolbar.find('AngleDownIcon')).toHaveLength(1);
- expect(newtoolbar.find('AngleRightIcon')).toHaveLength(0);
+ const expandButton = screen.getByRole('button', {
+ name: 'Expand all rows',
+ });
+ expect(
+ within(expandButton).getByLabelText('Is expanded')
+ ).toBeInTheDocument();
});
});
diff --git a/awx/ui/src/components/DisassociateButton/DisassociateButton.test.js b/awx/ui/src/components/DisassociateButton/DisassociateButton.test.js
index 6a1cf5b04..a19c4769a 100644
--- a/awx/ui/src/components/DisassociateButton/DisassociateButton.test.js
+++ b/awx/ui/src/components/DisassociateButton/DisassociateButton.test.js
@@ -1,144 +1,141 @@
import React from 'react';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import { screen, waitFor, within } from '@testing-library/react';
+import { renderWithContexts } from '../../../testUtils/rtlContexts';
import DisassociateButton from './DisassociateButton';
describe('
', () => {
describe('User has disassociate permissions', () => {
- let wrapper;
- const handleDisassociate = jest.fn();
const mockHosts = [
{
id: 1,
name: 'foo',
- summary_fields: {
- user_capabilities: {
- delete: true,
- },
- },
+ summary_fields: { user_capabilities: { delete: true } },
},
{
id: 2,
name: 'bar',
- summary_fields: {
- user_capabilities: {
- delete: true,
- },
- },
+ summary_fields: { user_capabilities: { delete: true } },
},
];
- beforeAll(() => {
- wrapper = mountWithContexts(
+ test('should render an enabled disassociate button', () => {
+ renderWithContexts(
{}}
itemsToDisassociate={mockHosts}
modalNote="custom note"
modalTitle="custom title"
/>
);
+ const button = screen.getByRole('button', { name: 'Disassociate' });
+ expect(button).toBeEnabled();
});
- afterAll(() => {
- jest.clearAllMocks();
- });
+ test('should open confirmation modal and render expected content', async () => {
+ const { user } = renderWithContexts(
+ {}}
+ itemsToDisassociate={mockHosts}
+ modalNote="custom note"
+ modalTitle="custom title"
+ />
+ );
- test('should render button', () => {
- expect(wrapper.find('button')).toHaveLength(1);
- expect(wrapper.find('button').text()).toEqual('Disassociate');
- });
+ await user.click(screen.getByRole('button', { name: 'Disassociate' }));
- test('should open confirmation modal', () => {
- wrapper.find('button').simulate('click');
- expect(wrapper.find('AlertModal')).toHaveLength(1);
+ const dialog = await screen.findByRole('dialog');
+ expect(within(dialog).getByText('custom title')).toBeInTheDocument();
+ expect(within(dialog).getByText('custom note')).toBeInTheDocument();
+ expect(
+ within(dialog).getByText('This action will disassociate the following:')
+ ).toBeInTheDocument();
+ expect(within(dialog).getByText('foo')).toBeInTheDocument();
+ expect(within(dialog).getByText('bar')).toBeInTheDocument();
});
- test('cancel button should close confirmation modal', () => {
- expect(wrapper.find('AlertModal')).toHaveLength(1);
- wrapper.find('button[aria-label="Cancel"]').simulate('click');
- expect(wrapper.find('AlertModal')).toHaveLength(0);
- });
+ test('cancel button should close confirmation modal', async () => {
+ const { user } = renderWithContexts(
+ {}}
+ itemsToDisassociate={mockHosts}
+ modalTitle="custom title"
+ />
+ );
- test('should render expected modal content', () => {
- wrapper.find('button').simulate('click');
- expect(
- wrapper
- .find('AlertModal')
- .containsMatchingElement(custom note
)
- ).toEqual(true);
- expect(
- wrapper
- .find('AlertModal')
- .containsMatchingElement(
- This action will disassociate the following:
- )
- ).toEqual(true);
- expect(wrapper.find('Title').text()).toEqual('custom title');
- wrapper.find('button[aria-label="Close"]').simulate('click');
+ await user.click(screen.getByRole('button', { name: 'Disassociate' }));
+ const dialog = await screen.findByRole('dialog');
+ await user.click(
+ within(dialog).getByRole('button', { name: 'Cancel' })
+ );
+ await waitFor(() => {
+ expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+ });
});
- test('disassociate button should call handleDisassociate on click', () => {
- wrapper.find('button').simulate('click');
+ test('confirm button should call onDisassociate and close the modal', async () => {
+ const handleDisassociate = jest.fn();
+ const { user } = renderWithContexts(
+ {}}
- itemsToDelete={readOnlyHost}
+ itemsToDisassociate={[
+ {
+ id: 1,
+ name: 'foo',
+ summary_fields: { user_capabilities: { delete: false } },
+ },
+ ]}
/>
);
- expect(wrapper.find('button[disabled]')).toHaveLength(1);
+ expect(screen.getByRole('button', { name: 'Disassociate' })).toBeDisabled();
});
test('should disable button for control instance', () => {
- const wrapper = mountWithContexts(
+ renderWithContexts(
{}}
- itemsToDelete={[
- {
- id: 1,
- hostname: 'awx',
- node_type: 'control',
- },
+ itemsToDisassociate={[
+ { id: 1, type: 'instance', hostname: 'awx', node_type: 'control' },
]}
/>
);
- expect(wrapper.find('button[disabled]')).toHaveLength(1);
+ expect(screen.getByRole('button', { name: 'Disassociate' })).toBeDisabled();
});
- test('should disable button when selected items contain instances thaat are hybrid and are inside a protected instances', () => {
- const wrapper = mountWithContexts(
+
+ test('should disable button for a hybrid instance inside a protected instance group', () => {
+ renderWithContexts(
{}}
- isProectedInstanceGroup
- itemsToDelete={[
- {
- id: 1,
- hostname: 'awx',
- node_type: 'control',
- },
+ isProtectedInstanceGroup
+ itemsToDisassociate={[
+ { id: 1, type: 'instance', hostname: 'awx', node_type: 'hybrid' },
]}
/>
);
- expect(wrapper.find('button[disabled]')).toHaveLength(1);
+ expect(screen.getByRole('button', { name: 'Disassociate' })).toBeDisabled();
});
});
});
diff --git a/awx/ui/src/components/ErrorDetail/ErrorDetail.test.js b/awx/ui/src/components/ErrorDetail/ErrorDetail.test.js
index 1816f4a2d..8bebf868b 100644
--- a/awx/ui/src/components/ErrorDetail/ErrorDetail.test.js
+++ b/awx/ui/src/components/ErrorDetail/ErrorDetail.test.js
@@ -1,46 +1,57 @@
import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import { screen, waitFor } from '@testing-library/react';
+import { renderWithContexts } from '../../../testUtils/rtlContexts';
import ErrorDetail from './ErrorDetail';
+// Build an Error that carries a `response`, like the api errors ErrorDetail
+// renders. Object.prototype.hasOwnProperty(error, 'response') drives the
+// network-error vs stack-trace branch, so the property must live on the
+// instance.
+function makeNetworkError(response) {
+ const error = new Error('request failed');
+ error.response = response;
+ return error;
+}
+
describe('ErrorDetail', () => {
- test('renders the expected content', () => {
- const wrapper = mountWithContexts(
+ test('renders the expandable Details toggle collapsed by default', () => {
+ renderWithContexts(
{
)}
);
- expect(wrapper.find('.pf-c-form__label-required')).toHaveLength(0);
- expect(wrapper.find('Popover')).toHaveLength(0);
+
+ // the prompt-on-launch checkbox is always rendered
+ expect(screen.getByLabelText('Prompt on launch')).toBeInTheDocument();
+ // no required asterisk
+ expect(
+ container.querySelector('.pf-c-form__label-required')
+ ).not.toBeInTheDocument();
+ // no tooltip Popover trigger
+ expect(
+ screen.queryByRole('button', { name: 'More information' })
+ ).not.toBeInTheDocument();
});
test('Required asterisk and Popover shown when required and tooltip provided', () => {
- wrapper = mountWithContexts(
+ const { container } = renderWithContexts(
{
)}
);
- expect(wrapper.find('.pf-c-form__label-required')).toHaveLength(1);
+
+ expect(screen.getByLabelText('Prompt on launch')).toBeInTheDocument();
+ // required asterisk present
+ expect(
+ container.querySelector('.pf-c-form__label-required')
+ ).toBeInTheDocument();
+ // the tooltip Popover renders its trigger button
expect(
- wrapper.find('Popover[data-cy="job-template-limit-tooltip"]').length
- ).toBe(1);
+ screen.getByRole('button', { name: 'More information' })
+ ).toBeInTheDocument();
});
});
diff --git a/awx/ui/src/components/HostForm/HostForm.test.js b/awx/ui/src/components/HostForm/HostForm.test.js
index b72d3231c..9ccdc6737 100644
--- a/awx/ui/src/components/HostForm/HostForm.test.js
+++ b/awx/ui/src/components/HostForm/HostForm.test.js
@@ -1,7 +1,7 @@
import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
-
+import { screen, waitFor } from '@testing-library/react';
+import { InventoriesAPI } from 'api';
+import { renderWithContexts } from '../../../testUtils/rtlContexts';
import HostForm from './HostForm';
jest.mock('../../api');
@@ -21,19 +21,17 @@ const mockData = {
};
describe('', () => {
- test('should should toggle off', async () => {
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ test('should toggle off', async () => {
const onToggle = jest.fn();
- const wrapper = mountWithContexts(
+ const { user } = renderWithContexts(
', () => {
onToggle={onToggle}
/>
);
- expect(wrapper.find('Switch').prop('isChecked')).toEqual(false);
+ expect(getToggle()).not.toBeChecked();
- await act(async () => {
- wrapper.find('Switch').invoke('onChange')();
- });
+ await user.click(getToggle());
expect(HostsAPI.update).toHaveBeenCalledWith(1, {
enabled: true,
});
- wrapper.update();
- expect(wrapper.find('Switch').prop('isChecked')).toEqual(true);
+ await waitFor(() => expect(getToggle()).toBeChecked());
expect(onToggle).toHaveBeenCalledWith(true);
});
test('should be enabled', async () => {
- const wrapper = mountWithContexts(', () => {
const onToggle = jest.fn();
const fetchInstances = jest.fn();
@@ -42,29 +45,26 @@ describe('', () => {
});
test('should show toggle off', async () => {
- const wrapper = mountWithContexts(
+ const { user } = renderWithContexts(
', () => {
fetchInstances={fetchInstances}
/>
);
- expect(wrapper.find('Switch').prop('isChecked')).toEqual(false);
+ expect(getToggle()).not.toBeChecked();
- await act(async () => {
- wrapper.find('Switch').invoke('onChange')();
- });
+ await user.click(getToggle());
expect(InstancesAPI.update).toHaveBeenCalledWith(1, {
enabled: true,
});
- wrapper.update();
- expect(wrapper.find('Switch').prop('isChecked')).toEqual(true);
+ await waitFor(() => expect(getToggle()).toBeChecked());
expect(onToggle).toHaveBeenCalledWith(true);
expect(fetchInstances).toHaveBeenCalledTimes(1);
});
@@ -92,23 +89,19 @@ describe('', () => {
InstancesAPI.update.mockImplementation(() => {
throw new Error('nope');
});
- const wrapper = mountWithContexts(
- {}} onChange={() => {}} />
- );
- });
+ const { user } = renderWithContexts(
+ {}} onChange={() => {}} />
+ );
+ // the toggle is disabled until the labels load
+ await waitFor(() =>
+ expect(screen.getByRole('button', { name: 'Options menu' })).toBeEnabled()
+ );
expect(LabelsAPI.read).toHaveBeenCalledTimes(1);
- wrapper.find('SelectToggle').simulate('click');
- const selectOptions = wrapper.find('SelectOption');
+
+ const selectOptions = await openAndGetOptions(user);
expect(selectOptions).toHaveLength(2);
- expect(selectOptions.at(0).prop('value')).toEqual(options[0]);
- expect(selectOptions.at(1).prop('value')).toEqual(options[1]);
+ expect(selectOptions[0]).toHaveTextContent('one');
+ expect(selectOptions[1]).toHaveTextContent('two');
});
test('should fetch two pages labels if present', async () => {
- await LabelsAPI.read.mockResolvedValueOnce({
+ LabelsAPI.read.mockResolvedValueOnce({
data: {
results: options,
next: '/foo?page=2',
},
});
- await LabelsAPI.read.mockResolvedValueOnce({
+ LabelsAPI.read.mockResolvedValueOnce({
data: {
results: [
{ id: 3, name: 'three' },
@@ -50,39 +59,47 @@ describe(' {}} onChange={() => {}} />
- );
- });
- wrapper.update();
+ const { user } = renderWithContexts(
+ {}} onChange={() => {}} />
+ );
- expect(LabelsAPI.read).toHaveBeenCalledTimes(2);
- wrapper.find('SelectToggle').simulate('click');
- const selectOptions = wrapper.find('SelectOption');
+ await waitFor(() => expect(LabelsAPI.read).toHaveBeenCalledTimes(2));
+ await waitFor(() =>
+ expect(screen.getByRole('button', { name: 'Options menu' })).toBeEnabled()
+ );
+
+ const selectOptions = await openAndGetOptions(user);
expect(selectOptions).toHaveLength(4);
});
+
test('Generate a label', async () => {
- let wrapper;
const onChange = jest.fn();
- LabelsAPI.read.mockReturnValue({
+ LabelsAPI.read.mockResolvedValue({
data: {
- options,
+ results: options,
},
});
- await act(async () => {
- wrapper = mountWithContexts(
- {}} onChange={onChange} />
- );
- });
- await wrapper.find('Select').invoke('onSelect')({}, 'foo');
+ const { user } = renderWithContexts(
+ {}} onChange={onChange} />
+ );
+
+ await waitFor(() =>
+ expect(screen.getByRole('button', { name: 'Options menu' })).toBeEnabled()
+ );
+
+ // typing a non-matching value surfaces an isCreatable "create" option;
+ // selecting it calls onChange with the new {id, name} label
+ const input = screen.getByRole('textbox');
+ await user.type(input, 'foo');
+ const createOption = await screen.findByText(/foo/);
+ await user.click(createOption);
+
expect(onChange).toHaveBeenCalledWith([{ id: 'foo', name: 'foo' }]);
});
+
test('should handle read-only labels', async () => {
- let wrapper;
const onChange = jest.fn();
- LabelsAPI.read.mockReturnValue({
+ LabelsAPI.read.mockResolvedValue({
data: {
results: [
{ id: 1, name: 'read only' },
@@ -90,22 +107,26 @@ describe(' {}}
- onChange={onChange}
- />
- );
- });
- wrapper.find('SelectToggle').simulate('click');
- const selectOptions = wrapper.find('SelectOption');
+ const { user } = renderWithContexts(
+ {}}
+ onChange={onChange}
+ />
+ );
+
+ await waitFor(() =>
+ expect(screen.getByRole('button', { name: 'Options menu' })).toBeEnabled()
+ );
+
+ const selectOptions = await openAndGetOptions(user);
expect(selectOptions).toHaveLength(2);
- expect(selectOptions.at(0).prop('isDisabled')).toBe(true);
- expect(selectOptions.at(1).prop('isDisabled')).toBe(false);
+ // PF renders a disabled SelectOption with the pf-m-disabled modifier class
+ // (and a disabled checkbox); the enabled option lacks it
+ expect(selectOptions[0]).toHaveClass('pf-m-disabled');
+ expect(selectOptions[1]).not.toHaveClass('pf-m-disabled');
});
});
diff --git a/awx/ui/src/components/ListHeader/ListHeader.test.js b/awx/ui/src/components/ListHeader/ListHeader.test.js
index c4fa88000..76d167a9b 100644
--- a/awx/ui/src/components/ListHeader/ListHeader.test.js
+++ b/awx/ui/src/components/ListHeader/ListHeader.test.js
@@ -1,7 +1,7 @@
import React from 'react';
-import { act } from 'react-dom/test-utils';
+import { act } from '@testing-library/react';
import { createMemoryHistory } from 'history';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import { renderWithContexts } from '../../../testUtils/rtlContexts';
import ListHeader from './ListHeader';
describe('ListHeader', () => {
@@ -11,48 +11,58 @@ describe('ListHeader', () => {
integerFields: ['id', 'page', 'page_size'],
dateFields: ['modified', 'created'],
};
- const renderToolbarFn = jest.fn();
+
+ // Capture the toolbar props ListHeader passes to its renderToolbar callback
+ // so the handlers (onSort/onSearch/onRemove/clearAllFilters) can be exercised
+ // directly, mirroring the enzyme suite's `toolbar.prop('onX')(...)`.
+ function makeCapturingToolbar() {
+ const captured = {};
+ const renderToolbar = (props) => {
+ Object.assign(captured, props);
+ return
;
+ };
+ return { captured, renderToolbar };
+ }
+
+ const baseProps = {
+ qsConfig,
+ searchColumns: [{ name: 'foo', key: 'foo__icontains', isDefault: true }],
+ sortColumns: [{ name: 'foo', key: 'foo' }],
+ };
test('initially renders without crashing', () => {
const history = createMemoryHistory({
initialEntries: ['/organizations/1/teams'],
});
- const wrapper = mountWithContexts(
+ const { container } = renderWithContexts(
+ ,
+ {
+ context: { router: { history } },
+ }
+ );
+ return { ...utils, history };
+}
+describe('
);
- findChildren();
+ const nav = screen.getByRole('navigation', { name: 'Breadcrumb' });
+ const crumbs = within(nav).getAllByRole('link');
+ expect(crumbs).toHaveLength(2);
+ expect(crumbs[0]).toHaveTextContent('Foo');
+ expect(crumbs[1]).toHaveTextContent('One');
- expect(breadcrumb).toHaveLength(1);
- expect(breadcrumbItem).toHaveLength(2);
- expect(breadcrumbHeading).toHaveLength(1);
- expect(breadcrumbItem.first().text()).toBe('Foo');
- expect(breadcrumbItem.last().text()).toBe('One');
- expect(breadcrumbHeading.text()).toBe('Bar');
+ const heading = screen.getByRole('heading', { level: 2 });
+ expect(heading).toHaveTextContent('Bar');
});
test('renders breadcrumb items defined in breadcrumbConfig', () => {
@@ -52,15 +41,17 @@ describe('
);
- expect(breadcrumbWrapper.find('BreadcrumbItem')).toHaveLength(
- crumbLength
- );
+ const nav = screen.queryByRole('navigation', { name: 'Breadcrumb' });
+ const crumbs = nav ? within(nav).queryAllByRole('link') : [];
+ expect(crumbs).toHaveLength(crumbLength);
+
+ unmount();
});
});
});
diff --git a/awx/ui/src/components/SelectableCard/SelectableCard.test.js b/awx/ui/src/components/SelectableCard/SelectableCard.test.js
index 75cab3dee..9549f2cd0 100644
--- a/awx/ui/src/components/SelectableCard/SelectableCard.test.js
+++ b/awx/ui/src/components/SelectableCard/SelectableCard.test.js
@@ -1,17 +1,22 @@
import React from 'react';
-import { shallow } from 'enzyme';
+import { screen } from '@testing-library/react';
+import { renderWithContexts } from '../../../testUtils/rtlContexts';
import SelectableCard from './SelectableCard';
describe('` class on the label span, and
+// the status icon (no distinguishing accessible name) is identified by its
+// unique SVG path data — both preserve the original enzyme prop assertions.
+const ICON_PATH_PREFIX = {
+ CheckCircleIcon: 'M504 256c0 136.967-111.033 248',
+ ExclamationCircleIcon: 'M504 256c0 136.997-111.043 248',
+ SyncAltIcon: 'M370.72 133.28C339.458 104.008',
+ ClockIcon: 'M256,8C119,8,8,119,8,256S119,5',
+ MinusCircleIcon: 'M256 8C119 8 8 119 8 256s111 2',
+ ExclamationTriangleIcon: 'M569.517 440.013C587.975 472.0',
+};
+
+function getLabel(container) {
+ return container.querySelector('.pf-c-label');
+}
+
+function expectLabel(container, { icon, color, text }) {
+ const label = getLabel(container);
+ if (color === 'grey') {
+ // PF Label renders no color modifier class for the default grey color, so
+ // assert no other color class leaked in (preserving the original
+ // color="grey" prop assertion).
+ ['green', 'red', 'blue', 'orange'].forEach((c) =>
+ expect(label).not.toHaveClass(`pf-m-${c}`)
+ );
+ } else {
+ expect(label).toHaveClass(`pf-m-${color}`);
+ }
+ expect(label).toHaveTextContent(text);
+ const path = container.querySelector('svg path').getAttribute('d');
+ expect(path).toContain(ICON_PATH_PREFIX[icon]);
+}
+
describe('StatusLabel', () => {
test('should render success', () => {
- const wrapper = mountWithContexts(
+ children
+
);
- expect(wrapper.text()).toEqual('children');
+ expect(getLabel(container)).toHaveTextContent('children');
});
});
diff --git a/awx/ui/src/components/UserAndTeamAccessAdd/UserAndTeamAccessAdd.test.js b/awx/ui/src/components/UserAndTeamAccessAdd/UserAndTeamAccessAdd.test.js
index b82e02b33..95bf0a24b 100644
--- a/awx/ui/src/components/UserAndTeamAccessAdd/UserAndTeamAccessAdd.test.js
+++ b/awx/ui/src/components/UserAndTeamAccessAdd/UserAndTeamAccessAdd.test.js
@@ -1,10 +1,8 @@
import React from 'react';
-import { act } from 'react-dom/test-utils';
+import { screen, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import { UsersAPI, JobTemplatesAPI } from 'api';
-import {
- mountWithContexts,
- waitForElement,
-} from '../../../testUtils/enzymeHelpers';
+import { renderWithContexts } from '../../../testUtils/rtlContexts';
import UserAndTeamAccessAdd from './UserAndTeamAccessAdd';
jest.mock('../../api');
@@ -12,179 +10,196 @@ jest.mock('../../api');
const onError = jest.fn();
const onClose = jest.fn();
-describe(' {}}
- onClose={onClose}
- title="Add user permissions"
- onError={onError}
- />
- );
- });
- wrapper.update();
+ related_search_fields: [],
+ },
+};
+
+// Returns the PF Wizard footer navigation button by its visible label.
+function footerButton(label) {
+ return screen
+ .getAllByRole('button')
+ .find((b) => b.textContent.trim() === label);
+}
+
+// Returns the wizard nav for a given step name.
+function navItem(name) {
+ return screen
+ .getAllByRole('button')
+ .find(
+ (b) =>
+ b.classList.contains('pf-c-wizard__nav-link') &&
+ b.textContent.trim() === name
+ );
+}
+
+// SelectResourceStep issues a debounced (1000ms) API read on mount; advance
+// timers + flush microtasks so the list renders, without clicking in a
+// retry loop.
+async function settleList() {
+ // advance past the 1000ms debounce with fake timers (instead of sleeping a
+ // real 1.2s) and flush the resulting microtasks so the list renders
+ await act(async () => {
+ await Promise.resolve();
+ });
+ await act(async () => {
+ jest.advanceTimersByTime(1200);
+ });
+ await act(async () => {
+ await Promise.resolve();
});
+}
+
+describe(' {}}
+ onClose={onClose}
+ title="Add user permissions"
+ onError={onError}
+ />
+ );
+ // a userEvent bound to the fake timers so its internal delays advance
+ return {
+ ...utils,
+ user: userEvent.setup({ advanceTimers: jest.advanceTimersByTime }),
+ };
+ }
+
+ test('should mount properly', () => {
+ setup();
+ // The PF Wizard renders its first-step nav item and resource cards.
+ expect(navItem('Add resource type')).toBeInTheDocument();
+ expect(
+ screen.getByText('Job templates', { selector: 'b' })
+ ).toBeInTheDocument();
});
+
test('should disable steps', async () => {
- expect(wrapper.find('Button[type="submit"]').prop('isDisabled')).toBe(true);
- expect(
- wrapper
- .find('WizardNavItem[content="Select items from list"]')
- .prop('isDisabled')
- ).toBe(true);
- expect(
- wrapper
- .find('WizardNavItem[content="Select roles to apply"]')
- .prop('isDisabled')
- ).toBe(true);
- await act(async () =>
- wrapper.find('SelectableCard[dataCy="add-role-jobTemplate"]').prop('onClick')({
- fetchItems: JobTemplatesAPI.read,
- label: 'Job template',
- selectedResource: 'jobTemplate',
- searchColumns: [
- { name: 'Name', key: 'name__icontains', isDefault: true },
- ],
- sortColumns: [{ name: 'Name', key: 'name' }],
- })
+ const { user } = setup();
+ // Next is disabled and later steps are not jumpable until a resource type
+ // is chosen.
+ expect(footerButton('Next')).toBeDisabled();
+ expect(navItem('Select items from list')).toHaveAttribute(
+ 'aria-disabled',
+ 'true'
);
- await act(async () =>
- wrapper.find('Button[type="submit"]').prop('onClick')()
+ expect(navItem('Select roles to apply')).toHaveAttribute(
+ 'aria-disabled',
+ 'true'
+ );
+
+ await user.click(
+ document.querySelector('[data-cy="add-role-jobTemplate"]')
+ );
+ await user.click(footerButton('Next'));
+ await settleList();
+
+ expect(navItem('Add resource type')).not.toHaveAttribute(
+ 'aria-disabled',
+ 'true'
+ );
+ expect(navItem('Select items from list')).not.toHaveAttribute(
+ 'aria-disabled',
+ 'true'
+ );
+ // Step 3 stays disabled until a resource row is selected.
+ expect(navItem('Select roles to apply')).toHaveAttribute(
+ 'aria-disabled',
+ 'true'
);
- wrapper.update();
- expect(
- wrapper
- .find('WizardNavItem[content="Add resource type"]')
- .prop('isDisabled')
- ).toBe(false);
- expect(
- wrapper
- .find('WizardNavItem[content="Select items from list"]')
- .prop('isDisabled')
- ).toBe(false);
- expect(
- wrapper
- .find('WizardNavItem[content="Select roles to apply"]')
- .prop('isDisabled')
- ).toBe(true);
});
test('should call api to associate role', async () => {
JobTemplatesAPI.read.mockResolvedValue(resources);
JobTemplatesAPI.readOptions.mockResolvedValue(options);
UsersAPI.associateRole.mockResolvedValue({});
- await act(async () =>
- wrapper.find('SelectableCard[dataCy="add-role-jobTemplate"]').prop('onClick')({
- fetchItems: JobTemplatesAPI.read,
- fetchOptions: JobTemplatesAPI.readOptions,
- label: 'Job template',
- selectedResource: 'jobTemplate',
- searchColumns: [
- { name: 'Name', key: 'name__icontains', isDefault: true },
- ],
- sortColumns: [{ name: 'Name', key: 'name' }],
- })
- );
- await act(async () =>
- wrapper.find('Button[type="submit"]').prop('onClick')()
+
+ const { user } = setup();
+
+ // Step 1: pick a resource type, advance.
+ await user.click(
+ document.querySelector('[data-cy="add-role-jobTemplate"]')
);
+ await user.click(footerButton('Next'));
+ await settleList();
+
expect(JobTemplatesAPI.read).toHaveBeenCalledWith({
order_by: 'name',
page: 1,
page_size: 5,
});
+ expect(
+ await screen.findByText('Job Template Foo Bar')
+ ).toBeInTheDocument();
- await waitForElement(wrapper, 'SelectResourceStep', (el) => el.length > 0);
- expect(JobTemplatesAPI.read).toHaveBeenCalled();
- await act(async () =>
- wrapper
- .find('CheckboxListItem')
- .first()
- .find('input[type="checkbox"]')
- .simulate('click')
- );
-
- wrapper.update();
-
- await act(async () =>
- wrapper.find('Button[type="submit"]').prop('onClick')()
- );
-
- wrapper.update();
-
- expect(wrapper.find('RolesStep').length).toBe(1);
+ // Step 2: select the fetched resource row, advance.
+ await user.click(document.querySelector('input[name="checkrow0"]'));
+ await user.click(footerButton('Next'));
- await act(async () =>
- wrapper.find('CheckboxCard').first().prop('onSelect')()
- );
+ // Step 3: the roles step renders a checkbox card per object role.
+ const adminCard = await screen.findByRole('checkbox', { name: 'Admin' });
+ await user.click(adminCard);
+ await user.click(footerButton('Save'));
- await act(async () =>
- wrapper.find('Button[type="submit"]').prop('onClick')()
- );
-
- // associate must use the resourceId passed by the parent screen, not a
- // route param (which is empty when the parent screen uses react-router v6)
- await expect(UsersAPI.associateRole).toHaveBeenCalledWith(
- 99,
- expect.any(Number)
+ // associate must use the resourceId passed by the parent screen (99), not a
+ // route param (empty under react-router v6).
+ await waitFor(() =>
+ expect(UsersAPI.associateRole).toHaveBeenCalledWith(99, expect.any(Number))
);
});
test('should close wizard on cancel', async () => {
- await act(async () =>
- wrapper.find('Button[children="Cancel"]').prop('onClick')()
- );
- wrapper.update();
+ const { user } = setup();
+ await user.click(footerButton('Cancel'));
expect(onClose).toHaveBeenCalledTimes(1);
});
@@ -205,51 +220,27 @@ describe('