1 files changed, 115 insertions, 0 deletions
diff --git a/spec/frontend/ci/runner/components/runner_pagination_spec.js b/spec/frontend/ci/runner/components/runner_pagination_spec.js
new file mode 100644
index 00000000000..f835ee4514d
--- /dev/null
+++ b/spec/frontend/ci/runner/components/runner_pagination_spec.js
@@ -0,0 +1,115 @@
+import { GlKeysetPagination } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import RunnerPagination from '~/ci/runner/components/runner_pagination.vue';
+
+const mockStartCursor = 'START_CURSOR';
+const mockEndCursor = 'END_CURSOR';
+
+describe('RunnerPagination', () => {
+  let wrapper;
+
+  const findPagination = () => wrapper.findComponent(GlKeysetPagination);
+
+  const createComponent = (propsData = {}) => {
+    wrapper = shallowMount(RunnerPagination, {
+      propsData,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('When in between pages', () => {
+    const mockPageInfo = {
+      startCursor: mockStartCursor,
+      endCursor: mockEndCursor,
+      hasPreviousPage: true,
+      hasNextPage: true,
+    };
+
+    beforeEach(() => {
+      createComponent({
+        pageInfo: mockPageInfo,
+      });
+    });
+
+    it('Contains the current page information', () => {
+      expect(findPagination().props()).toMatchObject(mockPageInfo);
+    });
+
+    it('Goes to the prev page', () => {
+      findPagination().vm.$emit('prev');
+
+      expect(wrapper.emitted('input')[0]).toEqual([
+        {
+          before: mockStartCursor,
+        },
+      ]);
+    });
+
+    it('Goes to the next page', () => {
+      findPagination().vm.$emit('next');
+
+      expect(wrapper.emitted('input')[0]).toEqual([
+        {
+          after: mockEndCursor,
+        },
+      ]);
+    });
+  });
+
+  describe.each`
+    page       | hasPreviousPage | hasNextPage
+    ${'first'} | ${false}        | ${true}
+    ${'last'}  | ${true}         | ${false}
+  `('When on the $page page', ({ page, hasPreviousPage, hasNextPage }) => {
+    const mockPageInfo = {
+      startCursor: mockStartCursor,
+      endCursor: mockEndCursor,
+      hasPreviousPage,
+      hasNextPage,
+    };
+
+    beforeEach(() => {
+      createComponent({
+        pageInfo: mockPageInfo,
+      });
+    });
+
+    it(`Contains the ${page} page information`, () => {
+      expect(findPagination().props()).toMatchObject(mockPageInfo);
+    });
+  });
+
+  describe('When no other pages', () => {
+    beforeEach(() => {
+      createComponent({
+        pageInfo: {
+          hasPreviousPage: false,
+          hasNextPage: false,
+        },
+      });
+    });
+
+    it('is not shown', () => {
+      expect(findPagination().exists()).toBe(false);
+    });
+  });
+
+  describe('When adding more attributes', () => {
+    beforeEach(() => {
+      createComponent({
+        pageInfo: {
+          hasPreviousPage: true,
+          hasNextPage: false,
+        },
+        disabled: true,
+      });
+    });
+
+    it('attributes are passed', () => {
+      expect(findPagination().props('disabled')).toBe(true);
+    });
+  });
+});