From 3f307e4c4bed1dd3b40fbb28f1fe0326ba5afa9c Mon Sep 17 00:00:00 2001 From: dstone Date: Mon, 1 Dec 2014 12:11:38 -0500 Subject: [PATCH] feat(pagination): Show ellipsis when rotating --- src/pagination/pagination.js | 5 ++- src/pagination/test/pagination.spec.js | 49 +++++++++++++++++++++----- 2 files changed, 42 insertions(+), 12 deletions(-) diff --git a/src/pagination/pagination.js b/src/pagination/pagination.js index 0994a85c8c..90606eef73 100644 --- a/src/pagination/pagination.js +++ b/src/pagination/pagination.js @@ -172,8 +172,8 @@ angular.module('ui.bootstrap.pagination', []) } // Add links to move between page sets - if (isMaxSized && ! rotate) { - if (startPage > 1) { + if ( isMaxSized && maxSize > 0 ) { + if ( startPage > 1 ) { var previousPageSet = makePage(startPage - 1, '...', false); pages.unshift(previousPageSet); } @@ -183,7 +183,6 @@ angular.module('ui.bootstrap.pagination', []) pages.push(nextPageSet); } } - return pages; } diff --git a/src/pagination/test/pagination.spec.js b/src/pagination/test/pagination.spec.js index a207ae873e..292807f8ec 100644 --- a/src/pagination/test/pagination.spec.js +++ b/src/pagination/test/pagination.spec.js @@ -23,6 +23,15 @@ describe('pagination directive', function() { return element.find('li').eq(index); } + // Returns a comma-separated string that represents the pager, like: "Prev, 1, 2, 3, Next" + function getPaginationAsText(){ + var len = getPaginationBarSize(), outItems = []; + for(var i = 0; i < len; i++){ + outItems.push(getPaginationEl(i).text()); + } + return outItems.join(', '); + } + function clickPaginationEl(index) { getPaginationEl(index).find('a').click(); } @@ -281,8 +290,8 @@ describe('pagination directive', function() { $rootScope.$digest(); }); - it('contains maxsize + 2 li elements', function() { - expect(getPaginationBarSize()).toBe($rootScope.maxSize + 2); + it('contains maxsize + 3 li elements', function() { + expect(getPaginationBarSize()).toBe($rootScope.maxSize + 3); expect(getPaginationEl(0).text()).toBe('Previous'); expect(getPaginationEl(-1).text()).toBe('Next'); }); @@ -300,8 +309,8 @@ describe('pagination directive', function() { clickPaginationEl(-1); expect($rootScope.currentPage).toBe(7); - expect(getPaginationEl(3)).toHaveClass('active'); - expect(getPaginationEl(3).text()).toBe(''+$rootScope.currentPage); + expect(getPaginationEl(4)).toHaveClass('active'); + expect(getPaginationEl(4).text()).toBe(''+$rootScope.currentPage); }); it('shows the page number in middle after the prev link is clicked', function() { @@ -309,14 +318,14 @@ describe('pagination directive', function() { clickPaginationEl(0); expect($rootScope.currentPage).toBe(6); - expect(getPaginationEl(3)).toHaveClass('active'); - expect(getPaginationEl(3).text()).toBe(''+$rootScope.currentPage); + expect(getPaginationEl(4)).toHaveClass('active'); + expect(getPaginationEl(4).text()).toBe(''+$rootScope.currentPage); }); it('changes pagination bar size when max-size value changed', function() { $rootScope.maxSize = 7; $rootScope.$digest(); - expect(getPaginationBarSize()).toBe(9); + expect(getPaginationBarSize()).toBe(10); }); it('sets the pagination bar size to num-pages, if max-size is greater than num-pages ', function() { @@ -351,6 +360,27 @@ describe('pagination directive', function() { element.remove(); }); + + it('should display an ellipsis on the right if the last displayed page\'s number is less than the last page', function() { + updateCurrentPage(1); + expect(getPaginationAsText()).toBe('Previous, 1, 2, 3, 4, 5, ..., Next'); + }); + + it('should display an ellipsis on the left if the first displayed page\'s number is greater than 1', function() { + updateCurrentPage(10); + expect(getPaginationAsText()).toBe('Previous, ..., 6, 7, 8, 9, 10, Next'); + }); + + it('should display both ellipsis\' if the displayed range is in the middle', function() { + updateCurrentPage(5); + expect(getPaginationAsText()).toBe('Previous, ..., 3, 4, 5, 6, 7, ..., Next'); + }); + + it('should not display any ellipsis\' if the number of pages >= maxsize', function() { + $rootScope.maxSize = 10; + $rootScope.$digest(); + expect(getPaginationAsText()).toBe('Previous, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, Next'); + }); }); describe('with `max-size` option & no `rotate`', function() { @@ -519,7 +549,7 @@ describe('pagination directive', function() { expect(linkEl).not.toHaveFocus(); element.remove(); - }); + }); it('should blur the "last" link after it has been clicked', function() { body.append(element); @@ -686,7 +716,8 @@ describe('pagination directive', function() { element = $compile('')($rootScope); $rootScope.$digest(); - expect(getPaginationBarSize()).toBe(4); + // Should contain 2 nav buttons, 2 pages, and 2 ellipsis, since the currentPage defaults to 3, which is in the middle + expect(getPaginationBarSize()).toBe(6); }); });