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);
+  });
+});

src/components/AccessList/Access.list.jsx

@@ -14,8 +14,8 @@ import {
 } from 'react-router-dom';
 
 import BasicChip from '../BasicChip/BasicChip';
-import Pagination from '../Pagination/Pagination';
+import Pagination from '../Pagination';
-import DataListToolbar from '../DataListToolbar/DataListToolbar';
+import DataListToolbar from '../DataListToolbar';
 
 import {
   parseQueryString,
@@ -91,7 +91,6 @@ class AccessList extends React.Component {
       page,
       page_size,
       count: null,
-      results: [],
       sortOrder: 'ascending',
       sortedColumnKey: 'username',
       isCompact: true,
@@ -107,19 +106,22 @@ class AccessList extends React.Component {
 
   componentDidMount () {
     const queryParams = this.getQueryParams();
-
+    try {
-    this.fetchOrgAccessList(queryParams);
+      this.fetchOrgAccessList(queryParams);
+    } catch (error) {
+      this.setState({ error });
+    }
   }
 
-  onExpand = () => {
+  onExpand () {
     this.setState({ isCompact: false });
   }
 
-  onCompact = () => {
+  onCompact () {
     this.setState({ isCompact: true });
   }
 
-  onSetPage = (pageNumber, pageSize) => {
+  onSetPage (pageNumber, pageSize) {
     const { sortOrder, sortedColumnKey } = this.state;
     const page = parseInt(pageNumber, 10);
     const page_size = parseInt(pageSize, 10);
@@ -132,18 +134,9 @@ class AccessList extends React.Component {
     const queryParams = this.getQueryParams({ page, page_size, order_by });
 
     this.fetchOrgAccessList(queryParams);
-  };
-
-  getQueryParams (overrides = {}) {
-    const { location } = this.props;
-    const { search } = location;
-
-    const searchParams = parseQueryString(search.substring(1));
-
-    return Object.assign({}, this.defaultParams, searchParams, overrides);
   }
 
-  onSort = (sortedColumnKey, sortOrder) => {
+  onSort (sortedColumnKey, sortOrder) {
     const { page_size } = this.state;
 
     let order_by = sortedColumnKey;
@@ -155,7 +148,16 @@ class AccessList extends React.Component {
     const queryParams = this.getQueryParams({ order_by, page_size });
 
     this.fetchOrgAccessList(queryParams);
-  };
+  }
+
+  getQueryParams (overrides = {}) {
+    const { location } = this.props;
+    const { search } = location;
+
+    const searchParams = parseQueryString(search.substring(1));
+
+    return Object.assign({}, this.defaultParams, searchParams, overrides);
+  }
 
   async fetchOrgAccessList (queryParams) {
     const { match, getAccessList, getUserRoles, getTeamRoles, getUserTeams } = this.props;
@@ -186,7 +188,7 @@ class AccessList extends React.Component {
         results,
       };
 
-      results.map(async result => {
+      results.forEach(async result => {
         result.user_roles = [];
         result.team_roles = [];
         // Grab each Role Type and set as a top-level value
@@ -197,7 +199,7 @@ class AccessList extends React.Component {
         // Grab User Roles and set as a top-level value
         try {
           const resp = await getUserRoles(result.id);
-          const roles = resp.data.results;
+          const roles = resp.data.results || [];
           roles.forEach(role => {
             result.user_roles.push(role);
           });
@@ -209,14 +211,18 @@ class AccessList extends React.Component {
         // Grab Team Roles and set as a top-level value
         try {
           const team_data = await getUserTeams(result.id);
-          const teams = team_data.data.results;
+          const teams = team_data.data.results || [];
           teams.forEach(async team => {
-            let team_roles = await getTeamRoles(team.id);
+            try {
-            team_roles = team_roles.data.results;
+              let team_roles = await getTeamRoles(team.id);
-            team_roles.forEach(role => {
+              team_roles = team_roles.data.results || [];
-              result.team_roles.push(role);
+              team_roles.forEach(role => {
-            });
+                result.team_roles.push(role);
-            this.setState(stateToUpdate);
+              });
+              this.setState(stateToUpdate);
+            } catch (error) {
+              this.setState({ error });
+            }
           });
         } catch (error) {
           this.setState({ error });
@@ -239,85 +245,90 @@ class AccessList extends React.Component {
       sortOrder,
       isCompact,
     } = this.state;
-
-    if (!results) {
-      return null;
-    }
     return (
-      <I18n>
+      <Fragment>
-        {({ i18n }) => (
+        {!results && (
+          <h1>Loading...</h1> // TODO: replace with something nicer
+        )}
+        {results && (
           <Fragment>
             <DataListToolbar
               sortedColumnKey={sortedColumnKey}
               sortOrder={sortOrder}
               columns={this.columns}
-              onSearch={() => {}}
+              onSearch={() => { }}
               onSort={this.onSort}
               onCompact={this.onCompact}
               onExpand={this.onExpand}
               isCompact={isCompact}
               showExpandCollapse
             />
-            <DataList aria-label={i18n._(t`Access List`)}>
+            <Fragment>
-              {results.map(result => (
+              <I18n>
-                <DataListItem aria-labelledby={i18n._(t`access-list-item`)} key={result.id}>
+                {({ i18n }) => (
-                  <DataListCell>
+                  <DataList aria-label={i18n._(t`Access List`)}>
-                    <Detail
+                    {results.map(result => (
-                      label={result.username}
+                      <DataListItem aria-labelledby={i18n._(t`access-list-item`)} key={result.id}>
-                      value={result.roleType}
+                        <DataListCell>
-                      url={result.url}
+                          <Detail
-                      isBadge
+                            label={result.username}
-                    />
+                            value={result.roleType}
-                    {result.first_name || result.last_name ? (
+                            url={result.url}
-                      <Detail
+                            isBadge
-                        label={i18n._(t`Name`)}
-                        value={`${result.first_name} ${result.last_name}`}
-                        url={null}
-                        customStyles={isCompact ? hiddenStyle : null}
-                      />
-                    ) : (
-                      null
-                    )}
-                  </DataListCell>
-                  <DataListCell>
-                    <Detail
-                      label=" "
-                      value=" "
-                      url={null}
-                      customStyles={isCompact ? hiddenStyle : null}
-                    />
-                    {result.user_roles.length > 0 && (
-                      <ul style={isCompact
-                        ? { ...userRolesWrapperStyle, ...hiddenStyle }
-                        : userRolesWrapperStyle}
-                      >
-                        <Text component={TextVariants.h6} style={detailLabelStyle}>{i18n._(t`User Roles`)}</Text>
-                        {result.user_roles.map(role => (
-                          <BasicChip
-                            key={role.id}
-                            text={role.name}
                           />
-                        ))}
+                          {result.first_name || result.last_name ? (
-                      </ul>
+                            <Detail
-                    )}
+                              label={i18n._(t`Name`)}
-                    {result.team_roles.length > 0 && (
+                              value={`${result.first_name} ${result.last_name}`}
-                      <ul style={isCompact
+                              url={null}
-                        ? { ...userRolesWrapperStyle, ...hiddenStyle }
+                              customStyles={isCompact ? hiddenStyle : null}
-                        : userRolesWrapperStyle}
+                            />
-                      >
+                          ) : (
-                        <Text component={TextVariants.h6} style={detailLabelStyle}>{i18n._(t`Team Roles`)}</Text>
+                            null
-                        {result.team_roles.map(role => (
+                          )}
-                          <BasicChip
+                        </DataListCell>
-                            key={role.id}
+                        <DataListCell>
-                            text={role.name}
+                          <Detail
+                            label=" "
+                            value=" "
+                            url={null}
+                            customStyles={isCompact ? hiddenStyle : null}
                           />
-                        ))}
+                          {result.user_roles.length > 0 && (
-                      </ul>
+                            <ul style={isCompact
-                    )}
+                              ? { ...userRolesWrapperStyle, ...hiddenStyle }
-                  </DataListCell>
+                              : userRolesWrapperStyle}
-                </DataListItem>
+                            >
-              ))}
+                              <Text component={TextVariants.h6} style={detailLabelStyle}>{i18n._(t`User Roles`)}</Text>
-            </DataList>
+                              {result.user_roles.map(role => (
+                                <BasicChip
+                                  key={role.id}
+                                  text={role.name}
+                                />
+                              ))}
+                            </ul>
+                          )}
+                          {result.team_roles.length > 0 && (
+                            <ul style={isCompact
+                              ? { ...userRolesWrapperStyle, ...hiddenStyle }
+                              : userRolesWrapperStyle}
+                            >
+                              <Text component={TextVariants.h6} style={detailLabelStyle}>{i18n._(t`Team Roles`)}</Text>
+                              {result.team_roles.map(role => (
+                                <BasicChip
+                                  key={role.id}
+                                  text={role.name}
+                                />
+                              ))}
+                            </ul>
+                          )}
+                        </DataListCell>
+                      </DataListItem>
+                    ))}
+                  </DataList>
+                )}
+              </I18n>
+            </Fragment>
             <Pagination
               count={count}
               page={page}
@@ -325,10 +336,11 @@ class AccessList extends React.Component {
               page_size={page_size}
               onSetPage={this.onSetPage}
             />
-            { error ? <div>{error}</div> : '' }
+            {error ? <div>{error}</div> : ''}
           </Fragment>
         )}
-      </I18n>
+      </Fragment>
+
     );
   }
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import AccessList from '../../../../components/AccessList/Access.list';
+import AccessList from '../../../../components/AccessList';
 
 class OrganizationAccess extends React.Component {
   constructor (props) {