diff --git a/awx/ui_next/src/components/PaginatedTable/ActionsTd.jsx b/awx/ui_next/src/components/PaginatedTable/ActionsTd.jsx
index 617f7cd51a..b620ca2fda 100644
--- a/awx/ui_next/src/components/PaginatedTable/ActionsTd.jsx
+++ b/awx/ui_next/src/components/PaginatedTable/ActionsTd.jsx
@@ -30,9 +30,11 @@ export default function ActionsTd({ children, gridColumns, ...props }) {
>
{React.Children.map(children, (child, i) =>
- React.cloneElement(child, {
- column: i + 1,
- })
+ child
+ ? React.cloneElement(child, {
+ column: i + 1,
+ })
+ : null
)}
diff --git a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.test.jsx b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.test.jsx
index 4a2b92d124..6bcbc2b391 100644
--- a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.test.jsx
+++ b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.test.jsx
@@ -137,10 +137,6 @@ describe('', () => {
jest.clearAllMocks();
});
- test('initially renders successfully', () => {
- expect(wrapper.find('PaginatedDataList')).toHaveLength(1);
- });
-
test('should fetch and display access records on mount', async () => {
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
expect(OrganizationsAPI.readAccessList).toHaveBeenCalled();
@@ -203,7 +199,7 @@ describe('', () => {
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
expect(
- wrapper.find('PaginatedDataList').prop('toolbarSearchColumns')
+ wrapper.find('PaginatedTable').prop('toolbarSearchColumns')
).toStrictEqual([
{ isDefault: true, key: 'username__icontains', name: 'Username' },
{ key: 'first_name__icontains', name: 'First Name' },
diff --git a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.test.jsx b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.test.jsx
index d6eaee2c73..43673ac576 100644
--- a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.test.jsx
+++ b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.test.jsx
@@ -38,10 +38,14 @@ describe('', () => {
await act(async () => {
wrapper = mountWithContexts(
- {}}
- />
+
);
});
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
index 5b821f80f6..50795f7955 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
@@ -37,7 +37,7 @@ function InventoryHostItem({
- {host.summary_fields.user_capabilities?.edit && (
+ {host.summary_fields.user_capabilities?.edit ? (
- )}
+ ) : null}
);
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.test.jsx
index a135aae9e6..ce047cdaea 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.test.jsx
@@ -31,12 +31,16 @@ describe('', () => {
beforeEach(() => {
wrapper = mountWithContexts(
- {}}
- host={mockHost}
- />
+
+
+ {}}
+ host={mockHost}
+ />
+
+
);
});
@@ -52,12 +56,16 @@ describe('', () => {
const copyMockHost = Object.assign({}, mockHost);
copyMockHost.summary_fields.user_capabilities.edit = false;
wrapper = mountWithContexts(
- {}}
- host={copyMockHost}
- />
+
+
+ {}}
+ host={copyMockHost}
+ />
+
+
);
expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
});
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
index 71f1b2eee3..3dc9292200 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
@@ -103,10 +103,6 @@ describe('', () => {
jest.resetAllMocks();
});
- test('initially renders successfully', () => {
- expect(wrapper.find('InventoryHostList').length).toBe(1);
- });
-
test('should fetch hosts from api and render them in the list', async () => {
expect(InventoriesAPI.readHosts).toHaveBeenCalled();
expect(wrapper.find('InventoryHostItem').length).toBe(3);
@@ -114,49 +110,66 @@ describe('', () => {
test('should check and uncheck the row item', async () => {
expect(
- wrapper.find('DataListCheck[id="select-host-1"]').props().checked
+ wrapper
+ .find('.pf-c-table__check')
+ .first()
+ .find('input')
+ .props().checked
).toBe(false);
await act(async () => {
- wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
- true
- );
+ wrapper
+ .find('.pf-c-table__check')
+ .first()
+ .find('input')
+ .invoke('onChange')(true);
});
wrapper.update();
expect(
- wrapper.find('DataListCheck[id="select-host-1"]').props().checked
+ wrapper
+ .find('.pf-c-table__check')
+ .first()
+ .find('input')
+ .props().checked
).toBe(true);
await act(async () => {
- wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
- false
- );
+ wrapper
+ .find('.pf-c-table__check')
+ .first()
+ .find('input')
+ .invoke('onChange')(false);
});
wrapper.update();
expect(
- wrapper.find('DataListCheck[id="select-host-1"]').props().checked
+ wrapper
+ .find('.pf-c-table__check')
+ .first()
+ .find('input')
+ .props().checked
).toBe(false);
});
test('should check all row items when select all is checked', async () => {
- wrapper.find('DataListCheck').forEach(el => {
- expect(el.props().checked).toBe(false);
+ expect.assertions(9);
+ wrapper.find('.pf-c-table__check').forEach(el => {
+ expect(el.find('input').props().checked).toBe(false);
});
await act(async () => {
wrapper.find('Checkbox#select-all').invoke('onChange')(true);
});
wrapper.update();
- wrapper.find('DataListCheck').forEach(el => {
- expect(el.props().checked).toBe(true);
+ wrapper.find('.pf-c-table__check').forEach(el => {
+ expect(el.find('input').props().checked).toBe(true);
});
await act(async () => {
wrapper.find('Checkbox#select-all').invoke('onChange')(false);
});
wrapper.update();
- wrapper.find('DataListCheck').forEach(el => {
- expect(el.props().checked).toBe(false);
+ wrapper.find('.pf-c-table__check').forEach(el => {
+ expect(el.find('input').props().checked).toBe(false);
});
});
@@ -196,7 +209,12 @@ describe('', () => {
test('delete button is disabled if user does not have delete capabilities on a selected host', async () => {
await act(async () => {
- wrapper.find('DataListCheck[id="select-host-3"]').invoke('onChange')();
+ // wrapper.find('DataListCheck[id="select-host-3"]').invoke('onChange')();
+ wrapper
+ .find('.pf-c-table__check')
+ .at(2)
+ .find('input')
+ .invoke('onChange')();
});
wrapper.update();
expect(wrapper.find('ToolbarDeleteButton button').props().disabled).toBe(
@@ -207,7 +225,11 @@ describe('', () => {
test('should call api delete hosts for each selected host', async () => {
HostsAPI.destroy = jest.fn();
await act(async () => {
- wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
+ wrapper
+ .find('.pf-c-table__check')
+ .first()
+ .find('input')
+ .invoke('onChange')();
});
wrapper.update();
await act(async () => {
@@ -230,7 +252,11 @@ describe('', () => {
})
);
await act(async () => {
- wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
+ wrapper
+ .find('.pf-c-table__check')
+ .first()
+ .find('input')
+ .invoke('onChange')();
});
wrapper.update();
await act(async () => {
@@ -252,7 +278,11 @@ describe('', () => {
Promise.reject(new Error())
);
await act(async () => {
- wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
+ wrapper
+ .find('.pf-c-table__check')
+ .first()
+ .find('input')
+ .invoke('onChange')();
});
wrapper.update();
await act(async () => {