Add unit test for Access List component.

__tests__/components/AccessList.test.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
+import { I18nProvider } from '@lingui/react';
+
+import AccessList from '../../src/components/AccessList';
+
+const mockResults = [
+  {
+    id: 1,
+    username: 'boo',
+    url: '/foo/bar/',
+    first_name: 'john',
+    last_name: 'smith',
+    summary_fields: {
+      foo: [
+        {
+          role: {
+            name: 'foo',
+          }
+        }
+      ]
+    }
+  }
+];
+
+const mockUserRoles = [
+  {
+    id: 2,
+    name: 'bar',
+  }
+];
+
+const mockUserTeams = [
+  {
+    id: 3,
+  }
+];
+
+const mockTeamRoles = [
+  {
+    id: 4,
+    name: 'baz',
+  }
+];
+
+describe('<AccessList />', () => {
+  test('initially renders succesfully', () => {
+    mount(
+      <I18nProvider>
+        <MemoryRouter>
+          <AccessList
+            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '1' } }}
+            location={{ search: '', pathname: '/organizations/1/access' }}
+            getAccessList={() => {}}
+            getUserRoles={() => {}}
+            getUserTeams={() => {}}
+            getTeamRoles={() => {}}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+  });
+
+  test('api response data passed to component gets set to state properly', (done) => {
+    const wrapper = mount(
+      <I18nProvider>
+        <MemoryRouter>
+          <AccessList
+            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
+            location={{ search: '', pathname: '/organizations/1/access' }}
+            getAccessList={() => ({ data: { count: 1, results: mockResults } })}
+            getUserRoles={() => ({ data: { results: mockUserRoles } })}
+            getUserTeams={() => ({ data: { results: mockUserTeams } })}
+            getTeamRoles={() => ({ data: { results: mockTeamRoles } })}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    ).find('AccessList');
+
+    setImmediate(() => {
+      expect(wrapper.state().results).toEqual(mockResults);
+      done();
+    });
+  });
+
+  test('onExpand and onCompact methods called when user clicks on Expand and Compact icons respectively', async (done) => {
+    const onExpand = jest.spyOn(AccessList.prototype, 'onExpand');
+    const onCompact = jest.spyOn(AccessList.prototype, 'onCompact');
+    const wrapper = mount(
+      <I18nProvider>
+        <MemoryRouter>
+          <AccessList
+            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
+            location={{ search: '', pathname: '/organizations/1/access' }}
+            getAccessList={() => ({ data: { count: 1, results: mockResults } })}
+            getUserRoles={() => ({ data: { results: mockUserRoles } })}
+            getUserTeams={() => ({ data: { results: mockUserTeams } })}
+            getTeamRoles={() => ({ data: { results: mockTeamRoles } })}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    ).find('AccessList');
+    expect(onExpand).not.toHaveBeenCalled();
+    expect(onCompact).not.toHaveBeenCalled();
+
+    setImmediate(() => {
+      const rendered = wrapper.update();
+      rendered.find('button[aria-label="Expand"]').simulate('click');
+      rendered.find('button[aria-label="Collapse"]').simulate('click');
+      expect(onExpand).toHaveBeenCalled();
+      expect(onCompact).toHaveBeenCalled();
+      done();
+    });
+  });
+
+  test('onSort being passed properly to DataListToolbar component', async (done) => {
+    const onSort = jest.spyOn(AccessList.prototype, 'onSort');
+    const wrapper = mount(
+      <I18nProvider>
+        <MemoryRouter>
+          <AccessList
+            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
+            location={{ search: '', pathname: '/organizations/1/access' }}
+            getAccessList={() => ({ data: { count: 1, results: mockResults } })}
+            getUserRoles={() => ({ data: { results: mockUserRoles } })}
+            getUserTeams={() => ({ data: { results: mockUserTeams } })}
+            getTeamRoles={() => ({ data: { results: mockTeamRoles } })}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    ).find('AccessList');
+    expect(onSort).not.toHaveBeenCalled();
+
+    setImmediate(() => {
+      const rendered = wrapper.update();
+      rendered.find('button[aria-label="Sort"]').simulate('click');
+      expect(onSort).toHaveBeenCalled();
+      done();
+    });
+  });
+});

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
+
+import OrganizationAccess from '../../../../../src/pages/Organizations/screens/Organization/OrganizationAccess';
+
+const mockAPIAccessList = {
+  foo: 'bar',
+};
+const mockAPIRoles = {
+  bar: 'baz',
+};
+const mockAPITeams = {
+  qux: 'quux',
+};
+const mockAPITeamRoles = {
+  quuz: 'quuz',
+};
+
+const mockGetOrganzationAccessList = jest.fn(() => (
+  Promise.resolve(mockAPIAccessList)
+));
+
+const mockGetUserRoles = jest.fn(() => (
+  Promise.resolve(mockAPIRoles)
+));
+
+const mockGetUserTeams = jest.fn(() => (
+  Promise.resolve(mockAPITeams)
+));
+
+const mockGetTeamRoles = jest.fn(() => (
+  Promise.resolve(mockAPITeamRoles)
+));
+
+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={{
+            getOrganzationAccessList: jest.fn(),
+            getUserRoles: jest.fn(),
+            getUserTeams: jest.fn(),
+            getTeamRoles: jest.fn(),
+          }}
+        />
+      </MemoryRouter>
+    );
+  });
+
+  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={{
+            getOrganzationAccessList: mockGetOrganzationAccessList,
+            getUserRoles: mockGetUserRoles,
+            getUserTeams: mockGetUserTeams,
+            getTeamRoles: mockGetTeamRoles,
+          }}
+        />
+      </MemoryRouter>
+    ).find('OrganizationAccess');
+    const accessList = await wrapper.instance().getOrgAccessList();
+    expect(accessList).toEqual(mockAPIAccessList);
+    const userRoles = await wrapper.instance().getUserRoles();
+    expect(userRoles).toEqual(mockAPIRoles);
+    const userTeams = await wrapper.instance().getUserTeams();
+    expect(userTeams).toEqual(mockAPITeams);
+    const teamRoles = await wrapper.instance().getTeamRoles();
+    expect(teamRoles).toEqual(mockAPITeamRoles);
+  });
+});