fix: calculate the correct pageIndex when pageSize changes

sbb-design-systems · Aug 23, 2024 · 3a8d216 · 3a8d216
1 parent 125ce28
commit 3a8d216
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 34 deletions.
diff --git a/src/elements/paginator/__snapshots__/paginator.snapshot.spec.snap.js b/src/elements/paginator/__snapshots__/paginator.snapshot.spec.snap.js
@@ -53,7 +53,7 @@ snapshots["sbb-paginator renders Shadow DOM"] =
   <ul class="sbb-paginator__pages">
     <li
       class="sbb-paginator__page--number"
-      data-selected="true"
+      data-selected=""
     >
       <span
         aria-current="true"
@@ -123,7 +123,7 @@ snapshots["sbb-paginator renders ellipsis on end side Shadow DOM"] =
   <ul class="sbb-paginator__pages">
     <li
       class="sbb-paginator__page--number"
-      data-selected="true"
+      data-selected=""
     >
       <span
         aria-current="true"
@@ -269,7 +269,7 @@ snapshots["sbb-paginator renders ellipsis on start side Shadow DOM"] =
     </li>
     <li
       class="sbb-paginator__page--number"
-      data-selected="true"
+      data-selected=""
     >
       <span
         aria-current="true"
@@ -388,7 +388,7 @@ snapshots["sbb-paginator renders ellipsis on both side Shadow DOM"] =
     </li>
     <li
       class="sbb-paginator__page--number"
-      data-selected="true"
+      data-selected=""
     >
       <span
         aria-current="true"
@@ -485,7 +485,7 @@ snapshots["sbb-paginator renders with options Safari Shadow DOM"] =
   <ul class="sbb-paginator__pages">
     <li
       class="sbb-paginator__page--number"
-      data-selected="true"
+      data-selected=""
     >
       <span
         aria-current="true"
@@ -616,32 +616,6 @@ snapshots["sbb-paginator renders with options Safari Shadow DOM"] =
 `;
 /* end snapshot sbb-paginator renders with options Safari Shadow DOM */
 
-snapshots["sbb-paginator renders A11y tree Firefox"] = 
-`<p>
-  {
-  "role": "document",
-  "name": "",
-  "children": [
-    {
-      "role": "button",
-      "name": "Previous page",
-      "disabled": true
-    },
-    {
-      "role": "button",
-      "name": "Next page",
-      "disabled": true
-    },
-    {
-      "role": "button",
-      "name": "Page 1"
-    }
-  ]
-}
-</p>
-`;
-/* end snapshot sbb-paginator renders A11y tree Firefox */
-
 snapshots["sbb-paginator renders A11y tree Chrome"] = 
 `<p>
   {
@@ -719,7 +693,7 @@ snapshots["sbb-paginator renders with options Chrome-Firefox Shadow DOM"] =
   <ul class="sbb-paginator__pages">
     <li
       class="sbb-paginator__page--number"
-      data-selected="true"
+      data-selected=""
     >
       <span
         aria-current="true"
@@ -848,3 +822,29 @@ snapshots["sbb-paginator renders with options Chrome-Firefox Shadow DOM"] =
 `;
 /* end snapshot sbb-paginator renders with options Chrome-Firefox Shadow DOM */
 
+snapshots["sbb-paginator renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Previous page",
+      "disabled": true
+    },
+    {
+      "role": "button",
+      "name": "Next page",
+      "disabled": true
+    },
+    {
+      "role": "button",
+      "name": "Page 1"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-paginator renders A11y tree Firefox */
+
diff --git a/src/elements/paginator/paginator.spec.ts b/src/elements/paginator/paginator.spec.ts
@@ -48,6 +48,37 @@ describe('sbb-paginator', () => {
     expect(element.pageIndex).to.be.equal(0);
   });
 
+  it('changes to the correct selected page when pageSize changes', async () => {
+    // go to page 5 / pageIndex=4, which includes items 21-25
+    const pageChangedEventSpy = new EventSpy(SbbPaginatorElement.events.pageChanged);
+    element.setAttribute('page-index', '4');
+    await waitForLitRender(element);
+    expect(pageChangedEventSpy.count).to.be.equal(1);
+    let selectedElement = element
+      .shadowRoot!.querySelector('[data-selected]')!
+      .querySelector('span')!;
+    expect(selectedElement.getAttribute('data-index')).to.be.equal('4');
+
+    // switching to pageSize=10, item 21 should be on page 3 / pageIndex=2
+    element.setAttribute('page-size', '10');
+    await waitForLitRender(element);
+    selectedElement = element.shadowRoot!.querySelector('[data-selected]')!.querySelector('span')!;
+    expect(selectedElement.getAttribute('data-index')).to.be.equal('2');
+
+    // go to page 4 / pageIndex=3, which now includes items 31-40
+    element.setAttribute('page-index', '3');
+    await waitForLitRender(element);
+    expect(pageChangedEventSpy.count).to.be.equal(3);
+    selectedElement = element.shadowRoot!.querySelector('[data-selected]')!.querySelector('span')!;
+    expect(selectedElement.getAttribute('data-index')).to.be.equal('3');
+
+    // switching to pageSize=2, item 31 should be on page 16 / pageIndex=15
+    element.setAttribute('page-size', '2');
+    await waitForLitRender(element);
+    selectedElement = element.shadowRoot!.querySelector('[data-selected]')!.querySelector('span')!;
+    expect(selectedElement.getAttribute('data-index')).to.be.equal('15');
+  });
+
   it('emits on click', async () => {
     const pageChangedEventSpy = new EventSpy(SbbPaginatorElement.events.pageChanged);
     const pages = element.shadowRoot!.querySelectorAll('.sbb-paginator__page--number-item');

diff --git a/src/elements/paginator/paginator.ts b/src/elements/paginator/paginator.ts
@@ -57,8 +57,9 @@ export class SbbPaginatorElement extends SbbNegativeMixin(LitElement) {
   /** Number of items per page. */
   @property({ attribute: 'page-size', type: Number })
   public set pageSize(value: number) {
+    const previousPageSize = this._pageSize;
     this._pageSize = Math.max(value, 0);
-    this.pageIndex = Math.floor((this.pageIndex * this.pageSize) / this._pageSize) || 0;
+    this.pageIndex = Math.floor((this.pageIndex * previousPageSize) / this._pageSize) || 0;
   }
   public get pageSize(): number {
     return this._pageSize;
@@ -300,7 +301,7 @@ export class SbbPaginatorElement extends SbbNegativeMixin(LitElement) {
               : html`
                   <li
                     class="sbb-paginator__page--number"
-                    data-selected=${this.pageIndex === item || nothing}
+                    ?data-selected=${this.pageIndex === item || nothing}
                   >
                     <span
                       role="button"