1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
import { GlPagination, GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import PaginationBar from '~/vue_shared/components/pagination_bar/pagination_bar.vue';
import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
describe('Pagination bar', () => {
const DEFAULT_PROPS = {
pageInfo: {
total: 50,
totalPages: 3,
page: 3,
perPage: 20,
},
};
let wrapper;
const createComponent = (propsData) => {
wrapper = mount(PaginationBar, {
propsData: {
...DEFAULT_PROPS,
...propsData,
},
});
};
afterEach(() => {
wrapper.destroy();
});
describe('events', () => {
beforeEach(() => {
createComponent();
});
it('emits set-page event when page is selected', () => {
const NEXT_PAGE = 3;
// PaginationLinks uses prop instead of event for handling page change
// So we go one level deep to test this
wrapper
.findComponent(PaginationLinks)
.findComponent(GlPagination)
.vm.$emit('input', NEXT_PAGE);
expect(wrapper.emitted('set-page')).toEqual([[NEXT_PAGE]]);
});
it('emits set-page-size event when page size is selected', () => {
const firstItemInPageSizeDropdown = wrapper.findComponent(GlDropdownItem);
firstItemInPageSizeDropdown.vm.$emit('click');
const [emittedPageSizeChange] = wrapper.emitted('set-page-size')[0];
expect(firstItemInPageSizeDropdown.text()).toMatchInterpolatedText(
`${emittedPageSizeChange} items per page`,
);
});
});
it('renders current page size', () => {
const CURRENT_PAGE_SIZE = 40;
createComponent({
pageInfo: {
...DEFAULT_PROPS.pageInfo,
perPage: CURRENT_PAGE_SIZE,
},
});
expect(wrapper.find(GlDropdown).find('button').text()).toMatchInterpolatedText(
`${CURRENT_PAGE_SIZE} items per page`,
);
});
it('renders current page information', () => {
createComponent();
expect(wrapper.find('[data-testid="information"]').text()).toMatchInterpolatedText(
'Showing 41 - 50 of 50',
);
});
it('renders current page information when total count is over 1000', () => {
createComponent({
pageInfo: {
...DEFAULT_PROPS.pageInfo,
total: 1200,
page: 2,
},
});
expect(wrapper.find('[data-testid="information"]').text()).toMatchInterpolatedText(
'Showing 21 - 40 of 1000+',
);
});
});
|
