import { GlPagination } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; import RunnerPagination from '~/runner/components/runner_pagination.vue'; const mockStartCursor = 'START_CURSOR'; const mockEndCursor = 'END_CURSOR'; describe('RunnerPagination', () => { let wrapper; const findPagination = () => wrapper.findComponent(GlPagination); const createComponent = ({ page = 1, hasPreviousPage = false, hasNextPage = true } = {}) => { wrapper = mount(RunnerPagination, { propsData: { value: { page, }, pageInfo: { hasPreviousPage, hasNextPage, startCursor: mockStartCursor, endCursor: mockEndCursor, }, }, }); }; afterEach(() => { wrapper.destroy(); }); describe('When on the first page', () => { beforeEach(() => { createComponent({ page: 1, hasPreviousPage: false, hasNextPage: true, }); }); it('Contains the current page information', () => { expect(findPagination().props('value')).toBe(1); expect(findPagination().props('prevPage')).toBe(null); expect(findPagination().props('nextPage')).toBe(2); }); it('Goes to the second page', () => { findPagination().vm.$emit('input', 2); expect(wrapper.emitted('input')[0]).toEqual([ { after: mockEndCursor, page: 2, }, ]); }); }); describe('When in between pages', () => { beforeEach(() => { createComponent({ page: 2, hasPreviousPage: true, hasNextPage: true, }); }); it('Contains the current page information', () => { expect(findPagination().props('value')).toBe(2); expect(findPagination().props('prevPage')).toBe(1); expect(findPagination().props('nextPage')).toBe(3); }); it('Shows the next and previous pages', () => { const links = findPagination().findAll('a'); expect(links).toHaveLength(2); expect(links.at(0).text()).toBe('Previous'); expect(links.at(1).text()).toBe('Next'); }); it('Goes to the last page', () => { findPagination().vm.$emit('input', 3); expect(wrapper.emitted('input')[0]).toEqual([ { after: mockEndCursor, page: 3, }, ]); }); it('Goes to the first page', () => { findPagination().vm.$emit('input', 1); expect(wrapper.emitted('input')[0]).toEqual([ { page: 1, }, ]); }); }); describe('When in the last page', () => { beforeEach(() => { createComponent({ page: 3, hasPreviousPage: true, hasNextPage: false, }); }); it('Contains the current page', () => { expect(findPagination().props('value')).toBe(3); expect(findPagination().props('prevPage')).toBe(2); expect(findPagination().props('nextPage')).toBe(null); }); }); describe('When only one page', () => { beforeEach(() => { createComponent({ page: 1, hasPreviousPage: false, hasNextPage: false, }); }); it('does not display pagination', () => { expect(wrapper.html()).toBe(''); }); it('Contains the current page', () => { expect(findPagination().props('value')).toBe(1); }); it('Shows no more page buttons', () => { expect(findPagination().props('prevPage')).toBe(null); expect(findPagination().props('nextPage')).toBe(null); }); }); });