summaryrefslogtreecommitdiff
path: root/spec/frontend/vue_shared/components/table_pagination_spec.js
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/vue_shared/components/table_pagination_spec.js')
-rw-r--r--spec/frontend/vue_shared/components/table_pagination_spec.js324
1 files changed, 40 insertions, 284 deletions
diff --git a/spec/frontend/vue_shared/components/table_pagination_spec.js b/spec/frontend/vue_shared/components/table_pagination_spec.js
index 0a9ff36b2fb..8105d1fcef3 100644
--- a/spec/frontend/vue_shared/components/table_pagination_spec.js
+++ b/spec/frontend/vue_shared/components/table_pagination_spec.js
@@ -1,5 +1,6 @@
import { shallowMount } from '@vue/test-utils';
import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+import { GlPagination } from '@gitlab/ui';
describe('Pagination component', () => {
let wrapper;
@@ -12,15 +13,6 @@ describe('Pagination component', () => {
});
};
- const findFirstButtonLink = () => wrapper.find('.js-first-button .page-link');
- const findPreviousButton = () => wrapper.find('.js-previous-button');
- const findPreviousButtonLink = () => wrapper.find('.js-previous-button .page-link');
- const findNextButton = () => wrapper.find('.js-next-button');
- const findNextButtonLink = () => wrapper.find('.js-next-button .page-link');
- const findLastButtonLink = () => wrapper.find('.js-last-button .page-link');
- const findPages = () => wrapper.findAll('.page');
- const findSeparator = () => wrapper.find('.separator');
-
beforeEach(() => {
spy = jest.fn();
});
@@ -46,290 +38,54 @@ describe('Pagination component', () => {
expect(wrapper.isEmpty()).toBe(true);
});
- describe('prev button', () => {
- it('should be disabled and non clickable', () => {
- mountComponent({
- pageInfo: {
- nextPage: 2,
- page: 1,
- perPage: 20,
- previousPage: NaN,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
-
- expect(findPreviousButton().classes()).toContain('disabled');
- findPreviousButtonLink().trigger('click');
- expect(spy).not.toHaveBeenCalled();
- });
-
- it('should be disabled and non clickable when total and totalPages are NaN', () => {
- mountComponent({
- pageInfo: {
- nextPage: 2,
- page: 1,
- perPage: 20,
- previousPage: NaN,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- expect(findPreviousButton().classes()).toContain('disabled');
- findPreviousButtonLink().trigger('click');
- expect(spy).not.toHaveBeenCalled();
- });
-
- it('should be enabled and clickable', () => {
- mountComponent({
- pageInfo: {
- nextPage: 3,
- page: 2,
- perPage: 20,
- previousPage: 1,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
- findPreviousButtonLink().trigger('click');
- expect(spy).toHaveBeenCalledWith(1);
- });
-
- it('should be enabled and clickable when total and totalPages are NaN', () => {
- mountComponent({
- pageInfo: {
- nextPage: 3,
- page: 2,
- perPage: 20,
- previousPage: 1,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- findPreviousButtonLink().trigger('click');
- expect(spy).toHaveBeenCalledWith(1);
- });
- });
-
- describe('first button', () => {
- it('should call the change callback with the first page', () => {
- mountComponent({
- pageInfo: {
- nextPage: 3,
- page: 2,
- perPage: 20,
- previousPage: 1,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
- const button = findFirstButtonLink();
- expect(button.text().trim()).toEqual('« First');
- button.trigger('click');
- expect(spy).toHaveBeenCalledWith(1);
- });
-
- it('should call the change callback with the first page when total and totalPages are NaN', () => {
- mountComponent({
- pageInfo: {
- nextPage: 3,
- page: 2,
- perPage: 20,
- previousPage: 1,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- const button = findFirstButtonLink();
- expect(button.text().trim()).toEqual('« First');
- button.trigger('click');
- expect(spy).toHaveBeenCalledWith(1);
- });
- });
-
- describe('last button', () => {
- it('should call the change callback with the last page', () => {
- mountComponent({
- pageInfo: {
- nextPage: 3,
- page: 2,
- perPage: 20,
- previousPage: 1,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
- const button = findLastButtonLink();
- expect(button.text().trim()).toEqual('Last »');
- button.trigger('click');
- expect(spy).toHaveBeenCalledWith(5);
- });
-
- it('should not render', () => {
- mountComponent({
- pageInfo: {
- nextPage: 3,
- page: 2,
- perPage: 20,
- previousPage: 1,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- expect(findLastButtonLink().exists()).toBe(false);
- });
- });
-
- describe('next button', () => {
- it('should be disabled and non clickable', () => {
- mountComponent({
- pageInfo: {
- nextPage: NaN,
- page: 5,
- perPage: 20,
- previousPage: 4,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
- expect(
- findNextButton()
- .text()
- .trim(),
- ).toEqual('Next ›');
- findNextButtonLink().trigger('click');
- expect(spy).not.toHaveBeenCalled();
- });
-
- it('should be disabled and non clickable when total and totalPages are NaN', () => {
- mountComponent({
- pageInfo: {
- nextPage: NaN,
- page: 5,
- perPage: 20,
- previousPage: 4,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- expect(
- findNextButton()
- .text()
- .trim(),
- ).toEqual('Next ›');
- findNextButtonLink().trigger('click');
- expect(spy).not.toHaveBeenCalled();
- });
-
- it('should be enabled and clickable', () => {
- mountComponent({
- pageInfo: {
- nextPage: 4,
- page: 3,
- perPage: 20,
- previousPage: 2,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
- findNextButtonLink().trigger('click');
- expect(spy).toHaveBeenCalledWith(4);
+ it('renders if there is a next page', () => {
+ mountComponent({
+ pageInfo: {
+ nextPage: 2,
+ page: 1,
+ perPage: 20,
+ previousPage: NaN,
+ total: 15,
+ totalPages: 1,
+ },
+ change: spy,
});
- it('should be enabled and clickable when total and totalPages are NaN', () => {
- mountComponent({
- pageInfo: {
- nextPage: 4,
- page: 3,
- perPage: 20,
- previousPage: 2,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- findNextButtonLink().trigger('click');
- expect(spy).toHaveBeenCalledWith(4);
- });
+ expect(wrapper.isEmpty()).toBe(false);
});
- describe('numbered buttons', () => {
- it('should render 5 pages', () => {
- mountComponent({
- pageInfo: {
- nextPage: 4,
- page: 3,
- perPage: 20,
- previousPage: 2,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
- expect(findPages().length).toEqual(5);
+ it('renders if there is a prev page', () => {
+ mountComponent({
+ pageInfo: {
+ nextPage: NaN,
+ page: 2,
+ perPage: 20,
+ previousPage: 1,
+ total: 15,
+ totalPages: 1,
+ },
+ change: spy,
});
- it('should not render any page', () => {
- mountComponent({
- pageInfo: {
- nextPage: 4,
- page: 3,
- perPage: 20,
- previousPage: 2,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- expect(findPages().length).toEqual(0);
- });
+ expect(wrapper.isEmpty()).toBe(false);
});
+ });
- describe('spread operator', () => {
- it('should render', () => {
- mountComponent({
- pageInfo: {
- nextPage: 4,
- page: 3,
- perPage: 20,
- previousPage: 2,
- total: 84,
- totalPages: 10,
- },
- change: spy,
- });
- expect(
- findSeparator()
- .text()
- .trim(),
- ).toEqual('...');
- });
-
- it('should not render', () => {
- mountComponent({
- pageInfo: {
- nextPage: 4,
- page: 3,
- perPage: 20,
- previousPage: 2,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- expect(findSeparator().exists()).toBe(false);
+ describe('events', () => {
+ it('calls change method when page changes', () => {
+ mountComponent({
+ pageInfo: {
+ nextPage: NaN,
+ page: 2,
+ perPage: 20,
+ previousPage: 1,
+ total: 15,
+ totalPages: 1,
+ },
+ change: spy,
});
+ wrapper.find(GlPagination).vm.$emit('input', 3);
+ expect(spy).toHaveBeenCalledWith(3);
});
});
});
View Lorry Controller Status