fix(monpix): fix progress bar display and improve integration test

1024pix · Mar 7, 2025 · 89428b1 · 89428b1
1 parent 4a5fb5c
commit 89428b1
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 28 deletions.
diff --git a/mon-pix/app/components/progress-bar.hbs b/mon-pix/app/components/progress-bar.hbs
@@ -1,4 +1,4 @@
-<div class="progress-bar">
+<div class="assessment-progress-bar">
   {{#if this.showProgressBar}}
     <div class="progress-bar-container">
       {{#if this.showQuestionCounterInsideProgressBar}}

diff --git a/mon-pix/app/styles/components/_progress-bar.scss b/mon-pix/app/styles/components/_progress-bar.scss
@@ -59,6 +59,6 @@
   }
 }
 
-.progress-bar {
+.assessment-progress-bar {
   min-height: var(--pix-spacing-4x);
 }
diff --git a/mon-pix/tests/integration/components/progress-bar-test.js b/mon-pix/tests/integration/components/progress-bar-test.js
@@ -4,37 +4,148 @@ import { module, test } from 'qunit';
 
 import setupIntlRenderingTest from '../../helpers/setup-intl-rendering';
 
-module('Integration | Component | progress-bar', function (hooks) {
+module.only('Integration | Component | progress-bar', function (hooks) {
   setupIntlRenderingTest(hooks);
 
-  test('should render the progress bar current step', async function (assert) {
-    // given
-    const store = this.owner.lookup('service:store');
-
-    const answers = [
-      store.createRecord('answer'),
-      store.createRecord('answer'),
-      store.createRecord('answer'),
-      store.createRecord('answer'),
-      store.createRecord('answer'),
-    ];
-    const mockAssessment = store.createRecord('assessment', {
-      type: 'CAMPAIGN',
-      showProgressBar: true,
-      hasCheckpoints: true,
-      showQuestionCounter: true,
+  module('when should show the progress bar', function () {
+    module('when should show the question counter inside the progress bar', function () {
+      test('should display both the progress bar and the question counter above', async function (assert) {
+        // given
+        const store = this.owner.lookup('service:store');
+
+        const answers = [
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+        ];
+        const mockAssessment = store.createRecord('assessment', {
+          type: 'CAMPAIGN',
+          showProgressBar: true,
+          hasCheckpoints: true,
+          showQuestionCounter: true,
+        });
+        mockAssessment.answers = answers;
+
+        this.set('assessment', mockAssessment);
+        this.set('currentChallengeNumber', 2);
+
+        // when
+        const screen = await render(
+          hbs`<ProgressBar @assessment={{this.assessment}} @currentChallengeNumber={{this.currentChallengeNumber}} />`,
+        );
+
+        // then
+        assert.ok(screen.getByText('Question 3 / 5'));
+        assert.dom('.progress-bar-container').exists();
+      });
+    });
+    module('when should not show the question counter inside the progress bar', function () {
+      test('should display both the progress bar and the question counter above', async function (assert) {
+        // given
+        const store = this.owner.lookup('service:store');
+
+        const answers = [
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+        ];
+        const mockAssessment = store.createRecord('assessment', {
+          type: 'CAMPAIGN',
+          showProgressBar: true,
+          hasCheckpoints: true,
+          showQuestionCounter: false,
+        });
+        mockAssessment.answers = answers;
+
+        this.set('assessment', mockAssessment);
+        this.set('currentChallengeNumber', 2);
+
+        // when
+        const screen = await render(
+          hbs`<ProgressBar @assessment={{this.assessment}} @currentChallengeNumber={{this.currentChallengeNumber}} />`,
+        );
+
+        // then
+        assert.dom(screen.queryByText('Question 3 / 5')).doesNotExist();
+        assert.dom('.progress-bar-container').exists();
+      });
     });
-    mockAssessment.answers = answers;
+  });
+
+  module('when should not show the progress bar', function () {
+    module('when should show the question counter outside', function () {
+      test('should display the question counter but not the progress bar', async function (assert) {
+        // given
+        const store = this.owner.lookup('service:store');
+
+        const answers = [
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+        ];
+        const mockAssessment = store.createRecord('assessment', {
+          type: 'CERTIFICATION',
+          showProgressBar: false,
+          hasCheckpoints: false,
+          showQuestionCounter: true,
+          certificationCourse: store.createRecord('certification-course', {
+            nbChallenges: 15,
+          }),
+        });
+        mockAssessment.answers = answers;
 
-    this.set('assessment', mockAssessment);
-    this.set('currentChallengeNumber', 2);
+        this.set('assessment', mockAssessment);
+        this.set('currentChallengeNumber', 2);
 
-    // when
-    const screen = await render(
-      hbs`<ProgressBar @assessment={{this.assessment}} @currentChallengeNumber={{this.currentChallengeNumber}} />`,
-    );
+        // when
+        const screen = await render(
+          hbs`<ProgressBar @assessment={{this.assessment}} @currentChallengeNumber={{this.currentChallengeNumber}} />`,
+        );
+
+        // then
+        assert.dom(screen.getByText('Question')).exists();
+        assert.dom(screen.getByText('3 / 15')).exists();
+        assert.dom('.progress-bar-container').doesNotExist();
+      });
+    });
+    module('when should not show the question counter outside', function () {
+      test('should neither display the question counter nor progress bar', async function (assert) {
+        // given
+        const store = this.owner.lookup('service:store');
 
-    // then
-    assert.ok(screen.getByText('Question 3 / 5'));
+        const answers = [
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+          store.createRecord('answer'),
+        ];
+        const mockAssessment = store.createRecord('assessment', {
+          type: 'CAMPAIGN',
+          showProgressBar: false,
+          hasCheckpoints: false,
+          showQuestionCounter: false,
+        });
+        mockAssessment.answers = answers;
+
+        this.set('assessment', mockAssessment);
+        this.set('currentChallengeNumber', 2);
+
+        // when
+        const screen = await render(
+          hbs`<ProgressBar @assessment={{this.assessment}} @currentChallengeNumber={{this.currentChallengeNumber}} />`,
+        );
+
+        // then
+        assert.dom(screen.queryByText('Question 3 / 15')).doesNotExist();
+        assert.dom('.progress-bar-container').doesNotExist();
+      });
+    });
   });
 });