1 files changed, 64 insertions, 20 deletions

diff --git a/spec/frontend/organizations/users/components/app_spec.js b/spec/frontend/organizations/users/components/app_spec.js
index b30fd984099..30380bcf6a5 100644
--- a/spec/frontend/organizations/users/components/app_spec.js
+++ b/spec/frontend/organizations/users/components/app_spec.js
@@ -4,9 +4,16 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
+import { ORGANIZATION_USERS_PER_PAGE } from '~/organizations/constants';
 import organizationUsersQuery from '~/organizations/users/graphql/organization_users.query.graphql';
 import OrganizationsUsersApp from '~/organizations/users/components/app.vue';
-import { MOCK_ORGANIZATION_GID, MOCK_USERS } from '../mock_data';
+import OrganizationsUsersView from '~/organizations/users/components/users_view.vue';
+import {
+  MOCK_ORGANIZATION_GID,
+  MOCK_USERS,
+  MOCK_USERS_FORMATTED,
+  MOCK_PAGE_INFO,
+} from '../mock_data';
 
 jest.mock('~/alert');
 
@@ -15,10 +22,11 @@ Vue.use(VueApollo);
 const mockError = new Error();
 
 const loadingResolver = jest.fn().mockReturnValue(new Promise(() => {}));
-const successfulResolver = (nodes) =>
-  jest.fn().mockResolvedValue({
-    data: { organization: { id: 1, organizationUsers: { nodes } } },
+const successfulResolver = (nodes, pageInfo = {}) => {
+  return jest.fn().mockResolvedValue({
+    data: { organization: { id: 1, organizationUsers: { nodes, pageInfo } } },
   });
+};
 const errorResolver = jest.fn().mockRejectedValueOnce(mockError);
 
 describe('OrganizationsUsersApp', () => {
@@ -40,31 +48,31 @@ describe('OrganizationsUsersApp', () => {
     mockApollo = null;
   });
 
-  const findOrganizationUsersLoading = () => wrapper.findByText('Loading');
-  const findOrganizationUsers = () => wrapper.findByTestId('organization-users');
+  const findOrganizationUsersView = () => wrapper.findComponent(OrganizationsUsersView);
 
   describe.each`
-    description                                      | mockResolver                      | loading  | userData      | error
-    ${'when API call is loading'}                    | ${loadingResolver}                | ${true}  | ${[]}         | ${false}
-    ${'when API returns successful with results'}    | ${successfulResolver(MOCK_USERS)} | ${false} | ${MOCK_USERS} | ${false}
-    ${'when API returns successful without results'} | ${successfulResolver([])}         | ${false} | ${[]}         | ${false}
-    ${'when API returns error'}                      | ${errorResolver}                  | ${false} | ${[]}         | ${true}
-  `('$description', ({ mockResolver, loading, userData, error }) => {
+    description                                                     | mockResolver                                      | loading  | userData                | pageInfo          | error
+    ${'when API call is loading'}                                   | ${loadingResolver}                                | ${true}  | ${[]}                   | ${{}}             | ${false}
+    ${'when API returns successful with one page of results'}       | ${successfulResolver(MOCK_USERS)}                 | ${false} | ${MOCK_USERS_FORMATTED} | ${{}}             | ${false}
+    ${'when API returns successful with multiple pages of results'} | ${successfulResolver(MOCK_USERS, MOCK_PAGE_INFO)} | ${false} | ${MOCK_USERS_FORMATTED} | ${MOCK_PAGE_INFO} | ${false}
+    ${'when API returns successful without results'}                | ${successfulResolver([])}                         | ${false} | ${[]}                   | ${{}}             | ${false}
+    ${'when API returns error'}                                     | ${errorResolver}                                  | ${false} | ${[]}                   | ${{}}             | ${true}
+  `('$description', ({ mockResolver, loading, userData, pageInfo, error }) => {
     beforeEach(async () => {
       createComponent(mockResolver);
       await waitForPromises();
     });
 
-    it(`does ${
-      loading ? '' : 'not '
-    }render the organization users view with loading placeholder`, () => {
-      expect(findOrganizationUsersLoading().exists()).toBe(loading);
+    it(`renders OrganizationUsersView with loading prop set to ${loading}`, () => {
+      expect(findOrganizationUsersView().props('loading')).toBe(loading);
     });
 
-    it(`renders the organization users view with ${
-      userData.length ? 'correct' : 'empty'
-    } users array raw data`, () => {
-      expect(JSON.parse(findOrganizationUsers().text())).toStrictEqual(userData);
+    it('renders OrganizationUsersView with correct users prop', () => {
+      expect(findOrganizationUsersView().props('users')).toStrictEqual(userData);
+    });
+
+    it('renders OrganizationUsersView with correct pageInfo prop', () => {
+      expect(findOrganizationUsersView().props('pageInfo')).toStrictEqual(pageInfo);
     });
 
     it(`does ${error ? '' : 'not '}render an error message`, () => {
@@ -78,4 +86,40 @@ describe('OrganizationsUsersApp', () => {
         : expect(createAlert).not.toHaveBeenCalled();
     });
   });
+
+  describe('Pagination', () => {
+    const mockResolver = successfulResolver(MOCK_USERS, MOCK_PAGE_INFO);
+
+    beforeEach(async () => {
+      createComponent(mockResolver);
+      await waitForPromises();
+      mockResolver.mockClear();
+    });
+
+    it('handleNextPage calls organizationUsersQuery with correct pagination data', async () => {
+      findOrganizationUsersView().vm.$emit('next');
+      await waitForPromises();
+
+      expect(mockResolver).toHaveBeenCalledWith({
+        id: MOCK_ORGANIZATION_GID,
+        before: '',
+        after: MOCK_PAGE_INFO.endCursor,
+        first: ORGANIZATION_USERS_PER_PAGE,
+        last: null,
+      });
+    });
+
+    it('handlePrevPage calls organizationUsersQuery with correct pagination data', async () => {
+      findOrganizationUsersView().vm.$emit('prev');
+      await waitForPromises();
+
+      expect(mockResolver).toHaveBeenCalledWith({
+        id: MOCK_ORGANIZATION_GID,
+        before: MOCK_PAGE_INFO.startCursor,
+        after: '',
+        first: ORGANIZATION_USERS_PER_PAGE,
+        last: null,
+      });
+    });
+  });
 });