update content loading and error handling

unwind error handling

use auth cookie as source of truth, fetch config only when authenticated

__tests__/pages/Organizations/Organizations.test.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { mountWithContexts } from '../../enzymeHelpers';
 import Organizations from '../../../src/pages/Organizations/Organizations';
 
+jest.mock('../../../src/api');
+
 describe('<Organizations />', () => {
   test('initially renders succesfully', () => {
     mountWithContexts(

__tests__/pages/Organizations/screens/Organization/Organization.test.jsx

@@ -1,63 +1,232 @@
 import React from 'react';
-import { createMemoryHistory } from 'history';
-import { mountWithContexts } from '../../../../enzymeHelpers';
-import { sleep } from '../../../../testUtils';
+import { mountWithContexts, waitForElement } from '../../../../enzymeHelpers';
 import Organization from '../../../../../src/pages/Organizations/screens/Organization/Organization';
 import { OrganizationsAPI } from '../../../../../src/api';
 
 jest.mock('../../../../../src/api');
 
-describe.only('<Organization />', () => {
-  const me = {
-    is_super_user: true,
-    is_system_auditor: false
-  };
+const mockMe = {
+  is_super_user: true,
+  is_system_auditor: false
+};
 
+const mockNoResults = {
+  count: 0,
+  next: null,
+  previous: null,
+  data: { results: [] }
+};
+
+const mockDetails = {
+  data: {
+    id: 1,
+    type: 'organization',
+    url: '/api/v2/organizations/1/',
+    related: {
+      notification_templates: '/api/v2/organizations/1/notification_templates/',
+      notification_templates_any: '/api/v2/organizations/1/notification_templates_any/',
+      notification_templates_success: '/api/v2/organizations/1/notification_templates_success/',
+      notification_templates_error: '/api/v2/organizations/1/notification_templates_error/',
+      object_roles: '/api/v2/organizations/1/object_roles/',
+      access_list: '/api/v2/organizations/1/access_list/',
+      instance_groups: '/api/v2/organizations/1/instance_groups/'
+    },
+    summary_fields: {
+      created_by: {
+        id: 1,
+        username: 'admin',
+        first_name: 'Super',
+        last_name: 'User'
+      },
+      modified_by: {
+        id: 1,
+        username: 'admin',
+        first_name: 'Super',
+        last_name: 'User'
+      },
+      object_roles: {
+        admin_role: {
+          description: 'Can manage all aspects of the organization',
+          name: 'Admin',
+          id: 42
+        },
+        notification_admin_role: {
+          description: 'Can manage all notifications of the organization',
+          name: 'Notification Admin',
+          id: 1683
+        },
+        auditor_role: {
+          description: 'Can view all aspects of the organization',
+          name: 'Auditor',
+          id: 41
+        },
+      },
+      user_capabilities: {
+        edit: true,
+        delete: true
+      },
+      related_field_counts: {
+        users: 51,
+        admins: 19,
+        inventories: 23,
+        teams: 12,
+        projects: 33,
+        job_templates: 30
+      }
+    },
+    created: '2015-07-07T17:21:26.429745Z',
+    modified: '2017-09-05T19:23:15.418808Z',
+    name: 'Sarif Industries',
+    description: '',
+    max_hosts: 0,
+    custom_virtualenv: null
+  }
+};
+
+const adminOrganization = {
+  id: 1,
+  type: 'organization',
+  url: '/api/v2/organizations/1/',
+  related: {
+    instance_groups: '/api/v2/organizations/1/instance_groups/',
+    object_roles: '/api/v2/organizations/1/object_roles/',
+    access_list: '/api/v2/organizations/1/access_list/',
+  },
+  summary_fields: {
+    created_by: {
+      id: 1,
+      username: 'admin',
+      first_name: 'Super',
+      last_name: 'User'
+    },
+    modified_by: {
+      id: 1,
+      username: 'admin',
+      first_name: 'Super',
+      last_name: 'User'
+    },
+  },
+  created: '2015-07-07T17:21:26.429745Z',
+  modified: '2017-09-05T19:23:15.418808Z',
+  name: 'Sarif Industries',
+  description: '',
+  max_hosts: 0,
+  custom_virtualenv: null
+};
+
+const auditorOrganization = {
+  id: 2,
+  type: 'organization',
+  url: '/api/v2/organizations/2/',
+  related: {
+    instance_groups: '/api/v2/organizations/2/instance_groups/',
+    object_roles: '/api/v2/organizations/2/object_roles/',
+    access_list: '/api/v2/organizations/2/access_list/',
+  },
+  summary_fields: {
+    created_by: {
+      id: 2,
+      username: 'admin',
+      first_name: 'Super',
+      last_name: 'User'
+    },
+    modified_by: {
+      id: 2,
+      username: 'admin',
+      first_name: 'Super',
+      last_name: 'User'
+    },
+  },
+  created: '2015-07-07T17:21:26.429745Z',
+  modified: '2017-09-05T19:23:15.418808Z',
+  name: 'Autobots',
+  description: '',
+  max_hosts: 0,
+  custom_virtualenv: null
+};
+
+const notificationAdminOrganization = {
+  id: 3,
+  type: 'organization',
+  url: '/api/v2/organizations/3/',
+  related: {
+    instance_groups: '/api/v2/organizations/3/instance_groups/',
+    object_roles: '/api/v2/organizations/3/object_roles/',
+    access_list: '/api/v2/organizations/3/access_list/',
+  },
+  summary_fields: {
+    created_by: {
+      id: 1,
+      username: 'admin',
+      first_name: 'Super',
+      last_name: 'User'
+    },
+    modified_by: {
+      id: 1,
+      username: 'admin',
+      first_name: 'Super',
+      last_name: 'User'
+    },
+  },
+  created: '2015-07-07T17:21:26.429745Z',
+  modified: '2017-09-05T19:23:15.418808Z',
+  name: 'Decepticons',
+  description: '',
+  max_hosts: 0,
+  custom_virtualenv: null
+};
+
+const allOrganizations = [
+  adminOrganization,
+  auditorOrganization,
+  notificationAdminOrganization
+];
+
+async function getOrganizations (params) {
+  let results = allOrganizations;
+  if (params && params.role_level) {
+    if (params.role_level === 'admin_role') {
+      results = [adminOrganization];
+    }
+    if (params.role_level === 'auditor_role') {
+      results = [auditorOrganization];
+    }
+    if (params.role_level === 'notification_admin_role') {
+      results = [notificationAdminOrganization];
+    }
+  }
+  return {
+    count: results.length,
+    next: null,
+    previous: null,
+    data: { results }
+  };
+}
+
+describe.only('<Organization />', () => {
   test('initially renders succesfully', () => {
-    mountWithContexts(<Organization me={me} />);
+    OrganizationsAPI.readDetail.mockResolvedValue(mockDetails);
+    OrganizationsAPI.read.mockImplementation(getOrganizations);
+    mountWithContexts(<Organization setBreadcrumb={() => {}} me={mockMe} />);
   });
 
-  test('notifications tab shown/hidden based on permissions', async () => {
-    OrganizationsAPI.readDetail.mockResolvedValue({
-      data: {
-        id: 1,
-        name: 'foo'
-      }
-    });
-    OrganizationsAPI.read.mockResolvedValue({
-      data: {
-        results: []
-      }
-    });
-    const history = createMemoryHistory({
-      initialEntries: ['/organizations/1/details'],
-    });
-    const match = { path: '/organizations/:id', url: '/organizations/1' };
-    const wrapper = mountWithContexts(
-      <Organization
-        me={me}
-        setBreadcrumb={() => {}}
-      />,
-      {
-        context: {
-          router: {
-            history,
-            route: {
-              location: history.location,
-              match
-            }
-          }
-        }
-      }
-    );
-    await sleep(0);
-    wrapper.update();
-    expect(wrapper.find('.pf-c-tabs__item').length).toBe(3);
-    expect(wrapper.find('.pf-c-tabs__button[children="Notifications"]').length).toBe(0);
-    wrapper.find('Organization').setState({
-      isNotifAdmin: true
-    });
-    expect(wrapper.find('.pf-c-tabs__item').length).toBe(4);
-    expect(wrapper.find('button.pf-c-tabs__button[children="Notifications"]').length).toBe(1);
+  test('notifications tab shown for admins', async (done) => {
+    OrganizationsAPI.readDetail.mockResolvedValue(mockDetails);
+    OrganizationsAPI.read.mockImplementation(getOrganizations);
+
+    const wrapper = mountWithContexts(<Organization setBreadcrumb={() => {}} me={mockMe} />);
+    const tabs = await waitForElement(wrapper, '.pf-c-tabs__item', el => el.length === 4);
+    expect(tabs.last().text()).toEqual('Notifications');
+    done();
+  });
+
+  test('notifications tab hidden with reduced permissions', async (done) => {
+    OrganizationsAPI.readDetail.mockResolvedValue(mockDetails);
+    OrganizationsAPI.read.mockResolvedValue(mockNoResults);
+
+    const wrapper = mountWithContexts(<Organization setBreadcrumb={() => {}} me={mockMe} />);
+    const tabs = await waitForElement(wrapper, '.pf-c-tabs__item', el => el.length === 3);
+    tabs.forEach(tab => expect(tab.text()).not.toEqual('Notifications'));
+    done();
   });
 });

__tests__/pages/Organizations/screens/Organization/OrganizationAccess.test.jsx

@@ -1,14 +1,12 @@
 import React from 'react';
-import { mountWithContexts } from '../../../../enzymeHelpers';
+import { mountWithContexts, waitForElement } from '../../../../enzymeHelpers';
 import OrganizationAccess from '../../../../../src/pages/Organizations/screens/Organization/OrganizationAccess';
 import { sleep } from '../../../../testUtils';
-
 import { OrganizationsAPI, TeamsAPI, UsersAPI } from '../../../../../src/api';
 
 jest.mock('../../../../../src/api');
 
 describe('<OrganizationAccess />', () => {
-  const network = {};
   const organization = {
     id: 1,
     name: 'Default',
@@ -64,7 +62,9 @@ describe('<OrganizationAccess />', () => {
   };
 
   beforeEach(() => {
-    OrganizationsAPI.readAccessList.mockReturnValue({ data });
+    OrganizationsAPI.readAccessList.mockResolvedValue({ data });
+    TeamsAPI.disassociateRole.mockResolvedValue({});
+    UsersAPI.disassociateRole.mockResolvedValue({});
   });
 
   afterEach(() => {
@@ -72,31 +72,21 @@ describe('<OrganizationAccess />', () => {
   });
 
   test('initially renders succesfully', () => {
-    const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />,
-      { context: { network } }
-    );
+    const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
     expect(wrapper.find('OrganizationAccess')).toMatchSnapshot();
   });
 
-  test('should fetch and display access records on mount', async () => {
-    const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />,
-      { context: { network } }
-    );
-    await sleep(0);
-    wrapper.update();
-    expect(OrganizationsAPI.readAccessList).toHaveBeenCalled();
-    expect(wrapper.find('OrganizationAccess').state('isInitialized')).toBe(true);
+  test('should fetch and display access records on mount', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
+    await waitForElement(wrapper, 'OrganizationAccessItem', el => el.length === 2);
     expect(wrapper.find('PaginatedDataList').prop('items')).toEqual(data.results);
-    expect(wrapper.find('OrganizationAccessItem')).toHaveLength(2);
+    expect(wrapper.find('OrganizationAccess').state('contentLoading')).toBe(false);
+    expect(wrapper.find('OrganizationAccess').state('contentError')).toBe(false);
+    done();
   });
 
-  test('should open confirmation dialog when deleting role', async () => {
-    const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />,
-      { context: { network } }
-    );
+  test('should open confirmation dialog when deleting role', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
     await sleep(0);
     wrapper.update();
 
@@ -105,18 +95,16 @@ describe('<OrganizationAccess />', () => {
     wrapper.update();
 
     const component = wrapper.find('OrganizationAccess');
-    expect(component.state('roleToDelete'))
+    expect(component.state('deletionRole'))
       .toEqual(data.results[0].summary_fields.direct_access[0].role);
-    expect(component.state('roleToDeleteAccessRecord'))
+    expect(component.state('deletionRecord'))
       .toEqual(data.results[0]);
     expect(component.find('DeleteRoleConfirmationModal')).toHaveLength(1);
+    done();
   });
 
-  it('should close dialog when cancel button clicked', async () => {
-    const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />,
-      { context: { network } }
-    );
+  it('should close dialog when cancel button clicked', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
     await sleep(0);
     wrapper.update();
     const button = wrapper.find('ChipButton').at(0);
@@ -125,55 +113,50 @@ describe('<OrganizationAccess />', () => {
 
     wrapper.find('DeleteRoleConfirmationModal').prop('onCancel')();
     const component = wrapper.find('OrganizationAccess');
-    expect(component.state('roleToDelete')).toBeNull();
-    expect(component.state('roleToDeleteAccessRecord')).toBeNull();
+    expect(component.state('deletionRole')).toBeNull();
+    expect(component.state('deletionRecord')).toBeNull();
     expect(TeamsAPI.disassociateRole).not.toHaveBeenCalled();
     expect(UsersAPI.disassociateRole).not.toHaveBeenCalled();
+    done();
   });
 
-  it('should delete user role', async () => {
-    const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />,
-      { context: { network } }
-    );
+  it('should delete user role', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
+    const button = await waitForElement(wrapper, 'ChipButton', el => el.length === 2);
+    button.at(0).prop('onClick')();
+
+    const confirmation = await waitForElement(wrapper, 'DeleteRoleConfirmationModal');
+    confirmation.prop('onConfirm')();
+    await waitForElement(wrapper, 'DeleteRoleConfirmationModal', el => el.length === 0);
+
     await sleep(0);
     wrapper.update();
-    const button = wrapper.find('ChipButton').at(0);
-    button.prop('onClick')();
-    wrapper.update();
-
-    wrapper.find('DeleteRoleConfirmationModal').prop('onConfirm')();
-    await sleep(0);
-    wrapper.update();
-
     const component = wrapper.find('OrganizationAccess');
-    expect(component.state('roleToDelete')).toBeNull();
-    expect(component.state('roleToDeleteAccessRecord')).toBeNull();
+    expect(component.state('deletionRole')).toBeNull();
+    expect(component.state('deletionRecord')).toBeNull();
     expect(TeamsAPI.disassociateRole).not.toHaveBeenCalled();
     expect(UsersAPI.disassociateRole).toHaveBeenCalledWith(1, 1);
     expect(OrganizationsAPI.readAccessList).toHaveBeenCalledTimes(2);
+    done();
   });
 
-  it('should delete team role', async () => {
-    const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />,
-      { context: { network } }
-    );
+  it('should delete team role', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
+    const button = await waitForElement(wrapper, 'ChipButton', el => el.length === 2);
+    button.at(1).prop('onClick')();
+
+    const confirmation = await waitForElement(wrapper, 'DeleteRoleConfirmationModal');
+    confirmation.prop('onConfirm')();
+    await waitForElement(wrapper, 'DeleteRoleConfirmationModal', el => el.length === 0);
+
     await sleep(0);
     wrapper.update();
-    const button = wrapper.find('ChipButton').at(1);
-    button.prop('onClick')();
-    wrapper.update();
-
-    wrapper.find('DeleteRoleConfirmationModal').prop('onConfirm')();
-    await sleep(0);
-    wrapper.update();
-
     const component = wrapper.find('OrganizationAccess');
-    expect(component.state('roleToDelete')).toBeNull();
-    expect(component.state('roleToDeleteAccessRecord')).toBeNull();
+    expect(component.state('deletionRole')).toBeNull();
+    expect(component.state('deletionRecord')).toBeNull();
     expect(TeamsAPI.disassociateRole).toHaveBeenCalledWith(5, 3);
     expect(UsersAPI.disassociateRole).not.toHaveBeenCalled();
     expect(OrganizationsAPI.readAccessList).toHaveBeenCalledTimes(2);
+    done();
   });
 });

__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { mountWithContexts } from '../../../../enzymeHelpers';
+import { mountWithContexts, waitForElement } from '../../../../enzymeHelpers';
 import OrganizationDetail from '../../../../../src/pages/Organizations/screens/Organization/OrganizationDetail';
 import { OrganizationsAPI } from '../../../../../src/api';
 
 jest.mock('../../../../../src/api');
 
 describe('<OrganizationDetail />', () => {
-  const mockDetails = {
+  const mockOrganization = {
     name: 'Foo',
     description: 'Bar',
     custom_virtualenv: 'Fizz',
@@ -19,107 +19,75 @@ describe('<OrganizationDetail />', () => {
       }
     }
   };
+  const mockInstanceGroups = {
+    data: {
+      results: [
+        { name: 'One', id: 1 },
+        { name: 'Two', id: 2 }
+      ]
+    }
+  };
+
+  beforeEach(() => {
+    OrganizationsAPI.readInstanceGroups.mockResolvedValue(mockInstanceGroups);
+  });
 
   afterEach(() => {
     jest.clearAllMocks();
   });
 
   test('initially renders succesfully', () => {
-    mountWithContexts(
-      <OrganizationDetail
-        organization={mockDetails}
-      />
-    );
+    mountWithContexts(<OrganizationDetail organization={mockOrganization} />);
   });
 
   test('should request instance groups from api', () => {
-    mountWithContexts(
-      <OrganizationDetail
-        organization={mockDetails}
-      />, { context: {
-        network: { handleHttpError: () => {} }
-      } }
-    ).find('OrganizationDetail');
-
+    mountWithContexts(<OrganizationDetail organization={mockOrganization} />);
     expect(OrganizationsAPI.readInstanceGroups).toHaveBeenCalledTimes(1);
   });
 
-  test('should handle setting instance groups to state', async () => {
-    const mockInstanceGroups = [
-      { name: 'One', id: 1 },
-      { name: 'Two', id: 2 }
-    ];
-    OrganizationsAPI.readInstanceGroups.mockResolvedValue({
-      data: { results: mockInstanceGroups }
-    });
+  test('should handle setting instance groups to state', async (done) => {
     const wrapper = mountWithContexts(
-      <OrganizationDetail
-        organization={mockDetails}
-      />, { context: {
-        network: { handleHttpError: () => {} }
-      } }
-    ).find('OrganizationDetail');
-
-    await OrganizationsAPI.readInstanceGroups();
-    expect(wrapper.state().instanceGroups).toEqual(mockInstanceGroups);
-  });
-
-  test('should render Details', async () => {
-    const wrapper = mountWithContexts(
-      <OrganizationDetail
-        organization={mockDetails}
-      />
+      <OrganizationDetail organization={mockOrganization} />
     );
-
-    const detailWrapper = wrapper.find('Detail');
-    expect(detailWrapper.length).toBe(6);
-
-    const nameDetail = detailWrapper.findWhere(node => node.props().label === 'Name');
-    const descriptionDetail = detailWrapper.findWhere(node => node.props().label === 'Description');
-    const custom_virtualenvDetail = detailWrapper.findWhere(node => node.props().label === 'Ansible Environment');
-    const max_hostsDetail = detailWrapper.findWhere(node => node.props().label === 'Max Hosts');
-    const createdDetail = detailWrapper.findWhere(node => node.props().label === 'Created');
-    const modifiedDetail = detailWrapper.findWhere(node => node.props().label === 'Last Modified');
-    expect(nameDetail.find('dt').text()).toBe('Name');
-    expect(nameDetail.find('dd').text()).toBe('Foo');
-
-    expect(descriptionDetail.find('dt').text()).toBe('Description');
-    expect(descriptionDetail.find('dd').text()).toBe('Bar');
-
-    expect(custom_virtualenvDetail.find('dt').text()).toBe('Ansible Environment');
-    expect(custom_virtualenvDetail.find('dd').text()).toBe('Fizz');
-
-    expect(createdDetail.find('dt').text()).toBe('Created');
-    expect(createdDetail.find('dd').text()).toBe('Bat');
-
-    expect(modifiedDetail.find('dt').text()).toBe('Last Modified');
-    expect(modifiedDetail.find('dd').text()).toBe('Boo');
-
-    expect(max_hostsDetail.find('dt').text()).toBe('Max Hosts');
-    expect(max_hostsDetail.find('dd').text()).toBe('0');
+    const component = await waitForElement(wrapper, 'OrganizationDetail');
+    expect(component.state().instanceGroups).toEqual(mockInstanceGroups.data.results);
+    done();
   });
 
-  test('should show edit button for users with edit permission', () => {
-    const wrapper = mountWithContexts(
-      <OrganizationDetail
-        organization={mockDetails}
-      />
-    ).find('OrganizationDetail');
-    const editButton = wrapper.find('Button');
-    expect((editButton).prop('to')).toBe('/organizations/undefined/edit');
+  test('should render Details', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationDetail organization={mockOrganization} />);
+    const testParams = [
+      { label: 'Name', value: 'Foo' },
+      { label: 'Description', value: 'Bar' },
+      { label: 'Ansible Environment', value: 'Fizz' },
+      { label: 'Created', value: 'Bat' },
+      { label: 'Last Modified', value: 'Boo' },
+      { label: 'Max Hosts', value: '0' },
+    ];
+    // eslint-disable-next-line no-restricted-syntax
+    for (const { label, value } of testParams) {
+      // eslint-disable-next-line no-await-in-loop
+      const detail = await waitForElement(wrapper, `Detail[label="${label}"]`);
+      expect(detail.find('dt').text()).toBe(label);
+      expect(detail.find('dd').text()).toBe(value);
+    }
+    done();
   });
 
-  test('should hide edit button for users without edit permission', () => {
-    const readOnlyOrg = { ...mockDetails };
+  test('should show edit button for users with edit permission', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationDetail organization={mockOrganization} />);
+    const editButton = await waitForElement(wrapper, 'OrganizationDetail Button');
+    expect(editButton.text()).toEqual('Edit');
+    expect(editButton.prop('to')).toBe('/organizations/undefined/edit');
+    done();
+  });
+
+  test('should hide edit button for users without edit permission', async (done) => {
+    const readOnlyOrg = { ...mockOrganization };
     readOnlyOrg.summary_fields.user_capabilities.edit = false;
-    const wrapper = mountWithContexts(
-      <OrganizationDetail
-        organization={readOnlyOrg}
-      />
-    ).find('OrganizationDetail');
-
-    const editLink = wrapper
-      .findWhere(node => node.props().to === '/organizations/undefined/edit');
-    expect(editLink.length).toBe(0);
+    const wrapper = mountWithContexts(<OrganizationDetail organization={readOnlyOrg} />);
+    await waitForElement(wrapper, 'OrganizationDetail');
+    expect(wrapper.find('OrganizationDetail Button').length).toBe(0);
+    done();
   });
 });

__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx

@@ -37,7 +37,6 @@ describe('<OrganizationEdit />', () => {
         organization={mockData}
       />, { context: { network: {
         api,
-        handleHttpError: () => {}
       } } }
     );
 
@@ -57,7 +56,6 @@ describe('<OrganizationEdit />', () => {
         organization={mockData}
       />, { context: { network: {
         api,
-        handleHttpError: () => {}
       } } }
     );
 
@@ -84,7 +82,6 @@ describe('<OrganizationEdit />', () => {
       />, { context: {
         network: {
           api: { api },
-          handleHttpError: () => {}
         },
         router: { history }
       } }

__tests__/pages/Organizations/screens/Organization/OrganizationNotifications.test.jsx

@@ -8,7 +8,6 @@ jest.mock('../../../../../src/api');
 
 describe('<OrganizationNotifications />', () => {
   let data;
-  const network = {};
 
   beforeEach(() => {
     data = {
@@ -40,8 +39,7 @@ describe('<OrganizationNotifications />', () => {
 
   test('initially renders succesfully', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationNotifications id={1} canToggleNotifications />,
-      { context: { network } }
+      <OrganizationNotifications id={1} canToggleNotifications />
     );
     await sleep(0);
     wrapper.update();
@@ -50,10 +48,7 @@ describe('<OrganizationNotifications />', () => {
 
   test('should render list fetched of items', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationNotifications id={1} canToggleNotifications />,
-      {
-        context: { network }
-      }
+      <OrganizationNotifications id={1} canToggleNotifications />
     );
     await sleep(0);
     wrapper.update();
@@ -71,10 +66,7 @@ describe('<OrganizationNotifications />', () => {
 
   test('should enable success notification', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationNotifications id={1} canToggleNotifications />,
-      {
-        context: { network }
-      }
+      <OrganizationNotifications id={1} canToggleNotifications />
     );
     await sleep(0);
     wrapper.update();
@@ -84,7 +76,7 @@ describe('<OrganizationNotifications />', () => {
     ).toEqual([1]);
     const items = wrapper.find('NotificationListItem');
     items.at(1).find('Switch').at(0).prop('onChange')();
-    expect(OrganizationsAPI.associateNotificationTemplatesSuccess).toHaveBeenCalled();
+    expect(OrganizationsAPI.updateNotificationTemplateAssociation).toHaveBeenCalledWith(1, 2, 'success', true);
     await sleep(0);
     wrapper.update();
     expect(
@@ -94,10 +86,7 @@ describe('<OrganizationNotifications />', () => {
 
   test('should enable error notification', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationNotifications id={1} canToggleNotifications />,
-      {
-        context: { network }
-      }
+      <OrganizationNotifications id={1} canToggleNotifications />
     );
     await sleep(0);
     wrapper.update();
@@ -107,7 +96,7 @@ describe('<OrganizationNotifications />', () => {
     ).toEqual([2]);
     const items = wrapper.find('NotificationListItem');
     items.at(0).find('Switch').at(1).prop('onChange')();
-    expect(OrganizationsAPI.associateNotificationTemplatesError).toHaveBeenCalled();
+    expect(OrganizationsAPI.updateNotificationTemplateAssociation).toHaveBeenCalledWith(1, 1, 'error', true);
     await sleep(0);
     wrapper.update();
     expect(
@@ -117,10 +106,7 @@ describe('<OrganizationNotifications />', () => {
 
   test('should disable success notification', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationNotifications id={1} canToggleNotifications />,
-      {
-        context: { network }
-      }
+      <OrganizationNotifications id={1} canToggleNotifications />
     );
     await sleep(0);
     wrapper.update();
@@ -130,7 +116,7 @@ describe('<OrganizationNotifications />', () => {
     ).toEqual([1]);
     const items = wrapper.find('NotificationListItem');
     items.at(0).find('Switch').at(0).prop('onChange')();
-    expect(OrganizationsAPI.disassociateNotificationTemplatesSuccess).toHaveBeenCalled();
+    expect(OrganizationsAPI.updateNotificationTemplateAssociation).toHaveBeenCalledWith(1, 1, 'success', false);
     await sleep(0);
     wrapper.update();
     expect(
@@ -140,10 +126,7 @@ describe('<OrganizationNotifications />', () => {
 
   test('should disable error notification', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationNotifications id={1} canToggleNotifications />,
-      {
-        context: { network }
-      }
+      <OrganizationNotifications id={1} canToggleNotifications />
     );
     await sleep(0);
     wrapper.update();
@@ -153,7 +136,7 @@ describe('<OrganizationNotifications />', () => {
     ).toEqual([2]);
     const items = wrapper.find('NotificationListItem');
     items.at(1).find('Switch').at(1).prop('onChange')();
-    expect(OrganizationsAPI.disassociateNotificationTemplatesError).toHaveBeenCalled();
+    expect(OrganizationsAPI.updateNotificationTemplateAssociation).toHaveBeenCalledWith(1, 2, 'error', false);
     await sleep(0);
     wrapper.update();
     expect(

__tests__/pages/Organizations/screens/Organization/OrganizationTeams.test.jsx

@@ -20,22 +20,21 @@ const listData = {
   }
 };
 
-beforeEach(() => {
-  OrganizationsAPI.readTeams.mockResolvedValue(listData);
-});
-
-afterEach(() => {
-  jest.clearAllMocks();
-});
-
 describe('<OrganizationTeams />', () => {
+  beforeEach(() => {
+    OrganizationsAPI.readTeams.mockResolvedValue(listData);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   test('renders succesfully', () => {
     shallow(
       <_OrganizationTeams
         id={1}
         searchString=""
         location={{ search: '', pathname: '/organizations/1/teams' }}
-        handleHttpError={() => {}}
       />
     );
   });
@@ -45,9 +44,7 @@ describe('<OrganizationTeams />', () => {
       <OrganizationTeams
         id={1}
         searchString=""
-      />, { context: {
-        network: {} }
-      }
+      />
     ).find('OrganizationTeams');
     expect(OrganizationsAPI.readTeams).toHaveBeenCalledWith(1, {
       page: 1,
@@ -61,9 +58,7 @@ describe('<OrganizationTeams />', () => {
       <OrganizationTeams
         id={1}
         searchString=""
-      />, { context: {
-        network: { handleHttpError: () => {} } }
-      }
+      />
     );
 
     await sleep(0);

__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationAccess.test.jsx.snap

@@ -2,7 +2,6 @@
 
 exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
 <OrganizationAccess
-  handleHttpError={[Function]}
   history={"/history/"}
   i18n={"/i18n/"}
   location={
@@ -34,8 +33,228 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
     }
   }
 >
-  <div>
-    Loading...
-  </div>
+  <WithI18n
+    contentError={false}
+    contentLoading={true}
+    itemCount={0}
+    itemName="role"
+    items={Array []}
+    qsConfig={
+      Object {
+        "defaultParams": Object {
+          "order_by": "first_name",
+          "page": 1,
+          "page_size": 5,
+        },
+        "integerFields": Array [
+          "page",
+          "page_size",
+        ],
+        "namespace": "access",
+      }
+    }
+    renderItem={[Function]}
+    renderToolbar={[Function]}
+    toolbarColumns={
+      Array [
+        Object {
+          "isSortable": true,
+          "key": "first_name",
+          "name": "Name",
+        },
+        Object {
+          "isSortable": true,
+          "key": "username",
+          "name": "Username",
+        },
+        Object {
+          "isSortable": true,
+          "key": "last_name",
+          "name": "Last Name",
+        },
+      ]
+    }
+  >
+    <I18n
+      update={true}
+      withHash={true}
+    >
+      <withRouter(PaginatedDataList)
+        contentError={false}
+        contentLoading={true}
+        i18n={"/i18n/"}
+        itemCount={0}
+        itemName="role"
+        items={Array []}
+        qsConfig={
+          Object {
+            "defaultParams": Object {
+              "order_by": "first_name",
+              "page": 1,
+              "page_size": 5,
+            },
+            "integerFields": Array [
+              "page",
+              "page_size",
+            ],
+            "namespace": "access",
+          }
+        }
+        renderItem={[Function]}
+        renderToolbar={[Function]}
+        toolbarColumns={
+          Array [
+            Object {
+              "isSortable": true,
+              "key": "first_name",
+              "name": "Name",
+            },
+            Object {
+              "isSortable": true,
+              "key": "username",
+              "name": "Username",
+            },
+            Object {
+              "isSortable": true,
+              "key": "last_name",
+              "name": "Last Name",
+            },
+          ]
+        }
+      >
+        <Route>
+          <PaginatedDataList
+            contentError={false}
+            contentLoading={true}
+            history={"/history/"}
+            i18n={"/i18n/"}
+            itemCount={0}
+            itemName="role"
+            itemNamePlural=""
+            items={Array []}
+            location={
+              Object {
+                "hash": "",
+                "pathname": "",
+                "search": "",
+                "state": "",
+              }
+            }
+            match={
+              Object {
+                "isExact": false,
+                "params": Object {},
+                "path": "",
+                "url": "",
+              }
+            }
+            qsConfig={
+              Object {
+                "defaultParams": Object {
+                  "order_by": "first_name",
+                  "page": 1,
+                  "page_size": 5,
+                },
+                "integerFields": Array [
+                  "page",
+                  "page_size",
+                ],
+                "namespace": "access",
+              }
+            }
+            renderItem={[Function]}
+            renderToolbar={[Function]}
+            showPageSizeOptions={true}
+            toolbarColumns={
+              Array [
+                Object {
+                  "isSortable": true,
+                  "key": "first_name",
+                  "name": "Name",
+                },
+                Object {
+                  "isSortable": true,
+                  "key": "username",
+                  "name": "Username",
+                },
+                Object {
+                  "isSortable": true,
+                  "key": "last_name",
+                  "name": "Last Name",
+                },
+              ]
+            }
+          >
+            <WithI18n>
+              <I18n
+                update={true}
+                withHash={true}
+              >
+                <ContentLoading
+                  i18n={"/i18n/"}
+                >
+                  <EmptyState
+                    className=""
+                    variant="large"
+                  >
+                    <div
+                      className="pf-c-empty-state pf-m-lg"
+                    >
+                      <EmptyStateBody
+                        className=""
+                      >
+                        <p
+                          className="pf-c-empty-state__body"
+                        >
+                          Loading...
+                        </p>
+                      </EmptyStateBody>
+                    </div>
+                  </EmptyState>
+                </ContentLoading>
+              </I18n>
+            </WithI18n>
+          </PaginatedDataList>
+        </Route>
+      </withRouter(PaginatedDataList)>
+    </I18n>
+  </WithI18n>
+  <_default
+    isOpen={false}
+    onClose={[Function]}
+    title="Error!"
+    variant="danger"
+  >
+    <Modal
+      actions={Array []}
+      ariaDescribedById=""
+      className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+      hideTitle={false}
+      isLarge={false}
+      isOpen={false}
+      isSmall={false}
+      onClose={[Function]}
+      title="Error!"
+      width={null}
+    >
+      <Portal
+        containerInfo={<div />}
+      >
+        <ModalContent
+          actions={Array []}
+          ariaDescribedById=""
+          className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+          hideTitle={false}
+          id="pf-modal-0"
+          isLarge={false}
+          isOpen={false}
+          isSmall={false}
+          onClose={[Function]}
+          title="Error!"
+          width={null}
+        />
+      </Portal>
+    </Modal>
+  </_default>
 </OrganizationAccess>
 `;

__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx

@@ -1,27 +1,15 @@
 import React from 'react';
 
-import { mountWithContexts } from '../../../enzymeHelpers';
+import { mountWithContexts, waitForElement } from '../../../enzymeHelpers';
 
 import OrganizationAdd from '../../../../src/pages/Organizations/screens/OrganizationAdd';
 import { OrganizationsAPI } from '../../../../src/api';
 
 jest.mock('../../../../src/api');
 
-const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
-
 describe('<OrganizationAdd />', () => {
-  let networkProviderValue;
-
-  beforeEach(() => {
-    networkProviderValue = {
-      handleHttpError: () => {}
-    };
-  });
-
   test('handleSubmit should post to api', () => {
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { network: networkProviderValue }
-    });
+    const wrapper = mountWithContexts(<OrganizationAdd />);
     const updatedOrgData = {
       name: 'new name',
       description: 'new description',
@@ -35,9 +23,10 @@ describe('<OrganizationAdd />', () => {
     const history = {
       push: jest.fn(),
     };
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { router: { history } }
-    });
+    const wrapper = mountWithContexts(
+      <OrganizationAdd />,
+      { context: { router: { history } } }
+    );
     expect(history.push).not.toHaveBeenCalled();
     wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
     expect(history.push).toHaveBeenCalledWith('/organizations');
@@ -47,15 +36,16 @@ describe('<OrganizationAdd />', () => {
     const history = {
       push: jest.fn(),
     };
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { router: { history } }
-    });
+    const wrapper = mountWithContexts(
+      <OrganizationAdd />,
+      { context: { router: { history } } }
+    );
     expect(history.push).not.toHaveBeenCalled();
     wrapper.find('button[aria-label="Close"]').prop('onClick')();
     expect(history.push).toHaveBeenCalledWith('/organizations');
   });
 
-  test('successful form submission should trigger redirect', async () => {
+  test('successful form submission should trigger redirect', async (done) => {
     const history = {
       push: jest.fn(),
     };
@@ -64,7 +54,7 @@ describe('<OrganizationAdd />', () => {
       description: 'new description',
       custom_virtualenv: 'Buzz',
     };
-    OrganizationsAPI.create.mockReturnValueOnce({
+    OrganizationsAPI.create.mockResolvedValueOnce({
       data: {
         id: 5,
         related: {
@@ -73,24 +63,23 @@ describe('<OrganizationAdd />', () => {
         ...orgData,
       }
     });
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { router: { history }, network: networkProviderValue }
-    });
-    wrapper.find('OrganizationForm').prop('handleSubmit')(orgData, [], []);
-    await sleep(0);
+    const wrapper = mountWithContexts(
+      <OrganizationAdd />,
+      { context: { router: { history } } }
+    );
+    await waitForElement(wrapper, 'button[aria-label="Save"]');
+    await wrapper.find('OrganizationForm').prop('handleSubmit')(orgData, [3], []);
     expect(history.push).toHaveBeenCalledWith('/organizations/5');
+    done();
   });
 
-  test('handleSubmit should post instance groups', async () => {
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { network: networkProviderValue }
-    });
+  test('handleSubmit should post instance groups', async (done) => {
     const orgData = {
       name: 'new name',
       description: 'new description',
       custom_virtualenv: 'Buzz',
     };
-    OrganizationsAPI.create.mockReturnValueOnce({
+    OrganizationsAPI.create.mockResolvedValueOnce({
       data: {
         id: 5,
         related: {
@@ -99,19 +88,22 @@ describe('<OrganizationAdd />', () => {
         ...orgData,
       }
     });
-    wrapper.find('OrganizationForm').prop('handleSubmit')(orgData, [3], []);
-    await sleep(0);
+    const wrapper = mountWithContexts(<OrganizationAdd />);
+    await waitForElement(wrapper, 'button[aria-label="Save"]');
+    await wrapper.find('OrganizationForm').prop('handleSubmit')(orgData, [3], []);
     expect(OrganizationsAPI.associateInstanceGroup)
       .toHaveBeenCalledWith(5, 3);
+    done();
   });
 
   test('AnsibleSelect component renders if there are virtual environments', () => {
     const config = {
       custom_virtualenvs: ['foo', 'bar'],
     };
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { network: networkProviderValue, config }
-    }).find('AnsibleSelect');
+    const wrapper = mountWithContexts(
+      <OrganizationAdd />,
+      { context: { config } }
+    ).find('AnsibleSelect');
     expect(wrapper.find('FormSelect')).toHaveLength(1);
     expect(wrapper.find('FormSelectOption')).toHaveLength(2);
   });
@@ -120,9 +112,10 @@ describe('<OrganizationAdd />', () => {
     const config = {
       custom_virtualenvs: [],
     };
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { network: networkProviderValue, config }
-    }).find('AnsibleSelect');
+    const wrapper = mountWithContexts(
+      <OrganizationAdd />,
+      { context: { config } }
+    ).find('AnsibleSelect');
     expect(wrapper.find('FormSelect')).toHaveLength(0);
   });
 });

__tests__/pages/Organizations/screens/OrganizationsList.test.jsx

@@ -59,25 +59,13 @@ const mockAPIOrgsList = {
 
 describe('<OrganizationsList />', () => {
   let wrapper;
-  let api;
-
-  beforeEach(() => {
-    api = {
-      getOrganizations: () => {},
-      destroyOrganization: jest.fn(),
-    };
-  });
 
   test('initially renders succesfully', () => {
-    mountWithContexts(
-      <OrganizationsList />
-    );
+    mountWithContexts(<OrganizationsList />);
   });
 
   test('Puts 1 selected Org in state when handleSelect is called.', () => {
-    wrapper = mountWithContexts(
-      <OrganizationsList />
-    ).find('OrganizationsList');
+    wrapper = mountWithContexts(<OrganizationsList />).find('OrganizationsList');
 
     wrapper.setState({
       organizations: mockAPIOrgsList.data.results,
@@ -91,9 +79,7 @@ describe('<OrganizationsList />', () => {
   });
 
   test('Puts all Orgs in state when handleSelectAll is called.', () => {
-    wrapper = mountWithContexts(
-      <OrganizationsList />
-    );
+    wrapper = mountWithContexts(<OrganizationsList />);
     const list = wrapper.find('OrganizationsList');
     list.setState({
       organizations: mockAPIOrgsList.data.results,
@@ -108,16 +94,7 @@ describe('<OrganizationsList />', () => {
   });
 
   test('api is called to delete Orgs for each org in selected.', () => {
-    const fetchOrganizations = jest.fn(() => wrapper.find('OrganizationsList').setState({
-      organizations: []
-    }));
-    wrapper = mountWithContexts(
-      <OrganizationsList
-        fetchOrganizations={fetchOrganizations}
-      />, {
-        context: { network: { api } }
-      }
-    );
+    wrapper = mountWithContexts(<OrganizationsList />);
     const component = wrapper.find('OrganizationsList');
     wrapper.find('OrganizationsList').setState({
       organizations: mockAPIOrgsList.data.results,
@@ -130,14 +107,10 @@ describe('<OrganizationsList />', () => {
     expect(OrganizationsAPI.destroy).toHaveBeenCalledTimes(component.state('selected').length);
   });
 
-  test('call fetchOrganizations after org(s) have been deleted', () => {
-    const fetchOrgs = jest.spyOn(_OrganizationsList.prototype, 'fetchOrganizations');
+  test('call loadOrganizations after org(s) have been deleted', () => {
+    const fetchOrgs = jest.spyOn(_OrganizationsList.prototype, 'loadOrganizations');
     const event = { preventDefault: () => { } };
-    wrapper = mountWithContexts(
-      <OrganizationsList />, {
-        context: { network: { api } }
-      }
-    );
+    wrapper = mountWithContexts(<OrganizationsList />);
     wrapper.find('OrganizationsList').setState({
       organizations: mockAPIOrgsList.data.results,
       itemCount: 3,
@@ -153,13 +126,9 @@ describe('<OrganizationsList />', () => {
     const history = createMemoryHistory({
       initialEntries: ['organizations?order_by=name&page=1&page_size=5'],
     });
-    const handleError = jest.fn();
     wrapper = mountWithContexts(
-      <OrganizationsList />, {
-        context: {
-          router: { history }, network: { api, handleHttpError: handleError }
-        }
-      }
+      <OrganizationsList />,
+      { context: { router: { history } } }
     );
     await wrapper.setState({
       organizations: mockAPIOrgsList.data.results,
@@ -173,6 +142,5 @@ describe('<OrganizationsList />', () => {
     wrapper.update();
     const component = wrapper.find('OrganizationsList');
     component.instance().handleOrgDelete();
-    expect(handleError).toHaveBeenCalled();
   });
 });