fix(Pagination): fixed the offset

* fix(Pagination): fixed the offset + changed some variable names

* fix(Pagination): create tests for pagesPadding

packages/react-instantsearch/src/components/Pagination.js

@@ -8,36 +8,39 @@ import classNames from './classNames.js';
 
 const cx = classNames('Pagination');
 
-function getPagesDisplayedCount(padding, total) {
-  return Math.min(2 * padding + 1, total);
+// Determines the size of the widget (the number of pages displayed - that the user can directly click on)
+function calculateSize(padding, maxPages) {
+  return Math.min(2 * padding + 1, maxPages);
 }
 
-function calculatePaddingLeft(current, padding, total, totalDisplayedPages) {
-  if (current <= padding) {
-    return current;
+function calculatePaddingLeft(currentPage, padding, maxPages, size) {
+  if (currentPage <= padding) {
+    return currentPage;
   }
 
-  if (current >= total - padding) {
-    return totalDisplayedPages - (total - current);
+  if (currentPage >= maxPages - padding) {
+    return size - (maxPages - currentPage);
   }
 
-  return padding;
+  return padding + 1;
 }
 
-function getPages(page, total, padding) {
-  const totalDisplayedPages = getPagesDisplayedCount(padding, total);
-  if (totalDisplayedPages === total) return range(1, total + 1);
+// Retrieve the correct page range to populate the widget
+function getPages(currentPage, maxPages, padding) {
+  const size = calculateSize(padding, maxPages);
+  // If the widget size is equal to the max number of pages, return the entire page range
+  if (size === maxPages) return range(1, maxPages + 1);
 
   const paddingLeft = calculatePaddingLeft(
-    page,
+    currentPage,
     padding,
-    total,
-    totalDisplayedPages
+    maxPages,
+    size
   );
-  const paddingRight = totalDisplayedPages - paddingLeft;
+  const paddingRight = size - paddingLeft;
 
-  const first = page - paddingLeft;
-  const last = page + paddingRight;
+  const first = currentPage - paddingLeft;
+  const last = currentPage + paddingRight;
   return range(first + 1, last + 1);
 }
 
@@ -53,15 +56,10 @@ class Pagination extends Component {
     listComponent: PropTypes.func,
 
     showFirst: PropTypes.bool,
-
     showPrevious: PropTypes.bool,
-
     showNext: PropTypes.bool,
-
     showLast: PropTypes.bool,
-
     pagesPadding: PropTypes.number,
-
     maxPages: PropTypes.number,
   };
 

packages/react-instantsearch/src/components/Pagination.test.js

@@ -319,4 +319,84 @@ describe('Pagination', () => {
     expect(canRefine.mock.calls[1][0]).toEqual(false);
     expect(wrapper.find('.ais-Pagination__noRefinement').length).toBe(1);
   });
+
+  describe('pagesPadding behaviour', () => {
+    it('should be adjusted when currentPage < padding (at the very beginning)', () => {
+      const refine = jest.fn();
+      const wrapper = mount(
+        <Pagination
+          {...REQ_PROPS}
+          nbPages={18}
+          showLast
+          pagesPadding={2}
+          currentRefinement={2}
+          refine={refine}
+        />
+      );
+      const pages = wrapper.find('.ais-Pagination__itemPage');
+      const pageSelected = wrapper.find('.ais-Pagination__itemLinkSelected');
+      // Since pagesPadding = 2, the Pagination widget's size should be 5
+      expect(pages.length).toBe(5);
+
+      expect(pages.first().text()).toEqual('1');
+
+      expect(pageSelected.first().text()).toEqual('2');
+      expect(pages.at(1).text()).toEqual('2');
+
+      expect(pages.at(2).text()).toEqual('3');
+      expect(pages.at(3).text()).toEqual('4');
+      expect(pages.at(4).text()).toEqual('5');
+    });
+    it('should be adjusted when currentPage < maxPages - padding (at the end)', () => {
+      const refine = jest.fn();
+      const wrapper = mount(
+        <Pagination
+          {...REQ_PROPS}
+          nbPages={18}
+          showLast
+          pagesPadding={2}
+          currentRefinement={18}
+          refine={refine}
+        />
+      );
+      const pages = wrapper.find('.ais-Pagination__itemPage');
+      const pageSelected = wrapper.find('.ais-Pagination__itemLinkSelected');
+      // Since pagesPadding = 2, the Pagination widget's size should be 5
+      expect(pages.length).toBe(5);
+
+      expect(pages.first().text()).toEqual('14');
+      expect(pages.at(1).text()).toEqual('15');
+      expect(pages.at(2).text()).toEqual('16');
+      expect(pages.at(3).text()).toEqual('17');
+
+      expect(pageSelected.first().text()).toEqual('18');
+      expect(pages.at(4).text()).toEqual('18');
+    });
+    it('should render the correct padding in every other case', () => {
+      const refine = jest.fn();
+      const wrapper = mount(
+        <Pagination
+          {...REQ_PROPS}
+          nbPages={18}
+          showLast
+          pagesPadding={2}
+          currentRefinement={8}
+          refine={refine}
+        />
+      );
+      const pages = wrapper.find('.ais-Pagination__itemPage');
+      const pageSelected = wrapper.find('.ais-Pagination__itemLinkSelected');
+      // Since pagesPadding = 2, the Pagination widget's size should be 5
+      expect(pages.length).toBe(5);
+
+      expect(pages.first().text()).toEqual('6');
+      expect(pages.at(1).text()).toEqual('7');
+
+      expect(pageSelected.first().text()).toEqual('8');
+      expect(pages.at(2).text()).toEqual('8');
+
+      expect(pages.at(3).text()).toEqual('9');
+      expect(pages.at(4).text()).toEqual('10');
+    });
+  });
 });