92 lines
2.4 KiB
JavaScript
92 lines
2.4 KiB
JavaScript
import { GlPagination, GlDropdown, GlDropdownItem } from '@gitlab/ui';
|
|
import { mount } from '@vue/test-utils';
|
|
import PaginationBar from '~/import_entities/components/pagination_bar.vue';
|
|
import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
|
|
|
|
describe('Pagination bar', () => {
|
|
const DEFAULT_PROPS = {
|
|
pageInfo: {
|
|
total: 50,
|
|
page: 1,
|
|
perPage: 20,
|
|
},
|
|
itemsCount: 17,
|
|
};
|
|
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 1 - 17 of 50',
|
|
);
|
|
});
|
|
|
|
it('renders current page information when total count is over 1000', () => {
|
|
createComponent({
|
|
pageInfo: {
|
|
...DEFAULT_PROPS.pageInfo,
|
|
total: 1200,
|
|
},
|
|
});
|
|
|
|
expect(wrapper.find('[data-testid="information"]').text()).toMatchInterpolatedText(
|
|
'Showing 1 - 17 of 1000+',
|
|
);
|
|
});
|
|
});
|