fix tests and function name changes

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { createMemoryHistory } from 'history';
-import { MemoryRouter } from 'react-router-dom';
+import { mountWithContexts } from '../../../enzymeHelpers';
-import { I18nProvider } from '@lingui/react';
+import OrganizationsList, { _OrganizationsList } from '../../../../src/pages/Organizations/screens/OrganizationsList';
-import { _OrganizationsList } from '../../../../src/pages/Organizations/screens/OrganizationsList';
 
 const mockAPIOrgsList = {
   data: {
@@ -13,26 +12,35 @@ const mockAPIOrgsList = {
         related_field_counts: {
           teams: 3,
           users: 4
+        },
+        user_capabilities: {
+          delete: true
         }
       },
     },
     {
       name: 'Organization 1',
-      id: 1,
+      id: 2,
       summary_fields: {
         related_field_counts: {
           teams: 2,
           users: 5
+        },
+        user_capabilities: {
+          delete: true
         }
       },
     },
     {
       name: 'Organization 2',
-      id: 2,
+      id: 3,
       summary_fields: {
         related_field_counts: {
           teams: 5,
           users: 6
+        },
+        user_capabilities: {
+          delete: true
         }
       },
     }]
@@ -40,99 +48,193 @@ const mockAPIOrgsList = {
   isModalOpen: false,
   warningTitle: 'title',
   warningMsg: 'message'
-
 };
 
-describe('<OrganizationsList />', () => {
+describe('<_OrganizationsList />', () => {
+  let wrapper;
+  let api;
+
+  beforeEach(() => {
+    api = {
+      getOrganizations: jest.fn(),
+      destroyOrganization: jest.fn(),
+    };
+  });
+
   test('initially renders succesfully', () => {
-    mount(
+    mountWithContexts(
-      <MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
+      <OrganizationsList />
-        <I18nProvider>
-          <_OrganizationsList
-            match={{ path: '/organizations', url: '/organizations' }}
-            location={{ search: '', pathname: '/organizations' }}
-            handleHttpError={() => {}}
-          />
-        </I18nProvider>
-      </MemoryRouter>
     );
   });
 
-  // TODO: these tests were not correct.  will work to clean these tests up after PR
+  test('Puts 1 selected Org in state when onSelect is called.', async () => {
-  test.skip('Modal closes when close button is clicked.', async (done) => {
+    wrapper = mountWithContexts(
-    const handleClearOrgsToDelete = jest.fn();
+      <OrganizationsList />
-    const wrapper = mount(
+    ).find('OrganizationsList');
-      <MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
+    await setImmediate(async () => {
-        <I18nProvider>
+      wrapper.setState({
-          <_OrganizationsList
+        results: mockAPIOrgsList.data.results
-            match={{ path: '/organizations', url: '/organizations' }}
+      });
-            location={{ search: '', pathname: '/organizations' }}
+      wrapper.update();
-            getItems={({ data: { orgsToDelete: [{ name: 'Organization 1', id: 1 }] } })}
+    });
-            handleClearOrgsToDelete={handleClearOrgsToDelete()}
+    wrapper.instance().onSelect(mockAPIOrgsList.data.results.slice(0, 1));
-            handleHttpError={() => {}}
+    expect(wrapper.state('selected').length).toBe(1);
-          />
+  });
-        </I18nProvider>
+
-      </MemoryRouter>
+  test('Puts all Orgs in state when onSelectAll is called.', async () => {
+    wrapper = mountWithContexts(
+      <OrganizationsList />
+    ).find('OrganizationsList');
+    wrapper.setState(
+      mockAPIOrgsList.data
     );
     wrapper.find({ type: 'checkbox' }).simulate('click');
+    wrapper.instance().onSelectAll(true);
+    expect(wrapper.find('OrganizationsList').state().selected.length).toEqual(wrapper.state().results.length);
+  });
 
+  test('orgsToDelete is 0 when close modal button is clicked.', async () => {
+    wrapper = mountWithContexts(
+      <OrganizationsList />
+    );
+    wrapper.find('OrganizationsList').setState({
+      results: mockAPIOrgsList.data.results,
+      isModalOpen: mockAPIOrgsList.isModalOpen,
+      selected: mockAPIOrgsList.data.results
+    });
+    const component = wrapper.find('OrganizationsList');
     wrapper.find('DataListToolbar').prop('onOpenDeleteModal')();
-    expect(wrapper.find('OrganizationsList').state().isModalOpen).toEqual(true);
+    wrapper.update();
-    setImmediate(() => {
+    const button = wrapper.find('ModalBoxCloseButton');
-      wrapper.update();
+    button.prop('onClose')();
-      wrapper.setState({
+    wrapper.update();
-        selected: mockAPIOrgsList.data.results.map((result) => result.id),
+    expect(component.state('isModalOpen')).toBe(false);
-        orgsToDelete: mockAPIOrgsList.data.results.map((result) => result),
+    expect(component.state('selected').length).toBe(0);
-        isModalOpen: true,
+    wrapper.unmount();
-      });
+  });
 
-      wrapper.find('button[aria-label="Close"]').simulate('click');
+  test('orgsToDelete is 0 when cancel modal button is clicked.', async () => {
-      expect(handleClearOrgsToDelete).toBeCalled();
+    wrapper = mountWithContexts(
-      const list = wrapper.find('OrganizationsList');
+      <OrganizationsList />
-      expect(list.state().isModalOpen).toBe(false);
+    );
-      done();
+    wrapper.find('OrganizationsList').setState({
+      results: mockAPIOrgsList.data.results,
+      isModalOpen: mockAPIOrgsList.isModalOpen,
+      selected: mockAPIOrgsList.data.results
+    });
+    const component = wrapper.find('OrganizationsList');
+    wrapper.find('DataListToolbar').prop('onOpenDeleteModal')();
+    wrapper.update();
+    const button = wrapper.find('ModalBoxFooter').find('button').at(1);
+    button.prop('onClick')();
+    wrapper.update();
+    expect(component.state('isModalOpen')).toBe(false);
+    expect(component.state('selected').length).toBe(0);
+    wrapper.unmount();
+  });
+
+  test('api is called to delete Orgs for each org in orgsToDelete.', async () => {
+    const fetchOrganizations = jest.fn(() => wrapper.find('OrganizationsList').setState({
+      results: []
+    }));
+    wrapper = mountWithContexts(
+      <OrganizationsList
+        fetchOrganizations={fetchOrganizations}
+      />, {
+        context: { network: { api } }
+      }
+    );
+    const component = wrapper.find('OrganizationsList');
+    wrapper.find('OrganizationsList').setState({
+      results: mockAPIOrgsList.data.results,
+      isModalOpen: mockAPIOrgsList.isModalOpen,
+      selected: mockAPIOrgsList.data.results
+    });
+    wrapper.find('DataListToolbar').prop('onOpenDeleteModal')();
+    wrapper.update();
+    const button = wrapper.find('ModalBoxFooter').find('button').at(0);
+    button.simulate('click');
+    wrapper.update();
+    expect(api.destroyOrganization).toHaveBeenCalledTimes(component.state('results').length);
+  });
+
+  test('call fetchOrganizations after org(s) have been deleted', async () => {
+    const fetchOrgs = jest.spyOn(_OrganizationsList.prototype, 'fetchOrganizations');
+    const event = { preventDefault: () => { } };
+    wrapper = mountWithContexts(
+      <OrganizationsList />, {
+        context: { network: { api } }
+      }
+    );
+    wrapper.find('OrganizationsList').setState({
+      results: mockAPIOrgsList.data.results,
+      selected: mockAPIOrgsList.data.results.slice(0, 1)
+    });
+    const component = wrapper.find('OrganizationsList');
+    await component.instance().handleOrgDelete(event);
+    expect(fetchOrgs).toBeCalled();
+  });
+
+  test('url updates properly', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['organizations?order_by=name&page=1&page_size=5'],
+    });
+    wrapper = mountWithContexts(
+      <OrganizationsList />, {
+        context: { router: { history } }
+      }
+    );
+    const component = wrapper.find('OrganizationsList');
+    component.instance().updateUrl({
+      page: 1,
+      page_size: 5,
+      order_by: 'modified'
+    });
+    expect(history.location.search).toBe('?order_by=modified&page=1&page_size=5');
+  });
+
+  test('onSort sends the correct information to fetchOrganizations', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['organizations?order_by=name&page=1&page_size=5'],
+    });
+    const fetchOrganizations = jest.spyOn(_OrganizationsList.prototype, 'fetchOrganizations');
+    wrapper = mountWithContexts(
+      <OrganizationsList />, {
+        context: {
+          router: { history }
+        }
+      }
+    );
+    const component = wrapper.find('OrganizationsList');
+    component.instance().onSort('modified', 'ascending');
+    expect(fetchOrganizations).toBeCalledWith({
+      page: 1,
+      page_size: 5,
+      order_by: 'modified'
     });
   });
 
-  // TODO: these tests were not correct.  will work to clean these tests up after PR
+  test('error is thrown when org not successfully deleted from api', async () => {
-  test.skip('Orgs to delete length is 0 when all orgs are selected and Delete button is called.', async (done) => {
+    const history = createMemoryHistory({
-    const handleClearOrgsToDelete = jest.fn();
+      initialEntries: ['organizations?order_by=name&page=1&page_size=5'],
-    const handleOrgDelete = jest.fn();
+    });
-    const fetchOrganizations = jest.fn();
+    const handleError = jest.fn();
-    const wrapper = mount(
+    wrapper = mountWithContexts(
-      <MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
+      <OrganizationsList />, {
-        <I18nProvider>
+        context: {
-          <_OrganizationsList
+          router: { history }, network: { api, handleHttpError: handleError }
-            match={{ path: '/organizations', url: '/organizations' }}
+        }
-            location={{ search: '', pathname: '/organizations' }}
+      }
-            getItems={({ data: { orgsToDelete: [{ name: 'Organization 1', id: 1 }] } })}
-            handleClearOrgsToDelete={handleClearOrgsToDelete()}
-            handleOrgDelete={handleOrgDelete()}
-            fetchOrganizations={fetchOrganizations()}
-            handleHttpError={() => {}}
-          />
-        </I18nProvider>
-      </MemoryRouter>
     );
-    wrapper.find({ type: 'checkbox' }).simulate('click');
+    await setImmediate(async () => {
-    wrapper.find('button[aria-label="Delete"]').simulate('click');
-
-    wrapper.find('DataListToolbar').prop('onOpenDeleteModal')();
-    expect(wrapper.find('OrganizationsList').state().isModalOpen).toEqual(true);
-    setImmediate(() => {
-      wrapper.update();
       wrapper.setState({
-        selected: mockAPIOrgsList.data.results.map((result) => result.id),
+        results: mockAPIOrgsList.data.results,
-        orgsToDelete: mockAPIOrgsList.data.results.map((result) => result),
+        selected: [...mockAPIOrgsList.data.results].push({ id: 'a' })
-        isModalOpen: true,
       });
       wrapper.update();
-
-      const list = wrapper.find('OrganizationsList');
-      wrapper.find('button[aria-label="confirm-delete"]').simulate('click');
-      expect(list.state().orgsToDelete.length).toEqual(list.state().orgsDeleted.length);
-      expect(fetchOrganizations).toHaveBeenCalled();
-      done();
     });
+    const component = wrapper.find('OrganizationsList');
+    component.instance().handleOrgDelete();
+    expect(handleError).toBeCalled();
   });
 });

src/pages/Organizations/screens/OrganizationsList.jsx

@@ -297,10 +297,10 @@ class OrganizationsList extends Component {
                   variant="danger"
                   title={warningTitle}
                   isOpen={isModalOpen}
-                  onClose={this.handleCloseOrgDeleteModal}
+                  onClose={this.handleClearOrgDeleteModal}
                   actions={[
                     <Button variant="danger" key="delete" aria-label="confirm-delete" onClick={this.handleOrgDelete}>{i18n._(t`Delete`)}</Button>,
-                    <Button variant="secondary" key="cancel" aria-label="cancel-delete" onClick={this.handleCloseOrgDeleteModal}>{i18n._(t`Cancel`)}</Button>
+                    <Button variant="secondary" key="cancel" aria-label="cancel-delete" onClick={this.handleClearOrgDeleteModal}>{i18n._(t`Cancel`)}</Button>
                   ]}
                 >
                   {warningMsg}