From 9643afeab91678b4cbdad9feb99c4edf776b723e Mon Sep 17 00:00:00 2001
From: Matthias FERRAINA <matthias.ferraina@pix.fr>
Date: Fri, 18 Oct 2024 13:33:42 +0200
Subject: [PATCH] feat(mon-pix): create tab-manager service

---
 .../evaluation-results-hero/index.gjs         |  1 +
 .../evaluation-results-tabs/index.gjs         |  5 +++-
 .../assessment/evaluation-results.gjs         |  5 +++-
 mon-pix/app/components/tabs/index.gjs         | 18 +++++++-----
 mon-pix/app/services/tab-manager.js           | 10 +++++++
 .../assessment/evaluation-results-test.js     | 29 +++++++++++++++++++
 .../tests/unit/services/tab-manager-test.js   | 27 +++++++++++++++++
 7 files changed, 85 insertions(+), 10 deletions(-)
 create mode 100644 mon-pix/app/services/tab-manager.js
 create mode 100644 mon-pix/tests/unit/services/tab-manager-test.js

diff --git a/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-hero/index.gjs b/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-hero/index.gjs
index d0011ffe30a..8f92ae3a83c 100644
--- a/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-hero/index.gjs
+++ b/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-hero/index.gjs
@@ -19,6 +19,7 @@ export default class EvaluationResultsHero extends Component {
   @service currentUser;
   @service router;
   @service store;
+  @service tabManager;
 
   @tracked hasGlobalError = false;
   @tracked isImproveButtonLoading = false;
diff --git a/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-tabs/index.gjs b/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-tabs/index.gjs
index e99bdea26a3..7d2c13743b1 100644
--- a/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-tabs/index.gjs
+++ b/mon-pix/app/components/campaigns/assessment/skill-review/evaluation-results-tabs/index.gjs
@@ -1,3 +1,4 @@
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { t } from 'ember-intl';
 
@@ -7,12 +8,14 @@ import Rewards from './rewards';
 import Trainings from './trainings';
 
 export default class EvaluationResultsTabs extends Component {
+  @service tabManager;
+
   get showRewardsTab() {
     return this.args.badges.length > 0;
   }
 
   get initialTabIndex() {
-    return this.showRewardsTab ? 0 : 1;
+    return this.showRewardsTab ? this.tabManager.setActiveTab(0) : this.tabManager.setActiveTab(1);
   }
 
   get showTrainingsTab() {
diff --git a/mon-pix/app/components/routes/campaigns/assessment/evaluation-results.gjs b/mon-pix/app/components/routes/campaigns/assessment/evaluation-results.gjs
index 3db885b30be..b74860623e8 100644
--- a/mon-pix/app/components/routes/campaigns/assessment/evaluation-results.gjs
+++ b/mon-pix/app/components/routes/campaigns/assessment/evaluation-results.gjs
@@ -1,4 +1,5 @@
 import { action } from '@ember/object';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { t } from 'ember-intl';
 
@@ -7,6 +8,8 @@ import EvaluationResultsTabs from '../../../campaigns/assessment/skill-review/ev
 import QuitResults from '../../../campaigns/assessment/skill-review/quit-results';
 
 export default class EvaluationResults extends Component {
+  @service tabManager;
+
   get hasTrainings() {
     return Boolean(this.args.model.trainings.length);
   }
@@ -21,7 +24,7 @@ export default class EvaluationResults extends Component {
       behavior: 'smooth',
     });
 
-    // TODO: display trainings tab
+    this.tabManager.setActiveTab(2);
   }
 
   <template>
diff --git a/mon-pix/app/components/tabs/index.gjs b/mon-pix/app/components/tabs/index.gjs
index 58209cdb397..0e6208b909a 100644
--- a/mon-pix/app/components/tabs/index.gjs
+++ b/mon-pix/app/components/tabs/index.gjs
@@ -1,7 +1,7 @@
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { modifier } from 'ember-modifier';
@@ -11,11 +11,11 @@ import TabPanel from './tab-panel';
 
 export default class TabsContainer extends Component {
   @service elementHelper;
+  @service tabManager;
 
   TabPanel = TabPanel;
   TabItem = TabItem;
 
-  @tracked currentTabIndex = this.args.initialTabIndex || 0;
   @tracked hasScrollableTablist = false;
   @tracked isLeftArrowVisible = false;
   @tracked isRightArrowVisible = false;
@@ -26,6 +26,7 @@ export default class TabsContainer extends Component {
   };
 
   onMount = modifier((element) => {
+    this.args.initialTabIndex && this.tabManager.setActiveTab(this.args.initialTabIndex);
     this.elements.tabs = element.querySelectorAll("[role='tab']");
     this.elements.tablist = element.querySelector("[role='tablist'] > div");
 
@@ -66,7 +67,7 @@ export default class TabsContainer extends Component {
           }
           break;
       }
-
+      this.tabManager.setActiveTab(nextTabIndex);
       const tabToFocus = document.getElementById(this.id + '-' + nextTabIndex);
       tabToFocus.focus();
 
@@ -76,8 +77,9 @@ export default class TabsContainer extends Component {
 
   @action
   handleTabChange(tabIndex) {
-    if (tabIndex !== this.currentTabIndex) {
-      this.currentTabIndex = tabIndex;
+    if (tabIndex !== this.tabManager.activeTab) {
+      this.tabManager.setActiveTab(tabIndex);
+
       this.args.onTabChange && this.args.onTabChange(tabIndex);
     }
   }
@@ -89,7 +91,7 @@ export default class TabsContainer extends Component {
     if (this.hasScrollableTablist) {
       this.handleTablistArrowsVisibility();
 
-      const currentTab = this.elements.tabs[this.currentTabIndex];
+      const currentTab = this.elements.tabs[this.tabManager.activeTab];
       this.scrollToTab(currentTab, 'instant');
     } else {
       this.isLeftArrowVisible = false;
@@ -175,7 +177,7 @@ export default class TabsContainer extends Component {
         {{/if}}
         <div {{on "scroll" this.handleTablistArrowsVisibility}}>
           {{yield
-            (component this.TabItem currentTab=this.currentTabIndex id=this.id onTabClick=this.handleTabChange)
+            (component this.TabItem currentTab=this.tabManager.activeTab id=this.id onTabClick=this.handleTabChange)
             to="tabs"
           }}
         </div>
@@ -188,7 +190,7 @@ export default class TabsContainer extends Component {
         {{/if}}
       </div>
 
-      {{yield (component this.TabPanel currentTab=this.currentTabIndex id=this.id) to="panels"}}
+      {{yield (component this.TabPanel currentTab=this.tabManager.activeTab id=this.id) to="panels"}}
     </div>
   </template>
 }
diff --git a/mon-pix/app/services/tab-manager.js b/mon-pix/app/services/tab-manager.js
new file mode 100644
index 00000000000..3122fb7c750
--- /dev/null
+++ b/mon-pix/app/services/tab-manager.js
@@ -0,0 +1,10 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class TabManagerService extends Service {
+  @tracked activeTab = 0;
+
+  setActiveTab(tab) {
+    this.activeTab = tab;
+  }
+}
diff --git a/mon-pix/tests/integration/components/routes/campaigns/assessment/evaluation-results-test.js b/mon-pix/tests/integration/components/routes/campaigns/assessment/evaluation-results-test.js
index db6203a52d1..3d8514acefd 100644
--- a/mon-pix/tests/integration/components/routes/campaigns/assessment/evaluation-results-test.js
+++ b/mon-pix/tests/integration/components/routes/campaigns/assessment/evaluation-results-test.js
@@ -1,4 +1,5 @@
 import { render } from '@1024pix/ember-testing-library';
+import { click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { t } from 'ember-intl/test-support';
 import { module, test } from 'qunit';
@@ -53,4 +54,32 @@ module('Integration | Components | Routes | Campaigns | Assessment | Evaluation
       assert.dom(screen.getByRole('tablist', { name: t('pages.skill-review.tabs.aria-label') })).exists();
     });
   });
+
+  module('when the campaign is shared and has trainings', function (hooks) {
+    hooks.beforeEach(async function () {
+      // given
+      this.model.trainings = [{ duration: { days: 1, hours: 1, minutes: 1 } }];
+      this.model.campaignParticipationResult.isShared = true;
+      this.model.campaignParticipationResult.competenceResults = [Symbol('competences')];
+    });
+
+    test('it should display the training button', async function (assert) {
+      // when
+      screen = await render(hbs`<Routes::Campaigns::Assessment::EvaluationResults @model={{this.model}} />`);
+
+      // then
+      assert.dom(screen.getByRole('button', { name: /Voir les formations/ })).isVisible();
+    });
+
+    test('when the training button is clicked, it should set trainings tab active', async function (assert) {
+      // when
+      screen = await render(hbs`<Routes::Campaigns::Assessment::EvaluationResults @model={{this.model}} />`);
+
+      // then
+      await click(screen.getByRole('button', { name: /Voir les formations/ }));
+      assert
+        .dom(screen.getByRole('tab', { name: t('pages.skill-review.tabs.trainings.tab-label') }))
+        .hasAttribute('aria-selected', 'true');
+    });
+  });
 });
diff --git a/mon-pix/tests/unit/services/tab-manager-test.js b/mon-pix/tests/unit/services/tab-manager-test.js
new file mode 100644
index 00000000000..1f637627332
--- /dev/null
+++ b/mon-pix/tests/unit/services/tab-manager-test.js
@@ -0,0 +1,27 @@
+import { setupTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Unit | Services | TabManager', function (hooks) {
+  setupTest(hooks);
+
+  module('setActiveTab', function () {
+    test('default tab', function (assert) {
+      // given
+      const tabManagerService = this.owner.lookup('service:tab-manager');
+
+      // then
+      assert.strictEqual(tabManagerService.activeTab, 0);
+    });
+
+    test('should set active tab to the given tab', function (assert) {
+      // given
+      const tabManagerService = this.owner.lookup('service:tab-manager');
+
+      // when
+      tabManagerService.setActiveTab(1);
+
+      // then
+      assert.strictEqual(tabManagerService.activeTab, 1);
+    });
+  });
+});