Updates a couple of team list checkbox tests to test the UI rather than state/props internals. Fixes bug where select all was selected on load.

awx/ui_next/src/components/DataListCheck/DataListCheck.jsx

@@ -1,6 +1,7 @@
 import { DataListCheck as PFDataListCheck } from '@patternfly/react-core';
 import styled from 'styled-components';
 
+PFDataListCheck.displayName = 'PFDataListCheck';
 export default styled(PFDataListCheck)`
   padding-top: 18px;
   @media screen and (min-width: 768px) {

awx/ui_next/src/screens/Host/Host.test.jsx

@@ -12,13 +12,13 @@ const mockMe = {
   is_system_auditor: false,
 };
 
-describe.only('<Host />', () => {
+describe('<Host />', () => {
   test('initially renders succesfully', () => {
     HostsAPI.readDetail.mockResolvedValue({ data: mockDetails });
     mountWithContexts(<Host setBreadcrumb={() => {}} me={mockMe} />);
   });
 
-  test('should show content error when user attempts to navigate to erroneous route', async done => {
+  test('should show content error when user attempts to navigate to erroneous route', async () => {
     const history = createMemoryHistory({
       initialEntries: ['/hosts/1/foobar'],
     });
@@ -41,6 +41,5 @@ describe.only('<Host />', () => {
       }
     );
     await waitForElement(wrapper, 'ContentError', el => el.length === 1);
-    done();
   });
 });

awx/ui_next/src/screens/Host/HostList/HostList.jsx

@@ -175,7 +175,7 @@ class HostsList extends Component {
 
     const canAdd =
       actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
-    const isAllSelected = selected.length === hosts.length;
+    const isAllSelected = selected.length > 0 && selected.length === hosts.length;
 
     return (
       <Fragment>

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

@@ -11,7 +11,7 @@ InventoriesAPI.readDetail.mockResolvedValue({
   data: mockInventory,
 });
 
-describe.only('<Inventory />', () => {
+describe('<Inventory />', () => {
   test('initially renders succesfully', async done => {
     const wrapper = mountWithContexts(
       <Inventory setBreadcrumb={() => {}} match={{ params: { id: 1 } }} />
@@ -29,7 +29,7 @@ describe.only('<Inventory />', () => {
     await waitForElement(wrapper, '.pf-c-tabs__item', el => el.length === 6);
     done();
   });
-  test('should show content error when user attempts to navigate to erroneous route', async done => {
+  test('should show content error when user attempts to navigate to erroneous route', async () => {
     const history = createMemoryHistory({
       initialEntries: ['/inventories/inventory/1/foobar'],
     });
@@ -49,6 +49,5 @@ describe.only('<Inventory />', () => {
       },
     });
     await waitForElement(wrapper, 'ContentError', el => el.length === 1);
-    done();
   });
 });

awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx

@@ -174,7 +174,7 @@ class InventoriesList extends Component {
     const { match, i18n } = this.props;
     const canAdd =
       actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
-    const isAllSelected = selected.length === inventories.length;
+    const isAllSelected = selected.length > 0 && selected.length === inventories.length;
     return (
       <PageSection>
         <Card>

awx/ui_next/src/screens/Inventory/SmartInventory.test.jsx

@@ -11,7 +11,7 @@ InventoriesAPI.readDetail.mockResolvedValue({
   data: mockSmartInventory,
 });
 
-describe.only('<SmartInventory />', () => {
+describe('<SmartInventory />', () => {
   test('initially renders succesfully', async done => {
     const wrapper = mountWithContexts(
       <SmartInventory setBreadcrumb={() => {}} match={{ params: { id: 1 } }} />
@@ -29,7 +29,7 @@ describe.only('<SmartInventory />', () => {
     await waitForElement(wrapper, '.pf-c-tabs__item', el => el.length === 4);
     done();
   });
-  test('should show content error when user attempts to navigate to erroneous route', async done => {
+  test('should show content error when user attempts to navigate to erroneous route', async () => {
     const history = createMemoryHistory({
       initialEntries: ['/inventories/smart_inventory/1/foobar'],
     });
@@ -52,6 +52,5 @@ describe.only('<SmartInventory />', () => {
       }
     );
     await waitForElement(wrapper, 'ContentError', el => el.length === 1);
-    done();
   });
 });

awx/ui_next/src/screens/Organization/Organization.test.jsx

@@ -33,7 +33,7 @@ async function getOrganizations(params) {
   };
 }
 
-describe.only('<Organization />', () => {
+describe('<Organization />', () => {
   test('initially renders succesfully', () => {
     OrganizationsAPI.readDetail.mockResolvedValue({ data: mockOrganization });
     OrganizationsAPI.read.mockImplementation(getOrganizations);
@@ -77,7 +77,7 @@ describe.only('<Organization />', () => {
     done();
   });
 
-  test('should show content error when user attempts to navigate to erroneous route', async done => {
+  test('should show content error when user attempts to navigate to erroneous route', async () => {
     const history = createMemoryHistory({
       initialEntries: ['/organizations/1/foobar'],
     });
@@ -100,6 +100,5 @@ describe.only('<Organization />', () => {
       }
     );
     await waitForElement(wrapper, 'ContentError', el => el.length === 1);
-    done();
   });
 });

awx/ui_next/src/screens/Project/Project.test.jsx

@@ -24,7 +24,7 @@ async function getOrganizations() {
   };
 }
 
-describe.only('<Project />', () => {
+describe('<Project />', () => {
   test('initially renders succesfully', () => {
     ProjectsAPI.readDetail.mockResolvedValue({ data: mockDetails });
     OrganizationsAPI.read.mockImplementation(getOrganizations);
@@ -68,7 +68,7 @@ describe.only('<Project />', () => {
     done();
   });
 
-  test('should show content error when user attempts to navigate to erroneous route', async done => {
+  test('should show content error when user attempts to navigate to erroneous route', async () => {
     const history = createMemoryHistory({
       initialEntries: ['/projects/1/foobar'],
     });
@@ -91,6 +91,5 @@ describe.only('<Project />', () => {
       }
     );
     await waitForElement(wrapper, 'ContentError', el => el.length === 1);
-    done();
   });
 });

awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx

@@ -141,7 +141,7 @@ class ProjectsList extends Component {
 
     const canAdd =
       actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
-    const isAllSelected = selected.length === projects.length;
+    const isAllSelected = selected.length > 0 && selected.length === projects.length;
 
     return (
       <Fragment>

awx/ui_next/src/screens/Team/Team.jsx

@@ -15,6 +15,13 @@ import TeamDetail from './TeamDetail';
 import TeamEdit from './TeamEdit';
 import { TeamsAPI } from '@api';
 
+const CardHeader = styled(PFCardHeader)`
+--pf-c-card--first-child--PaddingTop: 0;
+--pf-c-card--child--PaddingLeft: 0;
+--pf-c-card--child--PaddingRight: 0;
+position: relative;
+`;
+
 class Team extends Component {
   constructor(props) {
     super(props);
@@ -73,13 +80,6 @@ class Team extends Component {
       { name: i18n._(t`Access`), link: `${match.url}/access`, id: 2 },
     ];
 
-    const CardHeader = styled(PFCardHeader)`
-      --pf-c-card--first-child--PaddingTop: 0;
-      --pf-c-card--child--PaddingLeft: 0;
-      --pf-c-card--child--PaddingRight: 0;
-      position: relative;
-    `;
-
     let cardHeader = (
       <CardHeader style={{ padding: 0 }}>
         <RoutedTabs

awx/ui_next/src/screens/Team/Team.test.jsx

@@ -33,14 +33,14 @@ async function getTeams() {
   };
 }
 
-describe.only('<Team />', () => {
+describe('<Team />', () => {
   test('initially renders succesfully', () => {
     TeamsAPI.readDetail.mockResolvedValue({ data: mockTeam });
     TeamsAPI.read.mockImplementation(getTeams);
     mountWithContexts(<Team setBreadcrumb={() => {}} me={mockMe} />);
   });
 
-  test('should show content error when user attempts to navigate to erroneous route', async done => {
+  test('should show content error when user attempts to navigate to erroneous route', async () => {
     const history = createMemoryHistory({
       initialEntries: ['/teams/1/foobar'],
     });
@@ -63,6 +63,5 @@ describe.only('<Team />', () => {
       }
     );
     await waitForElement(wrapper, 'ContentError', el => el.length === 1);
-    done();
   });
 });

awx/ui_next/src/screens/Team/TeamList/TeamList.jsx

@@ -139,7 +139,7 @@ class TeamsList extends Component {
 
     const canAdd =
       actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
-    const isAllSelected = selected.length === teams.length;
+    const isAllSelected = selected.length > 0 && selected.length === teams.length;
 
     return (
       <Fragment>

awx/ui_next/src/screens/Team/TeamList/TeamList.test.jsx

@@ -53,10 +53,7 @@ describe('<TeamsList />', () => {
   beforeEach(() => {
     TeamsAPI.read = () =>
       Promise.resolve({
-        data: {
+        data: mockAPITeamsList.data,
-          count: 0,
-          results: [],
-        },
       });
     TeamsAPI.readOptions = () =>
       Promise.resolve({
@@ -73,32 +70,43 @@ describe('<TeamsList />', () => {
     mountWithContexts(<TeamsList />);
   });
 
-  test('Puts 1 selected Team in state when handleSelect is called.', () => {
+  test('Selects one team when row is checked', async () => {
-    wrapper = mountWithContexts(<TeamsList />).find('TeamsList');
+    wrapper = mountWithContexts(<TeamsList />);
-
+    await waitForElement(
-    wrapper.setState({
+      wrapper,
-      teams: mockAPITeamsList.data.results,
+      'TeamsList',
-      itemCount: 3,
+      el => el.state('hasContentLoading') === false
-      isInitialized: true,
+    );
-    });
+    expect(wrapper.find('input[type="checkbox"]').findWhere(n => n.prop('checked') === true).length).toBe(0);
+    wrapper
+      .find('TeamListItem').at(0)
+      .find('DataListCheck')
+      .props()
+      .onChange(true);
     wrapper.update();
-    expect(wrapper.state('selected').length).toBe(0);
+    expect(wrapper.find('input[type="checkbox"]').findWhere(n => n.prop('checked') === true).length).toBe(1);
-    wrapper.instance().handleSelect(mockAPITeamsList.data.results.slice(0, 1));
-    expect(wrapper.state('selected').length).toBe(1);
   });
 
-  test('Puts all Teams in state when handleSelectAll is called.', () => {
+  test('Select all checkbox selects and unselects all rows', async () => {
     wrapper = mountWithContexts(<TeamsList />);
-    const list = wrapper.find('TeamsList');
+    await waitForElement(
-    list.setState({
+      wrapper,
-      teams: mockAPITeamsList.data.results,
+      'TeamsList',
-      itemCount: 3,
+      el => el.state('hasContentLoading') === false
-      isInitialized: true,
+    );
-    });
+    expect(wrapper.find('input[type="checkbox"]').findWhere(n => n.prop('checked') === true).length).toBe(0);
-    expect(list.state('selected').length).toBe(0);
+    wrapper
-    list.instance().handleSelectAll(true);
+      .find('Checkbox#select-all')
+      .props()
+      .onChange(true);
     wrapper.update();
-    expect(list.state('selected').length).toEqual(list.state('teams').length);
+    expect(wrapper.find('input[type="checkbox"]').findWhere(n => n.prop('checked') === true).length).toBe(4);
+    wrapper
+      .find('Checkbox#select-all')
+      .props()
+      .onChange(false);
+    wrapper.update();
+    expect(wrapper.find('input[type="checkbox"]').findWhere(n => n.prop('checked') === true).length).toBe(0);
   });
 
   test('api is called to delete Teams for each team in selected.', () => {

awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx

@@ -45,7 +45,6 @@ class TeamListItem extends React.Component {
                 <Link
                   id={labelId}
                   to={`${detailUrl}`}
-                  style={{ marginRight: '10px' }}
                 >
                   <b>{team.name}</b>
                 </Link>

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

@@ -88,7 +88,7 @@ describe('<Template />', () => {
     done();
   });
 
-  test('should show content error when user attempts to navigate to erroneous route', async done => {
+  test('should show content error when user attempts to navigate to erroneous route', async () => {
     const history = createMemoryHistory({
       initialEntries: ['/templates/job_template/1/foobar'],
     });
@@ -111,6 +111,5 @@ describe('<Template />', () => {
       }
     );
     await waitForElement(wrapper, 'ContentError', el => el.length === 1);
-    done();
   });
 });