Add MenuControl tests

awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx

@@ -14,12 +14,18 @@ class JobOutput extends Component {
 
     return (
       <CardBody>
-        <b>{job.name} - Heading and Job Stats placeholder</b> <br /> {/*Heading and Job Stats */}
+        <b>{job.name}</b>
-        <b>Host Status Bar placeholder</b> <br /> {/*Host Status Bar */}
+        {/*Heading and Job Stats */}
-        <OutputToolbar> {/* Filter and Pagination */}
+        {/*Host Status Bar */}
+        <OutputToolbar>
+          {/* Filter and Pagination */}
           <b>Filter placeholder</b>
           <MenuControls />
         </OutputToolbar>
+        <ul>
+          <li>
+          </li>
+        </ul>
       </CardBody>
     );
   }

awx/ui_next/src/screens/Job/JobOutput/shared/MenuControls.jsx

@@ -26,29 +26,19 @@ class MenuControls extends Component {
   render() {
     return (
       <Wrapper>
-        <Button
+        <Button variant="plain">
-          variant="plain"
-        >
           <PlusIcon />
         </Button>
-        <Button
+        <Button variant="plain">
-          variant="plain"
-        >
           <AngleUpIcon />
         </Button>
-        <Button
+        <Button variant="plain">
-          variant="plain"
-        >
           <AngleDownIcon />
         </Button>
-        <Button
+        <Button variant="plain">
-          variant="plain"
-        >
           <AngleDoubleUpIcon />
         </Button>
-        <Button
+        <Button variant="plain">
-          variant="plain"
-        >
           <AngleDoubleDownIcon />
         </Button>
       </Wrapper>

awx/ui_next/src/screens/Job/JobOutput/shared/MenuControls.test.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import MenuControls from './MenuControls';
+
+let wrapper;
+let PlusIcon;
+let AngleDoubleUpIcon;
+let AngleDoubleDownIcon;
+let AngleUpIcon;
+let AngleDownIcon;
+
+const findChildren = () => {
+  PlusIcon = wrapper.find('PlusIcon');
+  AngleDoubleUpIcon = wrapper.find('AngleDoubleUpIcon');
+  AngleDoubleDownIcon = wrapper.find('AngleDoubleDownIcon');
+  AngleUpIcon = wrapper.find('AngleUpIcon');
+  AngleDownIcon = wrapper.find('AngleDownIcon');
+}
+
+describe('MenuControls', () => {
+  test('should render successfully', () => {
+    wrapper = mount(<MenuControls />);
+    expect(wrapper).toHaveLength(1);
+  });
+
+  test('should render menu control icons', () => {
+    wrapper = mount(<MenuControls />);
+    findChildren();
+    expect(PlusIcon.length).toBe(1);
+    expect(AngleDoubleUpIcon.length).toBe(1);
+    expect(AngleDoubleDownIcon.length).toBe(1);
+    expect(AngleUpIcon.length).toBe(1);
+    expect(AngleDownIcon.length).toBe(1);
+  });
+});