158 paginated data list (#180)

* working: rename OrganizationTeamsList to PaginatedDataList

* convert org notifications list fully to PaginatedDataList

* update NotificationList tests

* refactor org access to use PaginatedDataList

* update tests for org access refactor; fix pagination & sorting

* restore Add Role functionality to Org roles

* fix displayed text when list of items is empty

* preserve query params when navigating through pagination

* fix bugs after RBAC rebase

* fix lint errors, fix add org access button

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

@@ -1,34 +1,173 @@
 import React from 'react';
 import { mountWithContexts } from '../../../../enzymeHelpers';
 import OrganizationAccess from '../../../../../src/pages/Organizations/screens/Organization/OrganizationAccess';
+import { sleep } from '../../../../testUtils';
 
 describe('<OrganizationAccess />', () => {
+  let network;
   const organization = {
     id: 1,
     name: 'Default'
   };
-  test('initially renders succesfully', () => {
-    mountWithContexts(<OrganizationAccess organization={organization} />);
+
+  const data = {
+    count: 2,
+    results: [{
+      id: 1,
+      username: 'joe',
+      url: '/foo',
+      first_name: 'joe',
+      last_name: 'smith',
+      summary_fields: {
+        direct_access: [{
+          role: {
+            id: 1,
+            name: 'Member',
+            resource_name: 'Org',
+            resource_type: 'organization',
+            user_capabilities: { unattach: true },
+          }
+        }],
+        indirect_access: [],
+      }
+    }, {
+      id: 2,
+      username: 'jane',
+      url: '/bar',
+      first_name: 'jane',
+      last_name: 'brown',
+      summary_fields: {
+        direct_access: [{
+          role: {
+            id: 3,
+            name: 'Member',
+            resource_name: 'Org',
+            resource_type: 'organization',
+            team_id: 5,
+            team_name: 'The Team',
+            user_capabilities: { unattach: true },
+          }
+        }],
+        indirect_access: [],
+      }
+    }]
+  };
+
+  beforeEach(() => {
+    network = {
+      api: {
+        getOrganizationAccessList: jest.fn()
+          .mockReturnValue(Promise.resolve({ data })),
+        disassociateTeamRole: jest.fn(),
+        disassociateUserRole: jest.fn(),
+        toJSON: () => '/api/',
+      },
+    };
   });
 
-  test('passed methods as props are called appropriately', async () => {
-    const mockAPIAccessList = {
-      foo: 'bar',
-    };
-    const mockResponse = {
-      status: 'success',
-    };
-    const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />,
-      { 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');
-    expect(resp).toEqual(mockResponse);
+  test.only('initially renders succesfully', () => {
+    const wrapper = mountWithContexts(
+      <OrganizationAccess id={1} organization={organization} />,
+      { context: { network } }
+    );
+    expect(wrapper.find('OrganizationAccess')).toMatchSnapshot();
+  });
+
+  test('should fetch and display access records on mount', async () => {
+    const wrapper = mountWithContexts(
+      <OrganizationAccess id={1} />,
+      { context: { network } }
+    );
+    await sleep(0);
+    wrapper.update();
+    expect(network.api.getOrganizationAccessList).toHaveBeenCalled();
+    expect(wrapper.find('OrganizationAccess').state('isInitialized')).toBe(true);
+    expect(wrapper.find('PaginatedDataList').prop('items')).toEqual(data.results);
+    expect(wrapper.find('OrganizationAccessItem')).toHaveLength(2);
+  });
+
+  test('should open confirmation dialog when deleting role', async () => {
+    const wrapper = mountWithContexts(
+      <OrganizationAccess id={1} />,
+      { context: { network } }
+    );
+    await sleep(0);
+    wrapper.update();
+
+    const button = wrapper.find('ChipButton').at(0);
+    button.prop('onClick')();
+    wrapper.update();
+
+    const component = wrapper.find('OrganizationAccess');
+    expect(component.state('roleToDelete'))
+      .toEqual(data.results[0].summary_fields.direct_access[0].role);
+    expect(component.state('roleToDeleteAccessRecord'))
+      .toEqual(data.results[0]);
+    expect(component.find('DeleteRoleConfirmationModal')).toHaveLength(1);
+  });
+
+  it('should close dialog when cancel button clicked', async () => {
+    const wrapper = mountWithContexts(
+      <OrganizationAccess id={1} />,
+      { context: { network } }
+    );
+    await sleep(0);
+    wrapper.update();
+    const button = wrapper.find('ChipButton').at(0);
+    button.prop('onClick')();
+    wrapper.update();
+
+    wrapper.find('DeleteRoleConfirmationModal').prop('onCancel')();
+    const component = wrapper.find('OrganizationAccess');
+    expect(component.state('roleToDelete')).toBeNull();
+    expect(component.state('roleToDeleteAccessRecord')).toBeNull();
+    expect(network.api.disassociateTeamRole).not.toHaveBeenCalled();
+    expect(network.api.disassociateUserRole).not.toHaveBeenCalled();
+  });
+
+  it('should delete user role', async () => {
+    const wrapper = mountWithContexts(
+      <OrganizationAccess id={1} />,
+      { context: { network } }
+    );
+    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(network.api.disassociateTeamRole).not.toHaveBeenCalled();
+    expect(network.api.disassociateUserRole).toHaveBeenCalledWith(1, 1);
+    expect(network.api.getOrganizationAccessList).toHaveBeenCalledTimes(2);
+  });
+
+  it('should delete team role', async () => {
+    const wrapper = mountWithContexts(
+      <OrganizationAccess id={1} />,
+      { context: { network } }
+    );
+    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(network.api.disassociateTeamRole).toHaveBeenCalledWith(5, 3);
+    expect(network.api.disassociateUserRole).not.toHaveBeenCalled();
+    expect(network.api.getOrganizationAccessList).toHaveBeenCalledTimes(2);
   });
 });