fix inventory access/hosts lists tests

awx/ui_next/src/components/PaginatedTable/ActionsTd.jsx

@@ -30,9 +30,11 @@ export default function ActionsTd({ children, gridColumns, ...props }) {
     >
       <ActionsGrid numActions={numActions} gridColumns={gridColumns}>
         {React.Children.map(children, (child, i) =>
-          React.cloneElement(child, {
+          child
-            column: i + 1,
+            ? React.cloneElement(child, {
-          })
+                column: i + 1,
+              })
+            : null
         )}
       </ActionsGrid>
     </Td>

awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.test.jsx

@@ -137,10 +137,6 @@ describe('<ResourceAccessList />', () => {
     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('<ResourceAccessList />', () => {
     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' },

awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.test.jsx

@@ -38,10 +38,14 @@ describe('<ResourceAccessListItem />', () => {
 
     await act(async () => {
       wrapper = mountWithContexts(
-        <ResourceAccessListItem
+        <table>
-          accessRecord={accessRecord}
+          <tbody>
-          onRoleDelete={() => {}}
+            <ResourceAccessListItem
-        />
+              accessRecord={accessRecord}
+              onRoleDelete={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
 

awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx

@@ -37,7 +37,7 @@ function InventoryHostItem({
       </Td>
       <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
         <HostToggle host={host} />
-        {host.summary_fields.user_capabilities?.edit && (
+        {host.summary_fields.user_capabilities?.edit ? (
           <Tooltip content={t`Edit Host`} position="top">
             <Button
               ouiaId={`${host.id}-edit-button`}
@@ -48,7 +48,7 @@ function InventoryHostItem({
               <PencilAltIcon />
             </Button>
           </Tooltip>
-        )}
+        ) : null}
       </ActionsTd>
     </Tr>
   );

awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.test.jsx

@@ -31,12 +31,16 @@ describe('<InventoryHostItem />', () => {
 
   beforeEach(() => {
     wrapper = mountWithContexts(
-      <InventoryHostItem
+      <table>
-        isSelected={false}
+        <tbody>
-        detailUrl="/host/1"
+          <InventoryHostItem
-        onSelect={() => {}}
+            isSelected={false}
-        host={mockHost}
+            detailUrl="/host/1"
-      />
+            onSelect={() => {}}
+            host={mockHost}
+          />
+        </tbody>
+      </table>
     );
   });
 
@@ -52,12 +56,16 @@ describe('<InventoryHostItem />', () => {
     const copyMockHost = Object.assign({}, mockHost);
     copyMockHost.summary_fields.user_capabilities.edit = false;
     wrapper = mountWithContexts(
-      <InventoryHostItem
+      <table>
-        isSelected={false}
+        <tbody>
-        detailUrl="/host/1"
+          <InventoryHostItem
-        onSelect={() => {}}
+            isSelected={false}
-        host={copyMockHost}
+            detailUrl="/host/1"
-      />
+            onSelect={() => {}}
+            host={copyMockHost}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });

awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx

@@ -103,10 +103,6 @@ describe('<InventoryHostList />', () => {
     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('<InventoryHostList />', () => {
 
   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')(
+      wrapper
-        true
+        .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')(
+      wrapper
-        false
+        .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.assertions(9);
-      expect(el.props().checked).toBe(false);
+    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 => {
+    wrapper.find('.pf-c-table__check').forEach(el => {
-      expect(el.props().checked).toBe(true);
+      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 => {
+    wrapper.find('.pf-c-table__check').forEach(el => {
-      expect(el.props().checked).toBe(false);
+      expect(el.find('input').props().checked).toBe(false);
     });
   });
 
@@ -196,7 +209,12 @@ describe('<InventoryHostList />', () => {
 
   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('<InventoryHostList />', () => {
   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('<InventoryHostList />', () => {
       })
     );
     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('<InventoryHostList />', () => {
       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 () => {