feat(mon-pix): on challenge action trigger, prevent other trigger

1024pix · Mar 7, 2025 · 3da3487 · 3da3487
1 parent 62a4cf4
commit 3da3487
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 4 deletions.
diff --git a/mon-pix/app/components/challenge-actions.hbs b/mon-pix/app/components/challenge-actions.hbs
@@ -71,9 +71,10 @@
     <div class="challenge-actions__group">
       <div class="challenge-actions__buttons">
         <PixButton
-          @isDisabled={{this.areActionButtonsDisabled}}
-          @triggerAction={{@validateAnswer}}
           @variant="success"
+          @triggerAction={{this.handleValidateAction}}
+          @isLoading={{this.isValidateActionLoading}}
+          @isDisabled={{or this.areActionButtonsDisabled this.isSkipActionLoading}}
           @iconAfter="arrowRight"
           class="challenge-actions__action-validate"
           aria-label={{t "pages.challenge.actions.validate-go-to-next"}}
@@ -84,9 +85,11 @@
         </PixButton>
 
         <PixButton
-          @isDisabled={{this.areActionButtonsDisabled}}
-          @triggerAction={{@skipChallenge}}
           @variant="secondary"
+          @triggerAction={{this.handleSkipAction}}
+          @isLoading={{this.isSkipActionLoading}}
+          @loadingColor="grey"
+          @isDisabled={{or this.areActionButtonsDisabled this.isValidateActionLoading}}
           class="challenge-actions__action-skip"
           aria-label={{t "pages.challenge.actions.skip-go-to-next"}}
         >

diff --git a/mon-pix/app/components/challenge-actions.js b/mon-pix/app/components/challenge-actions.js
@@ -1,6 +1,11 @@
+import { action } from '@ember/object';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
 export default class ChallengeActions extends Component {
+  @tracked isValidateActionLoading = false;
+  @tracked isSkipActionLoading = false;
+
   get areActionButtonsDisabled() {
     return this.args.disabled || this.hasCurrentOngoingLiveAlert;
   }
@@ -24,4 +29,26 @@ export default class ChallengeActions extends Component {
   get hasCurrentOngoingLiveAlert() {
     return this.args.hasOngoingCompanionLiveAlert || this.args.hasOngoingChallengeLiveAlert;
   }
+
+  @action
+  async handleValidateAction(event) {
+    this.isValidateActionLoading = true;
+
+    try {
+      await this.args.validateAnswer(event);
+    } finally {
+      this.isValidateActionLoading = false;
+    }
+  }
+
+  @action
+  async handleSkipAction() {
+    this.isSkipActionLoading = true;
+
+    try {
+      await this.args.skipChallenge();
+    } finally {
+      this.isSkipActionLoading = false;
+    }
+  }
 }
diff --git a/mon-pix/tests/integration/components/challenge-actions-test.js b/mon-pix/tests/integration/components/challenge-actions-test.js
@@ -1,6 +1,8 @@
 import { render } from '@1024pix/ember-testing-library';
+import { click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
+import sinon from 'sinon';
 
 import setupIntlRenderingTest from '../../helpers/setup-intl-rendering';
 
@@ -12,6 +14,98 @@ module('Integration | Component | challenge actions', function (hooks) {
     assert.dom('.challenge-actions__group').exists();
   });
 
+  module('when the validate answer button is clicked', function () {
+    test('it should add a loading state to the button and disable the skip button', async function (assert) {
+      // given
+      this.set('isValidateButtonEnabled', true);
+      this.set('isSkipButtonEnabled', true);
+      this.set('validateActionStub', () => sinon.promise());
+
+      // when
+      const screen = await render(hbs`<ChallengeActions
+  @validateAnswer={{this.validateActionStub}}
+  @isValidateButtonEnabled={{this.isValidateButtonEnabled}}
+  @isSkipButtonEnabled={{this.isSkipButtonEnabled}}
+/>`);
+
+      const validateButton = screen.getByRole('button', { name: /Je valide/ });
+      await click(validateButton);
+
+      // then
+      assert.dom(validateButton).hasAttribute('disabled');
+      assert.dom(screen.getByRole('button', { name: /Je passe/ })).hasAttribute('disabled');
+    });
+
+    module('on request resolution or rejection', function () {
+      test('it should remove the disable states', async function (assert) {
+        // given
+        this.set('isValidateButtonEnabled', true);
+        this.set('isSkipButtonEnabled', true);
+        this.set('validateActionStub', () => sinon.promise().resolve());
+
+        // when
+        const screen = await render(hbs`<ChallengeActions
+  @validateAnswer={{this.validateActionStub}}
+  @isValidateButtonEnabled={{this.isValidateButtonEnabled}}
+  @isSkipButtonEnabled={{this.isSkipButtonEnabled}}
+/>`);
+
+        const validateButton = screen.getByRole('button', { name: /Je valide/ });
+        await click(validateButton);
+
+        // then
+        assert.dom(validateButton).hasNoAttribute('disabled');
+        assert.dom(screen.getByRole('button', { name: /Je passe/ })).hasNoAttribute('disabled');
+      });
+    });
+  });
+
+  module('when the skip button is clicked', function () {
+    test('it should add a loading state to the button and disable the validate button', async function (assert) {
+      // given
+      this.set('isValidateButtonEnabled', true);
+      this.set('isSkipButtonEnabled', true);
+      this.set('skipChallengeStub', () => sinon.promise());
+
+      // when
+      const screen = await render(hbs`<ChallengeActions
+  @skipChallenge={{this.skipChallengeStub}}
+  @isValidateButtonEnabled={{this.isValidateButtonEnabled}}
+  @isSkipButtonEnabled={{this.isSkipButtonEnabled}}
+/>`);
+
+      const skipButton = screen.getByRole('button', { name: /Je passe/ });
+      await click(skipButton);
+
+      // then
+      assert.dom(skipButton).hasAttribute('disabled');
+      assert.dom(screen.getByRole('button', { name: /Je valide/ })).hasAttribute('disabled');
+    });
+
+    module('on request resolution or rejection', function () {
+      test('it should remove the disable states', async function (assert) {
+        // given
+        this.set('isValidateButtonEnabled', true);
+        this.set('isSkipButtonEnabled', true);
+        this.set('skipChallengeStub', () => sinon.promise().reject());
+
+        // when
+        const screen = await render(hbs`<ChallengeActions
+  @skipChallenge={{this.skipChallengeStub}}
+  @isValidateButtonEnabled={{this.isValidateButtonEnabled}}
+  @isSkipButtonEnabled={{this.isSkipButtonEnabled}}
+/>`);
+
+        const skipButton = screen.getByRole('button', { name: /Je passe/ });
+        await click(skipButton);
+
+        // then
+        assert.dom(skipButton).hasNoAttribute('disabled');
+        assert.dom(screen.getByRole('button', { name: /Je valide/ })).hasNoAttribute('disabled');
+      });
+    });
+  });
+
   module('Challenge has timed out', function () {
     test('should only display "continue" button', async function (assert) {
       // given