feat(pix-pagniation): allow onChange args to be executed

addon/components/pix-pagination.js

@@ -70,7 +70,7 @@ export default class PixPagination extends Component {
   }
 
   get pageSize() {
-    return this.args.pagination ? this.args.pagination.pageSize : this.args.pageOptions[0];
+    return this.args.pagination ? this.args.pagination.pageSize : this.pageOptions[0].label;
   }
 
   get isNextPageDisabled() {
@@ -104,18 +104,28 @@ export default class PixPagination extends Component {
     return Math.min(rowCount, this.firstItemPosition + this.pageSize - 1);
   }
 
+  @action
+  onChange() {
+    if (typeof this.args.onChange !== 'function') return;
+
+    this.args.onChange();
+  }
+
   @action
   changePageSize(value) {
     this.router.replaceWith({ queryParams: { pageSize: value, pageNumber: 1 } });
+    this.onChange();
   }
 
   @action
   goToNextPage() {
     this.router.replaceWith({ queryParams: { pageNumber: this.nextPage } });
+    this.onChange();
   }
 
   @action
   goToPreviousPage() {
     this.router.replaceWith({ queryParams: { pageNumber: this.previousPage } });
+    this.onChange();
   }
 }

app/stories/pix-pagination.stories.js

@@ -20,28 +20,10 @@ export default {
     },
     pageOptions: {
       name: 'pageOptions',
-      description: "Un tableau d'objet `options` pour configurer le select",
+      description: "Un tableau d'objet `options` pour configurer le select label / value",
       type: { name: 'array', required: false },
       control: {
         type: 'array',
-        value: [
-          {
-            label: '10',
-            value: 10,
-          },
-          {
-            label: '25',
-            value: 25,
-          },
-          {
-            label: '50',
-            value: 50,
-          },
-          {
-            label: '100',
-            value: 100,
-          },
-        ],
       },
       table: {
         type: { summary: 'array' },
@@ -78,6 +60,11 @@ export default {
         defaultValue: { summary: 'fr' },
       },
     },
+    onChange: {
+      name: 'onChange',
+      description: 'function éxecutée lors du changement de page ou pagination',
+      type: { name: 'function', required: false },
+    },
     isCondensed: {
       name: 'isCondensed',
       description:

tests/integration/components/pix-pagination-test.js

@@ -1,7 +1,9 @@
 import { module, test } from 'qunit';
+import { click } from '@ember/test-helpers';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@1024pix/ember-testing-library';
 import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
 
 module('Integration | Component | pagination', function (hooks) {
   setupRenderingTest(hooks);
@@ -48,6 +50,94 @@ module('Integration | Component | pagination', function (hooks) {
     assert.contains('Page 1 / 1');
   });
 
+  module('PixPagination controls', function (hooks) {
+    let onChangeStub, router;
+
+    hooks.beforeEach(function () {
+      onChangeStub = sinon.stub();
+      router = this.owner.lookup('service:router');
+      router.replaceWith = sinon.stub();
+    });
+
+    test('should call onChange on pageSize change', async function (assert) {
+      // given
+      const paginationData = {
+        page: 1,
+        pageSize: 10,
+        rowCount: 12,
+        pageCount: 2,
+      };
+
+      this.set('pagination', paginationData);
+      this.set('onChange', onChangeStub);
+
+      // when
+      const screen = await render(
+        hbs`<PixPagination @pagination={{this.pagination}} @onChange={{this.onChange}} />`,
+      );
+
+      await click(screen.getByLabelText("Nombre d'élément à afficher par page"));
+
+      const optionLine = await screen.findByRole('option', { name: '50' });
+
+      await click(optionLine);
+
+      // then
+      assert.ok(
+        router.replaceWith.calledWithExactly({ queryParams: { pageSize: 50, pageNumber: 1 } }),
+      );
+      assert.ok(onChangeStub.called);
+    });
+
+    test('should call onChange on nextPage action', async function (assert) {
+      // given
+      const paginationData = {
+        page: 1,
+        pageSize: 10,
+        rowCount: 12,
+        pageCount: 2,
+      };
+
+      this.set('pagination', paginationData);
+      this.set('onChange', onChangeStub);
+
+      // when
+      const screen = await render(
+        hbs`<PixPagination @pagination={{this.pagination}} @onChange={{this.onChange}} />`,
+      );
+
+      await click(screen.getByRole('button', { name: 'Aller à la page suivante', exact: false }));
+
+      // then
+      assert.ok(router.replaceWith.calledWithExactly({ queryParams: { pageNumber: 2 } }));
+      assert.ok(onChangeStub.called);
+    });
+
+    test('should call onChange on previousPage action', async function (assert) {
+      // given
+      const paginationData = {
+        page: 2,
+        pageSize: 10,
+        rowCount: 12,
+        pageCount: 2,
+      };
+
+      this.set('pagination', paginationData);
+      this.set('onChange', onChangeStub);
+
+      // when
+      const screen = await render(
+        hbs`<PixPagination @pagination={{this.pagination}} @onChange={{this.onChange}} />`,
+      );
+
+      await click(screen.getByRole('button', { name: 'Aller à la page précédente', exact: false }));
+
+      // then
+      assert.ok(router.replaceWith.calledWithExactly({ queryParams: { pageNumber: 1 } }));
+      assert.ok(onChangeStub.called);
+    });
+  });
+
   test('When pagination params have options to display several pages', async function (assert) {
     // given
     const paginationData = {
@@ -68,6 +158,7 @@ module('Integration | Component | pagination', function (hooks) {
     assert.contains('11-12 sur 12 éléments');
     assert.contains('Page 2 / 2');
   });
+
   test('When params isCondensed is true', async function (assert) {
     // given
     const paginationData = {