diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-15 18:15:54 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-15 18:15:54 +0300 |
commit | 231a6ae572807c481b71d906cad717fdffc85e0f (patch) | |
tree | 8b2415e1d4420bb3a5a14b365a37c8ef92bf6728 /spec/frontend/vue_shared/components/pagination_bar | |
parent | 73b652cf4f890e91868055df8f76e6f869dd710d (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/vue_shared/components/pagination_bar')
-rw-r--r-- | spec/frontend/vue_shared/components/pagination_bar/pagination_bar_spec.js | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/pagination_bar/pagination_bar_spec.js b/spec/frontend/vue_shared/components/pagination_bar/pagination_bar_spec.js new file mode 100644 index 00000000000..08119dee8af --- /dev/null +++ b/spec/frontend/vue_shared/components/pagination_bar/pagination_bar_spec.js @@ -0,0 +1,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+', + ); + }); +}); |