diff options
| -rw-r--r-- | app/assets/javascripts/vue_shared/components/pagination/constants.js | 4 | ||||
| -rw-r--r-- | app/assets/javascripts/vue_shared/components/pagination_links.vue | 29 | ||||
| -rw-r--r-- | locale/gitlab.pot | 12 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | spec/features/dashboard/groups_list_spec.rb | 4 | ||||
| -rw-r--r-- | spec/frontend/vue_shared/components/pagination_links_spec.js | 66 | ||||
| -rw-r--r-- | yarn.lock | 8 |
7 files changed, 85 insertions, 40 deletions
diff --git a/app/assets/javascripts/vue_shared/components/pagination/constants.js b/app/assets/javascripts/vue_shared/components/pagination/constants.js index c24b142ac7e..748ad178c70 100644 --- a/app/assets/javascripts/vue_shared/components/pagination/constants.js +++ b/app/assets/javascripts/vue_shared/components/pagination/constants.js @@ -7,3 +7,7 @@ export const PREV = s__('Pagination|Prev'); export const NEXT = s__('Pagination|Next'); export const FIRST = s__('Pagination|« First'); export const LAST = s__('Pagination|Last »'); +export const LABEL_FIRST_PAGE = s__('Pagination|Go to first page'); +export const LABEL_PREV_PAGE = s__('Pagination|Go to previous page'); +export const LABEL_NEXT_PAGE = s__('Pagination|Go to next page'); +export const LABEL_LAST_PAGE = s__('Pagination|Go to last page'); diff --git a/app/assets/javascripts/vue_shared/components/pagination_links.vue b/app/assets/javascripts/vue_shared/components/pagination_links.vue index 0b44f8578cb..06097913e91 100644 --- a/app/assets/javascripts/vue_shared/components/pagination_links.vue +++ b/app/assets/javascripts/vue_shared/components/pagination_links.vue @@ -1,6 +1,13 @@ <script> import { GlPagination } from '@gitlab/ui'; -import { s__ } from '../../locale'; +import { + PREV, + NEXT, + LABEL_FIRST_PAGE, + LABEL_PREV_PAGE, + LABEL_NEXT_PAGE, + LABEL_LAST_PAGE, +} from '~/vue_shared/components/pagination/constants'; export default { components: { @@ -16,23 +23,27 @@ export default { required: true, }, }, - firstText: s__('Pagination|« First'), - prevText: s__('Pagination|Prev'), - nextText: s__('Pagination|Next'), - lastText: s__('Pagination|Last »'), + prevText: PREV, + nextText: NEXT, + labelFirstPage: LABEL_FIRST_PAGE, + labelPrevPage: LABEL_PREV_PAGE, + labelNextPage: LABEL_NEXT_PAGE, + labelLastPage: LABEL_LAST_PAGE, }; </script> <template> <gl-pagination v-bind="$attrs" - :change="change" - :page="pageInfo.page" + :value="pageInfo.page" :per-page="pageInfo.perPage" :total-items="pageInfo.total" - :first-text="$options.firstText" :prev-text="$options.prevText" :next-text="$options.nextText" - :last-text="$options.lastText" + :label-first-page="$options.labelFirstPage" + :label-prev-page="$options.labelPrevPage" + :label-next-page="$options.labelNextPage" + :label-last-page="$options.labelLastPage" + @input="change" /> </template> diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 88ace6057cf..9aed0471e3d 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -6916,6 +6916,18 @@ msgstr "" msgid "Pages getting started guide" msgstr "" +msgid "Pagination|Go to first page" +msgstr "" + +msgid "Pagination|Go to last page" +msgstr "" + +msgid "Pagination|Go to next page" +msgstr "" + +msgid "Pagination|Go to previous page" +msgstr "" + msgid "Pagination|Last »" msgstr "" diff --git a/package.json b/package.json index 0758c27c75b..4f61c73698c 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "@babel/preset-env": "^7.4.4", "@gitlab/csslab": "^1.9.0", "@gitlab/svgs": "^1.63.0", - "@gitlab/ui": "^3.11.0", + "@gitlab/ui": "^4.0.0", "apollo-cache-inmemory": "^1.5.1", "apollo-client": "^2.5.1", "apollo-link": "^1.2.11", diff --git a/spec/features/dashboard/groups_list_spec.rb b/spec/features/dashboard/groups_list_spec.rb index e75c43d5338..fb76e2b0014 100644 --- a/spec/features/dashboard/groups_list_spec.rb +++ b/spec/features/dashboard/groups_list_spec.rb @@ -125,7 +125,7 @@ describe 'Dashboard Groups page', :js do end it 'loads results for next page' do - expect(page).to have_selector('.gl-pagination .page-item a[role=menuitemradio]', count: 2) + expect(page).to have_selector('.gl-pagination .page-item a.page-link', count: 3) # Check first page expect(page).to have_content(group2.full_name) @@ -134,7 +134,7 @@ describe 'Dashboard Groups page', :js do expect(page).not_to have_selector("#group-#{group.id}") # Go to next page - find('.gl-pagination .page-item:not(.active) a[role=menuitemradio]').click + find('.gl-pagination .page-item:last-of-type a.page-link').click wait_for_requests diff --git a/spec/frontend/vue_shared/components/pagination_links_spec.js b/spec/frontend/vue_shared/components/pagination_links_spec.js index d0cb3731050..efa5825d92f 100644 --- a/spec/frontend/vue_shared/components/pagination_links_spec.js +++ b/spec/frontend/vue_shared/components/pagination_links_spec.js @@ -1,59 +1,77 @@ -import Vue from 'vue'; +import { mount, createLocalVue } from '@vue/test-utils'; +import { GlPagination } from '@gitlab/ui'; import PaginationLinks from '~/vue_shared/components/pagination_links.vue'; -import { s__ } from '~/locale'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import { + PREV, + NEXT, + LABEL_FIRST_PAGE, + LABEL_PREV_PAGE, + LABEL_NEXT_PAGE, + LABEL_LAST_PAGE, +} from '~/vue_shared/components/pagination/constants'; + +const localVue = createLocalVue(); describe('Pagination links component', () => { - const paginationLinksComponent = Vue.extend(PaginationLinks); - const change = page => page; const pageInfo = { page: 3, perPage: 5, total: 30, }; const translations = { - firstText: s__('Pagination|« First'), - prevText: s__('Pagination|Prev'), - nextText: s__('Pagination|Next'), - lastText: s__('Pagination|Last »'), + prevText: PREV, + nextText: NEXT, + labelFirstPage: LABEL_FIRST_PAGE, + labelPrevPage: LABEL_PREV_PAGE, + labelNextPage: LABEL_NEXT_PAGE, + labelLastPage: LABEL_LAST_PAGE, }; - let paginationLinks; + let wrapper; let glPagination; - let destinationComponent; + let changeMock; - beforeEach(() => { - paginationLinks = mountComponent(paginationLinksComponent, { - change, - pageInfo, + const createComponent = () => { + changeMock = jest.fn(); + wrapper = mount(PaginationLinks, { + propsData: { + change: changeMock, + pageInfo, + }, + localVue, + sync: false, }); - [glPagination] = paginationLinks.$children; - [destinationComponent] = glPagination.$children; + }; + + beforeEach(() => { + createComponent(); + glPagination = wrapper.find(GlPagination); }); afterEach(() => { - paginationLinks.$destroy(); + wrapper.destroy(); }); it('should provide translated text to GitLab UI pagination', () => { Object.entries(translations).forEach(entry => { - expect(destinationComponent[entry[0]]).toBe(entry[1]); + expect(glPagination.vm[entry[0]]).toBe(entry[1]); }); }); - it('should pass change to GitLab UI pagination', () => { - expect(Object.is(glPagination.change, change)).toBe(true); + it('should call change when page changes', () => { + wrapper.find('a').trigger('click'); + expect(changeMock).toHaveBeenCalled(); }); it('should pass page from pageInfo to GitLab UI pagination', () => { - expect(destinationComponent.value).toBe(pageInfo.page); + expect(glPagination.vm.value).toBe(pageInfo.page); }); it('should pass per page from pageInfo to GitLab UI pagination', () => { - expect(destinationComponent.perPage).toBe(pageInfo.perPage); + expect(glPagination.vm.perPage).toBe(pageInfo.perPage); }); it('should pass total items from pageInfo to GitLab UI pagination', () => { - expect(destinationComponent.totalRows).toBe(pageInfo.total); + expect(glPagination.vm.totalItems).toBe(pageInfo.total); }); }); diff --git a/yarn.lock b/yarn.lock index dddf01414b2..31d40a5ad5e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -705,10 +705,10 @@ resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.63.0.tgz#9dd544026d203e4ce6efed72b05db68f710c4d49" integrity sha512-YztrReFTg31B7v5wtUC5j15KHNcMebtW+kACytEU42XomMaIwk4USIbygqWlq0VRHA2VHJrHApfJHIjxiCCQcA== -"@gitlab/ui@^3.11.0": - version "3.11.0" - resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-3.11.0.tgz#7bba82c893f47abbfe7995281dc0ce95290dcc4e" - integrity sha512-55Qxyj2wZILznZJUTUxY1SUuw028IgmP6ZyLd5XF3xk91HWSyq5/zrlr/qRTFGL1cABhxoBLScmXsnOc2CIO0w== +"@gitlab/ui@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-4.0.0.tgz#998a94d4ff91c5baa68d0591763e467a18293081" + integrity sha512-Z8T3xK3EV1eC2eBmnuO/cvcuLfH5TskGJsc2Hdxar+iUVxACbzs3bfjpFjslVHCCGzSRnewZCoRPO7GJO3miIg== dependencies: "@babel/standalone" "^7.0.0" "@gitlab/vue-toasted" "^1.2.1" |