update OrganizsationAccess and OrganizationAccessList w mountWithContexts

__tests__/pages/Organizations/components/OrganizationAccessList.test.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { MemoryRouter } from 'react-router-dom';
-import { I18nProvider } from '@lingui/react';
 
+import { mountWithContexts } from '../../../enzymeHelpers';
 import OrganizationAccessList, { _OrganizationAccessList } from '../../../../src/pages/Organizations/components/OrganizationAccessList';
 
 const mockData = [
@@ -31,32 +29,20 @@ describe('<OrganizationAccessList />', () => {
   });
 
   test('initially renders succesfully', () => {
-    mount(
-      <I18nProvider>
-        <MemoryRouter>
-          <OrganizationAccessList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '1' } }}
-            location={{ search: '', pathname: '/organizations/1/access' }}
-            getAccessList={() => {}}
-            removeRole={() => {}}
-          />
-        </MemoryRouter>
-      </I18nProvider>
+    mountWithContexts(
+      <OrganizationAccessList
+        getAccessList={() => {}}
+        removeRole={() => {}}
+      />
     );
   });
 
   test('api response data passed to component gets set to state properly', (done) => {
-    const wrapper = mount(
-      <I18nProvider>
-        <MemoryRouter>
-          <OrganizationAccessList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
-            location={{ search: '', pathname: '/organizations/1/access' }}
-            getAccessList={() => ({ data: { count: 1, results: mockData } })}
-            removeRole={() => {}}
-          />
-        </MemoryRouter>
-      </I18nProvider>
+    const wrapper = mountWithContexts(
+      <OrganizationAccessList
+        getAccessList={() => ({ data: { count: 1, results: mockData } })}
+        removeRole={() => {}}
+      />
     ).find('OrganizationAccessList');
 
     setImmediate(() => {
@@ -67,18 +53,11 @@ describe('<OrganizationAccessList />', () => {
 
   test('onSort being passed properly to DataListToolbar component', async (done) => {
     const onSort = jest.spyOn(_OrganizationAccessList.prototype, 'onSort');
-    const wrapper = mount(
-      <I18nProvider>
-        <MemoryRouter>
-          <_OrganizationAccessList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
-            location={{ search: '', pathname: '/organizations/1/access' }}
-            getAccessList={() => ({ data: { count: 1, results: mockData } })}
-            removeRole={() => {}}
-            handleHttpError={() => {}}
-          />
-        </MemoryRouter>
-      </I18nProvider>
+    const wrapper = mountWithContexts(
+      <OrganizationAccessList
+        getAccessList={() => ({ data: { count: 1, results: mockData } })}
+        removeRole={() => {}}
+      />
     ).find('OrganizationAccessList');
     expect(onSort).not.toHaveBeenCalled();
 
@@ -91,17 +70,11 @@ describe('<OrganizationAccessList />', () => {
   });
 
   test('getTeamRoles returns empty array if dataset is missing team_id attribute', (done) => {
-    const wrapper = mount(
-      <I18nProvider>
-        <MemoryRouter>
-          <OrganizationAccessList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
-            location={{ search: '', pathname: '/organizations/1/access' }}
-            getAccessList={() => ({ data: { count: 1, results: mockData } })}
-            removeRole={() => {}}
-          />
-        </MemoryRouter>
-      </I18nProvider>
+    const wrapper = mountWithContexts(
+      <OrganizationAccessList
+        getAccessList={() => ({ data: { count: 1, results: mockData } })}
+        removeRole={() => {}}
+      />
     ).find('OrganizationAccessList');
 
     setImmediate(() => {
@@ -117,18 +90,11 @@ describe('<OrganizationAccessList />', () => {
     const handleWarning = jest.spyOn(_OrganizationAccessList.prototype, 'handleWarning');
     const confirmDelete = jest.spyOn(_OrganizationAccessList.prototype, 'confirmDelete');
     const removeRole = jest.spyOn(_OrganizationAccessList.prototype, 'removeAccessRole');
-    const wrapper = mount(
-      <I18nProvider>
-        <MemoryRouter>
-          <_OrganizationAccessList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
-            location={{ search: '', pathname: '/organizations/1/access' }}
-            getAccessList={() => ({ data: { count: 1, results: mockData } })}
-            removeRole={() => {}}
-            handleHttpError={() => {}}
-          />
-        </MemoryRouter>
-      </I18nProvider>
+    const wrapper = mountWithContexts(
+      <OrganizationAccessList
+        getAccessList={() => ({ data: { count: 1, results: mockData } })}
+        removeRole={() => {}}
+      />
     ).find('OrganizationAccessList');
     expect(handleWarning).not.toHaveBeenCalled();
     expect(confirmDelete).not.toHaveBeenCalled();
@@ -147,17 +113,11 @@ describe('<OrganizationAccessList />', () => {
   });
 
   test('state is set appropriately when a user tries deleting a role', (done) => {
-    const wrapper = mount(
-      <I18nProvider>
-        <MemoryRouter>
-          <_OrganizationAccessList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
-            location={{ search: '', pathname: '/organizations/1/access' }}
-            getAccessList={() => ({ data: { count: 1, results: mockData } })}
-            removeRole={() => {}}
-          />
-        </MemoryRouter>
-      </I18nProvider>
+    const wrapper = mountWithContexts(
+      <OrganizationAccessList
+        getAccessList={() => ({ data: { count: 1, results: mockData } })}
+        removeRole={() => {}}
+      />
     ).find('OrganizationAccessList');
 
     setImmediate(() => {

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

@@ -1,20 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { MemoryRouter } from 'react-router-dom';
-import { I18nProvider } from '@lingui/react';
+import { mountWithContexts } from '../../../../enzymeHelpers';
 import Organization from '../../../../../src/pages/Organizations/screens/Organization/Organization';
 
 describe('<OrganizationView />', () => {
   test('initially renders succesfully', () => {
-    mount(
-      <I18nProvider>
-        <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-          <Organization
-            match={{ path: '/organizations/:id', url: '/organizations/1' }}
-            location={{ search: '', pathname: '/organizations/1' }}
-          />
-        </MemoryRouter>
-      </I18nProvider>
-    );
+    mountWithContexts(<Organization />);
   });
 });

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

@@ -1,51 +1,26 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { MemoryRouter } from 'react-router-dom';
-
+import { mountWithContexts } from '../../../../enzymeHelpers';
 import OrganizationAccess from '../../../../../src/pages/Organizations/screens/Organization/OrganizationAccess';
 
-const mockAPIAccessList = {
-  foo: 'bar',
-};
-
-const mockGetOrganizationAccessList = () => Promise.resolve(mockAPIAccessList);
-
-const mockResponse = {
-  status: 'success',
-};
-
-const mockRemoveRole = () => Promise.resolve(mockResponse);
-
 describe('<OrganizationAccess />', () => {
   test('initially renders succesfully', () => {
-    mount(
-      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-        <OrganizationAccess
-          match={{ path: '/organizations/:id/access', url: '/organizations/1/access', params: { id: 1 } }}
-          location={{ search: '', pathname: '/organizations/1/access' }}
-          params={{}}
-          api={{
-            getOrganizationAccessList: jest.fn(),
-          }}
-        />
-      </MemoryRouter>
-    );
+    mountWithContexts(<OrganizationAccess />);
   });
 
   test('passed methods as props are called appropriately', async () => {
-    const wrapper = mount(
-      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-        <OrganizationAccess
-          match={{ path: '/organizations/:id/access', url: '/organizations/1/access', params: { id: 1 } }}
-          location={{ search: '', pathname: '/organizations/1/access' }}
-          params={{}}
-          api={{
-            getOrganizationAccessList: mockGetOrganizationAccessList,
-            disassociate: mockRemoveRole
-          }}
-        />
-      </MemoryRouter>
-    ).find('OrganizationAccess');
+    const mockAPIAccessList = {
+      foo: 'bar',
+    };
+    const mockResponse = {
+      status: 'success',
+    };
+    const wrapper = mountWithContexts(<OrganizationAccess />, { context: { network: {
+      api: {
+        getOrganizationAccessList: () => Promise.resolve(mockAPIAccessList),
+        disassociate: () => Promise.resolve(mockResponse)
+      },
+      handleHttpError: () => {}
+    } } }).find('OrganizationAccess');
     const accessList = await wrapper.instance().getOrgAccessList();
     expect(accessList).toEqual(mockAPIAccessList);
     const resp = await wrapper.instance().removeRole(2, 3, 'users');

src/pages/Organizations/components/OrganizationAccessList.jsx

@@ -10,7 +10,8 @@ import { I18n, i18nMark } from '@lingui/react';
 import { t, Trans } from '@lingui/macro';
 
 import {
-  Link
+  Link,
+  withRouter
 } from 'react-router-dom';
 
 import { withNetwork } from '../../../contexts/Network';
@@ -160,8 +161,8 @@ class OrganizationAccessList extends React.Component {
   }
 
   getQueryParams (overrides = {}) {
-    const { location } = this.props;
-    const { search } = location;
+    const { history } = this.props;
+    const { search } = history.location;
 
     const searchParams = parseQueryString(search.substring(1));
 
@@ -422,4 +423,4 @@ OrganizationAccessList.propTypes = {
 };
 
 export { OrganizationAccessList as _OrganizationAccessList };
-export default withNetwork(OrganizationAccessList);
+export default withRouter(withNetwork(OrganizationAccessList));

src/pages/Organizations/screens/Organization/Organization.jsx

@@ -148,11 +148,7 @@ class Organization extends Component {
             <Route
               path="/organizations/:id/access"
               render={() => (
-                <OrganizationAccess
-                  match={match}
-                  location={location}
-                  history={history}
-                />
+                <OrganizationAccess />
               )}
             />
             <Route

src/pages/Organizations/screens/Organization/OrganizationAccess.jsx

@@ -23,19 +23,10 @@ class OrganizationAccess extends React.Component {
   }
 
   render () {
-    const {
-      location,
-      match,
-      history,
-    } = this.props;
-
     return (
       <OrganizationAccessList
         getAccessList={this.getOrgAccessList}
         removeRole={this.removeRole}
-        match={match}
-        location={location}
-        history={history}
       />
     );
   }