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
94
95
96
97
98
99
100
|
import { GlKeysetPagination } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import PersistedPagination from '~/packages_and_registries/shared/components/persisted_pagination.vue';
import UrlSync from '~/vue_shared/components/url_sync.vue';
describe('Persisted Search', () => {
let wrapper;
const defaultProps = {
pagination: {
hasNextPage: true,
hasPreviousPage: true,
startCursor: 'eyJpZCI6IjI2In0',
endCursor: 'eyJpZCI6IjgifQ',
},
};
const findPagination = () => wrapper.findComponent(GlKeysetPagination);
const findUrlSync = () => wrapper.findComponent(UrlSync);
const mountComponent = ({ propsData = defaultProps, stubs = {} } = {}) => {
wrapper = shallowMountExtended(PersistedPagination, {
propsData,
stubs: {
UrlSync,
...stubs,
},
});
};
it('has pagination component', () => {
mountComponent();
const { hasNextPage, hasPreviousPage, startCursor, endCursor } = defaultProps.pagination;
expect(findPagination().props('hasNextPage')).toBe(hasNextPage);
expect(findPagination().props('hasPreviousPage')).toBe(hasPreviousPage);
expect(findPagination().props('startCursor')).toBe(startCursor);
expect(findPagination().props('endCursor')).toBe(endCursor);
});
it('has a UrlSync component', () => {
mountComponent();
expect(findUrlSync().exists()).toBe(true);
});
describe('pagination events', () => {
const updateQueryMock = jest.fn();
const mockUrlSync = {
methods: {
updateQuery: updateQueryMock,
},
render() {
return this.$scopedSlots.default?.({ updateQuery: this.updateQuery });
},
};
beforeEach(() => {
mountComponent({ stubs: { UrlSync: mockUrlSync } });
});
afterEach(() => {
updateQueryMock.mockReset();
});
describe('prev event', () => {
beforeEach(() => {
findPagination().vm.$emit('prev');
});
it('calls updateQuery mock with right params', () => {
expect(updateQueryMock).toHaveBeenCalledWith({
before: defaultProps.pagination?.startCursor,
after: null,
});
});
it('re-emits prev event', () => {
expect(wrapper.emitted('prev')).toHaveLength(1);
});
});
describe('next event', () => {
beforeEach(() => {
findPagination().vm.$emit('next');
});
it('calls updateQuery mock with right params', () => {
expect(updateQueryMock).toHaveBeenCalledWith({
after: defaultProps.pagination.endCursor,
before: null,
});
});
it('re-emits next event', () => {
expect(wrapper.emitted('next')).toHaveLength(1);
});
});
});
});
|
