[FEATURE]: Afficher l'onglet Formations au clic sur "Voir les formati…

…ons" de la bannière (PIX-14803).

 #10364

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;

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() {

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>

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>
 }

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;
+  }
+}

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');
+    });
+  });
 });

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);
+    });
+  });
+});