1 files changed, 62 insertions, 6 deletions

diff --git a/spec/frontend/organizations/index/components/organizations_list_spec.js b/spec/frontend/organizations/index/components/organizations_list_spec.js
index 0b59c212314..7d904ee802f 100644
--- a/spec/frontend/organizations/index/components/organizations_list_spec.js
+++ b/spec/frontend/organizations/index/components/organizations_list_spec.js
@@ -1,28 +1,84 @@
+import { GlKeysetPagination } from '@gitlab/ui';
+import { omit } from 'lodash';
 import { shallowMount } from '@vue/test-utils';
 import OrganizationsList from '~/organizations/index/components/organizations_list.vue';
 import OrganizationsListItem from '~/organizations/index/components/organizations_list_item.vue';
-import { organizations } from '~/organizations/mock_data';
+import { organizations as nodes, pageInfo, pageInfoOnePage } from '~/organizations/mock_data';
 
 describe('OrganizationsList', () => {
   let wrapper;
 
-  const createComponent = () => {
+  const createComponent = ({ propsData = {} } = {}) => {
     wrapper = shallowMount(OrganizationsList, {
       propsData: {
-        organizations,
+        organizations: {
+          nodes,
+          pageInfo,
+        },
+        ...propsData,
       },
     });
   };
 
   const findAllOrganizationsListItem = () => wrapper.findAllComponents(OrganizationsListItem);
+  const findPagination = () => wrapper.findComponent(GlKeysetPagination);
 
   describe('template', () => {
-    beforeEach(() => {
+    it('renders a list item for each organization', () => {
       createComponent();
+
+      expect(findAllOrganizationsListItem()).toHaveLength(nodes.length);
     });
 
-    it('renders a list item for each organization', () => {
-      expect(findAllOrganizationsListItem()).toHaveLength(organizations.length);
+    describe('when there is one page of organizations', () => {
+      beforeEach(() => {
+        createComponent({
+          propsData: {
+            organizations: {
+              nodes,
+              pageInfo: pageInfoOnePage,
+            },
+          },
+        });
+      });
+
+      it('does not render pagination', () => {
+        expect(findPagination().exists()).toBe(false);
+      });
+    });
+
+    describe('when there are multiple pages of organizations', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders pagination', () => {
+        expect(findPagination().props()).toMatchObject(omit(pageInfo, '__typename'));
+      });
+
+      describe('when `GlKeysetPagination` emits `next` event', () => {
+        const endCursor = 'mockEndCursor';
+
+        beforeEach(() => {
+          findPagination().vm.$emit('next', endCursor);
+        });
+
+        it('emits `next` event', () => {
+          expect(wrapper.emitted('next')).toEqual([[endCursor]]);
+        });
+      });
+
+      describe('when `GlKeysetPagination` emits `prev` event', () => {
+        const startCursor = 'startEndCursor';
+
+        beforeEach(() => {
+          findPagination().vm.$emit('prev', startCursor);
+        });
+
+        it('emits `prev` event', () => {
+          expect(wrapper.emitted('prev')).toEqual([[startCursor]]);
+        });
+      });
     });
   });
 });