update Template list tests

awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx

@@ -171,13 +171,11 @@ function TemplateListItem({
               <PencilAltIcon />
             </Button>
           </ActionItem>
-          <ActionItem
+          <ActionItem visible={template.summary_fields.user_capabilities.copy}>
-            visible={template.summary_fields.user_capabilities.copy}
-            tooltip={i18n._(t`Copy Template`)}
-          >
             <CopyButton
               helperText={{
                 errorMessage: i18n._(t`Failed to copy template.`),
+                tooltip: i18n._(t`Copy Template`),
               }}
               isDisabled={isDisabled}
               onCopyStart={handleCopyStart}
@@ -188,8 +186,8 @@ function TemplateListItem({
         </ActionsTd>
       </Tr>
       <Tr isExpanded={isExpanded}>
-        <Td colspan={2} />
+        <Td colSpan={2} />
-        <Td colspan={4}>
+        <Td colSpan={4}>
           <ExpandableRowContent>
             <DetailList>
               <Detail

awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx

@@ -12,6 +12,8 @@ jest.mock('../../../api');
 describe('<TemplateListItem />', () => {
   test('launch button shown to users with start capabilities', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             template={{
@@ -26,11 +28,15 @@ describe('<TemplateListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('LaunchButton').exists()).toBeTruthy();
   });
   test('launch button hidden from users without start capabilities', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             template={{
@@ -45,11 +51,15 @@ describe('<TemplateListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('LaunchButton').exists()).toBeFalsy();
   });
   test('edit button shown to users with edit capabilities', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             template={{
@@ -64,11 +74,15 @@ describe('<TemplateListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
   });
   test('edit button hidden from users without edit capabilities', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             template={{
@@ -83,11 +97,15 @@ describe('<TemplateListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });
   test('missing resource icon is shown.', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             template={{
@@ -102,11 +120,15 @@ describe('<TemplateListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(true);
   });
   test('missing resource icon is not shown when there is a project and an inventory.', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             template={{
@@ -123,11 +145,15 @@ describe('<TemplateListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
   });
   test('missing resource icon is not shown when inventory is prompt_on_launch, and a project', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             template={{
@@ -144,11 +170,15 @@ describe('<TemplateListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
   });
   test('missing resource icon is not shown type is workflow_job_template', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             template={{
@@ -163,6 +193,8 @@ describe('<TemplateListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
   });
@@ -171,6 +203,8 @@ describe('<TemplateListItem />', () => {
       initialEntries: ['/templates'],
     });
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             detailUrl="/templates/job_template/1/details"
@@ -183,7 +217,9 @@ describe('<TemplateListItem />', () => {
                 },
               },
             }}
-      />,
+          />
+        </tbody>
+      </table>,
       { context: { router: { history } } }
     );
     wrapper.find('Link').simulate('click', { button: 0 });
@@ -195,11 +231,15 @@ describe('<TemplateListItem />', () => {
     JobTemplatesAPI.copy.mockResolvedValue();
 
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             detailUrl="/templates/job_template/1/details"
             template={mockJobTemplateData}
           />
+        </tbody>
+      </table>
     );
     await act(async () =>
       wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
@@ -212,11 +252,15 @@ describe('<TemplateListItem />', () => {
     JobTemplatesAPI.copy.mockRejectedValue(new Error());
 
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             detailUrl="/templates/job_template/1/details"
             template={mockJobTemplateData}
           />
+        </tbody>
+      </table>
     );
     await act(async () =>
       wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
@@ -228,6 +272,8 @@ describe('<TemplateListItem />', () => {
 
   test('should not render copy button', async () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             detailUrl="/templates/job_template/1/details"
@@ -236,12 +282,16 @@ describe('<TemplateListItem />', () => {
               summary_fields: { user_capabilities: { copy: false } },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('CopyButton').length).toBe(0);
   });
 
   test('should render visualizer button for workflow', async () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             detailUrl="/templates/job_template/1/details"
@@ -250,17 +300,23 @@ describe('<TemplateListItem />', () => {
               type: 'workflow_job_template',
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ProjectDiagramIcon').length).toBe(1);
   });
 
   test('should not render visualizer button for job template', async () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <TemplateListItem
             isSelected={false}
             detailUrl="/templates/job_template/1/details"
             template={mockJobTemplateData}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ProjectDiagramIcon').length).toBe(0);
   });